Accueil > Développement > Développer des Widgets Dashboard

Développer des Widgets Dashboard

14/04/2005
Allez aux commentaires Commenter

Par Apple Computer, Inc,

traduit par Thierry le 09/03/2005

Tigre a introduit une nouvelle fonctionnalité appelée Dashboard qui donne naissance à une nouvelle classe unique de mini-applications appelées Widgets. D’un côté Dashboard sera l’une des puissantes fonctionnalités offertes aux utilisateurs de Tigre, d’un autre elle apporte un nouvel environnement de développement aux développeurs. Les widgets sont rapide à développer et facile à déployer, et elles peuvent donner une impulsion à toutes les technologies avancées de Tigre. Les widgets sont parfaits pour travailler avec de petites quantités de données ou pour intergagir avec d’autres applications, à la fois sur votre machine et sur le web. Et elles fournissent une excellente manière d’ajouter des fonctionnalités à une application. Cela veut dire qu’il y a plein d’opportunités pour les développeurs, tant en création de nouveaux produits qu’en ajout de différenciation marketing à des produits existants.

Basés sur les technologies du Web Kit, les widgets Dashboard sont créées en utilisant un mélange de HTML, de JavaScript et de CSS. Cela étend la possibilité de développer des Widgets à destination d’une très large audience. Si vous savez comment créer une page web, alors vous savez comment créer un habile widget. Mais les widgets ne sont pas limités par leur utilisation des technologies web. Ils peuvent tirer profit des immenses pouvoirs de Mac OS X. Mieux encore, vous pouvez créer de puissants Widgets en quelques heures ou quelques jours. Et, pour les membres ADC qui ont accès aux pré-versions de Tigre, il y a un SDK (Software Development Kit) Dashboard qui aide à gagner encore plus de temps. (Les membres ADC ayant des clés actives de diffusion logiciel peuvent trouver le SDK Dashboard dans la section “Downloads: Developer Tools” du Site des Membres ADC).

Cet article vous montre comment fonctionnent les widgets Dashboard et fournit une introduction à la façon de développer et de délivrer des fonctionnalités modulaires dans de petits bouts de code.

Comprendre les Widgets

Les widgets sont prêts à être utilisés lorsque Dashboard est activé et ils disparaissent quand Dashboard est mis de côté, permettant ainsi une utilisation rapide en un coup d’oeil. Puisque Dashboard fait partie du système et ne nécessite pas l’installation de composants supplémentaires, les widgets peuvent rapidement devenir essentiels pour les utilisateurs. Chaque widget est spécialisé dans une tâche et fait preuve de légèreté. Et si un widget a besoin d’un peu plus d’éléments d’interface pour régler des préférences, Dashboard leur permet de se “retourner” afin de pouvoir utiliser le “dos” du Widget. (Pour plus d’informations sur la façon dont Dashboard fonctionne d’un point de vue utilisateur, voir Dashboard “Sneak Preview”).

Les widgets sont classés selon trois catégories :

  • Widgets Accessoires sont autonomes et ne nécessitent aucun support de la part d’une application ou d’un accès Internet. Les horloges, les chronomètres, les calculatrices et les bloc-notes font partie de cette catégorie.
  • Widgets Applicatifs sont associés à une application à part entière. Cette catégorie de widgets améliorent l’application en fournissant une interface moins compliquée et souvent en lecture seule. Le Contrôleur iTunes et les widgets du Carnet d’Adresse appartiennent à cette catégorie.
  • Widgets Information sont conçus pour fonctionner avec des données provenant d’Internet. Ces widgets vous permettent de suivre des événements externes tels que le temps, les vols aériens ou le cours des actions.

L’Architecture Dashboard

architecture.jpg

