Box

HBox Widget

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

You can add the HBox 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.

An HBox provides you with an option to set basic properties, for all 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 HBox, see Box Behavior.

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

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

Creating an HBox 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_HORIZONTAL, 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], vExpand:true};

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

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