Search
Link Search Menu Expand Document
Kony Quantum is now HCL Volt MX. See Revised Terminology. Current Quantum users, see the important note about API naming.
Release:

You are here: Creating a FlexScrollContainer Using a Constructor: voltmx.ui.FlexScrollContainer

FlexScrollContainer Widget

A FlexScrollContainer is a scrollable container which allows you to scroll the content in horizontal or vertical direction. It can contain any number of widgets within it.

You can add the FlexScrollContainer widget only to the FlexForm. This widget will be available in the Widgets palette when the FlexForm is selected in the app canvas.

Here are some scenarios where you can use the FlexScrollContainer widget:

  • You can display a lot of information in a single screen. You need not scroll the entire page.

  • Scroll bar can be enabled to the container widget area, and you need not scroll the entire page.

  • You can enable paging, and swipe to see a new screen in the place of old screen in the container widget.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the FlexScrollContainer widget see the FlexScrollContainer topic in the Volt MX Iris User Guide.

The FlexScrollContainer widget capabilities can be broadly categorized into the following:

Layout

Properties Description
anchorPoint Specifies the anchor point of the widget bounds rectangle using the widget’s coordinate space.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
clipBounds Child widgets will be clipped to the bounds of the FlexScrollContainer if this property is set to true.
contentSize Specifies the width and height of the container to accommodate all the widgets placed in it.
contentSizeMeasured Specifies the width and height of the container measured in dp.
height Determines the height of the widget and measured along the y-axis.
layoutType Specifies if the arrangement of the widgets either in free form or horizontal or vertical direction.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.

 

Methods Description
forceLayout When this method is called, underlying OS layout cycle is forced to layout the widgets of the FlexContainer.

 

Animations

Methods Description
animate Applies an animation to the widget.

 

Properties Description
transform Contains an animation transformation that can be used to animate the widget.
widgetSwipeMove Used to enable and configure the left or right swipe actions for a widget.

 

Scrolling Functionalities

Properties Description
allowHorizontalBounce Specifies whether the scroll bounce is enabled or disabled in the horizontal direction.
allowVerticalBounce Specifies whether the scroll bounce is enabled or disabled in the vertical direction.
animateIcons Enables the pull to refresh and push to refresh icons to rotate by 180 degrees.
bounces Specifies whether the scroll bounce is enabled or disabled.
bouncesZoom Specifies whether the scroll view animates the content scaling when the scaling exceeds the maximum or minimum limits.
decelerating Returns whether the content is moving in the scroll view after the user lifted their finger.
enableGpuScrolling Enables you to specify how most of the property updates and events for the FlexScrollContainer are handled.
enableOnScrollWidgetPositionForSubwidgets This property enables the FlexScrollContainer widget to iterate into all the widgets that make use of the onScrollWidgetPosition event.
enableScrolling Specifies whether the scrolling is enabled on the container or not.
horizontalScrollIndicator Specifies whether the scroll indicator to be shown or not in the horizontal direction.
overScrollX Used to implement over scrolling behavior while scrolling horizontally.
overScrollY Used to implement over scrolling behavior while scrolling vertically.
pullToRefreshI18NKey Specifies the i18N key for the “Pull to refresh” text when the FlexScrollContainer is pulled from the top.
pullToRefreshIcon Specifies the icon to be displayed when the FlexScrollContainer is pulled from the top.
pullToRefreshSkin Specifies the skin to be applied to the text that is displayed when the FlexScrollContainer is pulled from the top.
pushToRefreshI18NKey Specifies the i18N key for the “Push to refresh” text when the FlexScrollContainer is pushed from the bottom.
pushToRefreshIcon Specifies the icon to be displayed when the FlexScrollContainer is pushed from the bottom.
pushToRefreshSkin Specifies the skin to be applied to the text that is displayed when the FlexScrollContainer is pushed from the bottom.
releaseToPullRefreshI18NKey Specifies the i18N key for the “Release to refresh” text, when the FlexScrollContainer is pulled from the top.
releaseToPushRefreshI18NKey Specifies the i18N key for the “Release to refresh” text, when the FlexScrollContainer is pushed from the bottom.
scrollDirection Specifies the direction in which the widget should scroll.
scrollsToTop Enables you to scroll the FlexScrollCotainer to top on tapping a device’s status bar.
tracking Specifies whether the user has touched the content to initiate scrolling.
verticalScrollIndicator Specifies whether the scroll indicator must be shown in the vertical direction.

 

Methods Description
onScrollEnd An event callback is invoked by the platform when the scrolling is ended.
scrollToEnd This method gives you the control to scroll to the end of the form.
scrollToWidget This method gives you the control to scroll the FlexForm up to the position of selected widget.

 

