Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

7,155 views

Published on

Published in: Technology
  • Be the first to comment

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

×