Your SlideShare is downloading. ×
0
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
XUL - Mozilla Application Framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

XUL - Mozilla Application Framework

6,085

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 <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. 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. XUL – Simple Example <ul><li>&lt;menulist label=&amp;quot;Bus&amp;quot;&gt; </li></ul><ul><li>&lt;menupopup&gt; &lt;menuitem label=&amp;quot;Car&amp;quot;/&gt; &lt;menuitem label=&amp;quot;Taxi&amp;quot;/&gt; &lt;menuitem label=&amp;quot;Bus“ selected=&amp;quot;true&amp;quot;/&gt; &lt;menuitem label=&amp;quot;Train&amp;quot;/&gt; &lt;/menupopup&gt; </li></ul><ul><li>&lt;/menulist&gt; </li></ul>http://xulplanet.com/tutorials/xultu/lists.html
  • 6. XUL – Templates, RDF and Rules &lt;tree flex=&amp;quot;1&amp;quot; width=&amp;quot;200&amp;quot; height=&amp;quot;200&amp;quot; datasources=&amp;quot;animals.rdf&amp;quot; ref=&amp;quot;http://www.some-fictitious-zoo.com/all-animals&amp;quot;&gt; &lt;treecols&gt; &lt;treecol id=&amp;quot;name&amp;quot; label=&amp;quot;Name&amp;quot; primary=&amp;quot;true&amp;quot; flex=&amp;quot;1&amp;quot;/&gt; &lt;treecol id=&amp;quot;species&amp;quot; label=&amp;quot;Species&amp;quot; flex=&amp;quot;1&amp;quot;/&gt; &lt;/treecols&gt; &lt;template&gt; &lt;rule&gt; &lt;treechildren&gt; &lt;treeitem uri=&amp;quot;rdf:*&amp;quot;&gt; &lt;treerow&gt; &lt;treecell label=&amp;quot;rdf:http://www.some…com/rdf#name&amp;quot;/&gt; &lt;treecell label=&amp;quot;rdf:http://www.some...com/rdf#species&amp;quot;/&gt; &lt;/treerow&gt; &lt;/treeitem&gt; &lt;/treechildren&gt; &lt;/rule&gt; &lt;/template&gt; &lt;/tree&gt; 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 <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. Mozilla Architecture
  • 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. Sample Mozilla Extension
  • 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 -&gt; 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. XUL Applications Layer Model
  • 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. Let’s see the code <ul><li>/chrome/content/siocdetect/content.rdf </li></ul><ul><li>&lt;RDF:RDF xmlns:RDF=&amp;quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&amp;quot; xmlns:chrome=&amp;quot;http://www.mozilla.org/rdf/chrome#&amp;quot;&gt; </li></ul><ul><li>&lt;RDF:Seq RDF:about=&amp;quot;urn:mozilla:package:root&amp;quot;&gt; </li></ul><ul><li>&lt;RDF:li RDF:resource=&amp;quot;urn:mozilla:package:siocdetect&amp;quot;/&gt; </li></ul><ul><li>&lt;/RDF:Seq&gt; </li></ul><ul><li>&lt;RDF:Seq RDF:about=&amp;quot;urn:mozilla:overlays&amp;quot;&gt; </li></ul><ul><li>&lt;RDF:li RDF:resource=&amp;quot;chrome://browser/content/browser.xul&amp;quot;/&gt; </li></ul><ul><li>&lt;RDF:li RDF:resource=&amp;quot;chrome://navigator/content/navigator.xul&amp;quot;/&gt; </li></ul><ul><li>&lt;/RDF:Seq&gt; </li></ul><ul><li>&lt;RDF:Seq RDF:about=&amp;quot;chrome://browser/content/browser.xul&amp;quot;&gt; &lt;RDF:li&gt;chrome://siocdetect/content/siocDetectOverlay.xul&lt;/RDF:li&gt; &lt;/RDF:Seq&gt; </li></ul><ul><li>&lt;RDF:Seq RDF:about=&amp;quot;chrome://navigator/content/navigator.xul&amp;quot;&gt; &lt;RDF:li&gt;chrome://siocdetect/content/siocDetectOverlay.xul&lt;/RDF:li&gt; &lt;/RDF:Seq&gt; </li></ul><ul><li>&lt;RDF:Description RDF:about=&amp;quot;urn:mozilla:package:siocdetect&amp;quot; chrome:displayName=&amp;quot;SIOC Detect 0.5&amp;quot; chrome:author=&amp;quot;Uldis Bojars&amp;quot; …. &gt;&lt;/RDF:Description&gt; </li></ul><ul><li>&lt;/RDF:RDF&gt; </li></ul>http://sw.deri.org/svn/uldis/2006/XUL/siocdetect/trunk/
  • 18. Bigger Applications
  • 19. Remote XUL Application <ul><li>Mozilla Amazon Browser </li></ul><ul><li>http:// www.faser.net/mab/index.cfm </li></ul>
  • 20. XUL Extension for Semantic Web <ul><li>Piggy Bank </li></ul><ul><li>http:// simile.mit.edu /piggy-bank/ </li></ul>
  • 21. Summary
  • 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>

×