The XulNote Application

The first XUL Application you will ever write

The Application

As I mentioned in the introduction, I am writing this tutorial in the "follow along with the author's project as you read through it" style. The application I will be creating is a simple text editor called XulNote. In the next section, we'll start by creating the initial project files and registering the package, and in each future section we'll add various features to the program so that you can learn how to use these features in your own programs.
You'll notice that I used to word "we" back there. That is because I really hope that most of the readers really will follow along with their own version of XulNote as we do this. If the second person bothers you, you should probably just learn to live with it because I do it a lot more throughout the rest of this tutorial.
At each step I will first talk about what we are going to do, and then present the code additions or changes required to do it. You are invited to maintain your own version of the XulNote application on your computer, and update your project files at each step so that the two remain in sync. This is not necessary for sure, but is highly recommended if you really want to learn how to do this stuff.

The Disclaimer

There is one thing I need to mention about XulNote though. Although we will be adding cool features to XulNote at each step, the application will never quite be something you could use as a real text editor. This is for two reasons. The first is that there are several bugs in the XUL textbox implementation that prevent everything from working the way it should . The second is that in order to teach people how to use them, I will eventually add several features to the app (like a toolbar) that you really wouldn't want in a simple text editor. Remember that while XulNote is a perfectly functional application, its primary purpose is as a teaching aid, not a notepad replacement. (I have no idea why I feel obliged to include this information in the tutorial, but I guess I feel bad that I wasn't able to make the final version of XulNote into something you could really use.)

The Source Code

After I have finished talking about whatever changes we are going to make in a given section, I will then present the corresponding source code, in a code box that looks like this:

Example 2.3.1
Hello World Program
<?xml version="1.0"?>

<window xmlns=""

  <description value="Hello World"/>


Usually the source code in the box won't actually run stand alone (because it's part of the larger XulNote application) which is why there isn't a "View" link like you might find in some of the other tutorials on XulPlanet.

When the code box is showing modifications, I will have the new or changed code highlighted in yellow so you can see it. Also, I usually put anything specific to the XulNote application in red, to make life easier on you if you are coping my example code out to another project.

The Archives

Because manually copying all my source code out of example boxes is both time consuming and error prone, I have created what I call the "Zip Archives" to make your life easier. At the end of each modification step I will include a link to a zip file containing the entire XulNote directory exactly as it looks like at that point. Therefore, as long as you complete that package registration in section three, you should be able to just drop in the zip archive from any section and have a working version of XulNote on your hard drive for that section. Let me know if you experience any problems with this.

In the next section, we'll write the initial program code and register the new package.


Copyright © 2002