Tabris: Proper way to implement scrolling component with Swipe

Question

I try to use scrolling composite (vertical scroll) in combination with paging navigation using gestures ( swiping ).

My application works fine on Android emulators (tried Android 4.0.3, 4.1.2, 4.3 ) but I experience problems with my mobile phone ZTE Blade III, Androind OS 4.0.4. Swiping is not working regardless of orientation HTC Desire with Android 4.4 has problems with swiping in landscape orientation

Am I doing something wrong.

I tested with SwipeDemo entry point (from tab).

  private void createSwipeWidget( Composite parent ) {
    final ScrollingComposite scrollableParent = new ScrollingComposite( parent, SWT.V_SCROLL );
    scrollableParent.setLayout( GridLayoutFactory.fillDefaults().create() );
    scrollableParent.setLayoutData( GridDataFactory.fillDefaults()
      .grab( true, true )
      .align( SWT.FILL, SWT.FILL )
      .create() );

    Swipe result = new Swipe( scrollableParent, new DictionarySwipeItemProvider() );
    GridDataFactory.fillDefaults()
      .grab( true, true )
      .align( SWT.FILL, SWT.FILL )
      .applyTo( result.getControl() );
    result.show( 0 );
  }

Also in com.eclipsesource.tabris.demos.swipe.DictionarySwipeItem i gave hint .hint( SWT.DEFAULT, 500 ) in createTitleLabel method so that vertical scroll is enabled.

Thanks in advance

Edited: Adding completely new example/snippet

    import org.eclipse.jface.layout.GridDataFactory;
    import org.eclipse.jface.layout.GridLayoutFactory;
    import org.eclipse.rap.rwt.application.EntryPoint;
    import org.eclipse.rap.rwt.application.EntryPointFactory;
    import org.eclipse.swt.SWT;
    import org.eclipse.swt.widgets.Composite;
    import org.eclipse.swt.widgets.Control;
    import org.eclipse.swt.widgets.Label;

    import com.eclipsesource.tabris.ui.AbstractPage;
    import com.eclipsesource.tabris.ui.PageConfiguration;
    import com.eclipsesource.tabris.ui.PageData;
    import com.eclipsesource.tabris.ui.TabrisUIEntryPoint;
    import com.eclipsesource.tabris.ui.UIConfiguration;
    import com.eclipsesource.tabris.widgets.ScrollingComposite;
    import com.eclipsesource.tabris.widgets.swipe.Swipe;
    import com.eclipsesource.tabris.widgets.swipe.SwipeContext;
    import com.eclipsesource.tabris.widgets.swipe.SwipeItem;
    import com.eclipsesource.tabris.widgets.swipe.SwipeItemProvider;

    public class SwipeScrollSnippet implements EntryPointFactory {

      @Override
      public EntryPoint create() {
        return new TabrisUIEntryPoint( createConfiguration() );
      }

      private UIConfiguration createConfiguration() {
        UIConfiguration configuration = new UIConfiguration();
        /*
         * Page with Vertical scroll and swipe component. Swiping does not work at
         * all.
         */
        PageConfiguration page1 = new PageConfiguration( SwipePageWithScroll.class.getName(),
                                                         SwipePageWithScroll.class );
        page1.setTitle( "Swipe page" );
        page1.setTopLevel( true );
        configuration.addPageConfiguration( page1 );
        return configuration;
      }
      /**
       * Page with scroll and swipe components
       */
      public static class SwipePageWithScroll extends AbstractPage {

        /**
         * Creating content of a page with scrolling component and swipe object
         */
        public void createContent( final Composite parent, final PageData data ) {
          final ScrollingComposite scrollableParent = createScrollParent( parent );
          createSwipe( scrollableParent );
        }

        protected ScrollingComposite createScrollParent( final Composite parent ) {
          parent.setLayout( GridLayoutFactory.fillDefaults().numColumns( 1 ).spacing( 0, 0 ).create() );
          final ScrollingComposite scrollableParent = new ScrollingComposite( parent, SWT.V_SCROLL );
          scrollableParent.setLayoutData( GridDataFactory.fillDefaults().grab( true, true ).create() );
          scrollableParent.setLayout( GridLayoutFactory.fillDefaults().create() );
          scrollableParent.setBackground( getUI().getDisplay().getSystemColor( SWT.COLOR_GRAY ) );
          return scrollableParent;
        }

        public Swipe createSwipe( Composite oParent ) {
          Swipe result = new Swipe( oParent, new SimpleSwipeItemProvider() );
          result.getControl().setBackground( getUI().getDisplay().getSystemColor( SWT.COLOR_YELLOW ) );
          GridDataFactory.fillDefaults()
            .grab( true, true )
            .align( SWT.FILL, SWT.FILL )
            .applyTo( result.getControl() );
          return result;
        }
      }
      /**
       * 
       */
      public static class SimpleSwipeItemProvider implements SwipeItemProvider {

        @Override
        public SwipeItem getItem( int oIndex ) {
          return new SimpleSwipeItem( oIndex );
        }

        @Override
        public int getItemCount() {
          return 3;
        }
      }
      /**
       * 
       */
      public static class SimpleSwipeItem implements SwipeItem {

        private int index;

        public SimpleSwipeItem( int oIndex ) {
          super();
          this.index = oIndex;
        }

        @Override
        public Control load( Composite oParent ) {
          Composite composite = new Composite( oParent, SWT.BORDER );
          composite.setLayout( GridLayoutFactory.fillDefaults().create() );
          Label label = new Label( composite, SWT.None );
          label.setText( "Swipe item " + index );
          label.setLayoutData( GridDataFactory.swtDefaults()
            .grab( true, true )
            .hint( SWT.DEFAULT, 500 )
            .align( SWT.CENTER, SWT.CENTER )
            .create() );
          Label bottomLabel = new Label( composite, SWT.None );
          bottomLabel.setText( "Try to swipe" );
          bottomLabel.setLayoutData( GridDataFactory.swtDefaults()
            .grab( true, true )
            .align( SWT.CENTER, SWT.CENTER )
            .create() );
          return composite;
        }

        @Override
        public boolean isPreloadable() {
          return false;
        }

        @Override
        public void deactivate( SwipeContext oContext ) {
        }

        @Override
        public void activate( SwipeContext oContext ) {
        }
      }
    }

