SwipeView

 API Reference: UI.SwipeView​
Basics
SwipeView is a view that holds a page list inside so that users can traverse those pages via swiping over.
TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.
Performance on Android
onLoad method of a SwipeView's page is triggered when swipe occurs on Android. On iOS, onLoad method of all pages are triggered at the beginning.
TypeScript
sample1.ts
sample2.ts
sample3.ts
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Label = require('sf-core/ui/label');
import SwipeView = require('sf-core/ui/swipeview');
import Sample1 from "pages/sample1";
import Sample2 from "pages/sample2";
import Sample3 from "pages/sample3";
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    swipeView: SwipeView;
    labelState: Label;
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
​
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    this.swipeView = new SwipeView({
        page: this,
        pages: [Sample1, Sample2, Sample3],
        onStateChanged: (state: any): void => {
            if (SwipeView.State.IDLE === state) {
                this.labelState.text = "State: IDLE";
            } else {
                this.labelState.text = "State: DRAGGING";
            }
        }
    });
​
    this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {
        width: 300,
        maxHeight: 300,
        marginTop: 50
    });
​
    this.labelState = new Label({
        text: "Waiting for State"
    });
    this.layout.addChild(this.labelState, "labelState", ".sf-label", {
        width: 200, height: 65
    })
​
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
                flexDirection: "COLUMN"
            }
        }
    });
} 
​
sample1.ts
import PgMessagesDesign from 'generated/pages/pgMessages';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PgMessagesDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar, myMenu } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
    
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            backgroundColor: "#FF0000"
        }
    })
}
​
sample2.ts
import PgMessagesDesign from 'generated/pages/pgMessages';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PgMessagesDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar, myMenu } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
    
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            backgroundColor: "#00FF00"
        }
    })
}
​
sample3.ts
import PgMessagesDesign from 'generated/pages/pgMessages';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PgMessagesDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar, myMenu } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
    
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            backgroundColor: "#0000FF"
        }
    })
}
​
JavaScript
JavaScript
const extend = require("js-base/core/extend");
const Page = require("sf-core/ui/page");
const FlexLayout = require('sf-core/ui/flexlayout');
const SwipeView = require('sf-core/ui/swipeview');
const Label = require('sf-core/ui/label');
const Color = require('sf-core/ui/color');
​
var Page1 = extend(Page)(
    function(_super, params) {
        _super(this, params);
        this.onLoad = function() {
            this.layout.backgroundColor = Color.RED; 
        }.bind(this);
    }
);
var Page2 = extend(Page)(
    function(_super, params) {
        _super(this, params);
        this.onLoad = function() {
            this.layout.backgroundColor = Color.YELLOW; 
        }.bind(this);
    }
);
var Page3 = extend(Page)(
    function(_super, params) {
        _super(this, params);
        this.onLoad = function() {
            this.layout.backgroundColor = Color.BLUE; 
        }.bind(this);
    }
);
var Page4 = extend(Page)(
    function(_super, params) {
        _super(this, params);
        this.onLoad = function() {
            this.layout.backgroundColor = Color.GREEN;
        }.bind(this);
    }
);
​
var SwipeViewPage = extend(Page)(
    function(_super) {
        var self = this;
        _super(this);
        
        this.onLoad = function() {
            Application.statusBar.visible = false;
            self.headerBar.visible = false;
            self.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
            self.layout.justifyContent = FlexLayout.JustifyContent.FLEX_START;
            self.layout.alignItems = FlexLayout.AlignItems.CENTER;
​
            var swipeView = new SwipeView({
                page: self,
                width:300, maxHeight:300, marginTop:50,
                pages: [Page1, Page2, Page3, Page4],
                onStateChanged: function(state) {
                    if (SwipeView.State.IDLE === state) {
                        labelState.text = "State: IDLE";
                    } else {
                        labelState.text = "State: DRAGGING";
                    }
                }
            });
            self.layout.addChild(swipeView);
            
            var labelState = new Label({
                width:200, height:65,
                text: "Waiting for State",
            });
            self.layout.addChild(labelState);
            self.layout.applyLayout();
        };
    }
);
​
module.exports = SwipeViewPage;
​​​
Swipe Speed
Gesture actions have performed differently in the examples. This is why swiping at left is slow.
Swipe Indicator
It is a very common practice to use page indicators with SwipeView. Indicators might display following feats.
Showing active page
Press to change active page
Animate during the swipe
Should not be enabled during the swipe
Consideration
Changing of the pages can be triggered from two different sources:
User page swipe
Indicator press
Each of them affecting each other. In order to prevent recursively circular calls, keeping track of the action is needed. To keep the track, in this example a property to the swipeView is added: indicatorScrollTriggered
Showing active page
​SwipeView.onPageScrolled event can be used for indicate which page is active.
With Sliding indicator
In this case, as the swipe action is taken by the user, the indicator bar will slide accordingly following the finger movement.
Showing Active Page
Showing Active Page
swipeView.onPageScrolled = function onPageScrolledHandler(index, offset){
  if(swipeView.indicatorScrollTriggered)
        return; //prevent circular call
  var left = ((swipeView.width/PAGE_COUNT) * index) + offset/PAGE_COUNT;
  if(indicator.left != left){
    indicator.left = left;
    page.layout.applyLayout();
  }
};
Indicator dot
In this case, dots are used to indicate the active page. Dot style will be changed as the page is changed.
Dots Indicator
Dots Indicator
const pushClassNames = require("@smartface/contx/lib/styling/action/pushClassNames");
const removeClassName = require("@smartface/contx/lib/styling/action/removeClassName");
​
swipeView.onPageScrolled = function onPageScrolledHandler(index, offset){
  indicators.forEach(indicator, indicatorIndex) => {
    if(indicatorIndex === index)
      indicator.dispatch(pushClassNames(ACTIVE_CLASS_NAME));
    else
      indicator.dispatch(removeClassName(ACTIVE_CLASS_NAME));
  });
};
Changing the active swipe page
The user can press the indicators or buttons to set the "active" of the swipe page. In that case, if a sliding indicator is used, animation of the indicator has to be taken care of with checking the circular check.
Setting the Active Page
Setting the Active Page
const Animator = require('sf-core/ui/animator');
const System = require('sf-core/device/system');
​
swipeHeaderButton1.onPress = setActivePage.bind(page, 0);
swipeHeaderButton2.onPress = setActivePage.bind(page, 1);
swipeHeaderButton3.onPress = setActivePage.bind(page, 2);
​
function setActivePage(index) {
  var left = ((swipeView.width/PAGE_COUNT) * index)/PAGE_COUNT;
  var animationRootView = System.OS === "iOS" ? page.layout : indicator.getParent;
  if(indicator.left != left){
    indicatorScrollTriggered = true;
    Animator.animate(animationRootView, 500, ()=> {
        indicator.left = left;
    }).complete(()=>{indicatorScrollTriggered = false;});
  }
}
Touch Management during changes
Touches can be managed via SwipeView. onStateChanged event
Touch Management
Touch Management
swipeView.onStateChanged = function(state) {
  if (SwipeView.State.IDLE === state) {
    swipeHeaderButton1.touchEnabled = swipeHeaderButton2.touchEnabled = swipeHeaderButton3.touchEnabled = true;
  } else {
    swipeHeaderButton1.touchEnabled = swipeHeaderButton2.touchEnabled = swipeHeaderButton3.touchEnabled = false;
  }
};
Data Binding
SwipeView is using page classes to display the content. In that sense, if the pages are similar, the developer does not want to create duplicate pages. For that approach using extended pages is recommended.
TypeScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Label = require('sf-core/ui/label');
import SwipeView = require('sf-core/ui/swipeview');
import PgMessagesDesign from 'generated/pages/pgMessages';
​
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    swipeView: SwipeView;
    labelState: Label;
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
​
    sampleFactory(pageIndex: number) {
        return class Sample extends PgMessagesDesign {
            pageIndex: number = pageIndex;
            constructor() {
                super({
                    onLoad: () => {
                        console.log("pageIndex" + pageIndex);
                    }
                });
            }
        }
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    this.swipeView = new SwipeView({
        page: this,
        pages: [this.sampleFactory(0), this.sampleFactory(2), this.sampleFactory(3)],
        onStateChanged: (state: any): void => {
            if (SwipeView.State.IDLE === state) {
                this.labelState.text = "State: IDLE";
            } else {
                this.labelState.text = "State: DRAGGING";
            }
        }
    });
​
    this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {
        width: 300,
        maxHeight: 300,
        marginTop: 50
    });
