XUL - Mozilla Application Framework

  • 5,959 views
Uploaded 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.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,959
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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
    • 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