MozTW Jetpack Workshop: Taipei
Upcoming SlideShare
Loading in...5
×
 

MozTW Jetpack Workshop: Taipei

on

  • 4,204 views

 

Statistics

Views

Total Views
4,204
Views on SlideShare
3,701
Embed Views
503

Actions

Likes
1
Downloads
32
Comments
0

3 Embeds 503

http://moztw.org 500
http://moztw.hiigara.net 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

MozTW Jetpack Workshop: Taipei MozTW Jetpack Workshop: Taipei Presentation Transcript

  • Workshop: Taipei Hsiao-Ting Yu “Littlebtc” MozTW member / Jetpack Ambassador
  • Mozilla
  • 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 Ambassadors
  • MozTW? • Mozilla communities in Taiwan • Group for Mozilla “fans” • Localize Mozilla products • Promote Mozilla product & web standard • Our mascot: Foxmosa
  • Jetpack Introduction
  • Old-type Mozilla Extension • XUL: user interface • JavaScript: code • CSS: styling • XBL: binding • XPCOM: core • ... So much hard things :(
  • Your Firefox, customized
  • Faster, faster and faster
  • 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.5 http://en.wikipedia.org/wiki/File:Rose-4.jpg
  • Jetpack: Now and Future • Now: Jetpack 0.8 (standalone extension) • Experimental Prototype • Jetpack as single JavaScript file • 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 0.8 Guides
  • Jetpack extension https://addons.mozilla.org/zh-TW/firefox/addon/12025
  • Firebug https://addons.mozilla.org/zh-TW/firefox/addon/1843
  • Go about:jetpack
  • Try it out!
  • 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 oneworld!'); console.log('Hello line • Open the .htm file to "Install" the Jetpack
  • Refresh
  • 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 Type jetpack.notifications.show("Hello World!"); • Complex Type jetpack.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 tools jetpack.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) });
  • 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" }
  • 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" /> <!-- Dirty Hack, very dirty --> </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 future jetpack.future.import("toolbar"); • Which Toolbar? • jetpack.toolbar.navigation • jetpack.toolbar.bookmarks • Toolbar options var 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 Remove jetpack.toolbar.navigation.append(myButton); jetpack.toolbar.navigation.remove("goMozTW");
  • Statusbar • Somehow like slidebar, HTML-based • Parameters: width, html • onReady when HTML item is loaded • widget, its HTML document as a parameter • Example jetpack.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 Target
  • In RSS
  • Code and result • 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/
  • Another example: JetPlurk by irvinfly
  • Jetpack 0.8 APIs: Not (so much) UI related
  • Selection • https://developer.mozilla.org/en/Jetpack/UI/Selection • Import from future jetpack.future.import("selection"); • Get Selection • jetpack.selection.text as plain text • jetpack.selection.html as HTML • Event: onSelection • Example jetpack.future.import("selection"); jetpack.selection.onSelection(function(){ jetpack.notifications.show(jetpack.selection.text); jetpack.selection.html = "<b>" + jetpack.selection.html + "</b>"; });
  • 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
  • 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']; • So console.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:
  • 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!');    });  
  • After finished...
  • Go Jetpack Gallery! http://jetpackgallery.mozillalabs.com/
  • Jetpack SDK: Jetpack rebooted
  • New "Jetpack" Architecture Before After jetpack jetpack jetpack jetpack jetpack Jetpack Jetpack Jetpack API Core Core Firefox Firefox
  • New "Jetpack SDK" • Python SDK, with features enabled: • Testing • XPI Packaging • "Package-based" • CommonJS based scripting • https://jetpack.mozillalabs.com/sdk/0.1/docs/
  • 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 redesign
  • Future: it's your turn!