Universal Widget API :
concevoir des widgets
  multiplateformes
     Xavier Borderie / netvibes
      http://dev.netvibes....
Ce que sont les widgets

• Petites applications spécialisées (ou pas)
• Disponibles via le navigateur : Netvibes,
  iGoogl...
Le constat de Netvibes
• MiniAPI fonctionne bien
 • 1000 modules depuis mai 2006
 • Bon retour de la communauté
• Pas de s...
Ce que promet UWA
• Fonctionnement sur les plus grandes plates-
  formes, sans modification du fichier original
  • Netvibes...
Les bases d’UWA

• Un fichier statique XHTML, respectueux de la
  syntaxe XML
• Encodage UTF-8
• Espace de nom Netvibes obl...
Présentation du gabarit
        de base

• http://dev.netvibes.com/files/uwa-skeleton.html
• Point de départ pour la plupar...
Gabarit 1 :
   les en-têtes XHTML
• Tout ce qu’il y a de plus classique
• Ne pas oublier le namespace...
<?xml version=quo...
Gabarit II :
              les balises meta
• Usages variés
• La plupart optionnelles
<meta   name=quot;authorquot; conten...
Gabarit III :
 les fichiers d’émulation
 • Optionnels mais très pratique pour le test
    en mode Standalone

<link rel=quo...
Gabarit IV :
     les préférences UWA
  • Jeu de balises spécifiques à UWA
  • Casse la validation XHTML
  • Nécessaire pou...
<widget:preferences>
  <preference name=quot;urlquot; type=quot;textquot; label=quot;URLquot;
    defaultValue=quot;http:/...
Gabarit V :
code CSS et JavaScript
• Tout simplement dans les balises conçues à
  cet effet...
  <style type=quot;text/css...
<style type=quot;text/cssquot;>
  /* your CSS rules */
</style>

<script type=quot;text/javascriptquot;>
  var YourWidgetN...
Gabarit VI :
          fin du fichier
• Le corps peut être vide ou pré-rempli - son
  contenu est libre car modifiable à tout...
On va p’tet passer à la
   pratique, non ?
Utiliser CSS
           et JavaScript
• Comme dans un fichier HTML classique :
  <script> et <style>
• Evitez de faire appe...
Exemples pratiques :
     ʇxǝʇdılɟ
    Fireplace
Fliptext

• http://nvmodules.typhon.net/maurice/
  fliptext/
• Fait uniquement avec HTML, CSS et JS -
  aucun appel extèrie...
