“  What if… non-programmers could design the look and feel of a product using W3C standards instead of C++?  Where platfor...
XUL XML User Interface Language Uldis Boj ārs -  uldis.bojars @deri.org http:// captsolo.net/info/ DERI Reading Group May ...
XUL - Introduction <ul><li>XML User Interface Language </li></ul><ul><ul><li>An application of XML </li></ul></ul><ul><ul>...
XUL - Widgets <ul><li>Widgets and controls - user interface components </li></ul><ul><li>Top level elements - window, page...
XUL – Simple Example <ul><li><menulist label=&quot;Bus&quot;> </li></ul><ul><li><menupopup> <menuitem label=&quot;Car&quot...
XUL – Templates, RDF and Rules <tree flex=&quot;1&quot; width=&quot;200&quot; height=&quot;200&quot; datasources=&quot;ani...
More Widgets – XUL Periodic Table http://www.hevanet.com/acorbin/xul/top.xul
Mozilla Application Framework
Gecko Rendering Engine
Mozilla XUL Applications <ul><li>Standalone Applications </li></ul><ul><ul><li>All Mozilla applications (Firefox*, Seamonk...
Mozilla Architecture
Mozilla Application Framework <ul><li>XPFE - Cross-Platform Front End  </li></ul><ul><ul><li>Widget Toolkit (XUL/XBL)  </l...
Sample Mozilla  Extension
SIOC-Detect <ul><li>Look for links to SIOC RDF data in the HEAD tag of HTML documents viewed in the browser </li></ul><ul>...
XUL Applications Layer Model
Extension Structure <ul><li>./  </li></ul><ul><li>install.js </li></ul><ul><li>install.rdf </li></ul><ul><li>./chrome/  (s...
Let’s see the code <ul><li>/chrome/content/siocdetect/content.rdf </li></ul><ul><li><RDF:RDF xmlns:RDF=&quot;http://www.w3...
Bigger Applications
Remote XUL Application <ul><li>Mozilla Amazon Browser </li></ul><ul><li>http:// www.faser.net/mab/index.cfm </li></ul>
XUL Extension for Semantic Web <ul><li>Piggy Bank </li></ul><ul><li>http:// simile.mit.edu /piggy-bank/ </li></ul>
Summary
Thanks! <ul><li>Thank YOU! </li></ul><ul><li>Books: </li></ul><ul><li>“Creating Applications with Mozilla”  (online) </li>...
Upcoming SlideShare
Loading in...5
×

XUL - Mozilla Application Framework

6,222
-1

Published on

Presentation about the Mozilla Application Framework and XUL (XML user interface language).

XUL is one of the main building blocks for Mozilla applications and Firefox extensions.

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,222
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
208
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XUL - Mozilla Application Framework

  1. 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. 2. XUL XML User Interface Language Uldis Boj ārs - uldis.bojars @deri.org http:// captsolo.net/info/ DERI Reading Group May 10, 2006
  3. 3. XUL - Introduction <ul><li>XML User Interface Language </li></ul><ul><ul><li>An application of XML </li></ul></ul><ul><ul><li>… used to describe User Interfaces </li></ul></ul><ul><li>Foundation of Mozilla applications framework </li></ul><ul><ul><li>… hence Mozilla User Interface Language </li></ul></ul><ul><li>Re-uses W3C Standards </li></ul><ul><ul><li>CSS, DTD, JavaScript, RDF, XML </li></ul></ul><ul><li>Cross-platform </li></ul>
  4. 4. XUL - Widgets <ul><li>Widgets and controls - user interface components </li></ul><ul><li>Top level elements - window, page, dialog, wizard, … </li></ul><ul><li>Box model - boxes, grids, stacks, … </li></ul><ul><li>Tabular data - tree, listbox </li></ul><ul><li>Simple widgets - label, buttons, menus, tabs, … </li></ul><ul><li>Content widgets – browser, iframe, editor </li></ul>
  5. 5. XUL – Simple Example <ul><li><menulist label=&quot;Bus&quot;> </li></ul><ul><li><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> </li></ul><ul><li></menulist> </li></ul>http://xulplanet.com/tutorials/xultu/lists.html
  6. 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. 7. More Widgets – XUL Periodic Table http://www.hevanet.com/acorbin/xul/top.xul
  8. 8. Mozilla Application Framework
  9. 9. Gecko Rendering Engine
  10. 10. Mozilla XUL Applications <ul><li>Standalone Applications </li></ul><ul><ul><li>All Mozilla applications (Firefox*, Seamonkey, Thunderbird, …) </li></ul></ul><ul><ul><li>XULRunner – to run XUL outside Mozilla </li></ul></ul><ul><ul><ul><li>Example: ActiveState Komodo IDE </li></ul></ul></ul><ul><li>Mozilla Application Extensions </li></ul><ul><ul><li>Overlays </li></ul></ul><ul><li>Remote XUL Applications </li></ul><ul><li>… </li></ul><ul><li>* Try this in Firefox - chrome://browser/content/browser.xul </li></ul>
  11. 11. Mozilla Architecture
  12. 12. Mozilla Application Framework <ul><li>XPFE - Cross-Platform Front End </li></ul><ul><ul><li>Widget Toolkit (XUL/XBL) </li></ul></ul><ul><ul><li>Style (CSS) and Implementation (JavaScript, RDF) </li></ul></ul><ul><li>Component Architecture - XPCOM 2,000+ of XPCOM interfaces available: </li></ul><ul><ul><li>Image handling </li></ul></ul><ul><ul><li>Security </li></ul></ul><ul><ul><li>File System </li></ul></ul><ul><ul><li>Plugins </li></ul></ul><ul><ul><li>Much more ... </li></ul></ul>“ Harnessing the Mozilla Platform”, a presentation by Brian King http://brian.mozdev.org/presentations/cyberpipe2005/slides.html
  13. 13. Sample Mozilla Extension
  14. 14. SIOC-Detect <ul><li>Look for links to SIOC RDF data in the HEAD tag of HTML documents viewed in the browser </li></ul><ul><li>When SIOC RDF is detected, display an icon / button in the status bar. </li></ul><ul><li>Pressing the button -> W3C RDF Validator </li></ul><ul><li>Support for Firefox and SeaMonkey (ex. Mozilla Suite) </li></ul><ul><li>http:// sioc-project.org/firefox/ </li></ul>
  15. 15. XUL Applications Layer Model
  16. 16. Extension Structure <ul><li>./ </li></ul><ul><li>install.js </li></ul><ul><li>install.rdf </li></ul><ul><li>./chrome/ (siocdetect.jar) </li></ul><ul><li>content/ </li></ul><ul><ul><li>siocdetect/ </li></ul></ul><ul><ul><ul><li>about.xul </li></ul></ul></ul><ul><ul><ul><li>contents.rdf </li></ul></ul></ul><ul><ul><ul><li>siocDetectOverlay.js </li></ul></ul></ul><ul><ul><ul><li>siocDetectOverlay.xul </li></ul></ul></ul><ul><li>skin/classic/ </li></ul><ul><ul><li>siocdetect/ </li></ul></ul><ul><ul><ul><li>contents.rdf </li></ul></ul></ul><ul><ul><ul><li>sioc-ani.gif </li></ul></ul></ul><ul><ul><ul><li>siocMozOverlay.css </li></ul></ul></ul>
  17. 17. Let’s see the code <ul><li>/chrome/content/siocdetect/content.rdf </li></ul><ul><li><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;> </li></ul><ul><li><RDF:Seq RDF:about=&quot;urn:mozilla:package:root&quot;> </li></ul><ul><li><RDF:li RDF:resource=&quot;urn:mozilla:package:siocdetect&quot;/> </li></ul><ul><li></RDF:Seq> </li></ul><ul><li><RDF:Seq RDF:about=&quot;urn:mozilla:overlays&quot;> </li></ul><ul><li><RDF:li RDF:resource=&quot;chrome://browser/content/browser.xul&quot;/> </li></ul><ul><li><RDF:li RDF:resource=&quot;chrome://navigator/content/navigator.xul&quot;/> </li></ul><ul><li></RDF:Seq> </li></ul><ul><li><RDF:Seq RDF:about=&quot;chrome://browser/content/browser.xul&quot;> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq> </li></ul><ul><li><RDF:Seq RDF:about=&quot;chrome://navigator/content/navigator.xul&quot;> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq> </li></ul><ul><li><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> </li></ul><ul><li></RDF:RDF> </li></ul>http://sw.deri.org/svn/uldis/2006/XUL/siocdetect/trunk/
  18. 18. Bigger Applications
  19. 19. Remote XUL Application <ul><li>Mozilla Amazon Browser </li></ul><ul><li>http:// www.faser.net/mab/index.cfm </li></ul>
  20. 20. XUL Extension for Semantic Web <ul><li>Piggy Bank </li></ul><ul><li>http:// simile.mit.edu /piggy-bank/ </li></ul>
  21. 21. Summary
  22. 22. Thanks! <ul><li>Thank YOU! </li></ul><ul><li>Books: </li></ul><ul><li>“Creating Applications with Mozilla” (online) </li></ul><ul><ul><ul><li>http://books.mozdev.org/chapters/index.html </li></ul></ul></ul><ul><li>“Hacking Firefox ” </li></ul><ul><ul><ul><li>http://www.iosart.com/firefox/hackingfirefoxbook/ </li></ul></ul></ul><ul><li>Presentations: </li></ul><ul><li>“Harnessing the Mozilla Platform” (online) </li></ul><ul><ul><ul><li>http://brian.mozdev.org/presentations/cyberpipe2005/slides.html </li></ul></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×