Investigation on XUL

Due to my working requirement I spent several hours on Mozilla XUL, as I have many years experience on HTML, XML, CSS and JavaScript, the learning process is not very painful, I record my effort in this post, FMFI (for my future information~~Smile).


XUL (pronounced /?zu?l/ “zool”), the XML User Interface Language, is an XML user interface markup language developed by the Mozilla project. XUL operates in Mozilla cross-platform applications such as Firefox and Flock. The Mozilla Gecko layout engine provides an implementation of XUL used in the Firefox browser.[1]

I mainly learnt from Mozilla MDC and I summarized useful links below:

Wiki page:
Getting started with XULRunner
XUL References
Debugging a XULRunner Application

Hello World step by step

I am using Windows 7 Ultimate 64 Bit so I took Windows as example, XUL is definitely cross-platform (Mac, Linux).

  1. Download XULRunner for Windows from here:
  2. Unzip the package to anywhere you want, I take “%UserProfile%\Desktop\XUL\XULRunner” for example.
  3. Follow this Guide and download “myapp” under %UserProfile%\Desktop\XUL, screenshot below:
  4. Use any text editor open “%UserProfile%\Desktop\XUL\myapp\chrome\content\main.xul” and “%UserProfile%\Desktop\XUL\myapp\chrome\content\main.js”.
  5. Run XULRunner with parameter pointing to your application.ini to run this XUL instance.

    Invoke XULRunner from command line

All done, I show my simple demo code below:


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

<window id="main" title="Login Demo" width="400" height="300" xmlns="">
  <script type="application/javascript" src="chrome://myapp/content/main.js"/>

  <caption label="Login Demo"/>
    <lable value="User Name: "/>
    <textbox id="txtUid" maxwidth="400" maxlength="10" />
    <lable value="Password: "/>
    <textbox type="password" id="txtPwd" maxlength="10" />
    <button id="btnLogin" label="Login" oncommand="doLogin();" width="300" />
    <label id="lbl" value=""  />

  <separator />


function $(id) {
return document.getElementById(id);

function doLogin() {
var lbl = $("lbl");

lbl.value = "Your user name: " + $("txtUid").value + ", your password: " + $("txtPwd").value;

My XUL Demo

My XUL Demo

My XUL Demo

Happy coding:)