outaTiME

Nexaweb has released a new product that build on Dojo, dojo.E:

dojo.E provides developers with the ability to use an XML based markup language to add in their Ajax behaviors. Markup whether — XML, HTML or CSS — simplifies development by allow developers to convey in simple text format what they would otherwise need to convey in code. Markup also provides a great abstraction layer that separates the implementation from the usage.

This release, which is an Apache style open source project itself, consists of two pieces:

dojo.E Markup

dojo.E Markup allows developers to describe their dojo components using a simple markup language that translates directly into dojo classes. For example declaring a button in dojo would be done one of two ways;

PLAIN TEXT

HTML:

1.  
2. <div dojoType=”dijit.form.Button” label=”Hello, world”/>
3.  

Using JavaScript new dijit.form.Button(htmlElement, “Hello, World”);

dojo.E Markup provides a third way that allows developers to describe the button as follows:

PLAIN TEXT

HTML:

1.  
2. <script type=“text/xml” dojoType=“dojoe.XmlScript”>
3.    <ui xmlns:dijit=“dijit”>
4.         <dijit :form.Button label=“Hello, World!”
5.            onclick=“alert(’It works!’)”/>
6.     </ui>
7. </script>
8.  

dojo.E Runtime

The runtime provides additional markup that makes modifying the HTML DOM or the dojo Components easier.

PLAIN TEXT

XML:

1.  
2. <xm :xmodify document=”ui”>
3.         </xm><xm :append select=”//widget.SortList”>
4.                 <li>{0}</li>
5.         </xm>
6.  
7.  

The xModify syntax above tells the dojo.E runtime to append a “

{0}

” tag to the dojo SortList component. The select statement in this case is a XPath statement and not a CSS selector. In the actual sample this snippet above is wrap with a “Macro” which allows the developer to parameterize the “{0}” and execute the xModify snippet when the developer clicks the “Add” button.

You can play with this in a live editor that shows samples such as a todo list:

PLAIN TEXT

XML:

1.  
2. <declarations>
3.         <dojoe :Macro id=“add” xmlns:dojoe=“dojoe”>
4.         <![CDATA[
5.         <xm:xmodify xmlns="html" xmlns:xm="dojoe" xmlns:dijit="dijit" document="ui">
6.                 <xm :append select="//widget.SortList ">
7.                         <li>{0}</li>
8.                 </xm>
9.        
10.         ]]>
11.         </dojoe>
12. </declarations>
13. <ui xmlns:dijit=“dijit” xmlns:dojox=“dojox” xmlns=“html”>
14.         <div id=“input_container”>
15.                 <span>ToDo:</span>
16.                 <input style=“width: 184px; margin-left:3px;” id=“textbox” type=“text” class=“input_tbx” value=“Item”/>
17.                 <input class=“button” type=“button” value=“Add” onclick=“dojoe.containers.macro.get(’add’).execute(document.getElementById(’textbox’).value);” />
18.         </div>
19.         <div id=“list_container”>
20.                 <dojox :widget.SortList  title=“SortList From Markup” style=“width:300px; height:150px;”>
21.                         <li>A. Download and Install the dojo.E</li>
22.                         <li>B. Build dojo.E Application</li>
23.                         <li>C. Profit</li>
24.                 </dojox>
25.         </div>
26. </ui>
27.  

(Via Ajaxian.)