Building Enterprise Applications with Mozilla

Brian King

Independent Consultant / mozdev.org / Mozdev Group, Inc.

Introduction

• Web Applications are becoming widely deployed.
• Lines being blurred between Client and Server (Web) applications.
• Mozilla:
  • Uses proven Web technologies
  • Runtime interpretation of non-compiled languages such as XUL, JavaScript and CSS
  • HTML falls short in the UI space
  • Cross-platform rich client application development
  • Viable alternative to the more costly development cycle of traditional software development

Development Platform

• XPFE - Cross-Platform Front End
  • Widget Toolkit (XUL/XBL)
  • Style (CSS) and Implementation (JavaScript, RDF)
• Component Architecture - XPCOM
  2,000+ of XPCOM interfaces available:
  • Image handling
  • Security
  • File System
  • Plugins
  • Much more ...
• Cross Platform - "Write once, run anywhere"
• Win, Max OS 9/OS X, Linux, HP UX, FreeBSD, OS/2 ...(see ports page)

XPFE Layer Model

XUL - Benefits

• Of Language:
  • Separation of content, functionality and style
  • Cross-platform
  • l10n enabled - Easily localisable
• To Developers:
  • Uses technologies that are familiar
  • No compilation
  • Quick Prototyping / Faster development time
  • Promotes Customisability - themes, locales

XUL Features

• Widgets and Controls
• Box Model - boxes, grids, stacks
• Window, Dialog, Page, Wizard
• Buttons, Menus, Tabs, ...
• Tabular data - Tree, Listbox
• Content widgets - (tab)browser, iframe and editor
• Templates
• Hierarchal structures displaying data collected from RDF datasources
• Overlays (more to come...)

CSS

• CSS1, CSS2, partial CSS3 support
• A set of rules for associating blocks of style property/value pairs with selectors:

  menu.obvious { border: 1px solid red; }
  #123 { display: none; }
  

• Inheritance via imports