L’architecture d’exécution de Dashboard est composée des éléments suivants :

  • Le serveur Dashboard, un process léger qui gère l’interface utilisateur de Dashboard dont font partie la barre des widgets, la boîte de fermeture et les effets de lancement de widget.
  • Les process Dashboard client, fournissent la matière nécessaire requise entre le serveur Dashboard et les widgets individuels comme la vue Web Kit permettant aux widgets d’y afficher leur interface utilisateur. Le serveur Dashboard lance un process client par widget exécuté.
  • Les instances widget, affichent des données à l’utilisateur et interagissent avec lui.

Chaque widget est exécuté au sein d’un process client séparé ne pouvant affecter tout autre widget ou application. Dans le registre fiabilité, Dashboard gère aussi avec soin les widgets. Si un widget se plante, il est automatiquement relancé de façon à ce qu’il réapparaissent simplement sur Dashboard. S’il se comporte anormalement, se plantant plus de trois fois à la suite, il est automatiquement retiré du Dashboard.

Que se cache-t’il dans un Widget ?

basicwidget.jpeg

A son niveau le plus simple, un widget n’est rien d’autre qu’une page web qui est affichée dans le Dashboard plutôt que dans un navigateur, tel que Safari. Un widget est contenu dans un bundle sur le disque dur—un répertoire qui rassemble toutes les ressources requises par le widget dans un seul endroit. Les bundles widget sont caractérisés par une extension .wdgt. Comme tout autre bundle, un bundle widget est géré par le Finder comme une entité unique.

Un widget basique contient les fichiers suivants :

  • Un fichier HTML principal qui définit l’interface utilisateur du widget.
  • Une image PNG par défaut qui peut être affichée par Dashboard tandis qu’il charge le widget. Le format PNG est utilisé pour sa gestion excellente de la transparence.
  • Un fichier liste de propriétés nommé Info.plist qui contient un identifiant, un nom, un numéro de version et la page HTML principale du widget tout comme d’autres informations optionnelles utilisées par Dashboard.

Au fûr et à mesure que le widget se développé, vous pouvez placer d’autres fichiers, tels que des images, des CSS externes et des fichiers JavaScript, dans le bundle du widget.

Observons les différents composants d’un widget en commençant par le HTML.

Balise HTML

Comme mentionné plus haut, si vous savez comment écrire du contenu pour le web, vous pouvez écrire un widget. Afin d’adhérer aux meilleures pratiques des standards du web, il est recommandé de créer du contenu qui soit en conformité avec le standard XHTML 1.0 (Strict, Transitional ou Frameset). Par exemple, voici le code HTML d’un widget “Hello World” :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
</head>
<body background="Default.png">
<h1>Hello, World!</h1>
</body>
</html>

Puisqu’un widget est défini en utilisant du HTML, vous pouvez prévisualiser le widget avec Safari tout en écrivant les balises dans votre éditeur de texte favori.

Le HTML apporte la plupart des fonctionnalités requises pour la construction des widgets, mais quelques extensions ont aussi été ajoutées pour donner aux widget des possibilités uniques que vous souhaiterez utiliser. En particuliers, il y a trois extensions au HTML utilisées par les widgets. Elles sont :

  • Une balise canvas vous permettant d’effectuer un rendu 2D complet dans votre widget.
  • Un attribut composite dans la balise img qui vous permet de spécifier comment une image sera rendue.
  • Un nouveau type de champ de saisie, <input type=”search”>, qui vous permet de créer une boîte de recherche dans le style Mac OS X.

Il est important de noter que ces extensions ne sont que très peu de modifications apportées aux spécifications HTML et qu’elles sont conçues pour fonctionner dans tout contexte applicatif où le HTML pourrait être utilisé pour créer une interface utilisateur. Apple travaille avec d’autres acteurs de l’industrie pour s’assurer que ces changements seront adoptés et deviendront standardisés.

Feuilles de Style en Cascade (CSS)

cssexample.jpg

Si vous avez chargé le widget basique “Hello World” précédent, vous avez vu que le texte “Hello World” n’avait pas une apparence acceptable. Les utilisateurs finaux n’apprécieront pas un texte mal placé. La solution consiste à utiliser les feuilles de style (CSS), le standard web pour styliser le HTML.

