This document discusses developing applications using XULRunner, Mozilla's runtime environment for building desktop applications with web technologies. It provides an overview of XULRunner and how it can be used to create Rich Internet Applications (RIAs) that have capabilities beyond regular web apps, such as offline use and native OS integration. The document outlines the core components of XULRunner like XUL and XPCOM, compares it to Adobe AIR, and provides guidance on setting up development environments and libraries for building XULRunner applications. It also presents a sample blog writing application as an example project.

1. Developing XUL Application
- Mozilla For RIA
김대웅

2. Contents
Contents
1. RIA?
2. XULRunner?
3. Developing With XULRunner
4. Blog Writer
5. Q&A
2

3. RIA?
RIA
?
Installation & Updates
Using Anywhere
Richer Than Web Standard
Allow offline use of Application
Client/Server Balance
Network Efficiency
3

4. RIA?
RIA Platforms
4

5. RIA?
RIA Platforms
5

6. XULRunner?
XULRunner
?a Mozilla runtime package (GRE) that can be used to
bootstrap XUL+XPCOM applications
XPCOM SVG
Gecko rendering XSLT
engine
XMLHttpRequest
XUL
DOMParser
XBL
Web Services (SOAP)
File picker
Embeding APIs
Helper app dialog/UI
Extension Manager
6

7. XULRunner?
XPCOM Cross Platform Component Object Model
Reusable cross-platform libraries
Virtually all of the functionality of Gecko
XPConnect - quot;Scriptablequot; IDL interfaces
7

8. XULRunner?
XUL XML User Interface Language
<window>
<menubar id=quot;
menubaridquot;>
<menu id=quot;
menuid“ >
<menupopup>
<menuitem >
</menupopup>
</menu>
</menubar>
<toolbar id=quot;
toolbaridquot;>
<toolbarbutton >
</toolbar>
<!-- your code here
8

9. XULRunner?
Roadmap
XULRunner 1.8.0.x ~= firefox
1.5
XULRunner 1.8.1 ~= firefox
2.0
XULRunner 1.9 ~= firefox 3.0
XULRunner Based
Application
SpiceBird
SongBird
Google AdWords
Editor
Flickr Uploadr 3.0
Joost
…
9

10. XULRunner vs Adobe AIR
AIR Adobe Integrated Runtime
A runtime environment for building RIAs using Flash, Flex, HTML
and Ajax, that can be deployed as a desktop application.
Features
Local file system access
Native Drag N Drop
UI Controls
SQLLite embed
Webkit
Ajax framework Support
Rich Media and Video
Tools
Flex Builder
Aptana
Dreamweaver extention
10

11. XULRunner vs Adobe AIR
XULRunner AIR
Language Html, xul & javascript Html,mxml, javascript
& actionscript
Rendering Engine gecko Webkit
RDBMS Yes Yes
UI Controls XUL Flex Comp.
API XPCOM Flash, Flex APIs
DnD Yes Yes
Access FileSystem Yes Yes
Cross Platform Window, linux, mac Window, linux, mac
Web Launcher No Yes
11

12. XULRunner vs Adobe AIR
Desktop Based RIA
XULRunne
r
AI
R
Flex,
SilverLight
AJA
X
Web Based RIA
12

13. Developing With XULRunner
Developing
With XULRunner
13

14. Developing With XULRunner
Simple Application Demo
14

15. Developing With XULRunner
Structure
application.ini
entry point, application information
chrome.manifest
register resource location by “chrome://” URI
EX) content myapps
content/myapps/
Preference.js
setup application preferences
EX) pref(quot;toolkit.defaultChromeURIquot;, “chrome:
//myapps/content/myapps.xul quot;);
15

16. Developing With XULRunner
Tools
Orangevolt eclipse plugin
XUL
Explorer
16

17. Developing With XULRunner
Debugging
Function dump()
pref(quot;browser.dom.window.dump.
enabledquot;, true);
Javascript dump(quot;my text herenquot;);
Console pref(quot;javascript.options.showInCons
true);
Components.utils.reportError(str);
function jsdump(str){
Components.classes['@mozilla.
org/consoleservice;1']
Venkman Debugger
.getService(Components.interfaces.
nsIConsoleService)
.logStringMessage(str);
}
17

18. Developing With XULRunner
Libraries Mozilla Fuel
A JavaScript Library to help developers build extensions
new in Firefox 3
Objective
s easy access interfaces, components and
services.
threaded wrapper for nsIProcess
convenience wrapper for file, text or stream
var cs = Components.classes['@mozilla.org/consoleservice;1']
.getService(Components.interfaces.nsIConsoleService);
var cs = MOZILLA.ConsoleService();
18

19. Developing With XULRunner
Libraries Mozdev JSLib
make life easier for developers by providing a general purpose
library
Modules
Debug
install jslib.init(this); var file = Components.classe
io include (jslib_file); (Components.interfaces.nsILo
network var file = new File(quot;c: file.initWithPath(quot;c:tmpfoo.d
rdf tmpfoo.datquot;); var ioService = Components.
sound file.open(quot;wquot;); getService(Components.inter
utils file.write(quot;This is a var uri = ioService.newFileUR
xul testnquot;); var channel = ioService.newC
zip file.close(); var outputStream = Compone
stream;1quot;].createInstance(Co
outputStream.init(file, 0x20|0x
var buffer = quot;This is a testnquot;;
outputStream.write(buffer, bu
19
outputStream.flush();

20. Developing With XULRunner
Libraries Extras
Use your Favorite Javascript Libraries.
Prototype
Jquery
Mootools
Extjs
... Anything You Like
20

21. Blog Writer
Blog Writer : Objective
Try developing the Desktop RIA with Web
Standard and Open API
22

22. Blog Writer
Building
Blocks Trimpath Template
MetaWeblog API
PowerEditor
nsDragAndDrop.js
Components.interfaces.nsIIOService
Components.interfaces.nsILocalFile
Components.interfaces.nsIFileInputStream
Components.interfaces.nsIBinaryInputStream
24

23. Reference
Reference
http://developer.mozilla.org/en/docs/XULRunner:What_XULRunner_Provides
http://www.xulplanet.com
http://books.mozdev.org/html/index.html
http://www.simonwhatley.co.uk/rich-internet-applications-a-background
http://www.adobe.com/products/air
25

24. Q&A 감사합니다