​
    this.labelState = new Label({
        text: "Waiting for State"
    });
    this.layout.addChild(this.labelState, "labelState", ".sf-label", {
        width: 200, height: 65
    })
​
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
                flexDirection: "COLUMN"
            }
        }
    });
} 
​
Extending Swipe Page(JavaScript)
Swipe Page Template(JavaScript)
Extending Swipe Page(JavaScript)
const extend = require("js-base/core/extend");
const SwipeView = require('sf-core/ui/swipeview');
const SwipePageTemplate = require("swipePageTemplate"); //This page might be designed via UI editor
​
function SwipePageFactory(index) {
  const SwipePage = extend(SwipePageTemplate)(
    function(_super, params) {
      _super(this, params);
      this.pageIndex = index;
    }
  );
  return SwipePage;
}
​
function onLoad(superOnLoad) {
  superOnLoad();
  const page = this;
​
  var swipeView = new SwipeView({
    page,
    maxHeight: 300,
    marginTop: 10,
    pages: [SwipePageFactory(0), SwipePageFactory(1),
           SwipePageFactory(2), SwipePageFactory(3)]
  });
  page.layout.addChild(swipeView);
}
Swipe Page Template(JavaScript)
const PgSwipePageTemplateDesign = require('ui/ui_pgSwipePageTemplateDesign');
const extend = require("js-base/core/extend");
​
const PgSwipe = extend(PgSwipeDesign)(
  function(_super) {
    _super(this);
    this.onShow = onShow.bind(this, this.onShow.bind(this));
    this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
  });
