All I’ve talked about so far are elements; interface elements and layout elements.  What I haven’t mentioned yet are content elements.  We’ve seen buttons, labels, controls etc, but nothing in which to actually store content.  What that content actually is depends on what the application does, for a browser, such as Mozilla, the main content is HTML pages.  As XUL came around in order for Mozilla to actually be constructed, HTML pages are easily displayed using an iframe element.  To test this out fully, you’ll need a web page to display.  You could create one of your own, or to save yourself some time you could work with something that’s already out there.

What I did was to go to the Google homepage (because it has a relatively simple homepage but features many links and has some functionality) in a browser, and save the page as google.htm to my XUL directory.  Do whatever you want, but get an HTML file that at least has links to other pages on it.  Now, create a basic window (I mean add the opening and closing window element to a blank text file with the necessary namespace) with nothing in it except the following line of code:

<iframe src="google.htm" flex="1"/>     

Note that the attribute must be included, or the page will not open within the iframe.  Now, save it as iframe.xul or similar and then execute it with the command line.  Your window should appear with the Google homepage loaded in it.  The links should work and you can even do actual searches with it.  You’ve just created a browser, with just a couple of lines of code!  If your window is smaller than the size of the page you’ve selected for this example, Mozilla will even include working scrollbars for you, with no additional code.  You’re not restricted to displaying just web pages either, change the src attribute of the iframe to one of the XUL files you’ve already created and watch in awe as that is loaded just as easily.  It will even render simple text files, which you can prove by changing the src to a file ending in .txt.  The files that you’re opening should be located in the same directory as the iframe.xul file, or should include the full path to them if they’re not.

I feel it appropriate to mention at this point that true to its XML roots, XUL is also able to work with and process HTML tags and render them within its windows accordingly.  In order to use the tags that it supports you need to make sure that the XHTML namespace is imported.  This requires the addition of the namespace to the opening window tag, and an HTML prefix preceding each HTML element you wish to use.  Create the following file for confirmation of this:

<html:div>
  This is HTML!
</html:div>
<html:ol>
  <html:li>This is an html list item!</html:li>
  <html:li>So is this!</html:li>
</html:ol>

</window>

So you see, there are several very basic ways to include content within your XUL files.  The next article introduces RDF, and explains how more complex elements can be access via a chrome URL from within Mozilla to give added functionality and power to your XUL applications.