“ 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

XUL XML User Interface Language Uldis Boj ārs - uldis.bojars @deri.org http:// captsolo.net/info/ DERI Reading Group May 10, 2006

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

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

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

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

XUL – Simple Example <menulist label=&quot;Bus&quot;> <menupopup> <menuitem label=&quot;Car&quot;/> <menuitem label=&quot;Taxi&quot;/> <menuitem label=&quot;Bus“ selected=&quot;true&quot;/> <menuitem label=&quot;Train&quot;/> </menupopup> </menulist> http://xulplanet.com/tutorials/xultu/lists.html

<menulist label=&quot;Bus&quot;>

<menupopup> <menuitem label=&quot;Car&quot;/> <menuitem label=&quot;Taxi&quot;/> <menuitem label=&quot;Bus“ selected=&quot;true&quot;/> <menuitem label=&quot;Train&quot;/> </menupopup>

</menulist>

XUL – Templates, RDF and Rules <tree flex=&quot;1&quot; width=&quot;200&quot; height=&quot;200&quot; datasources=&quot;animals.rdf&quot; ref=&quot;http://www.some-fictitious-zoo.com/all-animals&quot;> <treecols> <treecol id=&quot;name&quot; label=&quot;Name&quot; primary=&quot;true&quot; flex=&quot;1&quot;/> <treecol id=&quot;species&quot; label=&quot;Species&quot; flex=&quot;1&quot;/> </treecols> <template> <rule> <treechildren> <treeitem uri=&quot;rdf:*&quot;> <treerow> <treecell label=&quot;rdf:http://www.some…com/rdf#name&quot;/> <treecell label=&quot;rdf:http://www.some...com/rdf#species&quot;/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> http://xulplanet.com/tutorials/xultu/examples/ex_datasrc_2.xul

More Widgets – XUL Periodic Table http://www.hevanet.com/acorbin/xul/top.xul

Mozilla Application Framework

Gecko Rendering Engine

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

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

Mozilla Architecture

Mozilla Application Framework 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 ... “ Harnessing the Mozilla Platform”, a presentation by Brian King http://brian.mozdev.org/presentations/cyberpipe2005/slides.html

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 ...

Sample Mozilla Extension

SIOC-Detect Look for links to SIOC RDF data in the HEAD tag of HTML documents viewed in the browser When SIOC RDF is detected, display an icon / button in the status bar. Pressing the button -> W3C RDF Validator Support for Firefox and SeaMonkey (ex. Mozilla Suite) http:// sioc-project.org/firefox/

Look for links to SIOC RDF data in the HEAD tag of HTML documents viewed in the browser

When SIOC RDF is detected, display an icon / button in the status bar.

Pressing the button -> W3C RDF Validator

Support for Firefox and SeaMonkey (ex. Mozilla Suite)

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

XUL Applications Layer Model

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

./

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

Let’s see the code /chrome/content/siocdetect/content.rdf <RDF:RDF xmlns:RDF=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:chrome=&quot;http://www.mozilla.org/rdf/chrome#&quot;> <RDF:Seq RDF:about=&quot;urn:mozilla:package:root&quot;> <RDF:li RDF:resource=&quot;urn:mozilla:package:siocdetect&quot;/> </RDF:Seq> <RDF:Seq RDF:about=&quot;urn:mozilla:overlays&quot;> <RDF:li RDF:resource=&quot;chrome://browser/content/browser.xul&quot;/> <RDF:li RDF:resource=&quot;chrome://navigator/content/navigator.xul&quot;/> </RDF:Seq> <RDF:Seq RDF:about=&quot;chrome://browser/content/browser.xul&quot;> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq> <RDF:Seq RDF:about=&quot;chrome://navigator/content/navigator.xul&quot;> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq> <RDF:Description RDF:about=&quot;urn:mozilla:package:siocdetect&quot; chrome:displayName=&quot;SIOC Detect 0.5&quot; chrome:author=&quot;Uldis Bojars&quot; …. ></RDF:Description> </RDF:RDF> http://sw.deri.org/svn/uldis/2006/XUL/siocdetect/trunk/

/chrome/content/siocdetect/content.rdf

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

<RDF:Seq RDF:about=&quot;urn:mozilla:package:root&quot;>

<RDF:li RDF:resource=&quot;urn:mozilla:package:siocdetect&quot;/>

</RDF:Seq>

<RDF:Seq RDF:about=&quot;urn:mozilla:overlays&quot;>

<RDF:li RDF:resource=&quot;chrome://browser/content/browser.xul&quot;/>

<RDF:li RDF:resource=&quot;chrome://navigator/content/navigator.xul&quot;/>

</RDF:Seq>

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

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

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

</RDF:RDF>

Bigger Applications

Remote XUL Application Mozilla Amazon Browser http:// www.faser.net/mab/index.cfm

Mozilla Amazon Browser

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

XUL Extension for Semantic Web Piggy Bank http:// simile.mit.edu /piggy-bank/

Piggy Bank

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

Summary

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

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