How to Create a Template in XUL

XUL Templates can be used to create applications on the Mozilla platform.

XUL, or XML User Interface Language, is a language that can be used to create applications and user interfaces for the Mozilla platform. XUL allows developers to create graphical user interfaces that mix technologies such as XML, HTML and CSS and can run either connected or disconnected from the Internet. XUL templates allow developers to embed data in XUL documents by defining a set of rules that are used to build applications that take advantage of remote data sources, separating data from the application itself.

Things You'll Need

• A Web browser based on the Gecko layout engine, such as Firefox or Camino
• Text editor

Instructions

How to Create a Template in XUL

1. Open a text editor and create a new file called characters.xml. Type some XML in the file that defines a root element <characters> with five <character> child elements:

   <?xml version="1.0"?>

   <characters>

   <character></character>

   <character></character>

   <character></character>

   <character></character>

   <character></character>

   </characters>

   The <characters> XML will be used to populate a list defined in the XUL template. Save characters.xml.

2. Edit characters.xml and add a name attribute and an animal attribute to each of the character XML elements, placing the attribute values inside double quotes:

   <?xml version="1.0">

   <characters>

   <character name="Mickey" animal="mouse"></character>

   <character name="Minnie" animal= "mouse"></character>

   <character name="Pluto" animal="dog"></character>

   <character name="Donald" animal="duck"></character>

   <character name="Daisy" animal="duck"></character>

   </characters>

   Save and close characters.xml.

3. Use a text editor to create a file that contains the XUL template. Type the XML version header and a <window> element inside the file and add a default xmlns name space to the <window> element:

   <?xml version="1.0"?>

   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

   </window>

   Save the file as characters.xul.

4. Continue editing characters.xul and add a <listbox> element to the file, placing it between the <window> and </window> element tags. Use a data source attribute to indicate that the list box should get its data from characters.xml. Set the ref attribute to "*" (dummy value) and the querytype attribute to "xml" to tell the template builder that XML syntax will be used. Close the </listbox> element:

   <?xml version="1.0"?>

   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

   <listbox datasources="characters.xml" ref="*" querytype="xml">

   </listbox>

   </window>

   Save characters.xul.

5. Continue editing characters.xul and add a <template> element to the file, placing it between the <listbox> and </listbox> element tags. Add a <query> element between the <template> and </template> element tags, using the expr attribute to retrieve the character elements from the characters.xml file. Close the query tag:

   <?xml version="1.0"?>

   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

   <listbox datasources="characters.xml" ref="*" querytype="xml">

   <template>

   <query expr="character"></query>

   </template>

   </listbox>

   </window>

   Save characters.xul.

6. Continue editing characters.xul and add an <action> element to the file, placing it after the <query> element. The <action> element contents will define the content that will be generated for each query result:

   <?xml version="1.0"?>

   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

   <listbox datasources="people.xml" ref="*" querytype="xml">

   <template>

   <query expr="character"></query>

   <action>

   </action>

   </template>

   </listbox>

   </window>

   Save characters.xul.

7. Continue editing characters.xul and add two <listitem> elements between the <action> and </action> element tags. Use the label attribute to indicate that the first list item should use the "name" attribute from the character elements in characters.xml. Use the label attribute to indicate that the second list item should use the "animal" attribute from the character elements in characters.xml. Add a uri attribute to both list items, using the value "?", which is the default value for XML templates:

   <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

   <listbox datasources="people.xml" ref="*" querytype="xml">

   <template>

   <query expr="character"></query>

   <action>

   <listitem uri="?" label="?name"></listitem>

   <listitem uri="?" label="?animal"></listitem>

   </action>

   </template>

   </listbox>

   </window>

   Save and close characters.xul.

8. Use a Mozilla browser, such as Firefox, to open characters.xul. Verify that the contents of characters.xml are loaded into the list box defined in the xul template.

Tips & Warnings

• XUL templates can retrieve data from non-XML based sources, such as RDF and databases. Use the source that is most appropriate for the application you are building.

• XUL provides a rich variety of user interface components. Try using other XUL user interface objects to build more advanced applications.

• Since XUL applications are platform-neutral, they can be ported to other Mozilla platforms. See the references section for information on building XUL applications.

• When using XUL on a website, the server must be configured to send XUL files with the appropriate content type.

References

• Mozilla: XUL Template Primer
• MDN: The Joy of XUL
• MDN: XML Templates
• mozdev: Chapter 2.Getting Started/Simple XUL Example

Resources

• MDN: XUL Structure
• Mozilla 1.0: The Mozilla Toolkit
• mozdev: Creating Applications with Mozilla
• MDN: XUL