<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>
    <head>
      <title>jMaki Map It Sample</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style type="text/css">
       .logo { background: url(images/jmaki-seal.png) top right;width:100px; height:80px;margin-top:0px;background-repeat: no-repeat }
      </style>
      <!--[if lt IE 7]>
        <style type="text/css">
			.logo { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src=images/jmaki-seal.png);cursor:pointer }
        </style>
      <![endif]-->
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" href="jmaki-standard-footer.css" type="text/css"></link>
    </head>
    <body>
        <div id="border">
            
            <div id="header">
                <div id="banner"><div class="logo" style="float:left"></div>
                <div style="margin-top:20px; float:left;">jMaki Table Sample</div>
	        </div>
                <div id="subheader">
                    <div>
                        <a href="http://forums.java.net/jive/forum.jspa?forumID=96" target="_jmaki">Feedback</a> |
                        <a href="http://jmaki.com" target="_jmaki">jMaki Home</a>
                    </div>
                </div> <!-- sub-header  -->
            </div> <!-- header -->

            <div id="main">
                <div id="leftSidebar">
                        <a:widget name="yahoo.tree"
                              value="{
                              root : {
                              label : 'Data Table Updates ',
                              expanded : true,
                              children : [
                              { label : 'Add ',
                              expanded : true,
                              children : [
                              { label : 'add one row ',
                              action : { topic : '/addRow'}},
                              { label : 'add multiple rows ',
                              action : { topic : '/addRows'}
                              }
                              ]
                              },
                              { label : 'Remove ',
                              expanded : true,
                              children : [
                              { label : 'remove Book 4',
                              action : { topic : '/removeRow'}},
                              { label : 'remove multiple rows',
                              action : { topic : '/removeRows'}
                              }
                              ]
                              },
                              { label : 'Clear Table Entries',
                              expanded : true,
                              action : { topic : '/jmaki/table/clear', message : '{}'}
                              },
                              { label : 'select Book 4',
                              expanded : true,
                              action : { topic : '/jmaki/table/select', message : { targetId : 'row-add1'}}
                              }
                              ]
                              }
                              }"/>
                   
                </div> <!-- leftSidebar -->

                <div id="content" style="height:400px">
                    
                    <a:widget name="yahoo.dataTable" subscribe="/jmaki/table"
                              value="{columns : [
                              { label : 'Title', id : 'title'},
                              { label :'Author', id : 'author'},
                              { label : 'ISBN', id : 'isbn'},
                              { label : 'Description', id : 'description'}
                              ],
                              rows : [
                              { title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
                              { id : 'bar', title : 'Book Title 2', author : 'Author 2', isbn : '4412', description : 'A Some long description'}
                              ]
                              }" />
                    
                </div> <!-- content -->
        
            </div> <!-- main -->
        </div> <!-- outerborder -->
    </body>
</html>
