Browse DevX
Sign up for e-mail newsletters from DevX


XUL Defines New User Interface Options : Page 4

XUL is a new Netscape/Mozilla XML dialect that describes the elements of a traditional user interface. Faster and cleaner than HTML, it might just be the quickest way yet to code a UI.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Activating XUL with Script
In an HTML document, even one with ActiveX controls, JavaScript is often seen used as a dash of salt, added just for taste. Only occasionally is JavaScript used in HTML as important critical glue. In the past, JavaScript was conceived as being an extra to be embedded in a larger document, but in an XUL document, even one with ActiveX controls, JavaScript has a far more serious purpose. It provides the guts. Without JavaScript, XUL is visually pleasing but superficial. With JavaScript, the XUL visual elements gain processing substance and can connect to the many interfaces inside Mozilla. So it's no surprise that the XUL .jar files alluded to earlier are full of JavaScript.

The enhanced example NetSheet2.xul, uses JavaScript in a manner similar to the way it's used in HTML. The file NetSheet2.html contains a formatted version of the content so you can see what's been added.

First, you'll find an onload() handler, which installs the event handlers for the interface elements. You can find that code in NetSheet.js, one of several included files that contain script. Next, a bit of XUL-specific markup, the <keyset> tag, saves some painful event handling by allocating "hotkeys" to specific commands. The code hooks the hotkeys in further down, where the "key" attribute appears. Two important oncommand event handlers give the View menu a real action to perform. In this example, when you choose a View menu option, the toolbars appear and disappear as they should. The Help menu also works now. In one case it opens an HTML document, and in the other an XUL document.

You can inspect the sample .js files at your leisure, they contain quite a bit of code including a JavaScript data structure for the spreadsheet the user creates and GUI event-handlers to respond to user requests. The code also supports simple macros entered in JavaScript syntax and made accessible via the eval() function. Two handy new functions, cell() and sum() let you access individual cells and get simple summary values.

Still, this is only a demo so tread lightly! Try this series of steps. Click on cell B2. Note that it highlights (a scripted CSS2 change) and that the toolbar now displays the correct cell name. Click on the input box and type in "=12". Click on cell E5. In the toolbar text entry box, type:

=cell("B2")*2 + Math.cos(Math.PI)

Press return, or move to another cell, and 23 should appear in cell E5 (that's 12*2 + (-1)). You should be able to use the formula sum("B1","D3") as well, but at the moment it always returns 42. Oh well, mañana. You can type strings into cells too, although the formatting could be better.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date