|
|
|
|
XML-Based User interface Language |
|
A way to build the UI of a cross-platform
software application using W3C standards: HTML 4.0, XML, XML Namespaces,
CSS1/2, DOM1/2 |
|
Makes UI building easier |
|
Makes cross-platform support easier |
|
Entire Mozilla/Nav5 UI built in XUL |
|
|
|
|
Building separate front ends using Windows GUI,
Mac GUI, and GTK is expensive |
|
W3C standards now offer enough power to build an
application user interface |
|
Gecko has enough speed to render a software
application UI in realtime |
|
Using XML, you can create a language (XUL) for
defining application UIs |
|
|
|
|
Is XUL a standard? No. It’s an XML application
Netscape invented. (Plan to submit for standardization in the future.) |
|
Does XUL duplicate or compete with web
standards? No. It answers a question no web standard now does: “How can you
define a desktop application UI using standards?” |
|
XUL uses XML as it was intended—as a way to
define new markup languages (XML applications) for specific purposes. |
|
|
|
|
|
web application (server-resident) and client
application (locally-installable) developers |
|
easy to build cross-platform, cross-device user
interface quickly |
|
XUL adds common UI metaphors (boxes, springs)
that web standards lack |
|
can build small, powerful, quickly-downloadable
application by leveraging power of browser instead of duplicating it |
|
throw away your books on Windows, Mac, and Motif
or GTK UI development: use lightweight web standards and markup languages
instead |
|
|
|
|
|
consumers |
|
because XPD web and client applications are now
easier to write, they will proliferate, making useful functionality
available to all |
|
because XUL applications are small, they
download quickly, saving user time |
|
because XUL applications run on any platform,
they increase consumer’s freedom of choice in selecting platform or device |
|
ease of customizing UI increases ability to
tailor application appearance to own preferences |
|
|
|
|
You don’t have to use XUL to build on Gecko. You
can build web and/or client applications using W3C standards alone. |
|
XUL complements and builds on web standards. It
doesn’t duplicate or compete. |
|
XUL is a convenience, a tool for developers to
use if they wish. |
|
|
|
|
|
a chunk of UI machinery |
|
in Communicator, these are all packages:
Navigator, Messenger, Preferences, Bookmarks, Composer |
|
has five parts: |
|
content: XML description of UI |
|
appearance: look customized with CSS |
|
behavior: defined with JS or C++, and AOM |
|
locale: all localizable strings in external DTD |
|
platform: platform specific info |
|
|
|
|
small components |
|
examples: dialog buttons, mail inbox folders |
|
control own drawing and user interaction |
|
largely self-contained |
|
usually a rectangular area |
|
in principle, a person with a text editor can
put together an application |
|
|
|
|
XML is case sensitive, so XUL is too |
|
tag names and attributes should be lowercase |
|
XUL file extension: .xul |
|
MIME type: now, text/xul; future, probably
text/x-xul |
|
|
|
|
<?xml version="1.0"?> |
|
<?xml-stylesheet
href="chrome://global/skin/xul.css"
type="text/css"?> |
|
<!DOCTYPE window> |
|
<window
xmlns:html=http://www.w3.org/TR/REC-html40
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> |
|
|
|
|
<html:script> |
|
//
dialog initialization code |
|
function InitWindow() { |
|
var checkbox =
document.getElementByID("remember"); |
|
if (checkbox)
checkbox.checked = true; |
|
} |
|
</html:script> |
|
|
|
<html:script language="javascript"
src="our.js"/> |
|
|
|
|
<html:script> |
|
<![CDATA[ |
|
function lesser(a,b) { |
|
return a < b ? a : b; |
|
} |
|
]]> |
|
</html:script> |
|
|
|
|
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/xul.css“
type="text/css"?> |
|
<!DOCTYPE window> |
|
<window id="main-window“
xmlns:html=http://www.w3.org/TR/REC-html40
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> |
|
<menubar><menu name="File"> |
|
<menuitem name="Hello World!"
onclick="dump('Hello world!\n');"/></menu> |
|
</menubar> <html:iframe id="content-frame"
src="contentframe.html" flex="100%"/> |
|
</window> |
|
|
|
|
menus: menubar, menupopup, menuitem,
menuseparator |
|
toolbars: toolbar, toolbaritem, toolbox (holds
toolbars and adds grippies for collapsing) |
|
titledbutton, progressmeter, tri-state checkbox |
|
tree: tree, treecaption, treecolgroup, treecol,
treehead, treechildren, treeitem, treefoot, treerow, treecell |
|
tab view: tabcontrol, tabbox, tab, tabpanel,
titledbutton |
|
|
|
|
|
|
|
Boxes with: |
|
horizontal or vertical layout |
|
intrinsic sizing of children |
|
flexible and inflexible children |
|
settable flex |
|
preferred, minimum, maximum sizes |
|
nesting of boxes |
|
|
|
|
easy personalization of user interface (see
http://www.mozillazine.org/chrome/ for current third-party experiments) |
|
XUL Fragments to add components to user
interface |
|
server-cached XUL to dynamically update an
application’s UI at startup |
|
|
|
|
Cross-Platform Front End Home Page:
http://www.mozilla.org/xpfe/ |
|
MozillaZine ChromeZone:
http://www.mozillazine.org/chrome/ |
|
netscape.public.dev.xul |
|
netscape.public.dev.skins |
|
My FAQ:
http://sites.netscape.net/ekrock/answers.html |
|
|
|
|
makes it easier to build cross-platform software
user interfaces |
|
uses W3C standards wherever possible |
|
solves problem for which no standard currently
exists: a W3C standards-based markup language for defining cross-platform
software application UI |
|
an XML application |
|
entire Mozilla UI built using XUL |
|
XUL is cool! |
|