XUL - Mozilla Application Framework
-
Upload
uldis-bojars -
Category
Business
-
view
10.190 -
download
1
description
Transcript of XUL - Mozilla Application Framework
“ 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
Copyright 2005 Digital Enterprise Research Institute. All rights reserved.
www.deri.org
XUL
XML User Interface Language
Uldis Bojārs - [email protected]://captsolo.net/info/
DERI Reading GroupMay 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="Bus">
<menupopup><menuitem label="Car"/>
<menuitem label="Taxi"/> <menuitem label="Bus“
selected="true"/><menuitem label="Train"/>
</menupopup>
</menulist>
http://xulplanet.com/tutorials/xultu/lists.html
6
XUL – Templates, RDF and Rules
<tree flex="1" width="200" height="200" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals">
<treecols>
<treecol id="name" label="Name" primary="true" flex="1"/><treecol id="species" label="Species" flex="1"/>
</treecols>
<template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow>
<treecell label="rdf:http://www.some…com/rdf#name"/><treecell
label="rdf:http://www.some...com/rdf#species"/> </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
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 - XPCOM2,000+ of XPCOM interfaces available: – Image handling – Security – File System – Plugins – Much more ...
“Harnessing the Mozilla Platform”, a presentation by Brian Kinghttp://brian.mozdev.org/presentations/cyberpipe2005/slides.html
Copyright 2005 Digital Enterprise Research Institute. All rights reserved.
www.deri.org
Sample Mozilla Extension
14
SIOC-Detect
• Look for links to SIOC RDF data in the HEAD tagof HTML documents viewed in the browser
• When SIOC RDF is detected, display an icon / buttonin 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="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<RDF:Seq RDF:about="urn:mozilla:package:root"><RDF:li RDF:resource="urn:mozilla:package:siocdetect"/>
</RDF:Seq>
<RDF:Seq RDF:about="urn:mozilla:overlays"> <RDF:li RDF:resource="chrome://browser/content/browser.xul"/> <RDF:li RDF:resource="chrome://navigator/content/navigator.xul"/>
</RDF:Seq>
<RDF:Seq RDF:about="chrome://browser/content/browser.xul"> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq>
<RDF:Seq RDF:about="chrome://navigator/content/navigator.xul"> <RDF:li>chrome://siocdetect/content/siocDetectOverlay.xul</RDF:li> </RDF:Seq>
<RDF:Description RDF:about="urn:mozilla:package:siocdetect" chrome:displayName="SIOC Detect 0.5" chrome:author="Uldis Bojars" …. ></RDF:Description>
</RDF:RDF>
http://sw.deri.org/svn/uldis/2006/XUL/siocdetect/trunk/
Copyright 2005 Digital Enterprise Research Institute. All rights reserved.
www.deri.org
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/
Copyright 2005 Digital Enterprise Research Institute. All rights reserved.
www.deri.org
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