Fruit basket program in XUL

  • From: Jamal Mazrui <empower@xxxxxxxxx>
  • To: programmingblind@xxxxxxxxxxxxx
  • Date: Fri, 26 Oct 2007 15:49:27 -0400 (EDT)

From the zip archive at

This fruit basket program is written in XUL: XML User-interface Language.
The language is a cross-platform, XML-based way of describing the user
interface of an application -- windows, controls, menus, etc.  Event
handling code is specified in seperate JavaScript files.  Also seperately
specified are stylistic information via CSS and localized language
information via DTD files.

XUL is used in open source applications and tools developed by the Mozilla
including Firefox and Thunderbird.  A runtime engine reads XUL
specifications and renders the application.  Gecko is one such engine:  a
C++ component that developers can embed in surrounding code of a larger
application.  Another engine is XMLRunner:  a seperate executable that
developers package with XUL files to create an application.  These engines
create custom Mozilla controls rather than native ones of the operating
system -- Windows, Linux, Mac.  Accessibility is built into their design,
however, using the appropriate API of the operating system -- MSAA, ATSPI,

The fruit basket program is executed with XULRunner.  The recommended
version for Windows is at

For simplicity, I suggest unzipping the archive in the root directory of
drive C, which will create a directory called

From within that directory, run the following command line to initialize
the engine on your computer:
xulrunner.exe --register-global

The release notes for this 1.8 version are available at

The best learning material for XUL is available at

The main tutorial is available in a single HTML file at

I also suggest unzipping to the root directory of drive C,
which will create the directory

You can then run the fruit basket program by executing the batch file

The source coe is primarily in the files main.xul and main.js, pasted


[Begin content of main.xul]

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<dialog id="main" title="Fruit Basket" orient="horizontal"


ondialogaccept="return doAdd();"

ondialogdisclosure="return doDelete();"

ondialogcancel="return doClose();">

<script src="main.js"/>

<label value="Fruit:" accesskey="F" control="txt_fruit"/>
<textbox id="txt_fruit"/>

<label value="Basket" accesskey="B" control="lst_basket"/>
<listbox id="lst_basket"/>


[End of xul_fruit.xul]

[Begin content of main.js]

function doAdd(){
var txt = document.getElementById("txt_fruit");
var sFruit = txt.value;
if (sFruit == "") {
alert("No fruit to add!");
else {
var lst = document.getElementById("lst_basket");
lst.appendItem(sFruit, "");
txt.value = "";
var iCount = lst.getRowCount();
var iIndex = iCount - 1;
lst.selectedIndex = iIndex;
return false;

function doDelete(){
var lst = document.getElementById("lst_basket");
var iIndex = lst.selectedIndex;
if (iIndex == -1) {
alert("No fruit to delete!");
else {
var iCount = lst.getRowCount();
if (iIndex == iCount) {
iIndex = iCount - 1;
lst.selectedIndex = iIndex;
return false;

function doClose(){
if (confirm("Close program?")) {
return true;
else {
return false;

[End of main.js]

View the list's information and change your settings at 

Other related posts: