VBox

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.

Basic Properties	Layout Properties	Platform Specific Properties
focusSkin	containerWeight	blockedUISkin
id	gridCell	borderCollapse
info	layoutMeta	contextMenu
isVisible	layoutType	hoverSkin
orientation	layoutAlignment	viewConfig
skin	margin
	marginInPixel
	padding
	paddingInPixel
	widgetAlignment

Events	Methods	Deprecated
onClick	add
onHover	addAt
onRightClick	remove
preOnclickJS	removeAt
postOnclickJS	replaceAt
	widgets

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);