dojo.E Markup  

home > documentation > Users Guide > dojo.E Markup
Save & Share  Subscribe

How dojo.E Markup works

We can think of dojo.E Markup as a pre-processor that takes XML and converts it into Dojo markup language (DojoML). Instead of using slow and costly XSL Transformations, dojo.E Markup cleverly combines a tag name with a namespace prefix to produce an appropriate dojoType value for the HTML <div> tag. Then, the regular Dojo Parser is invoked to produce the same components as if you had typed them directly in your HTML file using standard Dojo syntax.

dojo.E markup is fast, has very little overhead and produces the real Dojo code. 

The wrapper

dojo.E Markup code is placed inside the <script> tag. You can insert the <script> tag anywhere in the body of an HTML page. Set type="text/xml" and dojoType="dojoe.XmlScript". Like this:

 
<script type="text/xml" dojoType="dojox.xml.Script"/>
 

The <ui> tag that goes inside the <script> is the root of your XML code.  The <ui> tag is the best place to define namespaces:

 
<ui xmlns="html" xmlns:dijit="dijit">
</ui>
 

By adding both <script> and <ui> tags together we get a standard dojo.e Markup wrapper:

 
<script type="text/xml" dojoType="dojox.xml.Script">
    <ui xmlns="html" xmlns:dijit="dijit">
         <!-- your code here --> 
    </ui>
</script>
 

Namespaces are the key

The properly constructed combination of namespace and element tag name allows you to generate any Dojo, Dijit or DojoX component (and even your own or future extensions when they become available). When dojo.E processes the XML, the default behavior is first to see if there is a handler that has been registered for the namespace. Use the registerNsHandler function to register a handler for a namespace.

 
dojoe.uiProcessor.registerNsHandler(
      "http://openxal.org/ui", 
      function(srcNode){
            //handle the 
      }
);
 

 
/**
 * Converts a nodes tagName and namespace URI into a valid dojoType
 */
getDojoType: function(/*XML node*/node){
    var name = dojoe.xml.getNodeName(node);        
    var namespace = dojoe.xml.getNamespaceUri(node);
 
    if (namespace && namespace != "html"){
        return namespace + "." + name;
    }else if(name.indexOf('.') < 0){
        return null;
    }
        return name;
    }    
}
 

 Helpful Tip
The basic philosophy of the XML processor is to make it simple to declare your application without any namespaces using the fully specified dojo widget class as the tagname or allowing you to use namespaces to shorten the specification of the widgets.

 
<ui xmlns="html" xmlns:dojo="dojo" xmlns:dijit="dijit" xmlns:dojoe="dojoe"/>
 

By the way, both of the following code fragments produce the same Dijit Button:

 
<ui xmlns:dijit="dijit">
     <dijit.form:button label="My Button"/>
</ui>;
 

is the same as

 
<ui xmlns:form="dijit.form">
       <form:button label="My Button"/>
</ui>
 

Where to go from here

For more dojo.E Markup samples go to Click Here.