dojo.E 0.2.4 Release and New Widgets
July 17th, 2008 by Bob BuffoneThe New Release: dojo.E 0.2.4
Last week the dojo.E team updated the code base of the dojo.E project. Many things in the code changed from the first release. The focus of the 0.2.x release was to create a well defined architecture around the core concept of adding XML to dojo. In this light, we created a flexible and well thought out XML processing engine that can take XML embedded in a script tag or external to the page and process the markup based on configured tag and namespace handlers.
The re-architecture resulted in a reduction of the code size by 80% and we were able to package the core functionality of dojo.E (Markup and Runtime) in a single JS file. Included in the update is the ability to add your own processor to handle specific tags or namespaces. Why do this? This feature means you or the dojo.E team can come up with new processors to add things like XBL, a standard for creating components, and use it in any browser not just the ones that support it. Click here to find out how to extend dojo.E.
Along with the XML processing code, we also optimized the way that Markup is translated into DojoML and upgraded the XModify Runtime feature as well. Along the way we also added more bug fixes, documentation and samples to dojoe.nexaweb.com. One of the cooler samples is the “Try it Out” button on the homepage. It replaces the “Hero spot” with a little cartoon. Give it a Try.
Upgrade of the Fusion Chart Widget:
In the last Blog entry, I put together a sample application that uses a new Fusion Chart Dojo widget. The sample has been updated with the ability to utilize dojo.data.
<dojoe:FusionChart chartType="Line"
width="600" height="350" store="countriesStore"
labelProp="name" valueProp="value" hrefProp="href">
</dojoe:FusionChart>
Online Resources:
Access to the SVN Repository
Download the code
Sample ApplicationNew Paging Bar Widget:
One of the many things that dojo.E makes easier is the “blending” of HTML into the DOM. There are many places to uses this capability in your application, one of which is paging through data. Look at a lot of applications on the web, one of the best paging bars that I have used has to be the one in Google Analytics.
Unable to find a Paging Bar that allows developers to use it in a repeatable way, I decided this would be a good sample to show the benefits of the dojo.E XModify functionality. XModify makes it easier to blend content. Usually when blending HTML or updating the HTML DOM, developers must write a lot of string manipulation or “createElement()” calls to create the desired presentation. Using dojo.E, developers can utilize a server-side scripting framework to output a HTML fragment, instead of a complete page and then hand it off to dojo.E to blend it into the HTML DOM. The Paging bar itself works very much like the Google Version, styling may be different but you can tweak that via the stylesheet or template.
You can use the paging bar in any application by referencing “dojoe.widgets.PagingBar”. You can see this widget below and in the Sample Application on the dojo.E website.
The paging bar can be customized to have any content between the “Ajax” icon and the “Go to” text. This allows for most of the customization required for simple paging situations. Further customization can be done be modifying the widgets template or CSS file.
Utilize the Paging bar in the following way:
<div dojoType="dojoe.widgets.PagingBar"
jsId="pagingBar" fetchByPage="true"
fetchOnStartup="true" itemCount="10"
targetNode="#myDataContainer"
fetchUrl="PagingBar/flickr.php?text=${text}&startIndex=
${startIndex}&page=${page}&itemCount=${itemCount}"
onPreProcessRequest="onPreProcessRequest(this.fetchUrl, this.parameters)"
onPostProcessRequest="onPostProcessRequest(this.fetchUrl, this.response)">
<div><span style="font-size:.8em">Query String: </span>
<input id="searchField" value="Cats" style="width:150px" type="text"/>
<button onclick="pagingBar.setStartIndex(1);
pagingBar.processRequest();">Go</button>
</div>
</div>
Two of the widget’s attributes that describe how it works are the following:
- “targetNode” - This attribute denotes a location into the HTML DOM where the contents will be replaced. This means that all the children of this component will be removed and filled in with the content from the “fetchUrl” attribute.
- “fetchUrl” - This attribute provides a string - dojo.string.substitute - that the widget uses to replace the variables with the correct format. The response to the URL is simply an HTML fragment that will be placed into the components specified by the “targetNode“.
In the online sample the response to the request is a table of Flickr images that when the user navigates in any way the widget calls the “onPreProcessRequest()” event and the handler can add in extra parameters that will be communicated to the server, specifically for the sample the contents of the edit field.
Online Resources:
The Last Word:
Keep coming back to dojoe.nexaweb.com to find the latest updates to the project. We are working hard a creating widgets and new features in the Runtime and Markup parts of the project.
If there are any issues or ideas you have for the dojo.E project go to the “dojo.E” section of the Nexaweb forum and let us know.
Bob (Buffone)
|
|
