Creer un Widget simple et comprendre comment ça marche ;)

Bonjour a tous

J'ai manipulé les fichiers d'un Widget simple dans tout les sens et j'ai compris beaucoup de chose

Le Professeur Frere Loup va vous expliquer comment créer un Widget simple et comprendre comment ça marche

Leçon 1 : La composition d'un fichier Widget

Le Widget, est un ensemble de fichiers compréssés, dont l'extension ZIP, RAR, a été renommé en WGT

Lorsque vous renommez l'extension du fichier WGT du Widget en ZIP, vous pouvez le décompresser et vous retrouvez tout les fichiers comprenant le Widget

Le Widget contient une page web, au format HTM (souvent index.htm), qui décrit les actions du Widget
Le Widget comporte plein de fichiers et dossiers mais les fichiers essentiels sont les suivant

- fichier Config.xml
- l'icone, utile mais pas indispensable, si on l'oublie, le Widget fonctionne quand meme
- la page web qui décrira la fonction du Widget

Apres tout le reste, c'est la construction du Widget selon l'application voulu

Je vais vous expliquer un Widget le plus simple possible et on va le créer ensemble

Avertissement : Lorsque vous connectez le cordon USB et que vous le déconnectez, il est préférable de l'enlever avec la fonction Windows "Retirez le périphérique en toute sécurité"
C'est l'icone en bas a droite, en forme de losange gris avec une fleche verte sur la gauche. Vous faites un clic gauche dessus et vous cliquez ensuite sur la lettre d'attribution du Wave
Si vous retirez le cable USB sans cette manip, on dit qu'on retire le cable a chaud. Il vaut mieux, pour plus de sécurité, vous habituez a déconnecter le Wave et vos clés USB de cette maniere, avec la fonction Retirez le périphérique en toute sécurité, ça prend 5 secondes en plus et ça sera plus sur !
Lors de vos transferts USB du PC vers la carte mémoire du Wave, retirer le périphérique en toute sécurité

Leçon 2 : la composition du fichier Config.xml

Le fichier Config.xml est le premier fichier que le Wave va lire

Il contient les lignes de commandes de configuration du Widget

Voici un fichier Config.xml simplifié

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="Widget" width="450" height="560">
<title>Widget</title>
<icon src="icon.png"/>
<content src="index.htm"/>
<access network="true"/>
<author>Frere Loup</author>
</widget>

Pour éditer les fichiers, j'utilise le programme Notepad++
http://notepad-plus-plus.org/fr/node/7
On peut y arriver avec le bloc-note mais il vaut mieux utiliser ce genre de programme comme Notepad++

Comprendre le fichier Config.xml

C'est l'étape la plus importante a mes yeux. Apres tout n'est que construction selon votre création

Premiere ligne de commande : <?xml version="1.0" encoding="UTF-8" standalone="no"?>

Cette ligne n'est pas indispensable pour le fonctionnement du Widget
Le Widget peut tres bien fonctionner sans cette ligne
En gros, c'est une commande pour configurer les fichiers XML
Cela précise que l'encodage doit etre en UTF8 (norme des caractere)
Il y a d'autres norme, lorsque vous changez l'encodage dans votre navigateur, vous voyez cette norme.
Pour l'europe, il y aussi la norme ISO-8859-1

Pour plus d'information sur cette ligne de commande et ses explications, vous pouvez lire cette page Web
http://fr.selfhtml.org/xml/regles/declarationxml.htm

Deuxieme ligne de commande : <widget xmlns="http://www.w3.org/ns/widgets" id="Widget" width="450" height="560">

Note : les fichiers sont écrit comme des commandes HTML
Lorsqu'on ouvre une balise avec < , vers la gauche, il faut refermer la balise avec >, vers la droite
Il y aussi les fonctions : lorsqu'on commence une fonction comme <b> il faut dire quand cette fonction se termine et ainsi on ecrit a la fin </b> avec le slash / pour dire que c'est la fin de la commande
Cela donnera : <b> blablabla </b>

Explication de la ligne de commande <Widget ....

La ligne de commande ouvre la balise widget avec <widget
Ensuite plein de configuration sont indiqué mais l'ordre n'a pas d'importance

