Introduction to XML User interface language (XUL) development

This article supporting source code

Before you start

This tutorial is useful for experienced web developers who are interested in desktop development and don't want to learn too much about new technology. XUL (sounds like cool) makes it easy to build desktop applications using Web development skills. It provides a rich set of UI parts that are used by all Web developers who are familiar with the syntax. With XUL, you can mix directly with HTML and use JavaScript extensively.

XUL is an xml-based language, so you need to be familiar with XML (especially XML namespaces). XUL is built on our familiar and favorite Web technologies: HTML, JavaScript, and CSS. If you want to use XUL effectively, you need to be familiar with these techniques. Using XPCOM can improve the functionality of XUL applications to a large extent. This is a technology similar to distributed computing technologies such as CORBA/IDL and COM. If you are familiar with these techniques, you will be helpful in learning xpcom, but not rigidly demanding.

About this tutorial

In this tutorial, you will learn the following:

Learn about the origins of XUL and its application in the Mozilla project.

Learn about the main benefits of XUL and its architectural design, and how to build desktop applications using existing Web application technologies.

Discover the Opportunities Firefox 3.0 presents to XUL developers.

Get a deep understanding of XUL and write a simple application to create, save, and publish blog entries. This XUL blog editor provides a wide range of basic text editing features and allows you to save drafts locally for later reloading and editing. The editor also adds the ability to draw XUL, which allows users to use the blog for electronic signatures.

Prerequisite

XUL is completely open source. To develop and practice this tutorial using XUL, you need to download:

XUL SDK

XULRunner

Firefox 3.0 (or later)

What are XUL?

XUL represents the XML UI language (XML User Interface Language). Because it is XML, XUL is a declarative language. XUL provides a rich collection of UI parts that can speed up the development process. It is a cross-platform language that can build its own XUL application on Linux™ and then run the program on Windows®. XUL uses a lot of web technology, such as JavaScript and cascading stylesheets (CSS). You can even integrate HTML directly into a XUL application. Learn more about XUL and why it becomes a much-watched development platform.

XUL History Playback

XUL is synonymous with Netscape and Mozilla Foundation. The original intent of Netscape's browser was to be a Cross-platform browser. This requires separating the UI framework from the operating system-specific layout and control parts. You also need a way to communicate these detached elements with local processes (for network connections, file I/O, and so on). All of these elements are necessary to build a cross-platform application that can collaborate with HTML and Web elements. This framework is called XPFE (Cross-platform Front-End) and is used to build Netscape Communicator and other products of the series, such as its email and chat clients.

You may be familiar with the development process of Netscape company. The company's IPO in 1995 marked the beginning of dot-com's brilliant start. Until 1998, the company had made some important technical achievements although it had not been financially successful. The core of these achievements is the Mozilla project. This is the start of a public release of the code from Netscape Communicator 4.0 after obtaining open source licenses. It turns out that this code base is difficult to develop and maintain, but fortunately, there are good aspects in their plans. Netscape not only allows the existing Communicator open source code, their next generation of layout engine code is open source. This layout engine will become a Gecko. One of its important functions is to support declarative, xml-based UI language, or XUL.

Xul:xml, JavaScript, and CSS

XUL is a private UI language built for the Gecko engine. It is favored by developers of Web browsers based on Gecko. This is because it is built on standard technologies such as XML, JavaScript, and CSS.

XUL is an XML language. This makes its syntax simple and easy to read (and parse)! XUL has a lot in common with HTML, so web developers are familiar with it. It even allows XHTML elements to be mixed with XUL parts. XUL has proved in many ways that XML is ideal for creating UI languages, as can be seen from the advent of similar languages. For example, the MXML from adobe™ (the UI language in the Adobe Flex framework) and the XAML from Microsoft® (the UI language in. NET 3.0 and Windows presentation Foundation).

Of course, declarative programming has inherent limitations. It inevitably requires some mandatory programming. XUL directly supports JavaScript, rather than inventing a new language or creating some xml-based syntax. Now JavaScript is often negatively evaluated as a programming language. JavaScript is considered a language suitable for non-programmers, and is full of browser-specific extensions and features. However, JavaScript is a powerful language, and it is the backbone of web application development. After all, JavaScript is the "J" in Ajax. It's a functional programming language, but it's easy to use in a process or object-oriented way. XUL treats JavaScript as a desktop programming language and places it in the front. XUL is also very dependent on DOM implementations in JavaScript-after all, XUL is xml-based.

Another important aspect of XUL for Web development is CSS. CSS has become the de facto standard for adding styles to Web pages. Its cascading features are powerful and flexible, allowing styles to be applied to objects and child objects, as well as allowing them to override styles as needed. XUL applies this functionality and flexibility to desktop applications.

Another common point of JavaScript and CSS is that their behavior can vary depending on the browser. Browser sniffing is very common in JavaScript, so programmers can write the same function in multiple implementations of browser types and versions that are based on the user's use. The use of conditional styles in CSS also has the same characteristics. If you have done a lot of web development, you may have encountered these browser quirks. If this is the case, you will enjoy programming with XUL. Why, then? Because you only need to consider a browser when using XUL. It's like developing web apps all over the world using Firefox.