XUL Tutorial - Adding HTML Elements

In addition to all of the XUL elements that are available, you can also add HTML elements directly with-in a XUL file. You can actually use any HTML element in a XUL file, meaning that Java applets and tables can be placed in a window. Remember that XML is case-sensitive though, so you'll have to enter the tags and attributes in lowercase.

You should avoid using HTML elements in XUL files if you can. However, this section will describe how to use them anyways.

In order to use HTML elements in a XUL file, you must declare that you are doing so. This way, Mozilla can distinguish the HTML tags from the XUL ones. The attribute below needs to be added to the window tag of the XUL file. There are actually other ways to do it, but this is one of the simplest.

This is a declaration of HTML much like the one we used to declare XUL. This must be entered exactly as shown or it won't work correctly (although some variations can be used). The URL used points to the document that describes HTML (In this case, version 4.0). Note that Mozilla does not actually download this URL, but it does recognize it as being HTML.

Let's add this to our find file window. The code in red below shows the changes.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="findfile-window"
    title="Find Files"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" class="dialog" value="Find" default="true"/>
  <button id="cancel-button" class="dialog" value="Cancel"/>

</window>

Then, you can use HTML tags as you would normally, keeping in mind the following:

You can use any HTML tag although some such as head and body are not really useful. Some examples of using HTML elements are shown below.

These examples will create an image from the file banner.jpg, a checkbox and a single-cell table. You should always use XUL features if they are available and you probably should not use tables for layout in XUL. (There are XUL elements for doing layout). Notice that the prefix html: was added to the front of each tag. This is so that Mozilla knows that this is an HTML tag and not a XUL one. If you left out the html: part, the browser would think that the elements were XUL elements and generate an error because img, input, table, and so on are not valid XUL tags.

You can also place XUL elements inside HTML tags. You could use them to lay elements out, much like tables are typically used for complex HTML layout, however you shouldn't do this. XUL has its own elements for layout as we'll see in later sections.

In XUL, you can add labels with the text element. You should use this when you can. However, it does not wrap the text onto multiple lines. You can also add labels to controls either by using the HTML label element, or you can simply put the text inside another HTML block element (such as p or div) as in the example below.

This code will cause the text 'Search for:' to be displayed, followed by an input element and an OK button. Notice that the XUL button can appear inside the HTML elements, as it does here. This is true of all XUL elements. Feel free to intermix them as you need to. There is one restriction however. Plain text will only be displayed when placed inside an HTML element that would normally allow you to display text (such as a p tag). Text outside of one will not be displayed. Unless the XUL element the text is in allows this (the text element, for example). The examples below may help.

Examples of HTML elements

What follows are some examples of adding HTML elements to windows. In each case, the window and other common information has been left out for simplicitiy.

In this case, one p tag was used to place the text in and another was used to break apart the text into multiple lines.

As can be seen in the image, the text inside the div tag was displayed but the other text (Expense Report 1 and What I Did Last Summer) was not. This is because there is no HTML or XUL element capable of displaying text enclosing it. To have this text appear, you would need to put it inside the div tag, or enclose the text in a text tag.

All three of the cases above will not display, each for a different reason. Note that the entire window will not display if an error occurs.
Case 1: po is not a valid HTML tag and Mozilla has no idea what to do with it.
Case 2: div is valid but only in HTML. To get it to work, you will need to add the html: qualifier.
Case 3: A text element is only valid in XUL and not in HTML. It should not have the html: qualifier.

Adding Elements to the Find File Dialog

Let's add some more text to our find file dialog. Below, we'll add some descriptive text before the label we added earlier. This text will appear across the top of the dialog. We'll also add a div tag to split the elements onto a separate line.

<html:div>
  <html:div>
    Enter your search criteria below and select the Find button to begin   
    the search.
  </html:div>

  <text value="Search for:"/>
  <textfield id="find-text"/>

</html:div>

  <button id="find-button" class="dialog" value="Find" default="true"/>
  <button id="cancel-button" class="dialog" value="Cancel"/>

[Image of Find Dialog with a descriptive label]

Notice in the image how it is split into two lines between the descriptive text and the text field label.

You may have noticed that we haven't been too concerned about specifying the positions and sizes of the elements. Normally, this will be handled automatically. Take a look at the find files dialog now as in the image above. You will noticed that the four elements have been laid out from left to right. First the label, then the text field and then the two buttons. The window has also sized itself to fit the elements inside it. Each time we added a new element, the window will grow to fit its elements. We'll discuss methods of sizing elements and laying out a window in more detail in a later section.

Soon, we'll get rid of this change and use XUL elements only.

(Next) Next, we'll learn some basic ways to position and size elements without resorting to HTML techniques.