Dataview Usage Example

HTML code

dataviewExample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
	<title>Dataview Usage</title>
		<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>
		html,body{
            background-color:#ffffff;
        }
        </style>
</head>
<body>
	<script>
		dhx.ui({
				view:"window",
				head:{
					view:"toolbar", type:"MainBar",
					data:[{type:"label", label:"Your favourite music"}]
				},
				body:{
					view:"dataview",
					width:322,
					height:200,
					type:{
						template:"<span class='dhx_strong'>#name#</span>#author#<span class='dhx_light'>#year#</span>",
						height:35,
						width:140
					},
					url:"music.xml",
					datatype:"xml"
				}
		});
 
	</script>
 
</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>
  <item id="7">
    <name>Stairway to Heaven</name>
    <author> Led Zeppelin </author>
    <year>1971</year>
  </item>
  <item id="8">
    <name>The Winner Takes It All</name>
    <author> ABBA </author>
    <year>1980</year>
  </item>
</data>