Voici un exemple d’utilisation de CSS pour donner du style au texte de notre widget :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
	margin: 0;
}

.helloText {
	font: 24px "Lucida Grande";
	font-weight: bold;
	color: white;
	position: absolute;
	top: 24px;
	left: 30px;
}
</style>
</head>
<body background="Default.png">
<h1 class="helloText">Hello, World!</h1>
</body>
</html>

Bien sûr, il est aussi possible de mettre le code CSS dans un fichier séparé et de s’y référer avec une instruction import, comme illustré ici :

<style>
    @import "HelloWorld.css";
</style>

Comme vous pouvez le voir, HTML et CSS vous apportent un ensemble complet d’outils de créatio d’interfaces utilisateur. Maintenant, regardons comment rendre ces interfaces dynamiques.

JavaScript

Toujours dans le cadre de l’utilisation des technologies web, les widgets utilisent JavaScript pour apporter des comportements dynamiques. JavaScript dans Dashboard fonctionne de la même façon qu’il fonctionne dans tout navigateur avec pour seule différence l’ajout de l’objet widget. L’objet widget vous donne la possibilité de faire les choses suivantes :

  • Accéder au système des préférences utilisateurs.
  • Effectuer des changements, telles que redimensionner la taille d’un Widget ou le retourner pour accéder à ces réglages.
  • Réspondre aux événements d’activation de Dashboard.
  • Ouvrir d’autres applications.
  • Gérer les opérations de glisser-déposer.
  • Récupérer du contenu à partir d’Internet en utilisant des URL.
  • Exécuter des commandes système telles que des scripts shell ou des outils en ligne de commande.

Par exemple, pour accéder aux préférences, vous pouvez utiliser :

widget.setPreferenceForKey(preference, key);
widget.preferenceForKey(key);

Les événements d’activation de Dashboard sont importants car ils permettent au widget de ne pas consommer de temps CPU ou des ressources réseau tant qu’il n’est pas visible. Le code exemple suivant montre comment faire cela :

if (window.widget) {
    widget.onhide = onhide;
    widget.onshow = onshow;
}

function onshow() {
    if (timerInterval == null) {
        timerInterval = setInterval("updateTime(true);", 1000);
    }
}

function onhide() {
    if (timerInterval != null) {
        clearInterval(timerInterval);
        timerInterval = null;
    }
}

Comme dans toute page HTML, vous pouvez attacher des actions JavaScript à tout élément d’interface. Par exemple, un widget calculatrice peut effectuer une action lorsque l’utilisateur clique sur une image “égal” comme suit :

 <img id="equal" src="equal.png" onmousedown="equalAction(event);">

Une remarque importante sur l’objet widget : Il n’est disponible que lorsqu’il est exécuté dans Dashboard. Il n’est pas disponible lorsque vous exécutez un objet dans Safari.

Le Fichier Info.plist

Ce fichier conteint les informations essentielles relatives au widget. Ces informations sont utilisées par Dashboard pour identifier le widget et pour trouver ses ressources. La façon la plus simple de créer une liste de propriétés est d’utiliser l’application Property List Editor, située dans /Developer/Applications/Utilities.

Quelques unes des clés qui peuvent ou qui doivent apparaître dans un fichier Info.plist d’un widget sont :

Nom de la clé But Requise
MainHTML Le chemin d’accès dans le bundle du widget bundle vers la page principale HTML pour l’interface du widget. OUI
Width La largeur en pixels du widget. OUI
Height La hauteur en pixels du widget. OUI
CFBundleName Le nom du bundle. OUI
CFBundleIdentifier L’identifiant du bundle écrit dans le style d’un domaine Internet inversé. OUI
DefaultImage Le chemin d’accès dans le bundle vers l’image par défaut du widget. OUI
Plugin Le nom d’un plug-in personnalisé utilisé par le widget. NON
AllowMultipleInstances Indique si plusieurs instances du widget peuvent être lancées. NON

Créer un Widget

