Aller au menu - Aller au contenu

Icône Windows Vista Gadget

Avatar
Par Avatar hugobosscool26
Mise à jour : 26/04/2009
375 visites depuis 7 jours , classé 277/777
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 .
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

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...
Retour en haut

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 fichierDescriptionExtension
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é.

Le fichier des options doit obligatoirement se nommer Settings.html mais pour les autres dossiers, choisissez leurs noms à votre guise !


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

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 :
Code : Console
%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).





Vous devez obligatoirement donner à votre dossier le suffixe .gadget, sinon Vista ne les verra pas !






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



Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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 :



Code : XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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éé







Si vous n'avez pas obtenu cela, vous avez commis une erreur : reprenez les étapes précédentes et surtout faites attention aux chemins relatifs des fichiers.




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 :



Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 :




 N'OUBLIEZ PAS : pour que votre gadget se mette à jour, il faut supprimer l'ancien puis le rajouter à nouveau.




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 :



Code : JavaScript
1
2
3
4
5
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. ;) 






Vous vous demandez peut-être pourquoi je vous fais créer tant de dossiers ? En fait, c'est pour mieux séparer le code et pour qu'il corresponde au standard défini par Microsoft, si vous souhaitez ensuite distribuer votre Gadget.






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...

                

                
Retour en haut

            
                

                    

                        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 :





Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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: 

                

                
Retour en haut

            
                

                    

                        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 !

                

                
Retour en haut

            
    

        

            
Q.C.M.

            
                

                    

                    Qu'est-ce que Windows Vista ?
                    
    
                        
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                    

                

            
                

                    

                    Un Gadget pour une Sidebar selon vous, c'est :
                    
    
                        
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                    

                

            
                

                    

                    HTML / CSS / JavaScript pour vous sont :
                    
    
                        
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                    

                

            
                

                    

                    Lorsqu'on veut rajouter l'option Options, il faut créer un fichier :
                    
    
                        
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                    

                

            
                

                    

                    Pour distribuer votre gadget et qu'il s'adapte à la langue du Canada (Québec), quel dossier devrez-vous créer à l'intérieur ?
                    
    
                        
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                                
  •  
    • 
                            
                    

                

            

            

            
Statistiques de réponses au QCM

        

    

    
Retour en haut




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 là 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.



    

        
            
            
        
    


    

        
    







    
Retour en haut



    
Partager

    


    


    

    
Retour en haut

    
            

                33 commentaires pour "Windows Vista Gadget"
                

                    Note moyenne :
                        3.18
                    / 4
                    (17 votes)
                

            

        
        

            
              

                Pseudo
                Commentaire
              

            
            
              
                

                  
                    
                      Hors ligne 
                    
                      Avenged Sevenflod
                    
                  
                  
                    #
                    
                         Posté le 24/07/2010 à 21:44:40
                    
                    
                


                
                    

                
                
                    




    





                		
                
                    
                    Fonctionne pas chez moi .
                    
                
                

              
                

                  
                    
                      Hors ligne 
                    
                      DlÉ Go
                    
                  
                  
                    #
                    
                         Posté le 23/09/2010 à 23:22:34
                    
                    
                


                
                    

                
                
                    

Avatar



    





                		
                
                    
                    tésté sous seven, il fonctionne !, mais il n'est pas trèes complet le tutoriel, sauf qu'il est simple, merci [formulation ratée]



Ps, ça me fait penser aux HyperText Applications en amélioré(HTA:HTML4 -> WWG:xHTML1)
                    
                		
                

              
                

                  
                    
                      Hors ligne 
                    
                      hugobosscool26
                    
                  
                  
                    #
                    
                         Posté le 19/12/2010 à 18:52:56
                    
                    
                


                
                    

                
                
                    

Avatar

    

    Avis : Très bon
        
    



     Études : SUPINFO Languedoc-Roussillon à Montpellier






                		
                
                    
                    Le tutoriel fonctionne également sur Seven sans souci :)



Tous les langages web normaux sont utilisables (html, css, js, silverlight !, flash aussi ;) ).



Les gadgets ouvrent forcément IE :)
                    
                        
Image utilisateur

DL Mon jeu SnAk3 :http://hugobosscool26.free.fr/fichier/compteursnake.php

Mon tuto Vista : http://www.siteduzero.com/tuto-3-15391-1-windows-vista-gadget.html

Mon Portfolio : http://www.ludovicbonnet.com/

                        
 

                    
                		
                

              
                

                  
                    
                      Hors ligne 
                    
                      b.max
                    
                  
                  
                    #
                    
                         Posté le 13/12/2011 à 14:28:26
                    
                    
                


                
                    

                
                
                    

