Fil d'Ariane
Mis à jour le mercredi 30 octobre 2013
  • Facile
Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

Bonjour à tous : vous avez, j'espère, tous entendu parler de ce nouveau système d'exploitation qu'est Windows Vista (Windows NT 6.0) ? Sinon allez ici :) .
Bon : pour les autres, nous allons ici apprendre à développer un Gadget pour la Windows Sidebar !!!

Allez hop, au travail tout de suite les gars, nul besoin d'être un super programmeur pour y arriver (j'en suis la preuve ^^ ) et je vais bien sûr vous assister dans cette péripétie :p .

Windows Sidebar et ses Gadgets

Voilà : vous venez d'acquérir Windows Vista et vous ne connaissez pas encore tout de votre nouveau système d'exploitation préféré ! Ne vous inquiétez pas, nous allons voir maintenant ce qu'est la Windows Sidebar ainsi que ses fabuleux gadgets ; regardez l'illustration ci-après :

Ecran Vista

Remarquez alors sur la droite une barre transparente, c'est la fameuse et toute nouvelle Windows Sidebar !

Cette barre permet avec le petit plus du haut (au-dessus de l'horloge) d'ajouter des... Gadgets comme ceci :

Ajoutwidget

Il ne vous reste plus qu'à sélectionner un gadget et à le glisser sur votre Sidebar personnel.

Maintenant, regardez bien le gadget nommé GOOGLE Search au milieu et à droite, le gadget avec un logo Google, c'est celui que nous allons apprendre à réaliser tout de suite ;) .

Ne vous inquiétez pas, ce n'est que du langage HTML, du CSS et un peu de JavaScript : alors, voyons ça tout de suite...

Composition d'un gadget

Nous allons maintenant voir de quoi est formé un magnifique Gadget : ne vous inquiétez pas, un webmaster saura s'y retrouver très facilement. :)

Type de fichier

Description

Extension

Manifest

Contient les descriptions du gadget tels que l'auteur, son numéro de version...

nom.xml

Fichier HTML

Contient le code pour l'affichage et pour définir des pages supplémentaires

nom.html

Fichier des options

Permet de définir les options de votre gadget

Settings.html

Fichier Javascript

Permet d'interagir avec les événements utilisateur

nom.js

Images et feuilles de styles

Images à insérer et feuilles de style CSS

nom.png ou nom.css

Vous pouvez donc utiliser tous ces langages pour concevoir votre gadget ou encore utiliser du Flash et de l'Active X, mais je ne traiterai pas de cela ici pour des raisons de simplicité.

Allez, on attaque les choses sérieuses à la section suivante :pirate: .

Création d'un gadget

Allez : on attaque tout de suite :-°

Sous Windows Vista, cliquez sur le menu démarrer puis sur Tous les programmes, Accessoires et enfin Exécuter... (ou plus simplement, sur le bureau, appuyez sur les touches Windows + R).

Dans la fenêtre qui vient de s'ouvrir, collez cette ligne :

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

Normalement, vous devriez maintenant avoir ceci :

Exécuter commande

Faites OK (si Vista vous demande de confirmer, ne vous inquiétez, pas allez-y).

Vous arrivez dans un dossier vide, créez-en un nouveau à cet endroit nommé GOOGLESearch.gadget (ce dossier contiendra tous les éléments de notre futur gadget).

À l'intérieur de ce dossier, créez un fichier nommé gadget.html.

<html>
<head>
        <title>Mon premier Gadget Google</title>
        <style>
                body {
                        width:130px;
                        height:87px;
                     }
        </style>
</head>
<body>
        <span id="gadgetContent" style="font-family: Tahoma; font-size: 10pt;">Mon premier Gadget Google !</span>
</body>
</html>

Bon : si vous vous êtes assoupis durant les cours de M@teo21 sur l'xHTML, il n'y a pas de problème, on ne le dira pas au patron :-° ! Allez : pour rappel c'est par là...

Maintenant créez un second fichier nommé gadget.xml et placez-y ce code à l'intérieur :

<?xml version="1.0" encoding="utf-8" ?>
<gadget>

    <name>GOOGLE Search</name>
       
    <version>1.0</version>
       
    <author name="HuGoBosSCoOL26^^">
        <info url="http://hugobosscool26.free.fr" />
    </author>
       
    <copyright>2007</copyright>
       
    <description>Gadget pour rechercher sur google !</description>
       
        <icons>
                <icon height="48" width="48" src="images/icon.png"/>
        </icons>
 
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="gadget.html" />
            <permissions>full</permissions>
            <platform minPlatformVersion="1" />
                        <defaultImage src="images/drag.png"/>
        </host>
    </hosts>
</gadget>

Maintenant, si vous regardez bien ce fichier XML, il y a :

-<icon height="48" width="48" src="images/icon.png"/>
-<defaultImage src="images/drag.png"/>

Quésaco, vous direz-vous ?

- L'image icon.png est en fait l'image qui apparaît dans le sélecteur de gadgets (voir l'illustration précédente).

- L'image drag.png correspond à l'image qui s'affiche lorsque vous sélectionnez le gadget et le déplacez jusqu'à votre Windows Sidebar !

Récupérez ces deux images et enregistrez-les dans un nouveau dossier nommé images que vous créez donc dans le dossier GOOGLESearch.gadget : la première étant icon.png et l'autre, ben... l'autre :lol: .

icône Google Search
drag

Vous vous demandez peut-être à quoi sert ce fichier XML ? À cela, il renseigne les informations sur votre gadget :

résultat XML

Et maintenant, après tant de sueur ? ;)

Eh bien vous venez de créer votre premier Gadget : F-E-L-I-C-I-T-A-T-I-O-N-S !

Alors allons le tester : je vous laisse aller dans votre Sidebar, puis cliquer sur le + en haut, sélectionner votre gadget nouvellement créé et le rajouter à votre Sidebar !

Voilà le résultat que vous devriez obtenir :

gadgetcréé

Mais... mais ce résultat ne me satisfait pas du tout, là :waw: !

Oui, bon, maintenant nous allons accélérer la manoeuvre alors, remplacez le contenu de votre fichier gadget.html par :

<html>
<head>
        <title>Mon Widget Google ! </title>
        <style>
        body 
        { 
         width:130px;
         height:87px;
        }
        </style>
        <script src="js/search.js" language="javascript" type="text/javascript"></script>

        <script>
                        System.Gadget.settingsUI = "settings.html";
                        System.Gadget.Settings.write("urlMoteur", "http://www.google.fr/search?q=");//Moteur de recherche par défaut
        </script>
</head>

        <body>
                <img src="/images/logo.png" /><span style="color: #6389D8;font-weight: bold;font-size: 10pt;"> Mots clés:</span>
                <input id="txtSearch" type="text" size="14" maxlength="30" />
                <div align="right"><input type="submit" value="OK" id="search" name="search" onclick="search()" /></div>      
        </body>

</html>

Il vous manque encore cette petite image que vous devez placer dans le dossier images, évidemment sous le nom logo.png :

logo

Maintenant, votre Gadget doit ressembler à cela :

resultat

À présent, toujours dans le dossier GOOGLESearch.gadget, créez un nouveau dossier nommé js, puis créez un fichier nommé search.js et collez ce code à l'intérieur :

function search()
{
    var moteur = System.Gadget.Settings.read("urlMoteur");
    window.open(moteur+txtSearch.value,'window');
}

Ce code JavaScript se chargera d'ouvrir un navigateur avec le mot clé qui est à rechercher. ;)

Et maintenant que vais-je faire ?

Mettez à jour votre gadget comme expliqué précédemment, rentrez un mot clé et là, M-I-R-A-C-L-E, un navigateur web démarre avec le moteur de recherche Google par défaut, et en requête, le mot clé rentré précédemment.

Nous allons maintenant rajouter quelques options à notre gadget : continuons donc notre bonhomme de chemin ensemble...

Créer les options

Vous avez sûrement remarqué qu'en faisant un clic droit sur un gadget, il y a un bouton nommé Options :

Options

Pour notre gadget, nous n'avons pas ces options, alors créons-les tout de suite : pour ceci, il suffit juste de créer un fichier nommé Settings.html que vous placez à la racine du dossier GOOGLESearch.gadget :

<html>
<head>
        <style>
                body
                { width:300; height:100;}
        </style>
        <script>
        
                function init()//Initialisation du champ de texte
                {
                        var temp = System.Gadget.Settings.read("urlMoteur");
                        
                        if (temp != "")//On regarde si la variable existe 
                                {
                                 URL.innerText = temp;//si elle existe, alors on met dans la boîte de dialogue d'affichage le moteur de recherche entré
                                }
                }

                System.Gadget.onSettingsClosing = SettingsClosing;
                
                function SettingsClosing(event)//On regarde les actions faites
                {
                       if (event.closeAction == event.Action.commit)//Si le bouton OK de la boîte option est enclenché
                        {
                                System.Gadget.Settings.write("urlMoteur", URL.value);//On enregistre la valeur du champ URL dans urlMoteur
                        }
                        event.cancel = false;
                }
        </script>
</head>

        <body onload="init()">

                Changer de moteur de recherche :<br>
                <input type="text" id="URL" length="100">

        </body>
</html>

Bon : pour le code, il est commenté, donc ça devrait aller pour vous, je fais juste ici un récapitulatif du déroulement de l'algorithme.

Le body est affiché (affichage de : Changer de moteur de recherche) et exécute en même temps au chargement la méthode init() (correspond à : <body onload="init()">).

La méthode init() récupère l'urlMoteur défini dans le fichier gadget.html avec ceci mis par défaut "http://www.google.fr/search?q=". Comme la variable temp n'est pas vide, on écrit dans la boîte à options l'URL du moteur de recherche.

La fonction SettingsClosing(event) qui possède en paramètre un événement de l'utilisateur se déclenche lorsque la boîte d'Options est fermée : on teste alors l'origine de cette fermeture, et si elle correspond au bouton OK (if (event.closeAction == event.Action.commit)), on enregistre la nouvelle valeur rentrée par l'utilisateur.

Vous pouvez par exemple rentrer ceci : http://fr.wikipedia.org/wiki/Special:Search?search=

Maintenant, votre recherche s'effectuera sur l'encyclopédie Wikipédia :p !

Allez : encore un petit effort, vous avez bientôt terminé le tutoriel. :ange:

Gadget multi-langues et normalisé

Nous allons maintenant parler de la localisation. o_O o_O

Définition : cela correspond à la langue du système d'exploitation de l'utilisateur :D .

Si vous souhaitez distribuer à grande échelle votre Gadget, il faudra qu'il corresponde à des normes déterminées par Microsoft et qu'il s'adapte à la langue du système d'exploitation, parce qu'un gadget avec Mots clés ne plaira certainement pas à des anglophones :'( ...

Bon : pour les normes, nous avons déjà commencé en créant un dossier images en y plaçant les images, un dossier js qui contient nos fichiers JavaScript.

Maintenant, il faut créer un nouveau dossier à la racine de notre gadget nommé fr-FR : fr pour français et FR pour France ; en Belgique, cela sera fr-BE, et ainsi de suite...

À l'intérieur de ce dossier, nous allons insérer notre fichier gadget.html. :lol: Voilà pour les français !

Pas compliqué direz-vous ; alors, pour les américains, c'est quasiment la même chose, créez un nouveau dossier en-US à la racine de votre gadget, copiez-collez le fichier gadget.html et maintenant, traduisez-le (rien de difficile dans notre cas de transformer mots clés en key words dans le body).

Pour résumer tout cela :

résumé

Nous en avons donc maintenant terminé pour les explications !

Voilà : je suis ravi de vous avoir fait partager mon petit savoir et j'espère que ce tutoriel vous aura servi pour créer vos propres gadgets. :soleil:

Pour vous inspirer, vous pouvez aller également ici ou encore pour proposer vos Gadgets !

N'hésitez pas à me poser des questions ou dirigez-vous sur le forum. :)

P.-S. : puisqu'il faut toujours rendre à César ce qui appartient à César, je me suis inspiré de ces deux sources pour réaliser ce tutoriel : lien 1 et lien 2 qui m'a autorisé à m'aider de sa réalisation.

Exemple de certificat de réussite
Exemple de certificat de réussite