What is dojo.E?

dojo.E is a set of extensions for the dojo 1.1 toolkit that makes it easier to build web applications. dojo.E uses XML to create user interfaces, handle events, make DOM modifications, and manage state transitions. (see FAQ for more information)

Why dojo.E?

dojo.E adds two things on top of the dojo toolkit that developers can uses to build their Ajax applications easier:

dojo.E Markup - an extensible markup processing engine that out-of-the-box will translate XML into dojo components.
dojo.E Runtime - modification syntax that makes HTML DOM and dojo component building and manipulation simpler.

Click here to see dojo.E in action. The sample will navigate users through a series of screens that will be shown in the "Hero" spot above. The XML that drives the sample can be downloaded by clicking here.

What's new in dojo.E?

Release of dojo.E 0.2.4 - Provides bug fixes in the modification syntax and reduces the overall size of the library by 80%. The complete dojo.E library is now only 26Kb and a single file.
dojo.E 0.2.4 - Provides extensibility to the framework allowing developers to add in their own top level tags and handle their own namespaces within the ui section. Click here for more information.
New Content - The website has been updated with new documentation and samples, which should make getting up to speed with dojo.E easier.

dojo.E Markup

dojo.E Markup renders XML into dojo components/widgets based on a loose syntax where every component, property and event defined within dojo is associated with a namespace, a tag, and an attribute. For more information on the dojo.E markup, click here. dojo.E Markup makes it easier to create and maintain widgets because dojo can be separated from the HTML, which makes it easier to share the dojo component as well as for the component to be generated or schema validated.

Display a dojo accordion with content:

 <script type="text/xml" dojoType="dojoe.XmlScript">
    <ui>
        <dojo.layout.AccordionContainer duration="200">
            <dojo.layout.AccordionPane title="Title One">
                <div><b>Hello, World!</b></div>
            </dojo.layout.AccordionPane>
            <dojo.layout.AccordionPane title="Title Two">
                 <div><b>Hello Again!</b></div>
            </dojo.layout.AccordionPane>
        </dojo.layout.AccordionContainer>
    </ui>
</script>

The code sample above can be seen in action in the Samples section, click here to check it out.

dojo.E Runtime

dojo.E Runtime provides a declarative mechanism for executing HTML DOM and dojo component modifications. A lot of JavaScript code in an Ajax application is specific to building HTML DOM fragments. Many of the Ajax libraries provide helper functions to make this easier; however, when it comes to building large DOM fragments that need to be parameterized or executing multiple modifications, even using these libraries will require lots of code. You can learn more about dojo.E Runtime features by clicking here.

Swapping out a div's children with new HTML:

 <script type="text/xml" dojoType="dojoe.XmlScript">
    <dojoe.Xmodify>
        <replace-children query="div[id='give-me-new-children']">
            <!-- 
                  Place any HTML Fragment here and it will replace
                  the contents of the div specified by the query attribute above.
             -->
        </replace-children>
    </dojoe.Xmodify>
</script>