Here we will create our first xul application on windows (it is the same in other OS). I expect you know nothing about xul but a bit familiar with javascript, css and xml or html tag format.

first of all download lastest version of xul runner from here or directly from here. At this moment the lastest version is xulrunner-1.9.0.10.en-US.win32.zip. Its important to download the win32 file from runtimes folder not the SDK!

1. create a folder and name it firstapp.

   I have created it in d:. Now extract the zip file in it, so you will have firstapp>xulrunner folder. Lets extend the firstapp folder and create below structure in it:
   

   d:\firstapp>
   

   - xulrunner    \\this folder is createdbyextracting the xulrunner-1.9.0.10.en-US.win32.zip file
   - defaults
   

   -preferences
   

   -prefs.js
   

   -chrome
   

   -content
   

   -main.xul
   

   -chrome.manifest
   

   application.ini
   

2. prefs.js

   This file is the one whom initialize your application so lets define our default page to load by following code. Our default page is main.xul and it is located at firstapp>chrome>content.
   

   1. pref("toolkit.defaultChromeURI", "chrome://firstapp/content/main.xul");

    

   pref%28%22toolkit.defaultChromeURI%22%2C%20%22chrome%3A%2F%2Ffirstapp%2Fcontent%2Fmain.xul%22%29%3B
   
   

3. chrome.manifest

   As you see in above code we set the default page path to "chrome://firstapp/content/main.xul". This path must be declared in chrome.manifest by adding the below line to it.
   

   1. content firstapp file:content/

    

   content%20firstapp%20file%3Acontent%2F
   
   Whereever we write chrome://firstapp/content/xfile the xulrunner know that it must look inside chrome>content for that xfile.

4. main.xul

   This is our main page which is located in chrome>content folder. Lets add some content to our main page
   

   1. version="1.0"?>
   2. -stylesheet href="chrome://global/skin/" type="text/css"?>
   3.  
   4. id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   5.      label="Hello World"/>
   6. >

    

   %3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%20%3C%3Fxml-stylesheet%20href%3D%22chrome%3A%2F%2Fglobal%2Fskin%2F%22%20type%3D%22text%2Fcss%22%3F%3E%0A%20%C2%A0%0A%20%3Cwindow%20id%3D%22main%22%20title%3D%22My%20App%22%20width%3D%22300%22%20height%3D%22300%22%20xmlns%3D%22http%3A%2F%2Fwww.mozilla.org%2Fkeymaster%2Fgatekeeper%2Fthere.is.only.xul%22%3E%0A%20%C2%A0%C2%A0%C2%A0%C2%A0%20%3Ccaption%20label%3D%22Hello%20World%22%2F%3E%0A%20%3C%2Fwindow%3E

5. application.ini

   This file used when running the application to set some default values and information for xulrunner. Add following lines to it:
   

   1. [App]
   2. Vendor=Arash Karimzadeh
   3. Name=First Application
   4. Version=1.0
   5. BuildID=20090622
   6. Copyright=Copyright (c) 2009 Arash Karimzadeh
   7. ID= This e-mail address is being protected from spambots. You need JavaScript enabled to view it
   8.  
   9. [Gecko]
   10. MinVersion=1.8
   11. MaxVersion=1.9.*

    

   %5BApp%5D%0AVendor%3DArash%20Karimzadeh%0AName%3DFirst%20Application%0AVersion%3D1.0%0ABuildID%3D20090622%0ACopyright%3DCopyright%20%28c%29%202009%20Arash%20Karimzadeh%0AID%3Dfirst%40app.org%0A%C2%A0%0A%5BGecko%5D%0AMinVersion%3D1.8%0AMaxVersion%3D1.9.%2A
   
   Change the Vendor and Name to whatever you want.
   *Remember to adjust the MaxVersion with your xulrunner version.
   *ID must be unique for this application. You can read more about it at mozilla website.

6. xulrunner-stub.exe

   This file is located in xulrunner folder. Copy this file to the firstapp folder and rename it to firstapp.exe. Now you can test what you have done by double clicking on it.

7. Lets check the folder structure again

   As you see after running the application for the first time to folders are added (extensions and updates).

8. Add script

   change the main.xul file to below code:
   

   1. version="1.0"?>
   2. -stylesheet href="chrome://global/skin/" type="text/css"?>
   3.  
   4. id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   5.      src="script.js"/>
   6.      label="Hello World"/>
   7. >

    

   %3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%20%3C%3Fxml-stylesheet%20href%3D%22chrome%3A%2F%2Fglobal%2Fskin%2F%22%20type%3D%22text%2Fcss%22%3F%3E%0A%20%C2%A0%0A%20%3Cwindow%20id%3D%22main%22%20title%3D%22My%20App%22%20width%3D%22300%22%20height%3D%22300%22%20xmlns%3D%22http%3A%2F%2Fwww.mozilla.org%2Fkeymaster%2Fgatekeeper%2Fthere.is.only.xul%22%3E%0A%20%20%C2%A0%C2%A0%C2%A0%C2%A0%20%3Cscript%20src%3D%22script.js%22%2F%3E%0A%20%20%C2%A0%C2%A0%C2%A0%C2%A0%20%3Ccaption%20label%3D%22Hello%20World%22%2F%3E%0A%20%3C%2Fwindow%3E
   
   Also add the script.js file to chrome>content folder and add below line to it
   

   1. alert('hi everybody');

    

   alert%28%27hi%20everybody%27%29%3B

9. Change style

   Replace the style tag in main.xul with below code
   

   1. -stylesheet href="chrome://firstapp/skin/style.css" type="text/css"?>

    

   %3C%3Fxml-stylesheet%20href%3D%22chrome%3A%2F%2Ffirstapp%2Fskin%2Fstyle.css%22%20type%3D%22text%2Fcss%22%3F%3E
   
   Lets create style.css which contains following code and add it to chrome>skin folder
   

   1. window, caption{
   2.             background: #fff !important;
   3.             color: #ccc;
   4.             font-size: 12px;
   5. }

    

   window%2C%20caption%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20background%3A%20%23fff%20%21important%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20color%3A%20%23ccc%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20font-size%3A%2012px%3B%0A%7D%0A
   
   also add below line to chrome.manifest file:
   

   1. skin firstapp classic/1.0 file:skin/

    

   skin%20firstapp%20classic%2F1.0%20file%3Askin%2F

10. Rerun the firstapp.exe

Tags: JavaScript | xul