Chapter 4

Primer for building a XUL Interface

“Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan.” – Eliel Saarinen, “Time”, July 2, 1956

After brushing up on XML and Cascading Style Sheets, you should now be ready to jump right in to building your first XUL interface. This chapter is a primer on building an XUL interface. You will find that when building our application we used most of the common XUL elements. We will also show you how XUL, HTML, and JavaScript interact within our XUL application.

Our application will be a business asset management program. This type of application is used to store information about assets, such as computers, that are bought for a business. Typical data sets that could be stored are the manufacturer, model, serial number and cost. This sort of information is needed when justifying the tax liability for a business. It is also a prime example of a user interface because we may incorporate text fields, radio buttons, checkboxes, menus, and drop down lists. Figure 4.1 shows the main interface for our application.

We will build an easy application using simple XUL interface components in this chapter. This is simply to give you an idea as to how XUL interface components are created and then displayed. In succeeding chapters, Chapters 9 and 10, we go in depth to building more complex XUL interfaces. These chapters are case studies on how to build a customized browser portal and an e-commerce interface.