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:)


About Wayne Ye
Wayne is a software developer, Tech Lead and also a geek, he has more than 6 years experience in developing Web/Windows based applications using ASP.NET, HTML/CSS, JavaScript/AJAX, Web Service, Silverlight, Winform, WPF, Win32 API/WMI, he also invests tremendous effect in GOF Design Patterns, S.O.L.i.D principle, MVC, MVVM, Domain Driven Design, SOA, HTTP/REST and AOP. In his spare time, he likes writing tech/life blogs on, and separate time with his dear wife and lovely son. Wayne's Geek Life Infinite passion on programming.

One Response to Investigation on XUL

  1. Hello to all, how is the whole thing, I
    think every one is getting more from this site, and your views are pleasant
    for new visitors.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: