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

FlexContainer Widget

The FlexContainer widget is a container that can provide a unique UI/UX property to a collection of widgets. For example, consider a scenario where you have a Login form in your app. In this Login form, you can have a header, footer, and a body content containing the text boxes for entering the user ID and password. You can use three FlexContainers here: one for the header, a second one for the footer, and the third one for the body content with the text boxes. You can specify separate backgrounds, layouts, and other features to these containers.

Here are a few features of the FlexContainer widget:

Layout: You can specify the layout of a FlexContainer and its child widgets 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: FlexContainer helps you to define a background for your widgets. You can blur your container, provide a shadow effect to your FlexContainer, and even make the FlexContainer transparent.

Templates and Components: When you have a UI/UX design in an application that must be reused in multiple areas, you need to create it as a template or as a component. A FlexContainer is created by default for both templates and components.

Animations: You can make your FlexContainer move, rotate, and more by using the animation options. 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.

Using it as an Overlay: Another important feature of FlexContainer is that it can be used as an overlay to other forms. You can give it a higher z-index so that it appears as if it is on top of other widgets. This feature is very useful when you want to give a tour of your application or when you want to display a popup.

Haptic Feedback: If you want to enable Haptic feedback for a certain area in your form, you can make use of a FlexContainer in this scenario. This is useful when you want the user to get the haptic feedback for a group of widgets rather than one widget.

A FlexContainer widget allows you to arrange widgets in the orientation you specify. It can hold any number of widgets.

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

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 FlexContainer widget see the FlexContainer topic in the Volt MX Iris User Guide.

Components in Volt MX Iris provide ways of reusing code, and are based on special cases of the FlexContainer.

For a more hands-on approach on the functionality of FlexContainer widget, import and preview the Pop-up using FlexContainer Feature sample app by using Volt MX Iris.

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

• Layout
• Animations
• Data Management
• 3D Touch
• Gestures
• Life Cycle Events
• UI Appearance
• Enabling RTL
• Miscellaneous
• Common configurations to all widgets

Layout

Animations

Data Management

3D Touch

Gestures

Life cycle Events

UI Appearance

Enabling RTL

Miscellaneous

Configurations common to all widgets

FlexContainer Widget Basics

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

var myFlex = new voltmx.ui.FlexContainer(basicConf, layoutConf, pspConf);

• basicConf is an object with configuration properties.
• layoutConf is an object with layout specific configuration properties.
• pspConf is an object with platform specific configuration properties.

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

Example

//Defining properties for FlexContainer
function testfrm_flexContainer1_onTouchStart_seq0(eventobject, x, y) {
    //Write your logic here.
};

function testfrm_flexContainer1_onTouchEnd_seq0(eventobject, x, y) {
    //Write your logic here.
};

function testfrm_flexContainer1_onTouchMove_seq0(eventobject, x, y) {
    //Write your logic here.
};

function addWidgetstestfrm() {
    var flexContainer1 = new voltmx.ui.FlexContainer({
        "id": "flexContainer1",
        "top": "19dp",
        "left": "43dp",
        "width": "304dp",
        "height": "251dp",
        "zIndex": 1,
        "isVisible": true,
        "onTouchStart": testfrm_flexcontainer1_onTouchStart_seq0,
        "onTouchEnd": testfrm_flexcontainer1_onTouchEnd_seq0,
        "onTouchMove": testfrm_flexcontainer1_onTouchMove_seq0 "clipBounds": true,
        "layoutType": voltmx.flex.FREE_FORM
    }, {
        "padding": [0, 0, 0, 0]
    }, {});;

    flexContainer1.setDefaultUnit(voltmx.flex.DP)
    flexContainer1.add();
    testfrm.add(flexContainer1);
};

Flex Layout Properties

The below image represents the flex layout properties: