MozTW Jetpack Workshop: Taichung

Workshop: Taichung

Hsiao-Ting Yu “Littlebtc”MozTW member / Jetpack Ambassador

2010年4月3日星期六

Mozilla2010年4月3日星期六

What is Mozilla?

• Non-profit organization

• Support for better Internet: an open web

• Open Source Software

• Open Web Standard

• Major Products: Firefox & Thunderbird


Mozilla Labs?

• “Labs” in Mozilla

• Crazy ideas

• Explore future of the web


Jetpack Ambassadors2010年4月3日星期六


MozTW?

• Mozilla communities in Taiwan

• Group for Mozilla “fans”

• Localize Mozilla products

• Promote Mozilla product & web standard

• Our mascot: Foxmosa


Jetpack Introduction


Your Firefox, customized2010年4月3日星期六

Old-type Mozilla Extension

• XUL: user interface

• JavaScript: code

• CSS: styling

• XBL: binding

• XPCOM: core

• ... So much hard things :(


Faster, faster and faster2010年4月3日星期六

What is Jetpack?

• Simple-to-use API to develop new-type extensions

• HTML, CSS and JavaScript

• JavaScript libraries available

• Fast to develop, test and deploy

• Extensible API

Photo by www.rocketman.org, CC-BY-2.5http://en.wikipedia.org/wiki/File:Rose-4.jpg


http://www.rocketman.org

http://www.rocketman.org

http://en.wikipedia.org/wiki/File:Rose-4.jpg

http://en.wikipedia.org/wiki/File:Rose-4.jpg

Jetpack: Now and Future

• Old: Jetpack Prototype 0.8 (standalone extension)

• Experimental Prototype

• Jetpack as single JavaScript file

• Very Near Future: Jetpack SDK (Jetpack Reboot)

• Distributed as a development kit

• Jetpack as XPI extension bundle

• Future version of Firefox will have Jetpack API supported included


Jetpack Prototype 0.8 Guides


Jetpack Prototype extensionhttps://addons.mozilla.org/zh-TW/firefox/addon/12025


https://addons.mozilla.org/zh-TW/firefox/addon/12025


Firebughttps://addons.mozilla.org/zh-TW/firefox/addon/1843




Go about:jetpack2010年4月3日星期六

Try it out!2010年4月3日星期六

Prepare a testing extension


Procedure

• Prepare a .js file and a .htm file in the same folder

• in .htm file, add the following data:<html><head> <title>Jetpack Workshop Example</title> <link rel="jetpack" href="example.js"></head><body></body></html>

• in the .js file: add one lineconsole.log('Hello world!');

• Open the .htm file to "Install" the Jetpack


Refresh?2010年4月3日星期六

Refresh: the dirty way

• For local files only(?)

• Go to or refresh the about:jetpack page


Jetpack 0.8 APIs:UI Related


Everyone needs a “Hello World”

• Log: Use Error Console (preferred) or Firebug Console

• Go “Develop” Tab

• Type

• console.log("Hello World!");


Notifications

• Simple Typejetpack.notifications.show("Hello World!");

• Complex Typejetpack.notifications.show( { title: "Hi Jetpack!", body: "一起來玩！", icon: "https://jetpack.mozillalabs.com/images/jetpack.png"

} );


Menu (I)

• Import from future:jetpack.future.import("menu");

• Create new menu to a dummy menu object(does nothing)jetpack.menu.add("Aloha!");

• Create new menu to toolsjetpack.menu.tools.add("Aloha!");


Menu (II)

• What menu?

• jetpack.menu.file

• jetpack.menu.edit

• jetpack.menu.view

• jetpack.menu.history

• jetpack.menu.bookmarks

• jetpack.menu.tools

• Context Menu: Somehow complex

• jetpack.menu.context.browser for browser UI

• jetpack.menu.context.page for page


Menu (III)

• Object-type to allow more options

• How about command? => command

• Submenu? => menu

• Details: https://developer.mozilla.org/en/Jetpack/UI/Menu

jetpack.future.import("menu");jetpack.menu.context.page.add({ label: "Ice Cream", icon: "https://jetpack.mozillalabs.com/images/jetpack.png", menu: new jetpack.Menu(["Vanilla", "Chocolate", "Pistachio", null, "None"]), command: function (menuitem) { jetpack.notifications.show(menuitem.label) }});


https://developer.mozilla.org/en/Jetpack/UI/Menu

https://developer.mozilla.org/en/Jetpack/UI/Menu

Slidebar (I)

• It is not the sidebar! :D

• Import from future:jetpack.future.import("slideBar");

• Append the slidebar with HTML content:jetpack.slideBar.append({ icon: "https://jetpack.mozillalabs.com/images/jetpack.png", html: "<html><body>Hello!</body></html>"});

• Or a given URL:jetpack.slideBar.append({ icon: "https://jetpack.mozillalabs.com/images/jetpack.png", url: "http://moztw.org"

});


https://jetpack.mozillalabs.com/images/jetpack.png

https://jetpack.mozillalabs.com/images/jetpack.png

http://moztw.org

http://moztw.org

Slidebar (II)

• Events:

• onReady: when feature("slidebar page") is loaded

• onClick: when its icon is clicked

• onSelect: when featured is selected

• Options:

• autoReload: reload every time selected


Slidebar (III): Tips

• onReady, onSelect:

• Will have a slider object as a parameter

• You can use slider.contentDocument to access the document

• Jetpack 0.8 is jQuery enabled, so:function ready(slider) { var _doc = slider.contentDocument; $("body", _doc).html("..."); // Have fun!}jetpack.slider.append( {... , 'onReady': ready})


Slidebar (IV): Tips again

• You can use E4X hack to write HTML code:var html = <><html><head> <style type="text/css"> <![CDATA[ ... ]]> </style> <base target="_blank" /> </head><body>...</body></html></>.toXMLString();jetpack.slideBar.append({html: html});

• Another dirty hack: set target to _blank to make links to open in the new tab, instead of in the slidebar content


Toolbar

• https://wiki.mozilla.org/Labs/Jetpack/JEP/21#Initial_Implementation_API

• Import from futurejetpack.future.import("toolbar");

• Which Toolbar?

• jetpack.toolbar.navigation

• jetpack.toolbar.bookmarks

• Toolbar optionsvar myButton = { id: "goMozTW", label: "Go MozTW", tooltip: "Access MozTW Website", image: "http://www.mozilla.org/favicon.ico", onclick: function(event) { jetpack.tabs.open('http://moztw.org/'); }}

• Append And Removejetpack.toolbar.navigation.append(myButton);jetpack.toolbar.navigation.remove("goMozTW");


http://www.mozilla.org/favicon.ico

http://www.mozilla.org/favicon.ico

http://moztw.org/'

http://moztw.org/'

Statusbar

• Somehow like slidebar, HTML-based

• Parameters: width, html

• onReady when HTML item is loaded

• widget, its HTML document as a parameter

• Examplejetpack.statusBar.append({ html: "<strong>Hi!</strong>", width: 100, onReady: function(widget) { $("strong", widget).text("Jetpack rocks?"); $(widget).click(function() { jetpack.notifications.show("Yes!"); } ); }});


A complex slidebar example


The Target2010年4月3日星期六

In RSS2010年4月3日星期六

Code and result

• http://gist.github.com/323081


http://gist.github.com/323081

http://gist.github.com/323081

Hacks in the code

• $("<a />") to create element: not working

• Use _doc.createElement("a") instead

• Some Regex to fetch the real title

• jQuery.ajax to fetch the content:http://api.jquery.com/jQuery.ajax/


http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/jQuery.ajax/

Another example:JetPlurk by irvinflyhttp://go.sto.tw/jetplurk


http://go.sto.tw/jetplurk

http://go.sto.tw/jetplurk

Jetpack 0.8 APIs:Not (so much) UI related


Selection

• https://developer.mozilla.org/en/Jetpack/UI/Selection

• Import from futurejetpack.future.import("selection");

• Get Selection

• jetpack.selection.text as plain text

• jetpack.selection.html as HTML

• Event: onSelection

• Examplejetpack.future.import("selection");jetpack.selection.onSelection(function(){ jetpack.notifications.show(jetpack.selection.text); jetpack.selection.html = "<b>" + jetpack.selection.html + "</b>";});


https://developer.mozilla.org/en/Jetpack/UI/Selection

https://developer.mozilla.org/en/Jetpack/UI/Selection

Tabs (I)

• jetpack.tabs

• open(): open new tab

jetpack.tabs.open("http://www.example.com");

• Array-like operations:

• jetpack.tabs[0]: first tab

• length: number of tabs


http://www.example.com

http://www.example.com

Tabs (II)

• Events:

• onReady: (inherited document is fully loaded)

• onFocus: focus changed

• Example

jetpack.tabs.onReady( function(doc) { console.log('ok'); });


Simple Storage

• Simple Storage: implemented as JSON files

• Future namespace should be used:jetpack.future.import("storage.simple"); var myStorage = jetpack.storage.simple;

• You can put some simple items: string, number, array, into myStorage:myStorage.group = 'moztw';myStorage.members = ['littlebtc', 'bobchao', 'irvinfly'];

• Soconsole.log(myStorage.members[0])

is littlebtc!

• sync() to force writing, open() to force reading (beware!)


Settings (I)

• Import from future is needed

• Need some manifest:

• https://developer.mozilla.org/en/Jetpack/Storage/Settings

• Resulting interface in about:jetpack:


https://developer.mozilla.org/en/Jetpack/Storage/Settings




Settings (II)

• Setting types: text, password, boolean, range

• Available options: default, min (for range), max (for range)

• Read/Write the setting is simple:jetpack.storage.settings.facebook.username = 'jen';music.volume = jetpack.storage.settings.volume;


Me, the extension

• Use "me":jetpack.future.import("me");

• For first run purpose:jetpack.me.onFirstRun(function () { jetpack.tabs.open("http://moztw.org/"); jetpack.notifications.show('Welcome!'); });


more...https://wiki.mozilla.org/Labs/Jetpack/JEPhttps://developer.mozilla.org/en/Jetpack


https://wiki.mozilla.org/Labs/Jetpack/JEP




https://developer.mozilla.org/en/Jetpack

https://developer.mozilla.org/en/Jetpack

After finished...


Go Jetpack Gallery!http://jetpackgallery.mozillalabs.com/


Jetpack SDK:Jetpack rebooted


Review of Jetpack Prototype

https://jetpack.mozillalabs.com/prototype.html

• Right things

• Usability

• Web Technologies

• JEPs

• Quick Release

• Tools integration

• Wrong things

• Scope

• Quality

• Non-Systemic API

• Document

• jQuery only








New "Jetpack" Architecture

Firefox

Jetpack API

jetpack jetpack jetpack

Firefox

Jetpack

Core

jetpack

Jetpack

Core

jetpack

Before After


New "Jetpack SDK"

• Python SDK, with features enabled:

• Testing

• XPI Packaging

• "Package-based"

• CommonJS based scripting

• http://mozillalabs.com/jetpack/2010/03/09/announcing-the-jetpack-sdk/

• https://jetpack.mozillalabs.com/sdk/0.1/docs/


http://mozillalabs.com/jetpack/2010/03/09/announcing-the-jetpack-sdk/




https://jetpack.mozillalabs.com/sdk/0.1/docs/

https://jetpack.mozillalabs.com/sdk/0.1/docs/

"Packaging"

• One package, one directory

• Every package directory should contain a mainfest.json at least

• Description, Dependency, ...

• JS files, known as "module", used for some reusable code, can be pulled in lib/xxx.js


"Packaging" (II): CommonJS

• Export a functions in my-module.js:exports.foo = function() { return "work!"}exports.add = funciton(a, b) { return a + b;}

• Use and test it in main.js:var myModule = require("my-module");exports.main = function(options, callbacks) { myModule.foo(); callbacks.quit();}

• "main" function exported from "main" module (main.js) will be called as your program "activate"s


Testing

• Create lib/test-my-module.js:

var myModule = require("my-module");exports.ensureAdditionWorks = function(test) { test.assertEqual(myModule.add(1, 1), 2, "1 + 1 = 2");};

• cfx test --verbose to test!


cfx works!

• After grab the SDK, run in OSX/Linux:source bin/activateIn Windows(Python and Python for Windows extension is required):source bin/activate

• cfx testall : Sanity Check

• Run in the package directory:

• cfx test --verbose : test module

• cfx xpi : make Jetpack XPI


Jetpack-based extensions

• Jetpack as an API

• Jetpack-based extension will:

• Require no restart to take effect

• Have automatic update

• And better security model

• No difference for users compared with traditional extensions

• Hosted on AMO too



Extension manager redesign2010年4月3日星期六

FlightDeck2010年4月3日星期六

Instant development!2010年4月3日星期六

What about JEPs?https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP


https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP

https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP

Future: it's your turn!2010年4月3日星期六

Technology

MozTW Jetpack Workshop: Taichung