La création d’un nouveau widget est facile et directe. Suivez les tâches suivantes pour commencer :

  • Créez un répertoire pour contenir votre Widget.
  • Définissez le fichier Info.plist du widget.
  • Céez le fichier HTML principal en utilisant votre éditeur de texte préféré.
  • Ouvrez le fichier HTML dans Safari pour visualiser le Widget.
  • Rechargez le Widget dans Safari pour visualiser les mises à jour et les changements que vous avez apportés.

Cela constitue une approche rapide, simple et éprouvée par des légions de développeurs web. Bien sûr, il y a une manière encore plus rapide pour commencer qui sera aussi connue des développeurs web : copier un des exemples de travail proposé par le SDK Dashboard et utilisez le comme point de départ. (Remarque : Le SDK est un logiciel en pré-version et n’est disponible qu’aux membres ADC Select et Premier).

À partir du bundle du widget, vous pouvez entrer directement dans l’environnement de test des widgets : Safari. Un simple double-clique sur la page HTML principale permet son ouverture dans Safari où vous pouvez interagir avec et la recharger après chaque modification apportée au contenu du widget.

Widgets-in-safari.jpg

Vous devrez garder en mémoire que Safari offre un environnement basique de test pour les widgets et qu’il ne supporte pas toutes les fonctionnalités disponibles dans Dashboard. Pour tester un widget dans Dashboard, faites simplement un double-clic sur un package .wdgt. Pour voir tout changement, rechargez le avec Commande-R. Vous vous apercevrez qu’il a été rechargé par le sympathique effet appliqué par Dashboard sur le widget.

Tirer Partie des Technologies Mac OS X

Les capacités de HTML, CSS et de JavaScript ne constituent pas le spectre complet de qu’il est possible de faire dans un widget. En fait, ils en constituent que le point de départ. À partir de ce point, vous pouvez accéder aux puissantes capacités de Mac OS X.

Commandes UNIX

Toute commande ou script UNIX, y compris ceux écrits en sh, tcsh, bash, tcl, Perl ou Ruby tout comme AppleScript, peuvent être accédés à partir de l’objet widget. Voici un exemple d’appel d’une commande UNIX :

var obj = widget.system("ps -aux | grep Dashboard", null);
alert(obj.outputString);

Cette possibilité de puiser dans la ligne de commande signifie qu’une incroyable puissance peut être accédée à partir d’un widget.

Dessin Quartz

drawing.jpg

Non seulement les widgets Dashboard utilisent des balises HTML pour afficher l’interface utilisateur, mais ils peuvent aussi dessiner des graphiques de toute sorte en se servant d’une balise canvas. Les méthodes de dessin fournies suivent de manière très proche les capacités de Quartz et apportent la possibilité de composer des images, de dessiner des lignes douces (non aliasées) et même de créer des formes quadratiques complexes. Un exemple de cette fonctionnalité est le widget World Clock qui fait tourner et qui compose plusieurs images que vous voyez dans l’interface.

Il y a deux étapes à suivre pour utiliser un canvas dans un widget. La première consiste à mettre en place une aire dans le corps HTML pour y dessiner, puis à dessiner dans ce canvas à partir de JavaScript. L’exemple suivant montre la mise en place d’un objet canvas, puis le dessin d’un carré bleu et enfin le dessin d’un carré rouge avec transparence. Le résultat de ce code, illustré à droite, est un carré violet entouré d’un carré bleu.

<html>
<head>
</head>
<body>
<canvas id="canvas" width="200" height="200">
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, 200, 200);
    context.setFillColor(0.0, 0.0, 1.0, 1.0);
    context.fillRect(0, 0, 200, 200);
    context.setFillColor(1.0, 0.0, 0.0, 0.5);
    context.fillRect(20, 20, 160, 160);
</script>
</body>
</html>

Si vous comparez les appels simples effectués ici à ceux utilisés pour accéder aux fonctionnalités de Quartz 2D dans un programme C ou Objective-C, vous allez reconnaîtrez la forme des appels et les noms utilisés.

