You are here: Using the Navigation Drawer

FlexForm Widget

A FlexForm is the top most container widget, and is usually the first widget you add to an application. It serves as a container for all other widgets on the screen. Your app can support multiple screens by supporting multiple FlexForms and allowing a user to navigate between these screens.

FlexForm widget is not listed in the Default library. To create a new FlexForm widget, go to the Project explorer, expand any channel such as Mobile, Tablet, and Responsive web. Then, right-click on the Forms and select New Form.

Following are a few actions that you can perform on a FlexForm:

• Animations: You can add animations such as move, rotate, and more to the widgets in the FlexForm. An example for this is the sliding menu/hamburger menu, which can be designed to slide from left to right or right to left as per your specification.
• Layout: You can specify the layout of a FlexContainer and its child widgets in the FlexForm by using different positional properties. You can also specify if you want the widgets to be placed vertically, horizontally, or without any positional restrictions. These layout features help you to design a form and ascertain how it will look in a device.
• Skin: You can define the background by setting a skin to the FlexContainer in the FlexForm. You can blur your container, provide a shadow effect to your FlexContainer, and even make the FlexContainer transparent.

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

• Layout
• Animations
• Form Lifecycle
• Drawer Features
• Scrolling functionalities
• Data Management
• 3D Touch
• User Input Handling
• UI Appearance
• Enabling RTL
• Miscellaneous
• Configurations Common To All Widgets

Layout

Animations

Form Lifecycle

Drawer Features

Scrolling functionalities

Data Management

3D Touch

User Input Handling

UI Appearance

Enabling RTL

Miscellaneous

Configurations Common To All Widgets

Programming FlexForms

In earlier versions of Volt MX Iris you used BoxForm, horizontal (HBox) and vertical (VBox) boxes as containers to align widgets. These widgets are now obsolete and are listed in the Deprecated section of this reference. They still work, so older applications will continue to function, but should not be used in current versions of Iris.

• A FlexForm allows you to place and size widgets anywhere and you can place any number of widgets on it. It gives you absolute position and dimension of the widgets.
• A FlexForm has two layout types: Free Form Layout and Flow Vertical Layout. In the Free Form Layout, widgets can overlap with other widgets. In Flow Vertical Layout, widgets are placed one below the other.
• A FlexForm fills the entire device screen with the exception of the OS header and footer. A FlexForm can also display a title bar (or application bar as it is known in iOS). This bar will be displayed at the top of the form.
• FlexContainers are often used to add another level of organization within a FlexForm.

Form stacking

Typically a form is displayed in response to a user action on another form. That means the navigation between forms happen by the events on another form. All the navigation actions should be pushed into a stack to track the navigation path, so that the user can navigate back to the previous forms in the exact reverse order of its forward navigation. When navigating to a form that is already in the stack, the target form is brought back to the top of the stack by popping all the above forms out of the stack.

FlexForm Lifecycle

A FlexForm lets you add other container and widgets to create a widget hierarchy.

Lifecycle Methods:

A form is defined to have a lifecycle method that gets called at appropriate events. These events allow you to manage the application for better resource handling.

The following are the lifecycle methods of a form:

addWidgets - called when the form is used for first time either

• for accessing its widgets,
• accessing its properties,
• for showing the form through the show method,
• for any other method that invokes the form.

For example, any of the following can trigger the addWidgets method of form1 if form1 is not yet initialized:

• form1.label1
• form1.title
• form1.show()

init - called immediately after an addWidgets event for any initializations required for the form. Init initializes the form and any widgets.

In case of Server side Mobile Web and SPA, addWidgets preserve”>var var init events gets called as soon as the form is created. In case of native platforms, as an optimization, these events are deferred until the first access.

preShow - called just before a form is visible on the screen. A form can be made visible by explicitly calling the show method of the form.

postShow - called immediately after the form is visible on the screen. A form is made visible by explicitly calling the show method of the form.

onHide - called when the form goes out of the screen. A form can go out of the screen when another form is to be shown.

onDestroy - called when a form is destroyed. A form is destroyed when the developer explicitly calls destroy and this event gets called before destroying the form.

The following image illustrates the lifecycle of a form:

Click here to view the Application Life Cycle events.

Creating a Form using a constructor: voltmx.ui.Form2

var form1 = new voltmx.ui.Form2(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: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

//Defining the properties of FlexForm testfrm preserve">var
var a FlexScrollContainer flexScrollContainer1

    function addWidgetstestfrm() {
        var flexScrollContainer1 = new voltmx.ui.FlexScrollContainer({
            "id": "flexScrollContainer1",
            "top": "5dp",
            "left": "6dp",
            "width": "97.15%",
            "height": "271dp",
            "isVisible": true,
            "bouncesZoom": true,
            "zoomScale": 1.0,
            "layoutType": voltmx.flex.FREE_FORM
        }, {});
        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
    }, {
        "displayOrientation": constants.FORM_DISPLAY_ORIENTATION_PORTRAIT,
    }, {
        "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);
};

Note: For a form, there is no limit set on the vertical height and hence a form never declines the child widgets request for preferred height.

Using the Navigation Drawer

The Navigation Drawer, or “Hamburger menu” is a native feature of the Android platform, and is supported in Iris using the Navigation Drawer property of the FlexForm. This feature applies to Android only, so if you intend to support other platforms it may be better to implement your own version of this control using cross platform features.

The Navigation Drawer is selected in Iris using templates. There is no way to add it programmatically. See the Iris Users Guide for more information on adding this feature to your application.