XUL - Mozilla Application Framework
Upcoming SlideShare
Loading in...5
×
 

XUL - Mozilla Application Framework

on

  • 10,042 views

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.

Statistics

Views

Total Views
10,042
Views on SlideShare
9,922
Embed Views
120

Actions

Likes
2
Downloads
206
Comments
0

6 Embeds 120

http://captsolo.net 78
http://www.docshut.com 19
http://www.slideshare.net 15
http://www.techgig.com 6
https://s3.amazonaws.com 1
file:// 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

XUL - Mozilla Application Framework XUL - Mozilla Application Framework Presentation Transcript

  • “ 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
  • XUL XML User Interface Language Uldis Boj ārs - uldis.bojars @deri.org http:// captsolo.net/info/ DERI Reading Group May 10, 2006
  • 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
  • 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
  • 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
  • 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
  • More Widgets – XUL Periodic Table http://www.hevanet.com/acorbin/xul/top.xul
  • Mozilla Application Framework
  • Gecko Rendering Engine
  • 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
  • Mozilla Architecture
  • 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
  • Sample Mozilla Extension
  • 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/
  • XUL Applications Layer Model
  • 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
  • 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/
  • Bigger Applications
  • Remote XUL Application
    • Mozilla Amazon Browser
    • http:// www.faser.net/mab/index.cfm
  • XUL Extension for Semantic Web
    • Piggy Bank
    • http:// simile.mit.edu /piggy-bank/
  • Summary
  • 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