@import url(chrome://global/skin/)

• Modularisation - different parts of UI broken into different CSS files (e.g. toolbar.css)
• Reuse hundreds of stylesheets that come with the toolkit.

JavaScript

• Role:
  • Glue between widgets and implementation later or ...
  • Implementation layer itself
• Based on ECMAScript standard
• Access to the DOM
• E4X (*NEW*)
  • Native XML support for JavaScript
  • Alternative to DOM interfaces

XBL

• Extensible Bindings Language
• 'Bind/Attach' content, layout and behaviour to new widget
• New widgets + extending existing ones
• Example

  
    <binding id="mySidebarTabs"
             extends="chrome://global/content/bindings/tabbox.xml#tabs">
      <content>
        <xul:hbox aID="row1">
          <children includes="tabupper" />
        </xul:hbox>
        <xul:hbox aID="row2">
          <children includes="tablower" />
        </xul:hbox>
      </content>
    </binding>
  
  

XBL Model

Overlays

• Content Abstraction
  • XUL/XBL/JS/CSS pulled in at run time
  • File organisation
  • Loaded at startup
• *NEW* - Dynamic Overlays
  
  • Real-time loading
  
  

  xuldocument.loadOverlay("someoverlay.xul", obs);
  

RDF

• Metadata - data that describes other data
• How Mozilla does data: Mail/News, Bookmarks, History and other user data.
• XUL templates - Rendering RDF-based data in UI widgets
• The chrome registry
• Good performance for high volume data

XPCOM

• Cross-Platform Component Object Model
• Components in theoretically any language - currently implementations in JavaScript, C++, and Python (PyXPCOM)
• XPConnect - "Scriptable" IDL interfaces

XPConnect

• Mozilla binds (XPConnect) JavaScript in the interface to XPCOM components underneath
• Example

  var windowManager = 
      Components.classes['@mozilla.org/appshell/window-mediator;1']
      .getService();
  var windowManagerInterface = 
      windowManager.QueryInterface( Components.interfaces.nsIWindowMediator);
  var myWindows = windowManagerInterface.getEnumerator( "myapp:main" );
  var aWin, numWin = 0;
  while (myWindows.hasMoreElements()) {
    aWin = myWindows.getNext();
    numWin++
  }
  

XPInstall

• XPI file format
• One click install
• APIs for writing installation scripts in JavaScript
• Handles installation, registration ...
• Used for language packs, software add-ons, toolbars ...

Extension Manager

• RDF install file (install.rdf)
• Built-in UI
• Functionality - Uninstall, Disable
• Access to extension Options
• Version control
• Built-in Update system

Localisation

• Infrastructure for multiple-locale applications
• DTD Entities (.dtd) and String Bundles (.properties)
• Menu items, buttons, statusbar, Help files, ... anything that is visible
• Language Packs for UI customisation
• Language switching via global preferences:
  
  general.useragent.locale

Web Services

• XMLHttpRequest
• XML-RPC
• SOAP (sketchy)

Extras

• Database support (PostgreSQL, MySQL)
• XSLT
• XPath
• MathML
• SVG and Canvas, using Cairo libraries
• "Web ready"

Mozilla Architecture Diagram

Pulling it all together

• Registering new chrome - RDF manifests (1.7), text manifests (1.8)
• chrome URLs:
  

  chrome://myapp/content/myapp.xul
  

• Other bits - components, icons, ...
• Which deployment method?:
  • JAR file/XPI
  • Installer distribution

Demo - Angelsoft

• Custom Application based on Firefox Branch
• Venture funding datashare application
• XMLHttpRequest and RDF
• "... seamless integration between a post-J2EE best of breed Java server architecture and the flexible Mozilla client architecture"

Deployment

• Extensions:
  • Browser/Mail add-ons, Themes, Language packs
  • Require an install script (install.js, install.rdf)
  • Auto Update built into the EM
• Distributions:
  • Building from source required
  • Packaged with installer
  • Which Branch Tag to use?
    • Stable releases are the best for production.
    • Use trunk for latest features and bug fixes

XULRunner

• Bootstrap XPCOM+XUL applications - "gecko runtime"
• Customisable executable name, icons, profile directory
• Have access to latest toolkit
• Built-in with Installer
• Still in early development stages, but maturing all the time. No official releases yet.

Dev Tools

• Your favourite code editor
• DOM Inspector
• JavaScript Debugger
• JS Console
• fastcomponent, xpistubs and other mozdev projects
• Multiple third-party extensions for web developers

Problems

• *Perceived* high barrier of entry
• Large and daunting code base
• Dispersed documentation (now improving)
• Lack of IDE
• Sketchy support in some areas (e.g. SOAP)
• Browser/Mail bugs take priority over 'Platform' bugs

Licensing

• Mozilla has a MPL/LGPL/GPL tri-license
• Flexible - can be used for anything but ...
• Code you write is yours (can be closed)
• Modifications to base code is open

Projects

• MDG:
  • Customised Distros (Linspire)
  • Semantic Web / Deal Workflow (Angelsoft)
  • Toolbars (Netscape 7.1+, EarthLink)
  • Kiosk Browsers (Brooklyn Museum)
  • Handwriting Recognition Interface - HRI (Codehost)
  • Themes
• Elsewhere:
  • Komodo - Dymamic languages IDE
  • Nvu (HTML Editor)
  • Piggy Bank - Semantic Web browser
  • addons.mozilla.org - wide variety of themes and extensions.

Resources

• http://www.mozilla.org/why/ - Why Use Mozilla
• developer.mozilla.org
• www.xulplanet.org
• lxr.mozilla.org
• kb.mozillazine.org
• Mailing Lists

Conclusion

• Already being used in a variation of Applications and Environments
• Almost there for mission critical applications
• The pieces are there, pulling them all together is the trick

That's all folks!

brian@mozdev.org