Introduction

Welcome

Good morning, afternoon, evening, or whatever time it may be in your part of the world. This is the XUL Application Tutorial. (If you are looking for Geology 305 you wrong place; try down the hall and to the left.) This tutorial is designed to teach someone (you, the reader) how to create a simple (or not so simple if you desire) XUL-Based Application similar to what you will find in our download section, or over at mozdev.org.

This tutorial is written in my personal favorite tutorial format, in which the author creates an application (or birdhouse or nuclear submarine or whatever the tutorial happens to be about) and the reader is invited to follow along with his own version of the project at each step. In this case, I will be writing an application called XulNote, a simple text editor similar to windows notepad (and I'm sure an equivalent on other operating systems). At each step of the tutorial I will explain the needed changes and present the updated source files. It is my hope that each reader can follow along with a local copy of XulNote on his (or her) system, and update it with me at each step. I have found this to be the most effective way of learning a new skill, and believe it will be the most effective way of teaching it as well. Your millage may vary.

Requirements

In order to complete this tutorial, you will need a copy of Mozilla installed on your system, as well as some sort of a simple text editor. All the example code in this edition was written and tested for Mozilla 1.0, but it should work on any post 1.0 mozilla version as well.

There may be exceptions to this (like in section eight perhaps) but I will talk about that if and when it happens.

You can get a mozilla build (if you don't have one already) at mozilla.org.

Also, I highly recommend using mozilla to view this tutorial, as most other browsers won't display everything correctly.

Prerequisite

If you have had previous experience with XUL (or have read some of the other resources on XulPlanet) you may know that there is a lot more than just XUL involved in writing a XUL application. In order to complete a normal sized program, you would eventually have to be fluent in XML, JavaScript, CSS, RDF, DTD, DOM, XPCOM, XPConnect, JSLib, and other technologies. However, you will only need a working knowledge of the first three (i.e., XML, JavaScript, and Style Sheets) in order to start this tutorial. The remaining languages and technologies will be introduced as we encounter them in the process of building XulNote.

If you have not yet had any experience with XML, JavaScript, or CSS, I'd suggest that you find a quick tutorial on google and review them before proceeding. (Eventually we will have tutorials for them on XulPlanet, but we don't yet, so you'll have to find your own for now.)

Little Boxes

When I started on the first draft of this tutorial, I invented these little colored box things that I used for including more relevant information, interesting facts, or long tangents marginally related to the current topic of discussion. There are three kinds of box notes: Notes

This a what a note looks like. You'll see many of these throughout the tutorial

, Questions

This is a question. I only have like three of them in the entire tutorial right now, but I plan on adding a bunch more.

, and Warnings

This is a warning. It might be a good idea to check these out whenever you see them.

. The idea was that note boxes would contains extra information or interesting facts, question boxes would contain the common questions asked about that section (like an inline FAQ) and that warnings would contain warnings to help you avoid possible pitfalls in the development process.

The response to these has been quite positive, so I plan to continue to use them in this edition. However, due to numerous requests I have made it so that instead of linking to another page, the notes pop right up in the page you are currently viewing. (Try it now with the three boxes in the previous paragraph: hover over them to view the title, and click on them to open the note.)

If you have any comments on my use of these things, or the new way of displaying the information, let me know.

With all that out of the way, we can now move on and talk about XulNote in the next section.