Open main menu

CDOT Wiki β

Changes

How to do a Hello World application using XULRunner

478 bytes removed, 00:56, 10 December 2006
spelling error
'''Note: This page is still under construction'''
 
== 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 users how to create their firstapplication without knowing the details.
 
This guide will also help guide the new pioneers of XULRunner understand XULRunner enough so that they are ready to take on more more complicated applications.
== Setting up an application file structure ==
First set up the application file structure to the following:
/''applicationName''xulapp /chrome /''applicationName''content main.xul ''your app files'' chrome.manifest /defaults /preferences prefs.js application.ini
This file structure is used on a Linux platform. If your using a different platform, For more information about this section please visit the following link: [[http:File//developer.mozilla.org/en/docs/XULRunner:Deploying_XULRunner_1.8 Deploying XULRunner 1.8Folder Structure]] to find the file struture for your specific platform. '''Notes:''' Users can change the name of the italicized filename and folders
== Setting up the application.ini file ==
 
XULRunner first looks at the application.ini file located at the root directory. This file contains metadata which tells XULRunner how to run the application properly. This fype typically contains [Heading] and Key=Values. Also, Lines which begin with characters "#" or ";" are treated as comments.
 
The application.ini file contains two sections. They are the following with surrounding square brackets:
 
'''[App]''' Section - This section of the file contains data about the application
<table style="width: 100%;" class="standard-table" cellborder=1 border=1 cellpadding=2 cellspacing=0>
<tr>
<td width="10%"> '''Key'''</td>
<td> '''Value'''</td>
</tr>
<tr>
<td>Name</td>
<td>Name of the application.</td>
</tr>
<tr>
<td>Version</td>
<td>Version of the application.</td>
</tr>
<tr>
<td>BuildID</td>
<td>This is the build ID which is unique. Typically this field is a date</td>
</tr>
<tr>
<td>ID</td>
<td>Unique ID of the application.</td>
</tr>
<tr>
<td>Vendor</td>
<td>This is the vendor of the application which is an optional field.</td>
</tr>
</table>
 
 
'''[Gecko]''' Section - This section contains information about what version XULRunner is needed for the application.
<table style="width: 100%;" class="standard-table" cellborder=1 border=1 cellpadding=2 cellspacing=0>
<tr>
<td width="10%">'''Key'''</td>
<td>'''Value'''</td>
</tr>
<tr>
<td>MinVersion</td>
<td>The minimum XULRunner version this application supports.</td>
</tr>
<tr>
<td>MaxVersion</td>
<td>The maximum XULRunner version this application can run on.</td>
</tr>
</table>
 
The following is a sample '''application.ini''' file.
MaxVersion=1.8
</pre>
 
 
To find more information about this file, click on the following link: [[application.ini File]]
== Setting up the chrome.manifest file ==
The chrome manifest is used by XULRunner to locate the application resources. The application can be distributed using a compressed JAR file. For this example, the chrome.manifest file contains the followinginformation:
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 ==
The prefs.js file tells XULRunner which XUL file contains the main window. The following was used for this simple application.
pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
:*'''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 similicity simplicity of this application, we're going to create a simple XUL window that says hello world.   Open the file, "main.xul". This file is located in the following location: /myapp /content main.xul Write the following code into the xul file. This code will popup a XUL window with the words "hello world" 
<pre>
<?xml version="1.0"?>
== Running the application ==
To run the application, type the following:by typing xulrunner application.ini
If your on Windows:
xulrunner.exe application.ini
If you have trouble running the file, please go to the following link for details of how to run it in your on Linuxspecific operating system, [[How to run the application]]  After executing the command, you should get a popup screen like the one below. [[Image:XULRunner - My App screenshot.png]] == Conclusion == Creating a Hello World application on XULRunner isn't a hard task. xulrunner Writing this applicationdoes not require a heavy knowledge of XULRunner but if developers choose to write more complex programs should have a better understanding of XULRunner.ini
If your on Mac:
/Library/Frameworks/XUL.framework/xulrunner-bin application.ini
Make sure your in the application level of the To get started, please take some time to learn about XULRunner application. The following link provides a simple yet intuitive guide on XULRunner, [[XULRunner_Guide_Outline | XULRunner Guide]].
== References ==
*[[XULRunner_Guide_Outline | XULRunner Guide]]
*[http://blogs.acceleration.net/ryan/archive/2005/05/06/1073.aspx XULRunner Tutorial]
*[http://developer.mozilla.org/en/docs/Getting_started_with_XULRunner Getting started with XULRunner]
*[http://developer.mozilla.org/en/docs/XULRunner:Deploying_XULRunner_1.8 Deploying XULRunner]
*[http://developer.mozilla.org/en/docs/XUL_Application_Packaging XUL Application Packaging]
1
edit