VBox Widget

Important: You cannot create new VBox(deprecated) forms, but you can import VBox forms from your previous projects into your latest projects and continue to work with them seamlessly. When you create a new template in a project in Volt MX Iris from V8 SP2 onwards, the top-level FlexContainer automatically is created along with your template. You can delete the FlexContainer and add a VBox(deprecated) form if needed.

A VBox is used to layout widgets in a single vertical orientation. It can contain any number of widgets. However, due to form size limitations, it is advisable not to place many widgets in a VBox.

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

A VBox provides you with an option to set basic properties, layout properties for all platforms and properties for specific platforms. You can also call/set Events and Methods on platforms as mentioned in the respective sections.

For information regarding the behavior exhibited by the VBox, see VBox Behavior.

Overviews

Creating a VBox using a constructor: voltmx.ui.Box

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

Example

function boxOnClickEventTest(box)
{
	alert("OnClick event is invoked successfully");
}

//Defining the properties for a box with the ID :"boxIdTest"
var basicConfBox = {id:"boxIdTest", isVisible:true, orientation:constants.BOX_LAYOUT_VERTICAL, onClick:boxOnClickEventTest};

var layoutConfBox = {containerWeight:80, percent:false, layoutAlignment:constants.BOX_LAYOUT_ALIGN_FROM_LEFT, contentAlignment:constants.CONTENT_ALIGN_TOP_CENTER, padding:[10,10,10,10], margin:[0,5,0,5]};

var pspConfBox = {borderCollapse:true, blockedUISkin:"blockUISkin" };

//Creating the box.
boxTest = new voltmx.ui.Box(basicConfBox, layoutConfBox, pspConfBox);