Home arrow XML arrow Page 4 - An Introduction to XUL Part 1

Adding buttons - XML

Would you like to learn how to make rich user interfaces with nothing more complicated than a text editor? Welcome to XUL, a subset of XML used to describe user interfaces. This article will get you started.

  1. An Introduction to XUL Part 1
  2. Getting started
  3. Follow the rules
  4. Adding buttons
By: Dan Wellman
Rating: starstarstarstarstar / 22
May 23, 2005

print this article



So, moving back to your first XUL window, you might now want to add some buttons. Buttons are added using the button tag, and have quite a few attributes that you can use.  Modify the XUL file like this:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="MySecondWindow" title="My First XUL Window with buttons!"   width="400" height="300" screenX="50" screenY="100"   xmlns="
  <button label="I am a button!"/>

And save it as myFirstWindow2.xul, then use the command line to execute it. Iíve called the file myFirstWindow2 instead of mySecondWindow to make it easier for you to type on the command line. As long as you have stored the file in the same directory as the first, you can just press the up arrow on your keyboard to copy the command, and then modify myFirstWindow to myFirstWindow2. When youíre testing out these little files for any considerable time period, this will be a godsend, trust me! The first window file you saved can now be used as a basic template that you can open in Notepad when you design a new window, to save you having to type out the declaration and root element each time.

You should now have a similar window with a big button on it.  To add an image to this button, you could use the following code:

<button label="I am a button with an image on it!" image="xul.jpg"/>

A similar button to the first one should appear when the file is executed, and the image it contains will be located to its default left placement.  The placement of the image can be adjusted so that the image appears to the right, above or below the text by using optional attributes:

<button label="I am a button with an image on it!" image="xul.jpg" dir="rtl" />

Would place the image to the right of the text;

<button label="I am a button with an image on it!" image="xul.jpg" orient="vertical"/>

Would place the image above the text, and;

<button label="I am a button with an image on it!" image="xul.jpg" orient="vertical" dir="rtl"/>

Would place it below the text. The next article will include information on some more of XUL's basic element tags.

>>> More XML Articles          >>> More By Dan Wellman

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: