You are here: Deprecated Widgets > VBox Widget

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

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