Transcript XUL1_English-13aug

Mozilla Firefox
Extensions
Development
Tutorial
2007 July, SHIMODA Hiroshi
Agenda
Chapter 1
Firefox architecture
and technology
Chapter 2
The mechanism behind
Extensions
Chapter 3
Building an Extension
Chapter 1
Firefox architecture
and technology
Firefox
is closer to a
Web app
than a conventional
application
Firefox architecture is very similar to
web pages that use Dynamic HTML
Structure
Control
Customized
Processes
Firefox
HTA
DHTML
XUL
HTML
HTML
JavaScript
XPCOM
JScript
ActiveX
JavaScript
CGI
Keywords
・HTML
・CSS
・JavaScript
・XPCOM
XUL
XML-based
User-interface
Language
XML based
User Interface
Markup Language
Creates framework
of Firefox GUI
<vbox>
<hbox>
<label value="Make your selection"/>
<menulist>
<menupopup>
<menuitem label="Foo 1" selected="true"/>
<menuitem label="Foo 2"/>
<menuitem label="Foo 3"/>
</menupopup>
</menulist>
</hbox>
<checkbox label="Select items" checked="true"/>
<hbox>
<label value="Enter text"/>
<textbox size="15"/>
</hbox>
</vbox>
Similar to HTML
A GUI widget like an HTML form
Simplifies and standardizes GUI widgets
that were difficult to build using DHTML
(Drop-down lists, scrollbars, tabs, etc.)
Can be used on the web, not just in Firefox
http://piro.sakura.ne.jp/latest/blosxom.cgi/mozilla/in
dex.xul
HTML-like use of XUL
XUL allows a variety of
widgets
“Logic” is defined
rather than “Style”
(Color, font size, etc. are defined using
CSS, explained later)
Benefits
Read code,
Understand logic
When defining menus using Java
fileMenu = new JMenu(resbundle.getString("fileMenu"));
fileMenu.add(new JMenuItem(newAction)):
fileMenu.add(new JMenuItem(openAction)):
fileMenu.add(new JMenuItem(saveAsAction)):
mainMenuBar.add(fileMenu);
editMenu = new JMenu(resbundle.getString("editMenu"));
editMenu.add(new JMenuItem(undoAction)):
editMenu.addSeparator();
editMenu.add(new JMenuItem(cutAction)):
editMenu.add(new JMenuItem(pasteAction)):
editMenu.add(new JMenuItem(clearAction)):
editMenu.addSeparator();
editMenu.add(new JMenuItem(selectAllAction)):
mainMenuBar.add(fileMenu);
One needs to decipher the code
With XUL, one only needs to look
<menubar>
<menu label="&fileMenu.label;">
<menupopup>
<menuitem label="&fileMenu.new.label;"/>
<menuitem label="&fileMenu.open.label;"/>
<menuitem label="&fileMenu.save.label;"/>
</menupopup>
</menu>
<menu label="&editMenu.label;">
<menupopup>
<menuitem label="&editMenu.undo.label;"/>
<menuseparator/>
<menuitem label="&editMenu.cut.label;"/>
<menuitem label="&editMenu.paste.label;"/>
<menuitem label="&editMenu.clear.label;"/>
<menuseparator/>
<menuitem label="&editMenu.selectAll.label;"/>
</menupopup>
</menu>
</menubar>
Not as straightforward as
WYSIWYG, but much more
intuitive than writing
conventional programs
*WYSIWYG = What You See Is What You Get
Summary
Application
Logic
Regular app
C++, etc.
Web app
HTML
Firefox
XUL
XUL Specification Resources
Mozilla Developer Center (MDC)
http://developer.mozilla.org/
XULPlanet.com
http://www.xulplanet.com/
CSS
Cascading
Style
Sheets
Stylesheet language used to describe
the presentation of XML documents
in an easy to read format
#content {
font-size: 10pt;
border-width: 1pt;
border-color: red;
border-style: solid;
}
XUL is also styled using CSS
button[type="menu-button"] {
-moz-box-align: center;
-moz-box-pack: center;
margin: 0;
border: none;
}
.button-menu-dropmarker,
.button-menubutton-dropmarker {
margin: 1px;
background-image:
url("chrome://global/skin/arrow/arrow-dn.gif");
background-repeat: no-repeat;
background-position: center center;
min-width:11px;
min-height:11px;
}
Build the framework using XUL
Dress it up using CSS
Same as building
a web page
Benefits
Clean separation of
presentation from
application logic
Therefore
Each part can be
altered independently
→“Theme”(or “Skin”)
of Firefox
Summary
Application
Presentation
Logic
Regular app
C++, etc.
C++, etc.
Web app
HTML
CSS
Firefox
XUL
CSS
JavaScript
Firefox is
controlled by
JavaScript
Object-oriented prototype-based language
corresponding to
ECMAScript(ECMA-262)3rd edition
http://www.ecma-international.org/publications/
standards/Ecma-262.htm
Not related to Java
JavaScript in Firefox 2
・JavaScript 1.7
ECMAScript Edition 3
extended
・E4X
（ECMAScript for XML）
is supported
・Grammar is similar to C
(easier to learn)
・Highly flexible
・Untyped variables (almost entirely)
・There is garbage collection
・Not strictly structured like Java
etc.
Useful when
deployed
strategically
XUL
and
JavaScript
Interoperate using
DOM
Document
Object
Model
Controls XML through
API of
JavaScript objects
Control through properties
var checkbox =
document.getElementById('check');
check.checked = true;
Control through methods
var textbox =
document.getElementById('input');
textbox.focus();
Create and append XUL elements
var button =
document.createElement('button');
button.setAttribute('label', 'button');
box.appendChild(button);
Useful when
dynamically displaying
message text
Summary
Regular app
Application
Presentation
Logic
C++, etc.
C++, etc.
Web app
HTML
CSS
Firefox
XUL
CSS
Conditional
tasks
C++, etc.
JavaScript
Jscript
JavaScript
XPCOM
Cross
Platform
Component
Object
Model
Is a concept
that binds together
Platform independent
framework
for component development
Components
developed based on
this framework
Functionality
offered by
these components
・Platform independent
framework for component
development
・Components developed
based on this framework
・Functionality offered by
these components
XPCOM example
nsIFile::create(
in unsigned long type,
in unsigned long permissions
)
・Creates a file
・Has two parameters
File type (File or Directory)
Permission (UNIX-style)
=> Permission value is ignored
depending on the environment
Performs 3
functions
in Firefox
1
Can focus on development
while ignoring
language differences
2
Absorbs platform
dependent differences
Standardized API to handle
multiple platforms
→Simplifies Firefox development
3
Use the programming language
that is most
suited to the task at hand
・JavaScript calls
XPCOM components written in C++
・C++ calls
XPCOM components written in JavaScript
・Java calls
XPCOM components written in C++
...
Take advantage
of programming
language traits
and divide tasks
Each component
is a black box
In
Firefox
・If speed is necessary
・If the platform is
directly accessed
Use C++
Development
Complexity
Need to
Compile
Platform
dependency
Execution
Speed
JavaScript
Simple
No
Low
Slow
C++
Complex
Yes
High
Fast
JavaScript
and
XPCOM
Interoperate using
XPConnect
XPConnect
Allows XPCOM to
be accessed from
JavaScript
Example:
Create a temporary
folder by calling
XPCOM from
JavaScript
const nsILocalFile = Components.interfaces.nsILocalFile;
var file = Components.classes['@mozilla.org/file/local;1']
.createInstance(nsILocalFile);
file.initWithPath('C:\\');
file.append('temp');
if (!file.exists()) {
file.create(nsILocalFile.DIRECTORY_TYPE, 0755);
}
Benefits
It is
cross-platform
(This is it)
Summary
Regular
app
Applicatio
n Logic
Presentati
on
Conditional
tasks
Specialized tasks
C++,
etc.
C++,
etc.
C++, etc.
COM .NET
Framework
ActiveX CGI
script
XPCOM
Web app
HTML
CSS
JavaScript
Jscript
Firefox
XUL
CSS
JavaScript
Review
Role of each technology in Firefox
Defines presentation
Controls all parts
Builds architectural framework
Black box for
specialized tasks
Compare to
similar projects
Logic
Presentation
Firefox
XUL
CSS
Conditional
tasks
JavaScript
Adobe AIR
HTML
CSS
JavaScript
Specialized
tasks
XPCOM
Flash
Platform
compatibility
Capable
Platform
of flashy
dependency
tasks
Standard
Machine code
High
High
High
-
Java
Flash/AIR
Silverlight
XUL
Low
Low
?
Modestly high
Low
Low
Low
Low
High
High
High
Slight
Open
Closed
Closed
Open
Not flashy but it is solid
Issues with
developing XUL
based applications
There are no
WYSIWYG
development
environments
Lack of
documentation
(Source code is the
documentation)
However
Only a text editor
is needed for
development
Agile
Application
Development
with XUL!!