subscribe: Posts | Comments

Introduction to XUL through the Mozilla framework XPFE

HTML clipboard

I. Introduction
I chose to tell you about a technology that is both innovative, multi-platform, open and free: the Mozilla framework. This framework consists mainly the Gecko engine, the API XPCOM, language XUL, and several standardized technologies integrated by the Mozilla community. Let me add my opinion (impartial, I hope) and my feedback to give you a better vision of this new technology.

II. Code name: XPFE
Welcome to the world of XPFE (Cross Platform Front End), created by the Mozilla Foundation. This technology is relatively little known to the public and professionals, at least under this name, because now everyone else knows Firefox, the browser fully achieved through this technology.

The aim of the framework, as I'll describe later in the document is to provide tools for application development. You can use XPFE to create software with the line of sight use existing standards like XML, RDF, HTML, CSS, JavaScript, and so on. Other attractions not negligible, the specific code to write for each platform is minimized and XPFE is available for Linux, Mac and Windows.

III. The genesis
Like any project, developed XPFE was to meet a need. It must be seen in the original context for better understanding. Between 1995 and 1998, war rages between two browsers: Microsoft Internet Explorer and Netscape Communicator. As Internet Explorer will slowly take the place of the Netscape browser. This increase is mainly due to the growing success of the operating system Microsoft Windows.

At the end of 1998, Netscape is out of breath and be redeemed by AOL (American Online). Internet Explorer represents 96% of the market for browsers. In response, former Netscape employees, motivated to continue the adventure, decided to open the source code of their application fetish the Open Source community. The project is called Mozilla and then takes a new face.

info Mozilla – contraction of "Mosaic" and "Godzilla" – is the code name Project Netscape Communicator.
This group of people formed "The Mozilla Foundation" whose aim is to provide an identity for the project, representing a major Open Source communities. The idea is to develop an Internet browser (Firefox) and an e-mail client for a new generation (Thunderbird).

The objectives are many and the project inherits Netscape experience:
* Open Source Licensing
* Multi platform
* Respect maximum standards approved W3C
* Re-use code between different applications
* Language Interface high-level


IV. A framework
XPFE, as its name suggests, allows applications to develop multi platforms. It includes several languages and protocols, each trying to make his own unique task at best, in the logic of UNIX. Parcourons this framework, diapers to low levels of high level.

Gecko is the heart of the system. It manages the graphics to be presented to the user and incorporates several features:
* Renderer
* Engine DOM
* The implementation of CSS and management styles

It was designed to support Internet standards, W3C. It includes, in its current version 1.8.1:
* HTML 4.0
* CSS Level 1 (and partial support versions 2 and 3)
* JavaScript 1.7 (ECMAScript)
* DOM Level 1 and 2 (and partial support DOM 3)
* XML 1.0
* XHTML 1.1
* MathML
* XForms

Constant efforts are made to integrate the new standards in new versions. The next version of Gecko (1.9) – which will be integrated into Firefox 3 – will be more efficient and will be revised to be better structured.

info Gecko is a brick software framework Mozilla, and as such it can be used as such in other applications: Camino, Flock, SeaMonkey, XulRunner use Gecko.

2 The roadmap of the version 1.9 is detailed

This is the layer most complex and most powerful of the framework. XPCOM 3 (Cross Platform Component Object Model) includes a library management components: each can add its own component has its own features to be used in the final application.

info Examples component nsFile who can read, write and edit files on the hard drive.
Mozilla offers users the framework all the components they use for their applications: there are a total of more than 2 000.
There is therefore more than write the code that allows you to choose and use these "bricks" software already ready: great!
For aficionados of Windows, Microsoft embarked on this technology for years with the Commission, formerly known as OLE (Object Linking and Embedding).

The possibilities of XPCOM are:
* Write code multi platform: the same source code can run on Windows, Mac and Linux. The components "scripted" (JavaScript and Python) will run natively, other components (C + + for example) need to be recompiled under the platform to bear. The code portability is the main objective of XPCOM.
* Write reusable code: there are features identical between different applications (reading devices, opening files, network connections …), so why not write once, and then share them? It always wins: updates shared, saving time and separation of the components of software …
* The separation of functions of components small, we know exactly what each component is capable of doing and we can not write a line of code, develop its application. Ideal for architects!
* Create a bridge of communication between different languages supporting XPOM: JavaScript, C, C + +, Python, Java. A component written in a language is available in all the others!

