Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
{scrollbar}

h1. Example: Hello World in XUL

...



All XUL files have the .xul extension, but are otherwise written in XML-compliant markup language. The DTD is pretty standard:

...



{code
}
<?xml version="1.0"?>
{code}

And you must define a style sheet as well (this one is the default):

...



{code
}
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
{code}

Now you must declare a window, which is the root element of every XUL object. The id and title attributes are the only things you should change if you are using the reference rendering engine:

...



{code
}
<window id="hello_world" title="Hello World" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
{code}

A text box is the most basic XUL element. By default, the box will be horizontally oriented. Within the box you can put buttons, fields, and text. In this example, it's a simple box with one button:

...



{code
}
<box>
<button id="Hello World!" label="Hello World!"/>
</box>
{code}

Then provide a closing tag for your window element:

...



{code
}
</window>
{code}

Now type this into your favorite XML editor and try it out. Then check out the XUL reference to experiment with other elements and attributes: [http://developer.mozilla.org/en/docs/Category:XUL_Elements]

{scrollbar}