Your SlideShare is downloading. ×
0
“  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,100

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,100
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
207
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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.

×