<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"> <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> <style> .tb_sup{ font-size:10px; text-shadow: none; font-style:italic; } </style> <body> <div style="width:320px;height:302px;border:1px solid #969696; margin:50px;"> <div id="groupBox" style='width:100%; height:100%;'> </div> </div> <script> dhx.ready(function(){ // dhx.ready () is analogous to 'onDocumentReady ' event - occurs when the document has been completely parsed. The callback function will be invoked even if it was written after the document has loaded. dhx.ui({ container:"groupBox", rows:[{//we define 2 rows. The first one is 'toolbar' that contains view-changer:'tabbar' control. view:"toolbar", type:"BigTabBar", id:"topbar", data:[{ type:"tabbar", selected: 'tab_1',tabWidth:156, tabs: [ // the first view'll be selected initially {key:"tab_1", label:"List"}, {key:"tab_2", label:"Details"}] }] }, {// the second row contains our main component - 'multiview'. view:"multiview", cells:[{view:"list",// specify 'list' component as the first view id:"tab_1",//please note, views' id must coincide with keys specified in view-changer (in our case,tabbar) datatype:"xml", // data type of loaded data template:"#name#", // specifies the represented data select:true, // defines whether list's item can be selected type: { width: 300 }// width of the list }, {view:"form", // specify 'form' component as the second view id:"tab_2", data:[{ type:"text", id:"name", label: 'Song', position: "label-left", align: "center", labelAlign: "center"},// defines simple text fields where we will present details {type:"text", id:"author", label: 'Singer', position: "label-left", align: "center", labelAlign: "center"}, {type:"text", id:"year", label: 'Year', position: "label-left", align: "center", labelAlign: "center"}, {type:"text", id:"album", label: 'Album', position: "label-left", align: "center", labelAlign: "center"}] } ]} ]}); $$("tab_1").load("xml/songs.xml", "xml", function(){// as data loading is asynchronous we'll load data to 'list' out of its definition to ensure initial selection $$("tab_1").select($$("tab_1").first());// makes the first row selected }); $$("topbar").attachEvent("onBeforeTabClick",function(button,id){// the event 'onBeforeTabClick' fires when a user is clicking on tabs of 'tabbar' control $$(id).show();// shows the appropriate tab of multiview (ids of 'tabbar' and 'multiview' tabs are coincide (tab_1, tab_2)). if (id=="tab_2"){//loads data of the appropriate item to form $$("tab_2").setValues( $$("tab_1").item($$("tab_1").getSelected())); } return true }) }); </script> </body> </html>