widget.onLoad = function() {
  for (i in Flip.table) {
    Flip.table[Flip.table[i]] = i
  }

    out = '<textarea></texta...
Fireplace
• http://nvmodules.typhon.net/maurice/
  fireplace/index.html
• Démonstration de l’intégration de Flash
• Le widg...
widget.onLoad = function() {
	

 var contentHtml = '';

	

 contentHtml += '<div style=quot;margin: 0 auto;text-
align:cen...
Exercice pratique
Créer un widget
        Zorglangue

• http://ndiremdjian.free.fr/pics/zorglangue.htm
• Mêmes CSS et widget.onLoad() que Fl...
Le widget Zorglangue


• http://nvmodules.typhon.net/maurice/
  zorglub/
Méthodes et propriétés
 JavaScript de UWA
• Eviter       et
         document    window


• Remplacer                     ...
Méthodes et propriétés
 JavaScript de UWA
• En remplacement de document et window,
  deux objets spécifiques à UWA : widget...
Méthodes Ajax

• 4 méthodes “rapides” :
 •   UWA.Data.getText(url, callback);

 •   UWA.Data.getXml(url, callback);

 •   ...
UWA.Data.request

• Autorise les requêtes plus complexes : POST
    + paramètres, authentification, gestion du
    cache se...
Exemples pratiques :
récupérer les images d’un flux : FFFFOUND
       exploiter RSS/Atom : Skyblog
       getText sur parsi...
Récupérer les images
d’un flux : FFFFOUND
• http://nvmodules.typhon.net/maurice/uwa-
  ffffound/
• JS : récupération du flux...
Exploiter RSS/Atom :
         Skyblog
• http://nvmodules.typhon.net/maurice/
  skyblog/
• Préférences : nom du blog et nom...
getText sur parsing :
         DeMets
• http://nvmodules.typhon.net/maurice/uwa-
  demets/
• getText sur un script PHP per...
getText sur parsing :
        LinkedIn
• http://florent.solt.googlepages.com/linkedin-
  pretty.html
• getText direct sur l...
Modèles et contrôleurs

• Pour une meilleure intégration au thème
  Netvibes
• Pour faciliter la conception de certaines
 ...
Modèles
• Des classes CSS
 • Data grid
 • E-mail list
 • Feed list
 • Rich list
 • Thumbnailed list
Contrôleurs

• Classes CSS + comportements JavaScript
 • TabView
 • Pager
 • Navigation Highlight
Exemples pratiques :
  getFeed et FeedList : RSSReader
  JSON request et Pager : Twitter
   getJson et TabView : TwitterKi...
RSS Reader
• http://www.netvibes.com/api/uwa/examples/
  rssreader.html
• getFeed transcrit n’importe quel type de flux
  e...
Twitter

• http://dev.netvibes.com/files/examples/
  twitter-05-auth-getpost.html
• UWA.Data.request sur un flux JSON
  auth...
TwitterKing


• http://www.my-widget.com/
  twitter_widget.html
• Comme Twitter, mais en mode ++
Rugby World Cup

• http://nvmodules.typhon.net/romain/
  rugbyworldcup/
• getText direct sur une page tierce
• Parcours du...
Merci !
• http://dev.netvibes.com
• http://dev.netvibes.com/doc/
• http://dev.netvibes.com/forum
• http://dev.netvibes.com...
Upcoming SlideShare
Loading in …5
×

Atelier autour de UWA à ParisWeb 2007

6,767 views
6,737 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,767
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
76
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Atelier autour de UWA à ParisWeb 2007

  1. 1. Universal Widget API : concevoir des widgets multiplateformes Xavier Borderie / netvibes http://dev.netvibes.com ParisWeb 2007 workshop Samedi 17 novembre
  2. 2. Ce que sont les widgets • Petites applications spécialisées (ou pas) • Disponibles via le navigateur : Netvibes, iGoogle, Live.com,YourMinis... • Disponible via un moteur de widget intégré : Vista Gadgets, Apple Dashboard,Yahoo! Widgets, Opera...
  3. 3. Le constat de Netvibes • MiniAPI fonctionne bien • 1000 modules depuis mai 2006 • Bon retour de la communauté • Pas de standard de fait • Chaque site/moteur utilise son propre format • La specification du W3C est toujours en Working Draft
  4. 4. Ce que promet UWA • Fonctionnement sur les plus grandes plates- formes, sans modification du fichier original • Netvibes, iGoogle, Live.com, Opera, Apple Dashboard, Windows Vista,Yahoo! Widgets • Un fonctionnement proche de MiniAPI, en plus strict • Une facilité d'apprentissage grâce aux standards : XHTML/XML, JavaScript/Ajax, CSS
  5. 5. Les bases d’UWA • Un fichier statique XHTML, respectueux de la syntaxe XML • Encodage UTF-8 • Espace de nom Netvibes obligatoire : xmlns:widget=“http://www.netvibes.com/ns/”
  6. 6. Présentation du gabarit de base • http://dev.netvibes.com/files/uwa-skeleton.html • Point de départ pour la plupart des développeurs • Générateur en version test
  7. 7. Gabarit 1 : les en-têtes XHTML • Tout ce qu’il y a de plus classique • Ne pas oublier le 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. 8. Gabarit II : les balises meta • Usages variés • La plupart optionnelles <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. 9. Gabarit III : les fichiers d’émulation • Optionnels mais très pratique pour le test en mode Standalone <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. 10. Gabarit IV : les préférences UWA • Jeu de balises spécifiques à UWA • Casse la validation XHTML • Nécessaire pour des préférences portables <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. 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. 12. Gabarit V : code CSS et JavaScript • Tout simplement dans les balises conçues à cet effet... <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. 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. 14. Gabarit VI : fin du fichier • Le corps peut être vide ou pré-rempli - son contenu est libre car modifiable à tout moment • Les données sont chargées via Ajax et placées via le DOM </head> <body> <p>Loading...</p> </body> </html>
  15. 15. On va p’tet passer à la pratique, non ?
  16. 16. Utiliser CSS et JavaScript • Comme dans un fichier HTML classique : <script> et <style> • Evitez de faire appel à des fichiers externes : mettez tout votre code dans le widget • CSS : préfixer chaque règle d'une classe au nom du widget, .monWidget p { ... } • CSS : cibler avec des classes plutôt que des id • JS : placer chaque méthode/valeur dans un objet au nom du widget, var MonWidget = {};
  17. 17. Exemples pratiques : ʇxǝʇdılɟ Fireplace
  18. 18. Fliptext • http://nvmodules.typhon.net/maurice/ fliptext/ • Fait uniquement avec HTML, CSS et JS - aucun appel extèrieur • Adaptation dans UWA du code JavaScript original : http://www.fliptext.org/
  19. 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. 20. Fireplace • http://nvmodules.typhon.net/maurice/ fireplace/index.html • Démonstration de l’intégration de Flash • Le widget génère le code HTML avec JavaScript, mais il est possible de placer directement la balise <object> dans le corps, sans jamais faire appel à JavaScript
  21. 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. 22. Exercice pratique
  23. 23. Créer un widget Zorglangue • http://ndiremdjian.free.fr/pics/zorglangue.htm • Mêmes CSS et widget.onLoad() que Fliptext • Code JavaScript placé dans un object Zorglub
  24. 24. Le widget Zorglangue • http://nvmodules.typhon.net/maurice/ zorglub/
  25. 25. Méthodes et propriétés JavaScript de UWA • Eviter et document window • Remplacer par document.getElementById(‘id’) widget.body.getElementsByClassName(‘classe’)[0] • Elements étendus seulement si créés par widget.createElement() . L’extension peut se faire à la main : var foo = UWA.$element (widget.body.getElementsByClassName (‘bar’)[0]; foo.setStyle(‘backgroundColor’, ‘red’);
  26. 26. Méthodes et propriétés JavaScript de UWA • En remplacement de document et window, deux objets spécifiques à UWA : widget et UWA. • widget: méthodes habituelles des frameworks JavaScript • UWA : surtout pour UWA.Data, les méthodes Ajax • Voir la cheat-sheet :)
  27. 27. Méthodes Ajax • 4 méthodes “rapides” : • UWA.Data.getText(url, callback); • UWA.Data.getXml(url, callback); • UWA.Data.getJson(url, callback); • UWA.Data.getFeed(url, callback); • Toutes reposent sur une méthode-mère : • UWA.data.request(url, request);
  28. 28. UWA.Data.request • Autorise les requêtes plus complexes : POST + paramètres, authentification, gestion du cache serveur... • UWA.Data.request(url, request) : • request = { method:’post’, proxy:’ajax’, cache:3600, parameters:’lastname=Bond&id=007’, onComplete:MonWidget.display };
  29. 29. Exemples pratiques : récupérer les images d’un flux : FFFFOUND exploiter RSS/Atom : Skyblog getText sur parsing : DeMets getText sur parsing : LinkedIn
  30. 30. Récupérer les images d’un flux : FFFFOUND • http://nvmodules.typhon.net/maurice/uwa- ffffound/ • JS : récupération du flux avec getFeed(), extraction du lien des images (<link> du flux JSON), génération à la volée du code • CSS : placement des éléments • JSON Feed Format : http://dev.netvibes.com/ doc/uwa_specification/ uwa_json_feed_format
  31. 31. Exploiter RSS/Atom : Skyblog • http://nvmodules.typhon.net/maurice/ skyblog/ • Préférences : nom du blog et nombre d’articles à afficher • JS : parcours du flux JSON et construction du HTML avec le DOM plutôt que directement dans une chaîne • A noter : utilisation de la préférence limit • A noter : UWA.Utils.setTooltip()
  32. 32. getText sur parsing : DeMets • http://nvmodules.typhon.net/maurice/uwa- demets/ • getText sur un script PHP perso, qui se charge de nettoyer le plus gros de la page • quelques regexp pour retirer encore plus de contenu • récupération et affichage du code de la carte
  33. 33. getText sur parsing : LinkedIn • http://florent.solt.googlepages.com/linkedin- pretty.html • getText direct sur la page à parcourir • Affichage direct de la section choisie, avec un peu de RegExp pour simplifier/remanier le contenu
  34. 34. Modèles et contrôleurs • Pour une meilleure intégration au thème Netvibes • Pour faciliter la conception de certaines applications
  35. 35. Modèles • Des classes CSS • Data grid • E-mail list • Feed list • Rich list • Thumbnailed list
  36. 36. Contrôleurs • Classes CSS + comportements JavaScript • TabView • Pager • Navigation Highlight
  37. 37. Exemples pratiques : getFeed et FeedList : RSSReader JSON request et Pager : Twitter getJson et TabView : TwitterKing parsing getText et TabView+Pager+... : Rugby World Cup
  38. 38. RSS Reader • http://www.netvibes.com/api/uwa/examples/ rssreader.html • getFeed transcrit n’importe quel type de flux en un format JSON interne normalisé • http://dev.netvibes.com/doc/ uwa_specification/uwa_json_feed_format • Partant de là, récupérer les informations est une simple question de connaître le format en question
  39. 39. Twitter • http://dev.netvibes.com/files/examples/ twitter-05-auth-getpost.html • UWA.Data.request sur un flux JSON authentifié • Composition du HTML avec le DOM et les méthodes UWA (setHTML, etc.)
  40. 40. TwitterKing • http://www.my-widget.com/ twitter_widget.html • Comme Twitter, mais en mode ++
  41. 41. Rugby World Cup • http://nvmodules.typhon.net/romain/ rugbyworldcup/ • getText direct sur une page tierce • Parcours du code, RegExp, recomposition des liens originaux, Pager, TabView... la totale
  42. 42. Merci ! • http://dev.netvibes.com • http://dev.netvibes.com/doc/ • http://dev.netvibes.com/forum • http://dev.netvibes.com/blog/ • http://eco.netvibes.com • On embauche ! :) http://dev.netvibes.com/doc/jobs

×