Your SlideShare is downloading. ×
0
Workshop: Taichung

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 W...
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


  •   P...
Jetpack Introduction
Your Firefox, customized
Old-type Mozilla Extension

• XUL: user interface
• JavaScript: code
• CSS: styling
• XBL: binding
• XPCOM: core

• ... So...
Faster, faster and faster
What is Jetpack?



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


   •   HTML, CSS and JavaScript


   ...
Jetpack: Now and Future

• Old: Jetpack Prototype 0.8 (standalone extension)
 • Experimental Prototype
 • Jetpack as singl...
Jetpack Prototype 0.8
Guides
Jetpack Prototype 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>
  <hea...
Refresh?
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
  • cons...
Notifications



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


• Complex Type
  jetpack.notifications.show...
Menu (I)

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


• Create new menu to a dummy menu object
  (does nothin...
Menu (II)
•   What menu?

    •   jetpack.menu.file

    •   jetpack.menu.edit

    •   jetpack.menu.view

    •   jetpack...
Menu (III)
•   Object-type to allow more options

•   How about command? => command

•   Submenu? => menu

•   Details: ht...
Slidebar (I)

• It is not the sidebar! :D
• Import from future:
  jetpack.future.import("slideBar");


• Append the slideb...
Slidebar (II)


• Events:
 • onReady: when feature("slidebar page") is loaded
 • onClick: when its icon is clicked
 • onSe...
Slidebar (III): Tips


• onReady, onSelect:
 • Will have a slider object as a parameter
 • You can use slider.contentDocum...
Slidebar (IV): Tips again

• You can use E4X hack to write HTML code:
  var html = <>
  <html>
  <head>
    <style type="t...
Toolbar
•   https://wiki.mozilla.org/Labs/Jetpack/JEP/21#Initial_Implementation_API

•   Import from future
    jetpack.fu...
Statusbar
•   Somehow like slidebar, HTML-based

•   Parameters: width, html

•   onReady when HTML item is loaded

    • ...
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 fe...
Another example:
JetPlurk by irvinfly
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 future
    jetpack.future.import("sel...
Tabs (I)


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


• Array-like operations:...
Tabs (II)

• Events:
 • onReady: (inherited document is fully loaded)
 • onFocus: focus changed
• Example
  jetpack.tabs.o...
Simple Storage
• Simple Storage: implemented as JSON files
• Future namespace should be used:
  jetpack.future.import("sto...
Settings (I)

• Import from future is needed
• Need some manifest:
 • https://developer.mozilla.org/en/Jetpack/Storage/
  ...
Settings (II)



• Setting types: text, password, boolean, range
• Available options: default, min (for range), max (for
 ...
Me, the extension



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


• For first run purpose:
  jetpack.me.onFirstRun(funct...
more...
https://wiki.mozilla.org/Labs/Jetpack/
JEP
https://developer.mozilla.org/en/Jetpack
After finished...
Go Jetpack Gallery!
http://jetpackgallery.mozillalabs.com/
Jetpack SDK:
Jetpack rebooted
Review of Jetpack Prototype
    https://                   •   Wrong things
    jetpack.mozillalabs.com/
    prototype.htm...
New "Jetpack" Architecture


   Before                         After
    jetpack   jetpack   jetpack      jetpack         ...
New "Jetpack SDK"

• Python SDK, with features enabled:
 • Testing
 • XPI Packaging
• "Package-based"
• CommonJS based scr...
"Packaging"



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

  • Descr...
"Packaging" (II): CommonJS
•   Export a functions in my-module.js:
    exports.foo = function() {
      return "work!"
   ...
Testing


• Create lib/test-my-module.js:
    var myModule = require("my-module");
    exports.ensureAdditionWorks = funct...
cfx works!

• After grab the SDK, run in OSX/Linux:
    source bin/activate
    In Windows
    (Python and Python for Wind...
Jetpack-based extensions

• Jetpack as an API
• Jetpack-based extension will:
 • Require no restart to take effect
 • Have...
Extension manager redesign
FlightDeck
Instant development!
What about JEPs?
https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP
Future: it's your turn!
MozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: Taichung
Upcoming SlideShare
Loading in...5
×

MozTW Jetpack Workshop: Taichung

3,766

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,766
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "MozTW Jetpack Workshop: Taichung"

  1. 1. Workshop: Taichung Hsiao-Ting Yu “Littlebtc” MozTW member / Jetpack Ambassador
  2. 2. Mozilla
  3. 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. 4. Mozilla Labs? • “Labs” in Mozilla • Crazy ideas • Explore future of the web
  5. 5. Jetpack Ambassadors
  6. 6. MozTW? • Mozilla communities in Taiwan • Group for Mozilla “fans” • Localize Mozilla products • Promote Mozilla product & web standard • Our mascot: Foxmosa
  7. 7. Jetpack Introduction
  8. 8. Your Firefox, customized
  9. 9. Old-type Mozilla Extension • XUL: user interface • JavaScript: code • CSS: styling • XBL: binding • XPCOM: core • ... So much hard things :(
  10. 10. Faster, faster and faster
  11. 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. 12. 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
  13. 13. Jetpack Prototype 0.8 Guides
  14. 14. Jetpack Prototype extension https://addons.mozilla.org/zh-TW/firefox/addon/12025
  15. 15. Firebug https://addons.mozilla.org/zh-TW/firefox/addon/1843
  16. 16. Go about:jetpack
  17. 17. Try it out!
  18. 18. Prepare a testing extension
  19. 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. 20. Refresh?
  21. 21. Refresh: the dirty way • For local files only(?) • Go to or refresh the about:jetpack page
  22. 22. Jetpack 0.8 APIs: UI Related
  23. 23. Everyone needs a “Hello World” • Log: Use Error Console (preferred) or Firebug Console • Go “Develop” Tab • Type • console.log("Hello World!");
  24. 24. 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" } );
  25. 25. 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!");
  26. 26. 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
  27. 27. 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) } });
  28. 28. 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" });
  29. 29. 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
  30. 30. 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})
  31. 31. 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
  32. 32. 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");
  33. 33. 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!"); } ); } });
  34. 34. A complex slidebar example
  35. 35. The Target
  36. 36. In RSS
  37. 37. Code and result • http://gist.github.com/323081
  38. 38. 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/
  39. 39. Another example: JetPlurk by irvinfly http://go.sto.tw/jetplurk
  40. 40. Jetpack 0.8 APIs: Not (so much) UI related
  41. 41. 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>"; });
  42. 42. 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
  43. 43. Tabs (II) • Events: • onReady: (inherited document is fully loaded) • onFocus: focus changed • Example jetpack.tabs.onReady( function(doc) { console.log('ok'); } );
  44. 44. 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!)
  45. 45. Settings (I) • Import from future is needed • Need some manifest: • https://developer.mozilla.org/en/Jetpack/Storage/ Settings • Resulting interface in about:jetpack:
  46. 46. 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;
  47. 47. 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!');    });  
  48. 48. more... https://wiki.mozilla.org/Labs/Jetpack/ JEP https://developer.mozilla.org/en/Jetpack
  49. 49. After finished...
  50. 50. Go Jetpack Gallery! http://jetpackgallery.mozillalabs.com/
  51. 51. Jetpack SDK: Jetpack rebooted
  52. 52. Review of Jetpack Prototype https:// • Wrong things jetpack.mozillalabs.com/ prototype.html • Scope • Right things • Quality • Usability • Non-Systemic API • Web Technologies • Document • JEPs • jQuery only • Quick Release • Tools integration
  53. 53. New "Jetpack" Architecture Before After jetpack jetpack jetpack jetpack jetpack Jetpack Jetpack Jetpack API Core Core Firefox Firefox
  54. 54. 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/
  55. 55. "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
  56. 56. "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
  57. 57. 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!
  58. 58. cfx works! • After grab the SDK, run in OSX/Linux: source bin/activate In 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
  59. 59. 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
  60. 60. Extension manager redesign
  61. 61. FlightDeck
  62. 62. Instant development!
  63. 63. What about JEPs? https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP
  64. 64. Future: it's your turn!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×