Ajax JavaScript CSS HTML 5 DOM

XUL Tutorial with Examples

Learn XUL for building a graphical user interface with XML tags.
The tutorial should be read by following the order of the chapters at first level. Later one will be able to deepen by reading the chapters which are attached to them.

  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.
Building an application
  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.


Tools to build XUL applications

© 2007-2012 Xul.fr & Denis Sureau. All rights reserved. You are free to use the code of the demos to motorize your site.
You can print the texts and the codes and distribute them for educational purpose.