​
function onShow(superOnShow) {
  superOnShow();
  //This event is fired evertime page is shown, when page swipe index changes
  //Do dynamic data binding here
  //Android onShow is triggered after change animation is finished, iOS is fired before. For that reason the content on swipePage might updated later in Android
  bindDataToPage(this, this.pageIndex); //pageIndex is given when this page is extended
}
​
function onLoad(superOnLoad) {
  superOnLoad();
  //This event is fired once when page is loaded to swipeView
  //Do static data binding here
  bindDataToPage(this, this.pageIndex); //pageIndex is given when this page is extended
}
Pushing data to the swipe page from outside
There is no interaction or relation between the swipe page instances and the swipeView. If a data updates on the main page, swipe pages can be via several ways
Update via shared state management
A separate state module JS code can be created. We recommend using redux for state management. Both the main page and the swipe pages are going to subscribe to same state manager. This is helpful when the main page is a singleton and no other routes are created for it.
Main Page(TypeScript)
SwipePage 1(TypeScript)
SwipePage 2 (TypeScript)
Main Page(TypeScript)
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Button = require('sf-core/ui/button');
import SwipeView = require('sf-core/ui/swipeview');
import SwipePage1 from "swipePage1";
import SwipePage2 from "swipePage2";
import SwipePage3 from "swipePage3";
import stateStore = require("stateStore");
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    swipeView: SwipeView;
    labelState: Label;
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    this.swipeView = new SwipeView({
        page: this,
        pages: [SwipePage1, SwipePage2, SwipePage3]
    });
​
    this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {
        width: 300,
        maxHeight: 300,
        marginTop: 50
    });