Events Description
onDecelerationStarted An event callback is invoked by the platform when the user stops scrolling but the content still moves before the content actually stops.
onScrollEnd An event callback is invoked by the platform when the scrolling is ended.
onScrolling An event callback is invoked by the platform when the scrolling is in progress.
onScrollStart An event callback is invoked by the platform when the user starts scrolling the content.
onScrollTouchReleased An event callback is invoked by the platform when the user touch is released from the touch surface.
onScrollWidgetPosition This event callback is invoked by the platform when the widget location position gets changed on scrolling.
scrollingEvents This event callback is invoked while scrolling the FlexScrollContainer horizontally or vertically.

 

Data Management

Methods Description
add Used to add widgets to the Form.
addAt Used to add widgets to the Form at the specified index.
clone When this method is used on a container widget, then all the widgets inside the container are cloned.
remove Removes a widget from the form container.
removeAt Removes a widget at the given index from the Form container.
removeAll Removes all the widget on the container.

 

3D Touch

Methods Description
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.

User Input Handling

Events Description
onZoomEnd An event callback is invoked by the platform when the zooming has ended.
onZooming An event callback is invoked by the platform when the container is zooming.
onZoomStart An event callback is invoked by the platform when the container is about to zoom.
widgetToZoom An event callback is invoked by the platform to return one of the child widgets of source to zoom.

 

Methods Description
addGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
setZoomScale Allows you the zoom the widgets with an option to animate.

 

Properties Description
bouncesZoom Specifies whether the scroll view animates the content scaling when the scaling exceeds the maximum or minimum limits.
disableZoom Allows you to enable or disable zooming the FlexScrollContainer.
maxZoomScale Specifies the maximum scale factor that can be applied to the scroll view’s content.
minZoomScale Specifies the minimum scale factor that can be applied to the scroll view’s content.
dragging Specify whether the user has begun scrolling the content.
zooming A boolean value indicates whether the content view is currently zooming in or out.
zoomScale Specifies the current scale factor applied to the FlexScrollContainer content.

Enabling RTL

Properties Description
retainContentAlignment Helps to retain the content alignment of the widget while applying RTL.
retainFlexPositionProperties Helps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignment Enables you to change the horizontal flow of the widget from left to right.

UI Appearance

Properties Description
backgroundColor Specifies the background color of the widget in hex format.
opacity Specifies the opacity of the widget.
showFadingEdges Enables you to define the display of fading edges for the FlexScrollForm widget.
Methods Description
setContentOffset Gives you the control to offset a portion of the content in a FlexScrollContainer to bring the widgets in invisible area to visible area.

Miscellaneous

Properties Description
contentOffset Returns the current coordinates of the top left corner of the scrollable region in the item.
contentOffsetMeasured Specifies the x and y coordinates of the top-left of the scrollable region measured in dp.
cursorType Specifies the type of the mouse pointer used.
isMaster Specifies whether the container is a master container.
Methods Description
getBadge Enables you to read the badge value (if any) attached to the specified widget.
setBadge Enables you to set the badge value to the given widget at the upper, right corner of the widget.
setDefaultUnit Specifies the default unit to be used for interpretation of numbers with no qualifiers when passed to layout properties.
widgets Returns an array of the widget references which are direct children of the FlexScrollContainer widget.

Configurations Common To All Widgets

Properties Description
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
blur Enables you to make the widget look unfocused.
enable Allows you to make a widget visible but not actionable.
isVisible Controls the visibility of a widget on the FlexScrollContainer.
parent Helps you access the parent of the widget.
enableCache Enables you to improve the performance of Positional Dimension Animations.
info A custom JSObject with the key value pairs that a developer can use to store the context with the widget.
Methods Description
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver’s coordinate system).
convertPointToWidget Allows you to convert the coordinate system from a point (receiver’s coordinate system) to a widget.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget.

FlexScrollContainer Widget Basics

Creating a FlexScrollContainer Using a Constructor: voltmx.ui.FlexScrollContainer 

var FlexScrollContainer1 = new voltmx.ui.FlexScrollContainer(basicConf, layoutConf, pspConf);
  • basicConf is an object with basic properties.
  • layoutConf is an object with layout properties.
  • pspConf is an object with platform specific properties.

Note: An empty constructor leads to all defaults values and optionally all writable properties can be passed as a dictionary to the constructor.

Example

//Defining the properties of FlexScrollContainer

function testfrm_flexScrollContainer1_onScrollStart_seq0(eventobject) {
    normalform.show();
}

