Developing XUL Application - Mozilla For RIA

김대웅

2

Contents

Contents1. RIA? 2. XULRunner?3. Developing With XULRunner4. Blog Writer5. Q & A

3

RIA?

RIA?

Installation & Updates

Using Anywhere

Richer Than Web Standard

Allow offline use of Application

Client/Server Balance

Network Efficiency

4

RIA?

RIA Platforms

5

RIA?

RIA Platforms

6

XULRunner?

XULRunner?a Mozilla runtime package (GRE) that can be used to

bootstrap XUL+XPCOM applications

XPCOM

Gecko rendering engine

XUL

XBL

File picker

Helper app dialog/UI

Extension Manager

SVG

XSLT

XMLHttpRequest

DOMParser

Web Services (SOAP)

Embeding APIs

7

XULRunner?

XPCOM Cross Platform Component Object Model

Reusable cross-platform librariesVirtually all of the functionality of Gecko

XPConnect - "Scriptable" IDL interfaces

8

XULRunner?

XUL XML User Interface Language

<window><menubar id="menubarid"> <menu id="menuid“ > <menupopup> <menuitem > </menupopup> </menu></menubar><toolbar id="toolbarid"> <toolbarbutton ></toolbar><!-- your code here –-></window>

9

XULRunner?

XULRunner 1.8.0.x ~= firefox 1.5XULRunner 1.8.1 ~= firefox 2.0XULRunner 1.9 ~= firefox 3.0

Roadmap

XULRunner Based Application

SpiceBirdSongBirdGoogle AdWords EditorFlickr Uploadr 3.0Joost…

10

XULRunner vs Adobe AIR

AIR Adobe Integrated Runtime

Tools

Features

Flex BuilderAptanaDreamweaver extention

Local file system access Native Drag N DropUI ControlsSQLLite embedWebkitAjax framework SupportRich Media and Video

A runtime environment for building RIAs using Flash, Flex, HTML and Ajax, that can be deployed as a desktop application.

11

XULRunner vs Adobe AIR

XULRunner AIRLanguage 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

12

XULRunner vs Adobe AIR

Desktop Based RIA

Web Based RIA

XULRunnerAIR

AJAX

Flex, SilverLight

13

Developing With XULRunner

Developing With XULRunner

14

Developing With XULRunner

Simple Application Demo

15

Developing With XULRunner

Structureapplication.ini

entry point, application information

Preference.jssetup application preferences

chrome.manifestregister resource location by “chrome://” URI

EX) pref("toolkit.defaultChromeURI", “chrome://myapps/content/myapps.xul ");

EX) content myapps content/myapps/

16

Developing With XULRunner

Tools

Orangevolt eclipse plugin

XUL Explorer

17

Developing With XULRunner

Debugging

Javascript Console

Venkman Debugger

Function dump()pref("browser.dom.window.dump.enabled", true);dump("my text here\n");pref("javascript.options.showInConsole", true);Components.utils.reportError(str);function jsdump(str){Components.classes['@mozilla.org/consoleservice;1'].getService(Components.interfaces.nsIConsoleService).logStringMessage(str);}

18

Developing With XULRunner

Libraries Mozilla Fuel

var cs = Components.classes['@mozilla.org/consoleservice;1'] .getService(Components.interfaces.nsIConsoleService);

var cs = MOZILLA.ConsoleService();

easy access interfaces, components and services. threaded wrapper for nsIProcess convenience wrapper for file, text or stream

A JavaScript Library to help developers build extensionsnew in Firefox 3

Objectives

19

Developing With XULRunner

Libraries Mozdev JSLibmake life easier for developers by providing a general purpose library

ModulesDebuginstall io network rdf sound utils xul zip

var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);file.initWithPath("c:\\tmp\\foo.dat");var ioService = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);var uri = ioService.newFileURI(file);var channel = ioService.newChannelFromURI(uri);var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);outputStream.init(file, 0x20|0x02, 00004, null);var buffer = "This is a test\n";outputStream.write(buffer, buffer.length);outputStream.flush();outputStream.close();

jslib.init(this);include (jslib_file);var file = new File("c:\\tmp\\foo.dat");file.open("w");file.write("This is a test\n");file.close();

20

Developing With XULRunner

Libraries Extras Use your Favorite Javascript Libraries.

PrototypeJqueryMootoolsExtjs... Anything You Like

22

Blog Writer

Blog Writer : ObjectiveTry developing the Desktop RIA with Web Standard and Open API

24

Blog Writer

Building Blocks

Trimpath Template MetaWeblog APIPowerEditor nsDragAndDrop.js Components.interfaces.nsIIOServiceComponents.interfaces.nsILocalFileComponents.interfaces.nsIFileInputStreamComponents.interfaces.nsIBinaryInputStream

25

Reference

Referencehttp://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

감사합니다Q & A