XML

Initial Data

As initial data we'll take 4 books:

  • “War and Peace” by Leo Tolstoy
  • “Hamlet” by William Shakespeare
  • “Madame Bovary” by Gustave Flaubert
  • “The Lord of the Rings” by J. R. R. Tolkien

Configuration

In XML the data will look as:

 
Please note, you can set item's id directly in XML file

books.xml

<?xml version="1.0" encoding="UTF-8"?>
<data>
 <item id="1">
   <name> War and Peace </name>
   <author> Leo Tolstoy </author>
   <year> 1861-1869 </year>
 </item>  
 <item id="2">
   <name> Hamlet </name>
   <author> William Shakespeare </author>
   <year> 1599-1601</year>
 </item> 
 <item id="3">
   <name> Madame Bovary </name>
   <author> Gustave Flaubert </author>
   <year> 1856</year>
 </item> 
 <item id="4">
   <name> The Lord of the Rings </name>
   <author> J. R. R. Tolkien </author>
   <year> 1954-1955 </year>
 </item>
</data>

HTML Code

dataview(xml).html

<!DOCTYPE HTML>
 
<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:"popup",
				body:{
					view:"dataview",
					width:322,
					height:112,
					type:{
						template:"<span class='dhx_strong'>#name#</span>#author#<span class='dhx_light'> <br/> #year#</span>",
						height:35,
						width:140
					},
					url:"xml/books.xml",
					datatype:"xml"
				}
		});
 
	</script>
 
</body>
</html>