​
    stateStore.subscribe(function (action) {
        let state = stateStore.getState();
        // Do logic
    });
    
    this.btn = new Button({
        text: "Save State",
        onPress: () => {
            stateStore.dispatch({
                type: "Update From Main",
                action: "logic"
            });
        }
    });
    this.layout.addChild(this.btn, "btn", ".sf-button", {
        width: 200, height: 65
    })
​
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
                flexDirection: "COLUMN"
            }
        }
    });
} 
​
SwipePage 1(TypeScript)
import PgMessagesDesign from 'generated/pages/pgMessages';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import stateStore = require("stateStore");
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample1 extends PgMessagesDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar, myMenu } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    stateStore.subscribe(function (action) {
        let state = stateStore.getState();
        // Do logic
    });
​
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            backgroundColor: "#FF0000"
        }
    });
}
​
SwipePage 2 (TypeScript)
import PgMessagesDesign from 'generated/pages/pgMessages';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import stateStore = require("stateStore");
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample1 extends PgMessagesDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar, myMenu } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    stateStore.subscribe(function (action) {
        let state = stateStore.getState();
        // Do logic
    });
    
    this.btn = new Button({
        text: "Save State",
        onPress: () => {
            stateStore.dispatch({
                type: "Update From Main",
                action: "logic"
            });
        }
    });
    this.layout.addChild(this.btn, "btn", ".sf-button", {
        width: 200, height: 65
    })
​
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            backgroundColor: "#00FF00"
        }
    });
}
​
Main Page
SwipePage 1
SwipePage 2
Main Page
const PgMainPageDesign = require('ui/ui_pgMainPageDesign');
const stateStore = require("stateStore");
const extend = require("js-base/core/extend");
const SwipeView = require('sf-core/ui/swipeview');
const SwipePage1 = require("swipePage1");
const SwipePage2 = require("swipePage2");
const SwipePage3 = require("swipePage3");
​
const PgMain = extend(PgMainPageDesign)(
  function(_super) {
    _super(this);
    this.onShow = onShow.bind(this, this.onShow.bind(this));
    this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
  });