info One can imagine a component written in C + + implementing a network protocol (simply because the library is available only in this language) and use another program written in Python
Let us look for the most curious how this is possible!


Firstly, we must assimilate the design of components and interfaces.
An interface is the public part of the component: it shows that the component contains and can be done. It is neither more nor less than its description. This fits completely in the logic object. For example, I am a car, I have a color, size, a motor (attributes) and I know roll, brake, turn (methods). This description is written in the language describing IDL (Interface Description Language), used inter alia with the language CORBA. Its sole purpose is to describe an interface.

Regarding the implementation now, it can be done in several languages (C, C + +, Javascript, Python). The compiler "xpidl" we facilitate this task by providing us with all the necessary files from a file IDL: there is no more than write the code that implements the features described.


info In this example, Peugeot, Renault and Porsche will implement a car: they will add attributes (wheels, steering wheel, engine…) and actions will be possible on this car (roll, turn, accelerate…). To use the car, I did not necessarily need to know how it is implemented… or more prosaically be a mechanic.
For all these components can run on all platforms, Mozilla has defined types of variables at IDL, and has implemented an engine including the implementation of these types for each architecture and each language. The advantage is that a variable whole C + + may be increased in layer XPCOM and will be understood as an integer Python.

Example: Here is the description of the interface nsIToolbar "which can create a toolbar. We discovered that the components that implements can add and retrieve items in this bar:
nsIToolbar interface: nsISupports (
Readonly attribute boolean visible;
Int attribute margin;
HorizontalLayout attribute boolean;
LastItemIsRightJustified attribute boolean;
Attribute boolean wrapping;
AddItem void (in nsIToolbarItem anItem, in int aLeftGap, in boolean stretchable);
InsertItemAt void (in nsIToolbarItem anItem, in int aLeftGap, in boolean aStretchable, in int anIndex);
void GetItemAt (out nsIToolbarItem anItem, in int anIndex);
A single interface can have several components, made in different languages or architectures. The software architect can freely describe what they need, and developers can then write components in their language of choice.

Now we know that we can display pages XUL or HTML with CSS (Gecko), and that we have the bricks functional (XPCOM). It remains to be seen how the link between these two worlds. How can I call these components XPCOM in my application?

VI. Script Layer
As its name indicates, this layer is developed in the form of scripts. Two languages – script, of course – are used: Javascript and Python.
This part of the framework is the most accessible to users. Do regard as scripts, no compilation is requested by the user… for his greatest happiness.
Info imagine that I am working on a page XUL, and that I change the content (the text of a button, for example): I have to close this window and reopen before the changes are taken into account! This is exactly as if I rechargeais a page of a website.
This layer and allows access via scripts, the previous layers: Gecko and XPCOM.

Here is an example of a method to call XPCOM component since Javascript. Here, I declare a variable "sound" which will instantiate component "@ / sound; 1"
var sound = Components.classes [ "@ / sound; 1"]. createInstance ();

In this instance, we will associate the appropriate interface: "Components.interfaces.nsILocalFile" which corresponds to the interface developed by Mozilla.
sound.QueryInterface (Components.interfaces.nsILocalFile);

Now I can play a sound from Javascript, with the "play ()" component. The variable "url" is recovered from the component "@ / network / standard-url; 1"
url.spec = ''; (URL);

Awesome! I can play sounds in my application and universally… to 6 lines of code! This seems so simple that I propose to you now understand how to involve users events (mouse, keyboard…) to these scripts.

VII. UI Toolkit
It now has 3 interfaces available: Windows, Mac and Unix. For each of these worlds, we must in each case at least 3 engineers to develop the same functionality (for example, display a button).

Mozilla offers a solution that is used to describe the graphical interface of its application to be natively compatible on 3 environments.
From this need was born on XUL language. It is a description in XML format to write graphical user interfaces. Hence the name of XUL for XML User interface Language.
XUL therefore allows to describe graphical user interfaces in text files, they may contain widgets (buttons, bars, menus), elements of texts and graphics.

To demystify immediately XUL, I propose an example source XUL
<? xml version = "1.0"?>
<? xml-stylesheet href = "chrome: / / global / skin /" type = "text / css"?>
title = "Find Files"
East = "horizontal"
xmlns = "">
<button id="find-button" label="Find"/>
<button id="cancel-button" label="Cancel"/>
</ Window>
Once the application launched (you can try to create a text file "button.xul" with the example above, and open in Firefox), you'll see on the screen:

Now that we know draw widgets graphics, simply combine their possible actions through the system of events.

Here we see an example button that responds to click through its attribute oncommand "by calling the JavaScript method" playSound () "
<button id="play-button" label="Play" oncommand="playSound()"/>

Creating a GUI XML represents de facto several advantages:
1. XML is a standard known and recognized
2. A simple and intuitive
3. No compilation because the files are interpreted on the fly. The time saving is immediate.
4. Developers who are already trained to DHTML (Dynamic HTML) and web design in general can quickly become familiar with XUL

The XUL also incorporates technologies that increase its possibilities:
1. A possible redefinition of tags and attributes via XBL language (XML Binding Language)
2. A system called "overlays" that allows you to include several XUL files in a single window. It's very powerful to build menus in office extensions installed
3. A system of representation of data as a graph can share, store and represent data: RDF (Resource Description Framework). Ideal for managing data types bookmarks, user profiles, information exchange for updates…

The layout is also an important aspect to be considered when developing graphical interfaces. In the manner of an Internet site, the standard is CSS (Cascading Style Sheets). This allows you to add style graphics on one or more elements of the application. CSS is powerful because it allows you to deport all the "design" in text files separate; designers can not manipulate these files to work on aspects of size and color of the entire application.

We could write a whole article on language XUL, pending if you want to know more, you can view the tutorial Mozilla 7.

VIII. Applications / Extensions
This is the last layer of the framework, which contains everything needed to run the application.
In addition to what we saw, Mozilla has developed a virtual file called chromium, to limit the security files of the project.
That limits the security problems and adds various other possibilities, such as managing the location (languages), and management of extensions. The latter is very convenient to use user level (a simple drag and drop enough to install an extension), and can add or replace any element of the application.

Examples of projects with the Mozilla framework which start out from the crowd:
* Nvu: a WYSIWYG editor to develop its website available at
* Songbird: a music player available on the web
* Democracy player: a video player integrated "full web" available on
* WengoLink: an application to receive calls audio & video platform available on Wengo

IX. Bilan
We will draw up a usual "pros and cons" of this framework.

Disadvantages and problems Framwork
* The documentation of the different layers of the project often lacks depth and decline, although efforts are continually being made to improve
* The Mozilla framework is still very young and lack of maturity
* It remains heavily tied to people and projects of the Mozilla Foundation
* The technical barrier to enter the draft is fairly high. It must go through many stages and tricks often not documented before they can advance
* Lack of appropriate tools, like an IDE-specific XUL, for those who do not want to go too in the art

Benefits Framework
* Multi platform
* Separation of content, formatting and business process
* Very suited to the development of RIA (Rich Internet Application)
* No compilation at XUL scripting layer + = best way to develop graphical interfaces
* More than 2000 XPCOM components available
* Location easy
* Customization and updated facilitated by a powerful system extensions

X. Conclusion

In the end, compared to the traditional frameworks can be J2EE or. Net, XPFE unveils all new ways to develop applications. Its native support on Windows, Linux and Mac is already a serious competitor. Moreover, adding components effective, while 100% based on web standards, makes the framework of Mozilla a very promising. Without forgetting that it is completely open and free.

But is this project also promising it has the air? I will put in doubt the answer, because the machine control Mozilla is not so simple. The discovery and use of advanced framework requires a personal investment accordingly. It often resort to tricks (known or little known) to achieve its ends, a sign reveals the immaturity of the project.

But if you look at the quality and success that may have an application like Firefox in the world of the Internet, you feel it is a large potential in this technology. Mozilla proposes new reflexes work based on standards and ultimately, it is well worth the few minutes spent discovery read this article.