Building Applications with XULRunner

Mark Finkle

Mozilla Corporation

Introduction to XULRunner

• Mozilla platform runtime for deploying rich, XUL+XPCOM desktop applications
• More like developing DHTML web applications
• Less like developing MFC, WinForms and Delphi applications

Mozilla Platform

Core toolkit Support

• Standard and custom UI widgets
• Templated UI generation
• Script and binary components
• Supports native accessibility technologies
• Completely cross platform

Application Support

• Lightweight, version controlled runtime
• Widgets support native OS look and feel
• Extensibility through a common add-on mechanism
• Built-in upgrade mechanism

Extension Support

• Overlay UI and code into host application
• Built-in installation and upgrade mechanism
• Access to all toolkit support

Developing with XULRunner

• Powerful widget-based markup language
  • XUL is an HTML-like markup language designed for rich applications
  • Includes a set of cross platform widgets
• Based on existing standards
  • Cascading Style Sheets (CSS)
  • Document Object Model (DOM)
  • JavaScript, including E4X (ECMAScript for XML)
  • XML, SVG, MathML
• Platform portability
  • XUL user interfaces can run on Windows, Mac and Linux
• Easy localization
  • Locale specific resources are easily separated from presentation and code
  • Automatically chooses appropriate locale at startup

Editing / Protoyping

• Text-based files - working with XULRunner feels very much like DHTML
  • Use XUL to create an interface
  • Use CSS to define appearance
  • Use JavaScript for behavior
  • Use locale files for localizable strings
• Quickly preview modifications
  • XUL displays in Firefox (or any Mozilla based browser)
  • Not compiled so viewing changes is as simple as refresh/restart
  • Simple development tools exist to help create, test and preview parts of code

Designer / Developer Process

• Designers and Developers can both participate in the UI design process
  • Designers can start the UI prototype or modify an existing UI
  • Developers can manage the semantic code points in the markup
  • UI can be prototyped and even support interactivity before any real code is written
• Layers of UI are separate
  • Designers can edit the style without effecting the structure or the behavior
  • Developers can change behavior and even structure
  • Localizers can manage locales in isolation

Common Practices - Large Scale

• Use XBL to create reusable components
• Patch XULRunner to your specific needs
• Use the Mozilla build system (or a close variant)
• Create separate builds for different platforms
  • Specialized themes / CSS
  • Binary XPCOM components

Common Practices - Small Scale

• Pick a standard XULRunner release
• Little or no build system
• Single install for all platforms
  • One theme for all platforms
  • JavaScript XPCOM components only

Deploying a XULRunner Application

• Application Bundle = Your Code + XULRunner
  • Ship XULRunner with your application
  • No support for a common, shared XULRunner runtime
• Use a platform specific installer or packaging tool
  • Windows - Setup or MSI installer
  • Linux - Archive or package installer
  • Mac - Install package or DMG

Resources

• Documentation
  • Mozilla Developer Center - Documentation wiki for all Mozilla technologies
  • Getting Started with XULRunner - Introduction to building applications with XULRunner
  • XUL Tutorial
  • XUL Reference
• Software written using Mozilla platform
  • Mozilla Firefox and Thunderbird
  • Addons and extensions for Firefox and Thunderbird
  • Songbird - web media player
  • Joost - web video/television player
  • ActiveState Komodo - application development environment
  • XUL Explorer - lightweight XUL editor
• Download latest release XULRunner (1.8.1.3)