Comment créer un widget (gadget web)

Les widgets sont des applications autonomes qu'on trouve souvent intégrées sur des sites tiers comme horloges, compteurs d'enchères, compte à rebours d'événements, etc. Ce sont des mini-applications faciles à déployer, rapides à développer, qui exploitent des technologies avancées en ajoutant des fonctionnalités à des applications existantes. Si vous savez créer une page web, vous savez créer et déployer un widget car ils utilisent les mêmes technologies : JavaScript, DHTML, CSS. Les widgets peuvent être d'accessoire, d'application ou d'information. Les widgets accessoires sont autonomes (indépendants d'Internet ou d'une application). Les widgets d'application sont liés à une application complète. Les widgets d'information travaillent avec des données Internet.

L'Architecture

Étape 1

Ouvrez votre éditeur de texte et créez un fichier HTML. Le fichier doit respecter le standard XHTML 1.0 ou supérieur pour suivre les bonnes pratiques actuelles. Un code XHTML simple ressemble à ceci :

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Widgets</title>
</head>
<body background="picture.png">
<h1> Welcome to Widget World</h1>
</body>
</html>

Étape 2

Utilisez la balise <canvas> pour effectuer un rendu 2D complet du widget si nécessaire. L'attribut composite est une autre addition à la balise qui permet de spécifier comment l'image ("picture.png") est rendue.

Étape 3

Utilisez les Feuilles de style en cascade (CSS) pour styliser le widget afin qu'il s'affiche uniformément sur tous les navigateurs. Une partie du fichier CSS contiendrait le style suivant :

<style>
/* styles CSS ici */
</style>

Étape 4

Placez le code CSS dans un fichier séparé (ex. widget.css). Référencez-le via l'instruction @import dans le fichier HTML principal :

<head>
@import url("widget.css");
</head>

Ajouter du dynamisme

Étape 1

Utilisez l'objet widget pour fournir des capacités supplémentaires. Par exemple, pour accéder aux préférences utilisateur :

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

Étape 2

Utilisez les événements d'activation pour éviter une utilisation excessive du CPU ou des ressources réseau par le widget. Exemple de code :

if (window.widget) {
  widget.onhide = hide;
  widget.onshow = show;
}
function hide() {
  if (timeInterval == null) {
    timeInterval = setInterval(updateTime, 500);
  }
}
// Ajoutez d'autres fonctions selon vos besoins.

Étape 3

Créez le fichier Info.plist pour identifier le widget et ses ressources. Ce fichier varie selon le type de widget.

Astuce

Conformément aux technologies web, le dynamisme des widgets est fourni par JavaScript. Cela permet au widget d'accéder aux préférences utilisateur, de retourner les widgets pour accéder aux préférences, d'ouvrir d'autres applications, de répondre aux événements de page web et d'exécuter des commandes système (outils en ligne de commande, scripts shell).