Entrainement = Progressions
Avatar



    





                		
                
                    
                    s'il te plait ne parle pas des widget dhtml!

Car je prépare un tuto dessus







http://www.berkmannarchitecture1.webself.net
                    
                        
Venez voir un site géniale :) 

Secret (cliquez pour afficher)
Se site est celui de :

B.Max

                        
 

                    
                		
                

              
                

                  
                    
                      Hors ligne 
                    
                      b.max
                    
                  
                  
                    #
                    
                         Posté le 25/12/2011 à 18:16:35
                    
                    
                


                
                    

                
                
                    

Entrainement = Progressions
Avatar



    





                		
                
                    
                    Bonjour et bonsoir.

Je voudrais savoir comment créer un gadget autre que Google et le code est:

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
<STYLE TYPE="text/css">
BODY {scrollbar-face-color: #0069B3; scrollbar-shadow-color: #000000;scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #0069B3; scrollbar-arrow-color: #FFCC00;}</STYLE>
<style>
div {border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: #666 0px 2px 10px;
-moz-box-shadow: #666 0px 2px 10px;
box-shadow: #666 0px 2px 10px;
background: #99FF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#009900), to(#339933));
background: -webkit-linear-gradient(#99FF99, #339933);
background: -moz-linear-gradient(#99FF99, #339933);
background: -ms-linear-gradient(#99FF99, #339933);
background: -o-linear-gradient(#99FF99, #339933);
background: linear-gradient(#99FF99, #339933);
-pie-background: linear-gradient(#99FF99, #339933);
behavior: url(/PIE.htc);
}
</style>
<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="Evaluer la vitesse de connexion";
</SCRIPT>
<SCRIPT type="text/JavaScript">
var tjs_img; 
var tjs_src="ban468x60.gif";  //Image à charger
var tjs_size=80113;	// Taille de l'image
var tjs_delai=100; 
var tjs_nb=-1; 
var tjs_delai_max=20000; // 20 000 millisecondes
var timer1=0; var timer2=0;
var tjs_fin="";

function Checkkos() {
	// lance la vérif de la connexion
	tjs_img=new Image();
	timer1=new Date();
	timer1=timer1.getTime();
	tjs_img.src=tjs_src+"?dummy="+timer1;
	tjs_nb=0;
	document.countkos.info.value="Vérification en cours ";
	setTimeout("Timerkos()",tjs_delai);
}
function Timerkos() {
	var anim="-"
	tjs_nb++;
	document.countkos.info.value="Vérification en cours ";

	if (tjs_nb*tjs_delai>=tjs_delai_max) { // Fin de la durée maxi
		tjs_fin=EvalConnexion(0);
		document.countkos.info.value=tjs_fin;
	} else {
		if (tjs_img.complete) {
			timer2=new Date(); timer2=timer2.getTime();
			tjs_fin=EvalConnexion(tjs_size/(timer2-timer1));
			document.countkos.info.value=tjs_fin;
		} else {
			setTimeout("Timerkos()",tjs_delai)
		}
	}
}
function EvalConnexion(kos) {
	tjs_nb=-1;
	res="";
	if (kos==0) {res="Connexion impossible";}
	if ((kos>0)&&(kos<3)) {res="Modem 28k";}
	if ((kos>3)&&(kos<6)) {res="Modem 56k";}
	if ((kos>6)&&(kos<200)) {res="Hauts débits";}
	if ((kos>200)&&(kos<400)) {res="Très Hauts débits";}
	if (kos>400) {res="Vous êtes en local"; }
	kos=Math.round(kos*10)/10;
	return res+" (" + kos +" ko/s)";
}

</SCRIPT>
</head>
<body>
<div>
<FONT face="verdana" color="#B8C8FE" size="2">
Cliquez sur le bouton pour évaluer la vitesse de votre connexion.<BR>
</font>
<FORM name="countkos">
<INPUT type=text name=info size=40 style="border: 1px double #B8C8FE; background-color: #0069B3; color: #FFCC00;">
<INPUT type=button value="Vérifier la connexion" onClick="Checkkos()" style="border: 1px double #FFCC00; background-color: #0069B3; color: #FFCC00;">
</FORM>
</center>
</div>
</body>
</html>





Merci d'avance :)
                    
                        
Venez voir un site géniale :) 

Secret (cliquez pour afficher)
Se site est celui de :

B.Max

                        
 

                    
                		
                

              
            
        

        
            
Voir tous les commentaires
        


    

    

Ce tutoriel a été corrigé par les zCorrecteurs.