​
function onShow(superOnShow) {
  superOnShow();
}
​
function onLoad(superOnLoad) {
  superOnLoad();
    const page = this;
  
  var swipeView = new SwipeView({
    page,
    pages: [SwipePage1, SwipePage2, SwipePage3]
  });
  page.layout.addChild(swipeView);
  
  stateStore.subscribe(function(action) {
    var state = stateStore.getState();
    // Do logic
  });
  
  page.btn.onPress = () => {
    state.dispatch({
      type: "Update From Main",
      action: "logic"
  };
}
SwipePage 1
const extend = require("js-base/core/extend");
const Page = require("sf-core/ui/page");
const Color = require('sf-core/ui/color');
const stateStore = require("stateStore");
​
const SwipePage1 = extend(Page)(
    function(_super, params) {
        _super(this, params);
        this.onLoad = function() {
            this.layout.backgroundColor = Color.RED; 
            stateStore.subscribe(function(action) {
              var state = stateStore.getState();
              // Do logic
            });
        }.bind(this);
    }
);
​
module.exports = exports = SwipePage1;
SwipePage 2
const extend = require("js-base/core/extend");
const Page = require("sf-core/ui/page");
const Color = require('sf-core/ui/color');
const stateStore = require("stateStore");
const Button = require('sf-core/ui/button');
​
const SwipePage2 = extend(Page)(
    function(_super, params) {
        _super(this, params);
        this.onLoad = function() {
            this.layout.backgroundColor = Color.YELLOW; 
            stateStore.subscribe(function(action) {
              var state = stateStore.getState();
              // Do logic
            });
          this.layout.add(new Button({
            text: "UpdateState",
            onPress: ()=> {
              state.dispatch({
                  type: "Update From Main",
                  action: "logic"
              };
                        }
          });
        }.bind(this);
    }
);
​
module.exports = exports = SwipePage2;
Pass the main page instance
This is quite similar to passing the index to the swipe page. In this case, in addition to the index, main page instance is passed too.
TypeScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Label = require('sf-core/ui/label');
import SwipeView = require('sf-core/ui/swipeview');
import PgMessagesDesign from 'generated/pages/pgMessages';
import Page = require("sf-core/ui/page");
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    swipeView: SwipeView;
    labelState: Label;
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
​
    sampleFactory(pageIndex: number, pageInstance: Page) {
        return class Sample extends PgMessagesDesign {
            pageIndex: number = pageIndex;
            pageInstance: Page = pageInstance;
            constructor() {
                super({
                    onLoad: () => {
                        console.log("pageIndex" + pageIndex);
                    }
                });
            }
        }
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = this;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    this.swipeView = new SwipeView({
        page: this,
        pages: [this.sampleFactory(0), this.sampleFactory(2), this.sampleFactory(3)],
        onStateChanged: (state: any): void => {
            if (SwipeView.State.IDLE === state) {
                this.labelState.text = "State: IDLE";
            } else {
                this.labelState.text = "State: DRAGGING";
            }
        }
    });
​
    this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {
        width: 300,
        maxHeight: 300,
        marginTop: 50
    });
​
    this.labelState = new Label({
        text: "Waiting for State"
    });
    this.layout.addChild(this.labelState, "labelState", ".sf-label", {
        width: 200, height: 65
    })
​
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
                flexDirection: "COLUMN"
            }
        }
    });
} 
​
Main Page
Swipe  Page Template
Main Page
const PgMainPageDesign = require('ui/ui_pgMainPageDesign');
const extend = require("js-base/core/extend");
const SwipeView = require('sf-core/ui/swipeview');
const SwipePageTemplate = require("swipePageTemplate"); //This page might be designed via UI editor
​
function SwipePageFactory(index) {
  const mainPage = this;
  const SwipePage = extend(SwipePageTemplate)(
    function(_super, params) {
      _super(this, params);
      this.pageIndex = index;
      this.mainPage = mainPage;
    }
  );
  return SwipePage;
}
​
const PgMain = extend(PgMainPageDesign)(
  function(_super) {
    _super(this);
    this.onShow = onShow.bind(this, this.onShow.bind(this));
    this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
    this.swipePages = []; //Swipe Pages will register them selves to this property. Later they can be accessed using this.
  });
​
function onShow(superOnShow) {
  superOnShow();
}
​
function onLoad(superOnLoad) {
  superOnLoad();
  const page = this;
  const modifiedSwipePageFactory = SwipePageFactory.bind(this);
    
  var swipeView = new SwipeView({
    page,
    maxHeight: 300,
    marginTop: 10,
    pages: [modifiedSwipePageFactory(0), modifiedSwipePageFactory(1),
           modifiedSwipePageFactory(2), modifiedSwipePageFactory(3)]
  });
  page.layout.addChild(swipeView);
}
Swipe  Page Template
const PgSwipePageTemplateDesign = require('ui/ui_pgSwipePageTemplateDesign');
const extend = require("js-base/core/extend");
​
const PgSwipe = extend(PgSwipeDesign)(
  function(_super) {
    _super(this);
    this.onShow = onShow.bind(this, this.onShow.bind(this));
    this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
  });
​
function onShow(superOnShow) {
  superOnShow();
}
​
function onLoad(superOnLoad) {
  superOnLoad();
  this.mainPage.swipePages[this.pageIndex] = this; //Registers it self to the Main Page
  // main page can be accessed using this.mainPage
  // other swipe pages can be accessed using this.mainPage.swipePages[otherIndex]
}
Performance
SwipeView is a heavy component. It is performing low (especially on Android) when the number swipe pages are high. Try to limit the number of pages below 20, bellow 15 is better.
In order to change the number of pages, assignment of the pages property of the swipeView is required. This is causing recreating all of the swipe pages (again).
StatusBar
Switch
Last updated 7 months ago