How to make a Hello World application using XULRunner
Note: This page is still under construction
Contents
Introduction
This tutorial is designed for people who have never touched XUL or XULRunner before and allow them to create a Hello World application on XULRunner. This tutorial will guide users in such a way that it will show them how to create their first application without being overwhelmed with details.
This guide will also help start the new pioneers of XULRunner understand this technology and platform enough to begin more complicated applications.
Getting XULRunner package
To start off, you need to have the XULRunner package installed onto your computer. The packages can be found on this website http://developer.mozilla.org/en/docs/XULRunner
Setting up an application file structure
First set up the application file structure to the following:
/xulapp
/chrome
/content
/defaults
/preferences
For more information about this section please visit the following link: File/Folder Structure
Setting up the application.ini file
Create a file called application.ini in the xulapp/ directory.
The following is a sample application.ini file.
[App] Vendor=Mylau Name=Hello World Application Version=1.0 BuildID=20060101 Copyright=Copyright (c) 2006 ID=xulTestApp@mylau.org [Gecko] MinVersion=1.8 MaxVersion=1.8
To find more information about this file, click on the following link: application.ini File
Setting up the chrome.manifest file
Create a file called chrome.manifest in the xulapp/chrome/ directory.
For this example, the chrome.manifest file contains the following information:
content myapp file:content/
To find more information about this file, click on the following link: chrome.manifest File
Setting up the prefs.js file
Create a file called prefs.js in the xulapp/defaults/preferences directory.
The following was used for this simple application.
pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
The pref function needs to be passed in two arguments. The following bullets will illustrate what the two argument passed to the function pref() means:
- toolkit.defaultChromeURI is a preferences which allows a simple XULRunner-based application to open a new window
- chrome://myapp/content/main.xul is the location of the main XUL file.
To find more information about this file, click on the following link: prefs.js File
Creating some XUL
For the simplicity of this application, we're going to create a simple XUL window that says hello world.
Create a file called main.xul in the xulapp/content directory.
Write the following code into the xul file. This code will popup a XUL window with the words "Hello World"
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="300" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<caption label="Hello World"/>
</window>
Running the application
To run the application by typing
xulrunner application.ini
If you have trouble running the file, please go to the following link for details of how to run it in your specific operating system, How to run the application
After executing the command, you should get a popup screen like the one below.
Conclusion
Creating a Hello World application on XULRunner is not a hard task. Writing this application does not require a heavy knowledge of XULRunner but if developers would like to write their own program which is more complex, they should have a better understanding of XULRunner.
To get started, please take some time to learn about XULRunner. The following link provides a simple yet intuitive guide on XULRunner, XULRunner Guide.
