10 April 2009

XML to DOM using XSLT

A short post. I was fed up with writing javascript/java code for creating dynamic web interfaces ( You know all those document.createElementNS, document.createTextNode node.appendChild etc... statements for building the DOM), so I wrote a XSL stylesheet taking as input a XML file and echoing the code that should be used to build the document. The stylesheet is available at:


For example the following XUL document:
<window id="example-window" title="Example 2.5.4">
<listbox>
<listhead>
<listheader label="Name"/>
<listheader label="Occupation"/>
</listhead>
<listcols>
<listcol/>
<listcol flex="1"/>
</listcols>
<listitem>
<listcell label="George"/>
<listcell label="House Painter"/>
</listitem>
<listitem>
<listcell label="Mary Ellen"/>
<listcell label="Candle Maker"/>
</listitem>
<listitem>
<listcell label="Roger"/>
<listcell label="Swashbuckler"/>
</listitem>
</listbox>
</window>

Will be transformed ( using xsltproc xml2dom.xsl file.xul ) into the following javascript code:
var window_id2244179= document.createElementNS(XUL.NS,"window");
window_id2244179.setAttribute("id","example-window");
window_id2244179.setAttribute("title","Example 2.5.4");
var listbox_id2244186= document.createElementNS(XUL.NS,"listbox");
window_id2244179.appendChild(listbox_id2244186);
var listhead_id2244188= document.createElementNS(XUL.NS,"listhead");
listbox_id2244186.appendChild(listhead_id2244188);
var listheader_id2244190= document.createElementNS(XUL.NS,"listheader");
listhead_id2244188.appendChild(listheader_id2244190);
listheader_id2244190.setAttribute("label","Name");
var listheader_id2244194= document.createElementNS(XUL.NS,"listheader");
listhead_id2244188.appendChild(listheader_id2244194);
listheader_id2244194.setAttribute("label","Occupation");
var listcols_id2244200= document.createElementNS(XUL.NS,"listcols");
listbox_id2244186.appendChild(listcols_id2244200);
var listcol_id2244202= document.createElementNS(XUL.NS,"listcol");
listcols_id2244200.appendChild(listcol_id2244202);
var listcol_id2244204= document.createElementNS(XUL.NS,"listcol");
listcols_id2244200.appendChild(listcol_id2244204);
listcol_id2244204.setAttribute("flex","1");
var listitem_id2244209= document.createElementNS(XUL.NS,"listitem");
listbox_id2244186.appendChild(listitem_id2244209);
var listcell_id2244211= document.createElementNS(XUL.NS,"listcell");
listitem_id2244209.appendChild(listcell_id2244211);
listcell_id2244211.setAttribute("label","George");
var listcell_id2244215= document.createElementNS(XUL.NS,"listcell");
listitem_id2244209.appendChild(listcell_id2244215);
listcell_id2244215.setAttribute("label","House Painter");
var listitem_id2244221= document.createElementNS(XUL.NS,"listitem");
listbox_id2244186.appendChild(listitem_id2244221);
var listcell_id2244223= document.createElementNS(XUL.NS,"listcell");
listitem_id2244221.appendChild(listcell_id2244223);
listcell_id2244223.setAttribute("label","Mary Ellen");
var listcell_id2244227= document.createElementNS(XUL.NS,"listcell");
listitem_id2244221.appendChild(listcell_id2244227);
listcell_id2244227.setAttribute("label","Candle Maker");
var listitem_id2244232= document.createElementNS(XUL.NS,"listitem");
listbox_id2244186.appendChild(listitem_id2244232);
var listcell_id2244234= document.createElementNS(XUL.NS,"listcell");
listitem_id2244232.appendChild(listcell_id2244234);
listcell_id2244234.setAttribute("label","Roger");
var listcell_id2244238= document.createElementNS(XUL.NS,"listcell");
listitem_id2244232.appendChild(listcell_id2244238);
listcell_id2244238.setAttribute("label","Swashbuckler");


Note: I also have a XML2HTML stylesheet here.

That's it.
Pierre

No comments: