Simple ToDo list

> >

ToDo List Example

The following ToDo List demonstrates modifying the runtime DOM using XML. The SortList component is defined and instantiated with XML. Items are added to it through a dojo.E macro that contains XModify syntax. XModify is a declarative XML syntax for manipulating the client side DOM without writing JavaScript.

 
<link href="js/dojox/widget/SortList/SortList.css" type="text/css" rel="stylesheet" />
<link href="style/todo-list.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">	
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.TextBox");
    dojo.require("dojox.widget.SortList");
    dojo.require("dojoe.dojoe");
</script>
<script type="text/xml" dojoType="dojoe.XmlScript">
    <declarations>
       <dojoe.Macro id="add">
           <dojoe.Xmodify>
              <append query="div[id='list']">
            	 <li>{0}</li>
              </append>
           </dojoe.Xmodify>
       </dojoe.Macro>
   </declarations>
</script>
<script type="text/xml" dojoType="dojoe.XmlScript">
   <ui>   
       <div id="input_container">
           <table><tr><td class="">ToDo:</td>
           <td class=""><input style="width: 184px; margin-left:3px;" 
                   id="textbox" type="text" class="input_tbx" value="Item"/></td>
           <td class="">
		<div class="button" 
		onclick="dojoe.macros.add.execute(document.getElementById('textbox').value);">
			Add</div>
	   </td></tr></table>
       </div>
       <div id="list_container">
           <dojox.widget.SortList id="list" 
                   title="SortList From Markup" 
                   style="width:300px; height:150px;">
               <li>A. Download and Install the dojo.E</li>
               <li>B. Build dojo.E Application</li>
               <li>C. Profit</li>
           </dojox.widget.SortList>
       </div>
   </ui>
</script>