Apple Tiger a introduit une nouvelle fonctionnalité appelée Dashboard, qui fournit une nouvelle sorte de mini-applications appelées Widgets. Ceux qui ont connu Konfabulator (racheté par Yahoo et renommé Yahoo Widgets, fonctionnant sur Mac et PC) ne seront pas déroutés, sachant que le principe de développement et de déploiement est identique.

Dashboard fournit aux développeurs un nouvel environnement de développement d’applications riches. Les Widgets sont rapides à développer et faciles à déployer, et ils peuvent bénéficier de toutes les technologies avancées de Tiger. Les Widgets sont parfaits pour traiter de petits volumes de données ou interagir avec d’autres applications de Tiger, sur votre desktop comme sur le web. Ils s’avèrent être très adaptés pour l’extension d’applications existantes.

Basé sur des technologies Web, les Widgets de Dashboard sont composés d’un mix de HTML, de JavaScript, et de CSS. Si vous savez dors et déja comment créer une page Web, alors vous êtes capable de créer un Widget. Les Widgets ne sont pas limités aux technos Web. Ils peuvent profiter de toute la puissance de Mac OS X. Mieux, vous pouvez créer de superbes Widgets en quelques heures ou quelques jours, plutôt qu’en quelques mois ou années.

Remarque : Une techno parallèle aux Widgets pour faire tourner des applications riches hors d’un navigateur . Utiliser Macromedia Adobe Flex ou Macromedia Adobe Flash avec Macromedia Adobe Central
Comprendre les Widgets
Les Widgets sont classés dans les trois catégories suivantes:

  • Accessory Widgets , self-contained, ne nécessitent pas le support d’une autre application ou d’un accès internet. les horloges, timers, calculatrices, notepads sont des exemples.
  • Application Widgets associés avec une application. Ce genre de Widget améliore souvent l’application en fournissant une interface moins compliquée. Le controleur iTunes ou le Widget Address Book tombent dans cette catégorie.
  • Information Widgets travaillent avec des données provenant de l’Internet. Ces Widgets permettent de surveiller des évènements extérieurs tels que la météo, les vols ou les prix des stocks.

L’architecture de Dashboard

L’architecture de Dashboard est constituée des composants suivants:

  • Dashboard server, un process lightweight qui gère l’interface de Dashboard , la barre des Widgets, et les effets appliqués au lancement des Widgets.
  • Dashboard client processes, fournissent toute la glue nécessaire entre le Dashboard server et les Widgets. Le Dashboard server lance un process client par Widget.
  • Widget instances, affichent les données qui interagissent avec l’utilisateur.

Qu’y a t’il a l’intérieur d’un widget?

Un Widget est simplement une page Web qui est affichée dans le Dashboard plutot que dans un navigateur, tel que Safari. Un Widget est contenu sur le disque dans un bundle—un répertoire qui regroupe toutes les ressources nécessaires au Widget en une seule place. Les bundles Widget sont nommés avec l’extension .wdgt. Un bundle Widget est géré par le Finder comme une seule entité.

