An Introduction to XUL Part 1 - Adding buttons
(Page 4 of 4 )
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="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">
<button label="I am a button!"/>
</window>
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.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
