The document discusses the XUL (XML User Interface Language), a cross-platform toolkit developed by Mozilla, enabling non-programmers to design user interfaces using W3C standards instead of traditional programming languages. It outlines the components of XUL, including widgets, controls, and data handling through RDF, as well as the architecture of Mozilla applications. The document also provides examples and links to resources for further learning and development of XUL applications.

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

2. XUL XML User Interface Language Uldis Boj ārs - uldis.bojars @deri.org http:// captsolo.net/info/ DERI Reading Group May 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=&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

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

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

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

13. Sample Mozilla Extension

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

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=&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/

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

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