Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Tema 1
Tema 1
Loading in …3
×
1 of 22

XUL - Mozilla Application Framework

2

Share

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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>

×