function testfrm_flexScrollContainer1_onScrollEnd_seq0(eventobject) {
    normalform.show();
}

function testfrm_flexScrollContainer1_onScrollTouchReleased_seq0(eventobject) {
    normalform.show();
}

function testfrm_flexScrollContainer1_onScrolling_seq0(eventobject) {
    normalform.show();
}

function testfrm_flexScrollContainer1_onDecelerationStarted_seq0(eventobject) {
    normalform.show();
}


function addWidgetstestfrm() {
    var flexScrollContainer1 = new voltmx.ui.FlexScrollContainer({
        "id": "flexScrollContainer1",
        "top": "5dp",
        "left": "6dp",
        "width": "97.15%",
        "height": "271dp",
        "zIndex": 1,
        "isVisible": true,
        "enableScrolling": true,
        "scrollDirection": voltmx.flex.SCROLL_BOTH,
        "horizontalScrollIndicator": true,
        "verticalScrollIndicator": true,
        "bounces": true,
        "allowHorizontalBounce": true,
        "allowVerticalBounce": true,
        "pagingEnabled": true,
        "Location": "[6,5]",
        "onScrollStart": testfrm_flexScrollContainer1_onScrollStart_seq0,
        "onScrollEnd": testfrm_flexScrollContainer1_onScrollEnd_seq0,
        "onScrollTouchReleased": testfrm_flexScrollContainer1_onScrollTouchReleased_seq0,
        "onScrolling": testfrm_flexScrollContainer1_onScrolling_seq0,
        "onDecelerationStarted": testfrm_flexScrollContainer1_onDecelerationStarted_seq0,
        "bouncesZoom": true,
        "zoomScale": 1.0,
        "minZoomScale": 1.0,
        "maxZoomScale": 1.0,
        "layoutType": voltmx.flex.FREE_FORM
    }, {
        "padding": [0, 0, 0, 0],
        "marginInPixel": false,
        "paddingInPixel": false
    }, {});
    flexScrollContainer1.setDefaultUnit(voltmx.flex.DP);
    flexScrollContainer1.add();
    testfrm.add(
        flexScrollContainer1);
}

function testfrmGlobals() {
    var MenuId = [];
    testfrm = new voltmx.ui.Form2({
        "id": "testfrm",
        "contentOffset": {
            "x": "3dp",
            "y": "4dp"
        },
        "contentSize": {
            "width": "5dp",
            "height": "6dp"
        },
        "enableScrolling": true,
        "bounces": true,
        "allowHorizontalBounce": true,
        "allowVerticalBounce": false,
        "pagingEnabled": true,
        "title": "myfrmt",
        "needAppMenu": true,
        "enabledForIdleTimeout": true,
        "skin": "frm",
        "zoomScale": 22,
        "minZoomScale": 1.0,
        "maxZoomScale": 1.0,
        "layoutType": voltmx.flex.FREE_FORM,
        "addWidgets": addWidgetstestfrm
    }, {
        "padding": [0, 0, 0, 0],
        "displayOrientation": constants.FORM_DISPLAY_ORIENTATION_PORTRAIT,
        "paddingInPixel": false
    }, {
        "retainScrollPosition": true,
        "needsIndicatorDuringPostShow": true,
        "formTransparencyDuringPostShow": "100",
        "inputAccessoryViewType": constants.FORM_INPUTACCESSORYVIEW_DEFAULT,
        "bouncesZoom": false,
        "configureExtendTop": true,
        "configureExtendBottom": false,
        "configureStatusBarStyle": false,
        "extendTop": false,
        "titleBar": true,
        "footerOverlap": false,
        "headerOverlap": false,
        "inTransitionConfig": {
            "transitionDirection": "fromLeft",
            "transitionEffect": "none"
        },
        "outTransitionConfig": {
            "transitionDirection": "fromRight",
            "transitionEffect": "none"
        }
    });
    testfrm.setDefaultUnit(voltmx.flex.PX);
}

Customizing Appearance

You can customize the appearance of the FlexScrollContainer using the following properties:

  • Events: Defines the scrolling events for FlexScrollContainer widget.
  • padding: Defines the space between the content of the widget and the widget boundaries.
  • skin: Specify the skin to be applied to the FlexScrollContainer widget.

Flex Layout Properties

The below image represents the flex layout properties:

Important Considerations

The following are the important considerations of a FlexScrollContainer:

  • If you set the scrollDirection as voltmx.flex.SCROLL_VERTICAL or voltmx.flex.SCROLL_BOTH, you have to set a value in the height property.
  • When a widget is placed inside a horizontal parent widget. For example: Segment, it will take 40% of the parent widget or the available free space of the widget.