Multiview Usage Example

HTML code

multiviewExample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
	<title>Multiview</title>
    <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>
 
    <script>
        dhx.ready(function(){
 
            var config={// we declare all the front-end components in the variable and then we just put it into view object
                container:"groupBox",
                    rows:[// specifies layout
                        { 	
                            view:"toolbar", // in the first row we create toolbar that contains just a label
                            type:"MainBar", // 
                            data:[// specifies toolbar's label
                                {type:"label", label: "Backpackr <sup class='tb_sup'>mobile</sup>", align:'left'},
                            ]
                        },
                        { // in the second row we also specify toolbar but now it will contain control 'tabbar' which we will use as a changer 
                            view:"toolbar", 
                            id:"TopToolbar", 
                            data:[// here we specify toolbar control 'tabbar'
                            	{ type:"tabbar", id:'tabbar', selected: 'tab_video', tabWidth:102, tabs: [   
                            	   { label: 'Games', src: 'images/tabbar/games.png', key: 'tab_games'},
                            	   { label: 'Video', src: 'images/tabbar/video.png', key: 'tab_video'},
                            	   { label: 'Music', src: 'images/tabbar/music.png', key: 'tab_music'},
                            	]},
                                ]},
                        {
                            gravity:2,  // dimensional parameter
                            view:"multiview", // specifies multiview component
                            cells:[{ view:"list", id:"tab_games", url:"xml/games.xml", datatype:"xml", //specifies content of each tab
				     template:"#name#(#year#)", select:true, type: { width: 300 }
				   },
				   { view:"list", id:"tab_video", url:"xml/video.xml", datatype:"xml",
			             template:"#name#(#year#)", select:true, type: { width: 300 }
				   },
				   { view:"list", id:"tab_music", url:"xml/music.xml", datatype:"xml",
			             template:"#name#(#author#)", select:true, type: { width: 300 }
				   }]
                        }
                    ]
			}
            dhx.ui(config);// we put the variable with components declaration into the view
 
            $$("tab_video").show(); // specifies which tab will be showed initially
            $$("TopToolbar").attachEvent("onBeforeTabClick",function(button,id){ //t's a function which allows us to change tabs over
                $$(id).show();
                return true
            })
        });
    </script>
<body>
    <div style="width:320px;height:340px;border:1px solid #969696; margin:50px;">
    	<div id="groupBox" style='width:100%; height:100%;'>
    	</div>
    </div>
</body>
</html>

XML structure

music.xml

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <item id="1">
    <name>Let It Be</name>
	<author> Beatles </author>
    <year> 1970 </year>
  </item>
  <item id="2">
    <name>What's Going On</name>
    <author> Marvin Gaye </author>
    <year> 1971 </year>
  </item>
  <item id="3">
    <name>Hotel California</name>
    <author> Eagles </author>
    <year>1976</year>
  </item>
  <item id="4">
    <name>Oh, Pretty Woman</name>
    <author> Roy Orbison </author>
    <year>1964</year>
  </item>
  <item id="5">
    <name>Yesterday</name>
    <author> Beatles </author>
    <year>1965</year>
  </item>
  <item id="6">
    <name>Wish You Were Here</name>
    <author> Pink Floyd </author>
    <year>1975</year>
  </item>
</data>