Netvibes UWA workshop at ParisWeb 2007
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Netvibes UWA workshop at ParisWeb 2007

on

  • 9,927 views

 

Statistics

Views

Total Views
9,927
Views on SlideShare
9,670
Embed Views
257

Actions

Likes
6
Downloads
90
Comments
0

9 Embeds 257

http://dev.netvibes.com 239
http://www.netvibes.com 7
http://www.slideshare.net 4
http://go.browzmi.com 2
http://static.slideshare.net 1
http://72.14.203.104 1
http://ide.synthasite.com 1
http://209.85.227.132 1
http://74.125.93.132 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Netvibes UWA workshop at ParisWeb 2007 Presentation Transcript

  • 1. Universal Widget API : How to build multiplaform widgets Xavier Borderie / netvibes http://dev.netvibes.com ParisWeb 2007 workshop Saturday, November 17th, 2007
  • 2. What are widgets • Small, specialized applications (mostly) • Available through the browser: Netvibes, iGoogle, Live.com,YourMinis... • Available through an installed engine:Vista Gadgets, Apple Dashboard,Yahoo! Widgets, Opera...
  • 3. Netvibes’ thinking when creating UWA • MiniAPI is doing quite well • 1000 modules since May 2006 • Positive feedbacks from the community • No de-facto standard • Each site/engine uses its own format • W3C’s specification is still in its infancy (working draft)
  • 4. What UWA promises • Works on the most popular platforms, without any change to the original file • Today: Netvibes, iGoogle, Live.com, Opera, Apple Dashboard, Windows Vista, Yahoo! Widgets • Works just like MiniAPI, in a stricter way • Easy to learn thanks to proven standards: XHTML/XML, JavaScript/Ajax, CSS
  • 5. UWA basics • One static XHTML file, using well-formed XML • UTF-8 encoding • Netvibes namespace a must: xmlns:widget=“http://www.netvibes.com/ns/”
  • 6. Presenting the basic skeleton • http://dev.netvibes.com/files/uwa-skeleton.html • Starting point for most of the developers, through copy/pasting • Skeleton generator is in the testing phase...
  • 7. Skeleton 1 : XHTML headers • Nothing new here... • ...just don’t forget the Netvibes namespace <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:widget=quot;http://www.netvibes.com/ns/quot; > <head> <title>Title of the Widget</title> <link rel=quot;iconquot; type=quot;image/pngquot; href=quot;http://www.netvibes.com/favicon.icoquot; />
  • 8. Skeleton II : meta tags • Various usages • Most are optional <meta name=quot;authorquot; content=quot;John Doequot; /> <meta name=quot;websitequot; content=quot;http://exemple.orgquot; /> <meta name=quot;descriptionquot; content=quot;A descriptive descriptionquot; /> <meta name=quot;keywordsquot; content=quot;these, are, key wordsquot; /> <meta name=quot;screenshotquot; content=quot;http://exemple.org/widget-full.pngquot; /> <meta name=quot;thumbnailquot; content=quot;http://exemple.org/widget-logo.pngquot; /> <meta name=quot;apiVersionquot; content=quot;1.0quot; /> <meta name=quot;autoRefreshquot; content=quot;20quot; /> <meta name=quot;debugModequot; content=quot;truequot; />
  • 9. Skeleton III : emulation files • Optional but very useful when testing in Standalone mode <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;http://www.netvibes.com/themes/uwa/style.cssquot; /> <script type=quot;text/javascriptquot; src=quot;http://www.netvibes.com/js/UWA/load.js.php? env=Standalonequot;></script>
  • 10. Skeleton IV : UWA preferences • UWA-specific tag set • Bad: doesn’t work well with the W3C XHTML validator • Good: makes for more portable preferences <widget:preferences> <preference name=quot;urlquot; type=quot;textquot; label=quot;URLquot; defaultValue=quot;http://feeds.feedburner.com/NetvibesDevBlogquot; /> <preference name=quot;passquot; type=quot;passwordquot; label=quot;Passwordquot; /> <preference name=quot;displayImagesquot; type=quot;booleanquot; label=quot;Display images?quot; defaultValue=quot;truequot; /> <preference name=quot;limitquot; type=quot;rangequot; label=quot;Number of items to displayquot; defaultValue=quot;10quot; step=quot;1quot; min=quot;1quot; max=quot;25quot; /> <preference name=quot;categoryquot; type=quot;listquot; label=quot;Categoryquot; defaultValue=quot;1stquot; onchange=quot;refreshquot;> <option value=quot;allquot; label=quot;allquot; /> <option value=quot;1stquot; label=quot;First categoryquot; /> <option value=quot;2ndquot; label=quot;Second categoryquot; /> <option value=quot;3rdquot; label=quot;Third categoryquot; /> </preference> <preference name=quot;searchquot; type=quot;hiddenquot; defaultValue=quot;quot; /> </widget:preferences>
  • 11. <widget:preferences> <preference name=quot;urlquot; type=quot;textquot; label=quot;URLquot; defaultValue=quot;http://feeds.feedburner.com/NetvibesDevBlogquot; /> <preference name=quot;passwordquot; type=quot;passwordquot; label=quot;Passwordquot; /> <preference name=quot;displayImagesquot; type=quot;booleanquot; label=quot;Display images?quot; defaultValue=quot;truequot; /> <preference name=quot;limitquot; type=quot;rangequot; label=quot;Number of items to displayquot; defaultValue=quot;10quot; step=quot;1quot; min=quot;1quot; max=quot;25quot; /> <preference name=quot;categoryquot; type=quot;listquot; label=quot;Categoryquot; defaultValue=quot;1stquot; onchange=quot;refreshquot;> <option value=quot;allquot; label=quot;allquot; /> <option value=quot;1stquot; label=quot;First categoryquot; /> <option value=quot;2ndquot; label=quot;Second categoryquot; /> <option value=quot;3rdquot; label=quot;Third categoryquot; /> </preference> <preference name=quot;searchquot; type=quot;hiddenquot; defaultValue=quot;quot; /> </widget:preferences>
  • 12. Skeleton V : CSS and JavaScript code • Simple: just use the dedicated tags <style type=quot;text/cssquot;> /* your CSS rules */ </style> <script type=quot;text/javascriptquot;> var YourWidgetName = {}; YourWidgetName.data = null; YourWidgetName.display = function(responseJson) { // display code } widget.onLoad = function() { UWA.Data.getFeed(widget.getValue('url'), YourWidgetName.display); } widget.onRefresh = widget.onLoad; widget.refresh = widget.onLoad; </script>
  • 13. <style type=quot;text/cssquot;> /* your CSS rules */ </style> <script type=quot;text/javascriptquot;> var YourWidgetName = {}; YourWidgetName.data = null; YourWidgetName.display = function(responseJson) { // display code } widget.onLoad = function() { UWA.Data.getFeed(widget.getValue('url'), YourWidgetName.display); } widget.onRefresh = widget.onLoad; widget.refresh = widget.onLoad; </script>
  • 14. Skeleton VI : End of file • The body can be pre-filled or completely empty: its content is free since the DOM can update it at any time • Data are loaded using JavaScript and placed in the body using the DOM </head> <body> <p>Loading...</p> </body> </html>
  • 15. What about diving into some code?
  • 16. Using CSS and JavaScript • Works just like in a classic HTML file: <script> and <style> • Refrain from using external files: put everything in the widget • CSS: try prefixing every rule with class named after the widget, .myWidget p { ... } • CSS: target with classes rather than ids • JS: put every method/variable in an object named after the widget, var MyWidget = {};
  • 17. Practical examples: ʇxǝʇdılɟ Fireplace
  • 18. Fliptext • http://nvmodules.typhon.net/maurice/ fliptext/ • Entirely made with just HTML, CSS et JS - no external calls • Adapted in UWA from the original code, to be found at: http://www.fliptext.org/
  • 19. widget.onLoad = function() { for (i in Flip.table) { Flip.table[Flip.table[i]] = i } out = '<textarea></textarea><p><button>flip <img src=quot;http://nvmodules.typhon.net/maurice/fliptext/refresh.pngquot; alt=quot;Flipquot; /> dılɟ</button></p><textarea></textarea>'; widget.setBody(out); var bt = widget.body.getElementsByTagName('button')[0]; var textareas = widget.body.getElementsByTagName('textarea'); bt.onclick = function(){ var result = Flip.flipString(textareas[0].value.toLowerCase()); textareas[1].value = result; } }
  • 20. Fireplace • http://nvmodules.typhon.net/maurice/ fireplace/index.html • Demonstrating the possibility to use Flash • The widget generates the HTML using JavaScript, but you can directly place the <object> tag within the widget’s body, and never use JavaScript • You can also directly submit your SWF to Ecosystem, which will wrap it in a UWA container for you
  • 21. widget.onLoad = function() { var contentHtml = ''; contentHtml += '<div style=quot;margin: 0 auto;text- align:center;quot;>'; contentHtml += '<object type=quot;application/x-shockwave-flashquot; data=quot;http://nvmodules.typhon.net/maurice/fireplace/fire.swfquot; width=quot;320quot; height=quot;240quot; class=quot;flashquot;>'; contentHtml += '<param name=quot;moviequot; value=quot;http:// nvmodules.typhon.net/maurice/fireplace/fire.swfquot; />'; //contentHtml += '<param name=quot;wmodequot; value=quot;opaquequot; />'; contentHtml += '<embed src=quot;http://nvmodules.typhon.net/ maurice/fireplace/fire.swfquot; type=quot;application/x-shockwave-flashquot; width=quot;320quot; height=quot;240quot;></embed>'; contentHtml += '</object>'; contentHtml += '</div>'; widget.setBody(contentHtml); widget.onResize(); }
  • 22. Let’s practice
  • 23. Build a Zorglangue widget from the Fliptext widget • http://ndiremdjian.free.fr/pics/zorglangue.htm • Same CSS and widget.onLoad() as in Fliptext • Just place the linked page’s JavaScript in a Zorglub object.
  • 24. The final Zorglangue • http://nvmodules.typhon.net/maurice/ zorglub/ • Compare the code with Fliptext: http://nvmodules.typhon.net/maurice/ fireplace/index.html
  • 25. UWA’s JavaScript method and properties • Refrain from using or document window • Replace with document.getElementById(‘id’) widget.body.getElementsByClassName(‘class’)[0] • HTML elements are only extended when created using widget.createElement(). You can extend them by hand: var foo = UWA.$element (widget.body.getElementsByClassName (‘bar’)[0]; foo.setStyle(‘backgroundColor’, ‘red’);
  • 26. UWA’s JavaScript method and properties • Most of the methods and properies have been moved document and window, into two UWA-specific objects: widget et UWA. • widget: usual methods found in JavaScript frameworks • UWA: mostly only used for UWA.Data, which contains the Ajax methods • See the UWA cheat-sheet :)
  • 27. Ajax methods • 4 quick methods: • UWA.Data.getText(url, callback); • UWA.Data.getXml(url, callback); • UWA.Data.getJson(url, callback); • UWA.Data.getFeed(url, callback); • All are built upon the master one: • UWA.data.request(url, request);
  • 28. UWA.Data.request • Allows you to make more complex queries: POST + parameters, authentication, cache handling... • UWA.Data.request(url, request) : • request = { method:’post’, proxy:’ajax’, cache:3600, parameters:’lastname=Bond&id=007’, onComplete:MyWidget.display };
  • 29. Practical examples: Getting images out of a feed: FFFFOUND Handling a feed: Skyblog getText and parsing: DeMets getText and parsing: LinkedIn
  • 30. Getting images out of a feed: FFFFOUND • http://nvmodules.typhon.net/maurice/uwa- ffffound/ • JS: getting the feed with getFeed(), extracting the image links (<link> from the JSON feed format), HTML code built on the fly • CSS: placing the elements • JSON Feed Format: http://dev.netvibes.com/ doc/uwa_specification/ uwa_json_feed_format
  • 31. Handling RSS/Atom: Skyblog • http://nvmodules.typhon.net/maurice/ skyblog/ • Preferences: blog’s name and number of articles to display • JS: parsing the JSON feed, building the HTML code using the DOM rather than in a string • Nota: use of the limit preference • Nota: UWA.Utils.setTooltip()
  • 32. getText and parsing : DeMets • http://nvmodules.typhon.net/maurice/uwa- demets/ • getText on a custom PHP script (UTF-8 conversion) • A few RegExps to remove most of the useless content • finally getting and displaying the restaurant’s menu
  • 33. getText and parsing : LinkedIn • http://florent.solt.googlepages.com/linkedin- pretty.html • getText directly on the URL to be parsed • Display the chosen section (via preference), with a bit of RegExps to simplify/manipulate the content
  • 34. Models and controlers • To better fit in the platform’s theme/style • To ease the conception of some common applications/needs
  • 35. Models • CSS classes • Data grid • E-mail list • Feed list • Rich list • Thumbnailed list
  • 36. Controlers • CSS classes + JavaScript behaviors • TabView • Pager
  • 37. Practical examples: getFeed and FeedList: RSSReader JSON request and Pager: Twitter getJson and TabView: TwitterKing getText parsing and TabView+Pager+...: Rugby World Cup
  • 38. RSS Reader • http://www.netvibes.com/api/uwa/examples/ rssreader.html • getFeed translate any kind of feed into an internal and normalized JSON format • http://dev.netvibes.com/doc/ uwa_specification/uwa_json_feed_format • From there on, retrieving the data in JavaScript is just a matter of knowing what’s where in the JSON feed
  • 39. Twitter • http://dev.netvibes.com/files/examples/ twitter-05-auth-getpost.html • UWA.Data.request on an authenticated JSON • HTML building with the DOM and UWA méthods (setHTML, etc.)
  • 40. TwitterKing • http://www.my-widget.com/ twitter_widget.html • Just like the previous Twitter widget, but overcharged with any possible API call and UWA controler :)
  • 41. Rugby World Cup • http://nvmodules.typhon.net/romain/ rugbyworldcup/ • getText directly on a third-party URL • Code parsing, RegExp, recomposition of the original links, Pager, TabView... the whole shebang
  • 42. Thank you! • http://dev.netvibes.com • http://dev.netvibes.com/doc/ • http://dev.netvibes.com/forum/ • http://dev.netvibes.com/blog/ • http://eco.netvibes.com • We are always hiring! :) http://dev.netvibes.com/doc/jobs