xmlns="http://www.w3.org/ns/widgets"
C'est une fonction utile et indispensable. Je l'ai enlevé et le Widget ne marchait plus.
Par contre, cela fait référence a une adresse Internet, j'ai coupé la connexion de mon Wave et cela marche quand meme
C'est la ligne de commande qui décrit la norme du Widget, la norme W3C
Il y a un site en anglais : http://www.w3.org/
le répertoire ns dans cette adresse redirige vers la fonction namespace
ns pour namespace : http://www.w3.org/ns/widgets/
j'ai essayé avec la derniere version du W3 Widget, qui est /TR/Widget mais cela ne marche pas
Cette fonction sert pour la configuration et le packaging comme ils disent

Donc a ne pas toucher !!

Dans la balise Widget, il y a height="560" width="450"

C'est assez simple, on configure ainsi le Widget en hauteur et en largeur
Les nombres etant le nombre de pixels

Note :
L'écran du Wave fait 800 pixels de haut et 480 pixels de large
Mais la zone utile du Widget n'est que de 560 pixels de haut et 450 pixels de large
Les autres pixels etant utilisé par les 3 icones en bas, Tel, Contact et Message et la ligne du haut avec Widget et les points
Les dimensions 560 de haut et 450 de haut sont les dimensions maximales utile

la fonction id : C'est l'identification du Widget. id pour identification
Cette fonction n'est pas indispensable mais elle est utile lors de plusieurs widget
C'est par cette fonction qu'on etiquette le widget. Lorsqu'il y avait des soucis sur le forum en voulant ré-installer le meme widget, c'est a grace a cette fonction qu'on ne pouvait pas le faire
Il suffit de changer le nom de l'identification pour installer le meme widget

Apres dans beaucoup de widget, il y a la fonction version="1.0"
mais cette fonction n'est qu'a titre indicatif et le Widget fonctionne tres bien sans cette fonction donc on s'en passera pour l'instant
C'est pour indiquer la version de votre Widget, si vous recreez plusieurs fois le meme Widget et que vous apportez des modifications

Le descriptif du Widget

<title>Widget</title>
<icon src="icon.png"/>
<content src="index.htm"/>
<access network="true"/>
<author>Frere Loup</author>

Title : C'est le titre du Widget
C'est ce titre qui va apparaitre lorsque vous l'installerez et que vous le verrez dans la barre des Widgets
Attention :
Le nom du Widget ne doit pas dépasser 12 caracteres en minuscules ou une dizaine en majuscule
Si le nom est trop grand, lors de l'installation, il coupera le nom avec des pointillés
Exemple : Bonjour les amis donnera bonjour...amis

icon src="icon.png"
Vous allez indiquer le chemin d'acces de l'icone du Widget
Il faut qu'il ait une dimension maximale de 128 pixels par 128 pixels
L'icone peut avoir n'importe quel nom : smile.jpg, wave.png
Il suffit que vous renseignez dans cette fonction le nom et l'emplacement du widget. src voulant dire source
"icon.png" le nom du fichier seul indique que l'icone est situé au début
Mais cela peut etre le chemin d'un dossier dans le widget
Exemple : icone src="images/smile.jg"

Attention
Malgré que l'icone aura une dimension de 128x128, il y a le coin en haut a droite, qui sera tronqué par le sens interdit
Le sens interdit tronquera 30 pixels en hauteur et 20 pixels en longueur dans le coin en haut a droite. Donc pensez y lorsque vous choisirez votre icone, cette zone de 30x20 sera cachée

<access network="true"/>
Cette balise est pour dire d'accepter l'acces au réseau par le Widget
Pour interdire l'acces au réseau, au lieu de true pour vrai, indiquez false pour faux
>> <access network="false"/>

Accès au réseau - true si nous avons besoin d'utiliser le réseau de nos widgets, sinon false (si elle est définie à true, nous serons amené à tourner sur le WiFi ou GPRS).

<author>Frere Loup</author>
Ligne de commande a titre indicatif. N'est là que pour signer votre Widget
Le Widget fonctionne tres bien sans cette commande

Enfin, on va fermer la description du Widget par la balise de fermeture du Widget
>> </widget>