“ What if… non-programmers could design the look and feel of a product

using W3C standards instead of C++?

Where platform differences could be expressed in stylesheets, not

hardcoded with #ifdefs? ”

Cross-Platform Toolkit Project at mozilla.org, 1999

Copyright 2005 Digital Enterprise Research Institute. All rights reserved.

www.deri.org

XUL

XML User Interface Language

Uldis Bojārs - uldis.bojars@deri.orghttp://captsolo.net/info/

DERI Reading GroupMay 10, 2006

3

XUL - Introduction

• XML User Interface Language– An application of XML– … used to describe User Interfaces

• Foundation of Mozilla applications framework– … hence Mozilla User Interface Language

• Re-uses W3C Standards– CSS, DTD, JavaScript, RDF, XML

• Cross-platform

4

XUL - Widgets

Widgets and controls - user interface components

• Top level elements - window, page, dialog, wizard, …• Box model - boxes, grids, stacks, …• Tabular data - tree, listbox• Simple widgets - label, buttons, menus, tabs, …• Content widgets – browser, iframe, editor

5

XUL – Simple Example

<menulist label="Bus">

<menupopup><menuitem label="Car"/>

<menuitem label="Taxi"/> <menuitem label="Bus“

selected="true"/><menuitem label="Train"/>

</menupopup>

</menulist>

http://xulplanet.com/tutorials/xultu/lists.html

6

XUL – Templates, RDF and Rules

<tree flex="1" width="200" height="200" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals">

<treecols>

<treecol id="name" label="Name" primary="true" flex="1"/><treecol id="species" label="Species" flex="1"/>

</treecols>

<template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow>

<treecell label="rdf:http://www.some…com/rdf#name"/><treecell

label="rdf:http://www.some...com/rdf#species"/> </treerow> </treeitem> </treechildren> </rule> </template>

</tree>

http://xulplanet.com/tutorials/xultu/examples/ex_datasrc_2.xul

7

More Widgets – XUL Periodic Table

http://www.hevanet.com/acorbin/xul/top.xul

Mozilla Application Framework

9

Gecko Rendering Engine

10

Mozilla XUL Applications

• Standalone Applications– All Mozilla applications (Firefox*, Seamonkey, Thunderbird, …)– XULRunner – to run XUL outside Mozilla

• Example: ActiveState Komodo IDE

• Mozilla Application Extensions– Overlays

• Remote XUL Applications

• …

* Try this in Firefox - chrome://browser/content/browser.xul

11

Mozilla Architecture

12

Mozilla Application Framework

• XPFE - Cross-Platform Front End – Widget Toolkit (XUL/XBL) – Style (CSS) and Implementation (JavaScript, RDF)

• Component Architecture - XPCOM2,000+ of XPCOM interfaces available: – Image handling – Security – File System – Plugins – Much more ...

“Harnessing the Mozilla Platform”, a presentation by Brian Kinghttp://brian.mozdev.org/presentations/cyberpipe2005/slides.html

Copyright 2005 Digital Enterprise Research Institute. All rights reserved.

www.deri.org

Sample Mozilla Extension

14

SIOC-Detect

• Look for links to SIOC RDF data in the HEAD tagof HTML documents viewed in the browser

• When SIOC RDF is detected, display an icon / buttonin the status bar.

• Pressing the button -> W3C RDF Validator

• Support for Firefox and SeaMonkey (ex. Mozilla Suite)

http://sioc-project.org/firefox/

15

XUL Applications Layer Model

16

Extension Structure

./ • install.js• install.rdf

./chrome/ (siocdetect.jar)• content/

– siocdetect/• about.xul• contents.rdf• siocDetectOverlay.js• siocDetectOverlay.xul

• skin/classic/– siocdetect/

• contents.rdf• sioc-ani.gif• siocMozOverlay.css

17

Let’s see the code

/chrome/content/siocdetect/content.rdf

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

<RDF:Seq RDF:about="urn:mozilla:package:root"><RDF:li RDF:resource="urn:mozilla:package:siocdetect"/>

</RDF:Seq>

<RDF:Seq RDF:about="urn:mozilla:overlays"> <RDF:li RDF:resource="chrome://browser/content/browser.xul"/> <RDF:li RDF:resource="chrome://navigator/content/navigator.xul"/>

</RDF:Seq>

<RDF:Seq RDF:about="chrome://browser/content/browser.xul"> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq>

<RDF:Seq RDF:about="chrome://navigator/content/navigator.xul"> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq>

<RDF:Description RDF:about="urn:mozilla:package:siocdetect" chrome:displayName="SIOC Detect 0.5" chrome:author="Uldis Bojars" …. ></RDF:Description>

</RDF:RDF>

http://sw.deri.org/svn/uldis/2006/XUL/siocdetect/trunk/

Copyright 2005 Digital Enterprise Research Institute. All rights reserved.

www.deri.org

Bigger Applications

19

Remote XUL Application

• Mozilla Amazon Browser

http://www.faser.net/mab/index.cfm

20

XUL Extension for Semantic Web

• Piggy Bank

http://simile.mit.edu/piggy-bank/

Copyright 2005 Digital Enterprise Research Institute. All rights reserved.

www.deri.org

Summary

22

Thanks!

Thank YOU!

Books:• “Creating Applications with Mozilla” (online)

http://books.mozdev.org/chapters/index.html

• “Hacking Firefox”http://www.iosart.com/firefox/hackingfirefoxbook/

Presentations:• “Harnessing the Mozilla Platform” (online)

http://brian.mozdev.org/presentations/cyberpipe2005/slides.html