Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

Select a language:

  • Close [x]
  • Close [x]

An introduction to XML User Interface Language (XUL) development

Creating a XUL-based blog editor

Michael Galpin (mike.sr@gmail.com), Software engineer, eBay
Michael Galpin has developed software professionally since 1998. He holds a degree in mathematics from the California Institute of Technology, and is an engineer at eBay in San Jose, CA.

Summary:  XUL is a tried and true application framework. In fact, the recently released Firefox 3.0 is not only built using XUL, but provides a XUL runtime environment that enables any Firefox user to run other XUL applications. In this tutorial, you start to program in XUL and learn about some tools to help you develop XUL apps. Build a XUL-based blog editor as you enhance your Web development skills to build desktop apps with XUL.

Date:  04 Nov 2008 (Published 16 Oct 2007)
Level:  Intermediate
PDF:  A4 and Letter (315 KB | 25 pages)Get Adobe® Reader®

Activity:  22508 views
Comments:  

Before you start

This tutorial is for experienced Web developers who are interested in branching out into desktop development, but do not want to learn a lot of new technologies. XUL (rhymes with cool) makes it easy to use Web development skills to build desktop applications. It gives you a rich set of UI widgets that have a very familiar syntax for any Web developer. It also lets you directly mix in HTML and makes heavy use of JavaScript.

Frequently used acronyms

  • Ajax: Asynchronous JavaScript + XML
  • API: Application programming interface
  • CSS: Cascading stylesheet
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • OS: Operating system
  • UI: User interface
  • XML: Extensible Markup Language

XUL is an XML-based language, so you'll need to be familiar with XML, especially XML namespaces. XUL is built on top of the Web technologies that you already know and love: HTML, JavaScript and CSS. You'll need to be familiar with those technologies to be productive in XUL. You can greatly increase the capabilities of XUL applications by using XPCOM. This is a technology that is similar to distributed computing technologies such as CORBA/IDL and COM. Familiarity with these technologies will help when learning about XPCOM, but is not required.

About this tutorial

In this tutorial you will:

  • Learn all about XUL, its roots and its use in Mozilla projects.
  • Learn about the key benefits and architectural design of XUL, as well as how to build desktop applications that leverage your existing Web application skills.
  • Discover the opportunities that Firefox 3.0 presents to XUL developers.
  • Dig into XUL and write a simple application to create, save, and publish blog entries. This XUL-based blog editor gives you basic rich text editing, and allows you to save drafts locally that you can reload later for editing. The editor will also tap into the drawing capabilities of XUL to allow users to electronically sign their blogs.

Back to top

Prerequisites

XUL is completely open source. To develop with XUL, and to follow along in this tutorial, download the following:

1 of 10 | Next

Comments

Back to top

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML, Web development
ArticleID=261493
TutorialTitle=An introduction to XML User Interface Language (XUL) development
publish-date=11042008
author1-email=mike.sr@gmail.com
author1-email-cc=dwxed@us.ibm.com

Table of contents

1 of 10 | Next

Next steps from IBM

Identify system and application bottlenecks with Rational Performance Tester. With Rational Functional Tester get enhanced support for Adobe Flex 3.0, Java 1.6, and the Dojo Toolkit.

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

 

Dig deeper into XML on developerWorks

Try IBM PureSystems. No charge.

IBM PureSystems on a kaleideoscope background

Experience today!

Get started with the cloud-based trial and pattern development kit.

Share this page:

  • Close [x]

Follow developerWorks:

  • Close [x]