You are here: Deprecated Widgets > HBox Widget

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: kony.ui.Box

var box1 = new kony.ui.Box(basicConf, layoutConf, pspConf)

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 kony.ui.Box(basicConfBox, layoutConfBox, pspConfBox);

prem Copyright © 2012 Kony, Inc. All rights reserved.
prem Copyright © 2012 Kony, Inc. All rights reserved.