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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,317
On Slideshare
3,814
From Embeds
503
Number of Embeds
3

Actions

Shares
Downloads
32
Comments
0
Likes
1

Embeds 503

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
























































Transcript

  • 1. Workshop: Taipei Hsiao-Ting Yu “Littlebtc” MozTW member / Jetpack Ambassador
  • 2. Mozilla
  • 3. What is Mozilla? • Non-profit organization • Support for better Internet: an open web • Open Source Software • Open Web Standard • Major Products: Firefox & Thunderbird
  • 4. Mozilla Labs? • “Labs” in Mozilla • Crazy ideas • Explore future of the web
  • 5. Jetpack Ambassadors
  • 6. MozTW? • Mozilla communities in Taiwan • Group for Mozilla “fans” • Localize Mozilla products • Promote Mozilla product & web standard • Our mascot: Foxmosa
  • 7. Jetpack Introduction
  • 8. Old-type Mozilla Extension • XUL: user interface • JavaScript: code • CSS: styling • XBL: binding • XPCOM: core • ... So much hard things :(
  • 9. Your Firefox, customized
  • 10. Faster, faster and faster
  • 11. 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
  • 12. 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
  • 13. Jetpack 0.8 Guides
  • 14. Jetpack extension https://addons.mozilla.org/zh-TW/firefox/addon/12025
  • 15. Firebug https://addons.mozilla.org/zh-TW/firefox/addon/1843
  • 16. Go about:jetpack
  • 17. Try it out!
  • 18. Prepare a testing extension
  • 19. 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
  • 20. Refresh
  • 21. Jetpack 0.8 APIs: UI Related
  • 22. Everyone needs a “Hello World” • Log: Use Error Console (preferred) or Firebug Console • Go “Develop” Tab • Type • console.log("Hello World!");
  • 23. 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" } );
  • 24. 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!");
  • 25. 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
  • 26. 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) });
  • 27. 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" }
  • 28. 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
  • 29. 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})
  • 30. 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
  • 31. 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");
  • 32. 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!"); } ); } });
  • 33. A complex slidebar example
  • 34. The Target
  • 35. In RSS
  • 36. Code and result • http://gist.github.com/323081
  • 37. 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/
  • 38. Another example: JetPlurk by irvinfly
  • 39. Jetpack 0.8 APIs: Not (so much) UI related
  • 40. 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>"; });
  • 41. 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
  • 42. Tabs (II) • Events: • onReady: (inherited document is fully loaded) • onFocus: focus changed • Example jetpack.tabs.onReady( function(doc) { console.log('ok'); } );
  • 43. 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!)
  • 44. Settings (I) • Import from future is needed • Need some manifest: • https://developer.mozilla.org/en/Jetpack/Storage/ Settings • Resulting interface in about:jetpack:
  • 45. 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;
  • 46. 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!');    });  
  • 47. After finished...
  • 48. Go Jetpack Gallery! http://jetpackgallery.mozillalabs.com/
  • 49. Jetpack SDK: Jetpack rebooted
  • 50. New "Jetpack" Architecture Before After jetpack jetpack jetpack jetpack jetpack Jetpack Jetpack Jetpack API Core Core Firefox Firefox
  • 51. New "Jetpack SDK" • Python SDK, with features enabled: • Testing • XPI Packaging • "Package-based" • CommonJS based scripting • https://jetpack.mozillalabs.com/sdk/0.1/docs/
  • 52. 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
  • 53. Extension manager redesign
  • 54. Future: it's your turn!