Friday 21 January 2011

Task 9: What is XUL and how is it used? Give examples.

What is XUL exactly ?


That is the right question to ask well, XUL stands for the XML User Interface Language. Since it is XML, it is a declarative language. It provides a rich set of UI widgets that can accelerate the development process. It is a cross-platform language, so you can build your XUL application on Linux, and then run it on Windows. XUL makes heavy use of Web technologies such as JavaScript and CSS. You can even mix HTML directly into a XUL application. 



XUL is synonymous with Netscape and the Mozilla Foundation. From the early days of the Netscape browser, it was meant to be a cross-platform browser. From what I have researched the two browsers have a history of partnership. This required a UI framework that abstracted away OS-specific layout and control widgets. It required a way to allow communication between these abstracted elements and native processes for networking, file I/O, and so on. All of these elements were needed to build applications that weren't just cross-platform, but were designed for working with HTML and Web elements. This framework, known as XPFE (cross-platform front end) was used to build Netscape Communicator as well as the other products in its suite, such as its e-mail and chat clients.


You might be familiar with the rise and fall of Netscape, the company. Its IPO in 1995 marked the beginning of what is now looked back on as the dot com boom. By 1998 the company was not doing well financially, but made some important technological achievements. 

At the heart of this was the Mozilla project. This started with the code for Netscape Communicator 4.0 being released publicly under an open source license. That code-base proved to be too difficult to develop and maintain, but fortunately something better was in the works. Netscape not only made the existing Communicator code open source, but also the code for their next generation layout engine. That layout engine would become Gecko. One of its key features was support for a declarative, XML-based UI language known as XUL.




XUL is a proprietary UI language built for the Gecko engine. It has a wide appeal outside of the developers of Gecko-based Web browsers. That is because it is built on standard technologies, such as XML, JavaScript and CSS.


XUL is an XML language, which gives it a simple syntax and makes it easy to read (and parse)! XUL has a lot of similarities to HTML, so it looks familiar to Web developers. It even allows for XHTML elements to be mixed in with XUL widgets. In many ways, XUL has proven that XML is ideal for creating UI languages, as seen by the rise of similar languages such as MXML (the UI language in the Adobe Flex framework) from Adobe, and XAML (the UI language in .NET 3.0 and the Windows Presentation Foundation) from Microsoft.

Of course, declarative programming does have inherent limits Inevitably some imperative programming is needed. Rather than invent a new language or create some XML-based syntax for this, XUL supports JavaScript. JavaScript as a programming language often gets a bad reputation. It is known as a language that is easy for non-programmers to hack around in and as full of browser-specific extensions and quirks. However, JavaScript is a powerful language that is the backbone of Web application development. After all, JavaScript is the "J" in Ajax. It is a functional programming language, but can be easily used in a procedural or even object-oriented style. XUL brings JavaScript to the forefront as a desktop programming language.

XUL also relies heavily on the DOM implementation in JavaScript—after all, XUL is based on XML.The other pillar of Web development found in XUL is CSS. CSS has become the de facto way to add styling to any Web page. Its cascading nature, allowing styling to be applied to objects and their children while at the same time allowing children to override as many or as few styles as needed, provides tremendous power and flexibility. XUL brings this power and flexibility to desktop applications.

One other thing that JavaScript and CSS have in common is a reputation for having varying behavior from one browser to another. Browser sniffing is common in JavaScript, allowing programmers to code the same function in multiple implementations based on what kind and version of a browser the user is using. It's also found in CSS through the use of conditional styles. If you have done much Web development, then you have probably suffered these browser quirks. If this is the case, then you are going to really enjoy programming in XUL. You have only one browser to worry about in XUL. It's like programming a Web application in a world where everyone uses Firefox.

What kinds of user-interfaces can be made with XUL?

XUL provides the ability to create most elements found in modern graphical interfaces. Some elements that can be created are:
  • Input controls such as textboxes and checkboxes
  • Toolbars with buttons or other content
  • Menus on a menu bar or pop up menus
  • Tabbed dialogs
  • Trees for hierarchical or tabular information
  • Keyboard shortcuts

What Does XUL Code Look Like?

Code Listing 1.0 shows a simple XUL document describing a button interface for a simple XUL interface, the XUL file is an XML document and uses the XUL namespace, and you apply a stylesheet in the second line of the listing. The <window> element is always the root element of a XUL document. This example uses the <toolbox>, <button>, and <toolbar> XUL tags to describe a simple user interface. Code Listing 1.0 also has an event handler associated with it, as defined by the JavaScript <script> tag. This example will create a toolbar, with a button on it called “Sort Customers.” When the button is invoked, from either a key press or a mouse click, the message “You have clicked the Sort Customers button.” is displayed within a JavaScript alert box. Figure 1.1 shows the resulting interface after it has been parsed in the Netscape 6.x browser.

Code 1.0

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
<window id="main-window"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
class="dialog">
<script language="JavaScript">
function alertUser()
{
alert("You have clicked the\n\nSort Customers\n\nbutton.");
}
</script>
<toolbox flex="1">
<toolbar>
<button class="dialog" label="Sort Customers"
oncommand="alertUser();"/>
</toolbar>
</toolbox>
</window>


Figure 1.1










Reference: http://www.xul.fr/en-xml-xul.html [Accessed 19/01/2011]

1 comment: