From list to form

<!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>