Créez votre propre widget : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:10

Ce Instructable vous apprendra comment créer un compte Yahoo de base ! Widget. À la fin de ce didacticiel, vous aurez appris quelques notions de JavaScript et XML.

Étape 1: Mise en route

Certains outils dont vous aurez besoin pour créer un widget sont: - Un ordinateur avec Mac OS X ou Windows Xp/Vista - Un programme d'édition de texte. (Le bloc-notes est parfait.) - Un programme d'édition d'images. (Microsoft Paint est très bien.) - Patience et temps. - Yahoo Widgets - Widget Converter Widget Une fois que vous avez ces programmes et widgets, vous êtes prêt à passer à la deuxième étape.

Étape 2: Création d'une structure de dossier

Vous devrez maintenant créer la structure de dossiers pour héberger tous les fichiers qui composent un widget. La structure ressemble à ceci: -Nom du widget | Contenu | Widget.kon Main.js Ressources | Toutes les images que le widget utiliseraVous pouvez télécharger ce widget pour créer automatiquement la structure du dossierStructure - Reinier KaperDéfinissez les préférences d'un widget en cliquant avec le bouton droit sur n'importe quelle partie de celui-ci, puis cliquez sur préférences. Modifiez les préférences de Structure comme suit: root: accédez à votre dossier de widgets. (Situé dans « Mes documents » sous Windows) Vous pouvez maintenant cliquer sur le widget et une boîte de dialogue apparaîtra, vous demandant le nom du widget.

Étape 3: Création de tous les fichiers nécessaires

Nous allons commencer par créer le fichier widget.xml, qui indique au moteur de widget des informations sur votre widget. Téléchargez un modèle que vous avez créé pour que vous puissiez l'utiliser. Lien de téléchargement ci-dessous. Placez le fichier dans le dossier « Contenu » situé dans le dossier intitulé le nom que vous avez choisi précédemment. Ouvrez le fichier avec l'éditeur de texte de votre choix et remplacez YourNameHere par votre nom. Enregistrez et fermez. Ensuite, nous allons créer le fichier.kon qui est le fichier principal qui indique au widget ce qu'il doit faire. Le fichier.kon n'est qu'un fichier XML avec une extension renommée. Téléchargez ce fichier widget.kon de base et placez-le également dans le dossier « Contenu ». Encore une fois, ouvrez le fichier avec un éditeur de texte. La première ligne signifie que le fichier est un fichier XML créé avec l'encodage UTF-8. La prochaine balise à ajouter est la balise widget; Ensuite, vous déclarez vos paramètres, comme debug;. Vous êtes maintenant prêt à ajouter vos éléments de fenêtre;. Les widgets ont plusieurs objets qui font certaines choses et ont certaines propriétés. Par exemple, l'objet texte,, crée du texte. Voici une liste de certaines des propriétés de l'objet texte: -name (auto-explicatif) -window (déprécié) -data (texte à afficher) -color (auto-explicatif) -size -font -hOffset (aka x) -vOffset (aka y) -width -height Cela dit, commençons à coder. Ajoutez le code suivant au fichier kon, dans les balises:myTextHello World!blueArial18left252En anglais, cela configure un objet texte nommé myText, qui affiche "Hello World!" en police Arial, couleur bleue et taille 12. Enregistrez votre fichier kon et passez à l'étape quatre.

Étape 4: réjouissez-vous

Double-cliquez sur le fichier kon et votre widget se chargera. Toutes nos félicitations! Vous avez créé votre premier widget. Mais nous n'avons pas encore fini de coder. Vous pensez probablement « C'est tout ? », n'est-ce pas ? Passez à l'étape 5 pour ajouter une fonction à votre widget.

Étape 5: Ajout de fonction

Maintenant, nous allons faire en sorte que le widget affiche l'heure actuelle. Cela nécessitera une minuterie qui se met à jour toutes les minutes et un autre fichier. Le fichier suivant sera un fichier JavaScript, qui ira dans le dossier « Contenu ». Ouvrez votre éditeur de texte et créez un fichier appelé main.js. Pour ajouter l'heure, nous utiliserons "l'objet Date". Pour configurer l'objet date, vous créez une fonction. Ajoutez cette fonction au fichier js: function updateText()'{ theTime = new Date(); theHour = String(theTime.getHours()); theMinutes = String(theTime.getMinutes()); myText.data = "L'heure est: "+ theHour+":"+theMinutes; print('update');}Votre widget n'affichera pas encore l'heure, car il ne sait pas quoi faire avec le fichier js. Pour s'en occuper, nous ajoutons ce gestionnaire d'événement au fichier Kon, dans les balises mais pas dans les balises: include('main.js'); le fichier Kon, dans les balises mais pas dans les balises: Enregistrez les fichiers et chargez le widget. Il devrait afficher l'heure. Si cela ne fonctionne pas, téléchargez à la fois le kon et le js ci-dessous et remplacez-les par les anciens.

Étape 6: résumer le tout

Utilisez le widget convertisseur de widget pour convertir le widget en un fichier.widget. REMARQUE: faites glisser le dossier intitulé le nom de votre widget sur le convertisseur, pas le fichier kon. Si vous voulez aller encore plus loin avec votre widget, récupérez quelques ressources ici. Voici une liste de choses que vous pouvez essayer d'accomplir avec votre widget: -Ajoutez des préférences pour contrôler la police à l'aide de la balise et de la sous-étiquette de police- Ajoutez des gestionnaires d'événements comme onClick à l'aide des balises ou.-Affichez une image à partir d'un fichier local à l'aide de l'objet image J'espère que vous avez trouvé ce didacticiel utile et que vous apprécierez les possibilités infinies des widgets, Hunter