That is an interesting observation. Could you provide a sample snippet? — Moritz, Feb 04 '14 at 09:11
I am running Tabris 1.2.1 version. I have cloned Tabris demo repository and working on commit named 'Prepare 1.2.1 release' (from 2013-12-23 09:49:46). I have changed 2 classes 1. com.eclipsesource.tabris.demos.entrypoints.SwipeDemo -> above mentioned methods was changed 2. com.eclipsesource.tabris.demos.swipe.DictionarySwipeItem -> height hint was given to title label so that vertical scroll is shown (scroll content size larger than scroll composite size). — mferlan, Feb 07 '14 at 12:42
We have a know issue regarding the ScrolledComposite on Android. On some devices the scrolling stops working when scrolling down in landscape and then rotating to portrait. The scrolled composites height is still stuck in landscape mode, showing free space at the bottom (in portrait mode). This is not directly related to the Swipe widget though. Does that sound familiar? — Moritz, Feb 18 '14 at 11:06
Nope, I haven't experienced this bug on my device. I just tried this with your scroll demo and everything is fine. My problem is that in the above example swiping is hard ( or impossible ) to accomplish. — mferlan, Feb 21 '14 at 08:11

M.Westphal · Answer 1 · 2014-02-11T13:07:50.670

For me it does work with emulators (tested Android SDK and Genymotion) too but with real devices I remark problems as well: With Motorola Razr i ist does not work, with HTC Desire and Cynogenmod based on Android 4.4.2 it only works in portrait orientation but not in landscape. On Asus fonepad both orientations work fine.

An example:

clone repository https://github.com/eclipsesource/tabris-demos.git
use 1.2.1 Tabris target platform
apply changes from below
test swipe demo (entry point /swipe)

================================================================================== SwipeDemo.java

import com.eclipsesource.tabris.widgets.ScrollingComposite;

private void createSwipeWidget( Composite parent ) {
    final ScrollingComposite scrollableParent = new ScrollingComposite( parent, SWT.V_SCROLL );
    scrollableParent.setLayout( GridLayoutFactory.fillDefaults().create() );
    scrollableParent.setLayoutData( GridDataFactory.fillDefaults()
      .grab( true, true )
      .align( SWT.FILL, SWT.FILL )
      .create() );
    Swipe result = new Swipe( scrollableParent, new DictionarySwipeItemProvider() );
    GridDataFactory.fillDefaults()
      .grab( true, true )
      .align( SWT.FILL, SWT.FILL )
      .applyTo( result.getControl() );
    result.show( 0 );
  }

================================================================================== DictionarySwipeItem.java

private void createTitleLabel( Composite parent ) {
    Label titleLabel = new Label( parent, SWT.WRAP );
    GridDataFactory.fillDefaults()
      .align( SWT.CENTER, SWT.TOP )
      .grab( true, true )
      .hint( SWT.DEFAULT, 500 )
      .applyTo( titleLabel );
    titleLabel.setForeground( parent.getDisplay().getSystemColor( SWT.COLOR_DARK_GRAY ) );
    titleLabel.setText( "Lesson " + ( index + 1 ) );
    titleLabel.setFont( new Font( parent.getDisplay(), new FontData( "Arial", 30, SWT.BOLD ) ) );
  }

Sorry for cross comment posting. We have a know issue regarding the ScrolledComposite on Android. On some devices the scrolling stops working when scrolling down in landscape and then rotating to portrait. The scrolled composites height is still stuck in landscape mode, showing free space at the bottom (in portrait mode). This is not directly related to the Swipe widget though. Does that sound familiar? — Moritz, Feb 18 '14 at 11:08
This seems to be another problem. In the meantime I tried some things on iOS as well. Because there is going backward functionality by swiping I will probably have to try another approach for my application in the end. — M.Westphal, Mar 24 '14 at 13:47

Tabris: Proper way to implement scrolling component with Swipe

1 Answers1