<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> <script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript" charset="utf-8"> dhx.ui({// opens a view 'box' rows:[ // specify row of the layout and in the first row we create a toolbar object { view:"toolbar", id:"topbar", data:[{type:"segmented", id:"tabs", segment:[ {key:"tab_a", label:"Section A"},{key:"tab_b", label:"Section B"},{key:"tab_c", label:"Section C"} ]} ]}, { cols:[ // in the second row we specify 'cols' parameter which means that we divide the second row into a number of columns { gravity:2, view:"tabbar",// in the first column we create tabbar object cells:[ { template:"Section A", id:"tab_a" }, { template:"Section B ", id:"tab_b" }, { template:"Section C ", id:"tab_c" } ] }, { gravity:2 // in the second column we specify just dimensional parameter 'gravity' } ]}, { view:"toolbar", id:"leftbar", data:[// in the third row we specify toolbar as well {type:"label", label:"It is"}, {type:"button", label:"my button"} ]} ] }); </script> </body> </html>