XUL Tutorial with Examples

Overview of the XUL language and environment.

XUL vs. HTML 5.

1. First program. Writing you first XUL program.
2. Installing XUL.
3. Window. How to open a XUL window from an HTML page.
4. Boxes. They allow to organize the contents of a graphic interface.
• Grid. Organizing the interface as a table.
• Groupbox. Inserting components into a border.
• Stack. shading effect or text in graphical element.
• Spacer. Separating components.
• Tabs and tabbox. Improving the interface with tabbed panels.
5. Button and Javascript. How to define a button and to assign code to handle user's actions.
6. Textbox. How to use a textbox to enter data.
7. Images. Displaying images on the page and inside widgets.
8. Listbox. Building a list or a table.
9. Menu. Designing the menu to an application.
10. Toolbar. Adding a toolbar to it.
11. Progressmeter. Displaying the progression of a task.
12. Tree. A tree stores data as bookmarks, disk directories...
13. HTML. You can put components of pages into XUL.
• Canvas. Drawing on a surface.
14. Style. Improving the look with style sheets.
15. Events and the event object. Interaction with the graphical user interface.
16. Building a XUL widget with XBL. Extend the list of components.

1. First XUL application. Start with a simple Hello World! program.

Case study

1. Xul Dev editor.
• Description.
  It is a proof of concept. It is an exemple of IDE, for creating visually graphical interface in XUL and to build software in any programming language.

Forum

• Changing dynamically the background color of a text.

Tools to build XUL applications

• Ample SDK is a JavaScript framework for using the XUL language in the browser to build the interface of a portable application.
  Widgets are   numerous enough to have the equivalent of a Java interface.
• Scriptol and Xul Light.
  Xul light is XUL without angle brackets, more readable, that can be integrated directly into a Scriptol source. XML light has a descriptive capability that is really better than what classes provide. Example of scriptol source. The XUL code generated by the scriptol compiler from the source.
  Some XUL examples are included int the XUL directory in the archive of the Scriptol compiler.
• XULRunner is the runtime that is required to run and display XUL applications, without Firefox. To create and install a XUL application see above in this tutorial.
• XPCom links binary extensions, written in C++ or other languages, to the xul interface to go beyond JavaScript limits.