Plug-ins Internet

Puisque les widgets sont construits en utilisant le Web Kit, tout plug-in Internet peut être exécuté au sein d’un plug-in. Par exemple, un widget pourrait afficher un film QuickTime en utilisant le plug-in Internet QuickTime. Aussi, une application complexe basée sur Shockwave pourrait être réutilisée dans le cadre d’un widget.

Plug-Ins Personnalisés

Si vous devez aller plus en profondeur dans le système ou si vous avez besoin de taper dans votre propre application pour créer un widget qui devra interagir de manière très proche avec elle, vous pouvez créer votre propre plug-in Cocoa. Ces plug-ins fonctionnent en fournissant un object JavaScript qui est rendu disponible au Widget.

Les plug-ins pour widget sont créés en utilisant le modèle “Cocoa Bundle”. Une fois que le projet a été lancé, la classe principale du plug-in doit implémenter les méthodes suivantes :

- (id) initWithWebView:(WebView *) webView;
- (void) windowScriptObjectAvailable:(WindowScriptObject *) windowScriptObject;

La première méthode est appelée lorsque votre widget charge le plug-in pour la
première fois. La seconde méthode est alors appelée et vous permet de
fournir un objet JavaScript que votre widget peut utiliser. Cela constitue
un pont entre JavaScript et Objective-C. Par exemple, l’implémentation
suivante crée un objet JavaScript avec le nom MyScriptObject et
permet aux méthodes de cet objet d’être appelées à partir de JavaScript
:

- (void) windowScriptObjectAvailable:(WindowScriptObject *) windowScriptObject
{
    MyScriptObject *myObj = [[MyScriptObject alloc] init];
    [windowScriptObject setValue:myObj forKey:@"MyScriptObject"];
}

L’objet peut être accédé à partir de JavaScript comme suit :

<script>
 if (window.MyScriptObject) {
        MyScriptObject.someMethod(someArg);
}
</script>

En utilisant ce modèle de plug-in, vous pouvez exposer la plupart des fonctionnalités du système ou de votre application à un widget.

Déployer un Widget

Une fois que vous avez créé un widget, l’étape suivante consiste à le mettre entre les mains de vos utilisateurs. Pour qu’un widget soit détécté par Dashboard, il doit être situé dans un des emplacements suivants :

  • /Library/Widgets
  • ~/Library/Widgets

Conclusion

Comme vous pouvez le voir, Dashboard apporte une nouvelle sorte d’environnement de développement. Les widgets sont facile et rapide à créer et de plus très puissants. Ils ont un accès complet à Internet, ils peuvent utiliser les capacités avancées de dessin de Quartz et toutes les autres fonctionnalités disponibles dans Mac OS X. Les opportunités d’être créatif sont énormes.

Commencez Maintenant

Tigre n’arrivera pas avant la mi-2005. Mais en tant que développeur, vous pouvez commencer à travailler avec des pré-versions de Tigre dès maintenant et être prêt à publier votre application lorsque Tigre sera diffusé. Comment ? Enregistrez-vous sur l’Apple Developer Connection et tirez profit des avantages du Tiger Early Start Kit qui vous apportera tout ce dont vous avez besoin pour commencer votre développement pour Tigre dès maintenant, y compris des pré-versions de Tigre et de Xcode 2.0 ainsi que la Bibliothèque de Référence ADC de Tigre.

Une fois que vous aurez Tigre, téléchargez le SDK Dashboard à partir du site de l’Apple Developer Connection, apprenez ou développez votre expérience de HTML, CSS et JavaScript, et laissez votre imagination s’envoler.

Références

Puisque les widgets utilisent massivement les technologies Web, quelques unes des meilleures références en matière de construction de widgets ont déjà été publiés :

Texte original en anglais sur developer.apple.com : Developing Widgets Dashboard

Thierry Développement , ,

  1. Pas encore de commentaire
  1. Pas encore de trackbacks
Vous devez être identifié pour poster un commentaire