Un Widget simple contient les fichiers suivants:

  • Un fichier HTML principal qui définit l’interface utilisateur du Widget.
  • Une image de fond PNG par défaut qui peut être chargée par le Dashboard au lancement du Widget. Le format PNG est utilisé pour son excellent support de la transparence.
  • Une image icone, aussi au format PNG, utilisée pour représenter le Widget dans la barre des Widgets.
  • Une fichier de propriétés nommé Info.plist qui contient l’identifiant du Widget, le nom, la version , la taille, et la page HTML ainsi que d’autres informations optionnelles.

    • D’autres ressources peuvent être placées dans ce bundle tels que fichiers CSS, Javascript ou images.

    Jetons un coup d’oeil sur les éléments du Widget, en commencant par le HTML

    HTML markup

    Comme dit précédemment; si vous savez écrire du contenu pour le Web vous saurez écrire un Widget. Pour adhérer aux standards du Web il suffit que vous écriviez un document XHTML 1.0 compliant. Regardez ce code d’exemple.

    CSS

    Comme pour le développement web classique, de manière a ne pas avoir le texte mal placé, utiliser le CSS.

    JavaScript

    Les Widgets font usage de JavaScript pour le comportement dynamique. Le JavaScript du Dashboard fonctionne de la même facon que dans les navigateurs Web (l’objet XMLHttpRequest est supporté) a la difference de l’objet widget en plus. L’objet widget permet de faire les choses suivantes:

    • Accéder aux préférences system.
    • Rotation du Widget pour accéder aux préférences.
    • Répondre a des évènements (click sur un bouton par exemple).
    • Ouvrir d’autres applications.
    • Exécuter des commandes systeme tels que du shell script.

    Images

    Default.png est l’image de fond de mon Widget. Voici un exemple.

    Icon.png sera l’image affichée dans la barre des Widgets. Voici un exemple:

    Le fichier Info.plist

    Le fichier Info.plist contient les informations essentielles sur un Widget. Cette information est utilisée par le Dashboard pour identifier le Widget et savoir ou chercher les resources. Le moyen le plus facile de faire ce fichier est d’utiliser l’application Property List Editor, située dans /Developer/Applications/Utilities.

    Voici quelques propriétés nécessaire pour le Dashboard:

    • MainHTML: le nom du fichier HTML par défaut que le widget va charger. Les Widgets pouvant contenir n’importe quel nombre de fichiers HTML, JavaScript, et CSS, donc nous devons préciser quel sera celui utilisé au premier chargement.
    • DefaultImage: Le nom de l’image par défaut lorsque le Widget sera chargé. Alors que les pages Web ont toujours besoin d’un background, les Widgets non. Les Widgets du Dashboard ont besoin de charger une image que le fichier HTML utilisera ensuite comme image de fond.
    • Width: La largeur du widget. Pour les widgets simples, c’est la taille de l’image par défaut. Pour les widgets plus complexes, la largeur de l’image pouvant changer durant l’exécution (stretching), il faut dans ce cas renseigner la largeur Maximum.
    • Height: Hauteur du widget. memes caractéristiques que la largeur.
    • CFBundleName: Le nom du bundle; dans notre cas, “Hello World”. Vous pouvez renseigner ce que vous voulez.
    • CFBundleIdentifier: Notation inversée de domaine internet (ex.: com.apple.widgets.HelloWorld)pour identifier le bundle. Cette propriété utilise des conventions similaires au nommage des classes Java, et doit être unique.
    • AllowMultipleInstances: Cette propriété indique si l’utilisateur peut lancer plusieurs instances du même Widget en même temps.
    • AllowFullAccess: Cette propriété doit être utilisée au cas ou votre Widget lance des commandes UNIX ou accède à des applications externes. Si vous utilisez beaucoup de fonctionnalités Web (avec XMLHttpRequest, …) faire attention a la valeur de cette propriété.

    Créer un Widget

    Créer un nouveau Widget est assez simple. Suivez les étapes suivantes pour procéder:

    • Créer un répertoire pour héberger le Widget.
    • Céer le fichier de propriétés du Widget: Info.plist .
    • Créer le fichier HTML principal.
    • Créer l’image de fond et l’icone
    • Ouvrir le fichier HTML dans Safari pour voir s’exécuter le Widget.
    • recharger le Widget dans Safari pour voir les modifications effectuées.

    Déployer un Widget

    Une fois le Widget terminé, il faudra le déployer et le mettre à disposition de vos utilisateurs. Pour qu’un Widget soit détecté par le Dashboard il devra se situer dans l’un des répertoires suivants:

    • /Library/Widgets
    • ~/Library/Widgets

    Ajouter l’extension .wdgt à votre répertoire (ex.: MyWidget.wdgt).

    Copier le Widget MyWidget.wdgt dans l’un des répertoires précédents.

    Une fois déployé, nous avons le Widget Hello World a l’ecran:

    MyWidgets2.png
    Et la barre des Widgets

    Source du Widget

    Ressources:

    Developing Dashboard Widgets

    MacDevCenter – Build a Dashboard Widget