Using the Dojo XML Parser
February 5th, 2008 byI have spent the last few weeks building examples using XML on top of dojo, including an XML version of the mail application (you can see it here http://trac.dojotoolkit.org/ticket/5766).
1. Setting namespace
Since majority of the tags used are still html tag, it makes things much easier to set the default namespace to be html, in this way, there is no need to put html prefix for all the html tags. To do so, you just need to set like this:
<ui xmlns:dijit=”dijit” xmlns:html=”html” xmlns=”html”>
…
</ui>
2. Embedded JavaScript
Using embedded JavaScript can be tricky as it will be underneath the xml parser JavaScript. The solution here is to add html prefix to avoid the confusion of the inner script tag.
Example:
Original html:
<button dojoType=”dijit.form.Button” label=”Click me”>
<script type=”dojo/method” event=”onClick”>
alert(’clicked’);
</script>
</button>
Converted xml:
<ui xmlns:dijit=”dijit” xmlns=”html” xmlns:html=”html”>
<dijit:form.Button label=”Click me”>
<html:script type=”dojo/method” event=”onClick”>
alert(’clicked’);
</html:script>
</dijit:form.Button>
</ui>
It could also be solved by using CDATA as motioned in the following.
3. Inner html
Inner html may raise issue for the xml parser; there are two ways to resolve this issue.
a. Using CDATA to wrap the JavaScript code.
b. Escaping “<” and “>” by “&<” and “&>”
Example:
If we have a div defined as:
<div id=”DivExample”>
Hello World
</div>
And an html code to change the div content :
<button dojoType=”dijit.form.Button” label=”Click me”>
<script type=”dojo/method” event=”onClick”>
document.getElementById(’DivExample’).innerHTML =
“<p>Hello</p>”;
</button>
Then you can use either one of the method below to replace the html code (but not both):
a: Using CDATA
<ui xmlns:dijit=”dijit” xmlns:html=”html” xmlns=”html” >
<dijit:form.Button label=”Click me”>
<html:script type=”dojo/method” event=”onClick”>
<![CDATA[
document.getElementById('DivExample').innerHTML = "<p>Hello</p>";
]]>
</html:script>
</dijit:form.Button>
</ui>
b: Escaping “<” “>” by “&<” and “&>”
<ui xmlns:dijit=”dijit” xmlns:html=”html” xmlns=”html” >
<dijit:form.Button label=”Click me”>
<html:script type=”dojo/method” event=”onClick”>
document.getElementById(’DivExample’).innerHTML =
“<p>Hello</p>”;
</html:script>
</dijit:form.Button>
</ui>
4. Valid attribute value
For every attribute inside any node, you need to assign a value to it to be a valid xml node.
Example:
<hr noshade size=”1″> is invalid here and should be converted to:
<hr noshade=”true” size=”1″/>.
5. Table
IE is kind of picky for parsing the table tag. To use xml parser, the table must contain <tbody/> in order to display properly in IE. Also colSpan/rowSpan can not be written in all lower case colspan/rowspan.
Example:
<ui xmlns:dijit=”dijit” xmlns:html=”html” xmlns=”html”>
<table border=”1px”>
<tbody>
<tr>
<td>
<label>row 1 col 1</label>
</td>
<td>
<label>row 1 col 2</label>
</td>
</tr>
<tr>
<td colSpan=”2″ style=”text-align:center;”>
<label>row 2 col 1</label>
</td>
</tr>
</tbody>
</table>
</ui>
Without <tbody/>, it will not display in IE, but will show in Firefox. And if using “colspan” instead of “colSpan”, it will not work either for IE yet Firefox works fine.
Jing Wang
|
Tags: Ajax, dojo, dojoe, JavaScript |
|
