Creeu el vostre propi widget: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:16

Aquest instructable us ensenyarà a crear un Yahoo! bàsic. Giny. Al final d'aquest tutorial, haurà après alguns JavaScript i XML.

Pas 1: Introducció

Algunes eines que necessiteu per crear un giny són: - Un ordinador amb Mac OS X o Windows Xp / Vista - Un programa d'edició de text. (El bloc de notes és perfecte.) - Un programa d'edició d'imatges. (Microsoft Paint està bé.) - Paciència i temps. - Yahoo Widgets- Widget Converter Widget Un cop tingueu aquests programes i widgets, esteu a punt per passar al segon pas.

Pas 2: Creació d'una estructura de carpetes

Ara haureu de crear l’estructura de carpetes per allotjar tots els fitxers que formen un giny. L’estructura té l’aspecte següent: -Nom del widget | Contingut | Widget.kon Main.js Recursos | Totes les imatges que farà servir el giny Podeu descarregar-lo per crear automàticament l’estructura de carpeta Estructura - Reinier Kaper Definiu les preferències d’un giny fent clic amb el botó dret a qualsevol part del mateix i feu clic a Preferències. Canvieu les preferències d'Estructura pel següent: arrel: aneu a la carpeta del widget. (Situat a "Els meus documents" al Windows) Ara podeu fer clic al widget i apareixerà un quadre de diàleg que us demanarà el nom del widget.

Pas 3: Creació de tots els fitxers necessaris

Començarem creant el fitxer widget.xml, que indica al motor del widget informació sobre el vostre widget. Baixeu-vos una plantilla que hàgiu creat per fer-la servir. Baixeu l'enllaç següent. Col·loqueu el fitxer a la carpeta "Contingut" situada a la carpeta titulada el nom que heu escollit anteriorment. Obriu el fitxer amb l'editor de text que trieu i substituïu YourNameHere pel vostre nom. Desar i tancar. A continuació, crearem el fitxer.kon, que és el fitxer principal que indica al giny què ha de fer. El fitxer.kon és només un fitxer XML amb una extensió canviada de nom. Descarregueu aquest fitxer widget.kon bàsic i col·loqueu-lo també a la carpeta "Contingut". Una vegada més, obriu el fitxer amb un editor de text. La primera línia significa que el fitxer és un fitxer XML creat amb la codificació UTF-8. La següent etiqueta que cal afegir és l’etiqueta del widget; A continuació, declareu la vostra configuració, com ara depuració;. Ara ja podeu afegir els elements de la finestra;. Els ginys tenen diversos objectes que fan certes coses i tenen certes propietats. Per exemple, l'objecte text,, crea text. Aquí teniu una llista d'algunes de les propietats de l'objecte de text: -name (autoexplicatiu) -window (depreciat) -dades (text que es mostrarà) -color (autoexplicatiu) -size -font -hOffset (aka x) -vOffset (aka y) -width -height Amb això dit, comencem a codificar. Afegiu el codi següent al fitxer kon, a les etiquetes: myTextHello World! BlueArial18left252En anglès, es configura un objecte de text anomenat myText, que mostra "Hello World!" amb lletra Arial, color blau i mida 12. Deseu el fitxer kon i continueu amb el pas quatre.

Pas 4: gaudiu-ne

Feu doble clic al fitxer kon i es carregarà el vostre widget. Enhorabona! Heu creat el vostre primer widget. Però encara no hem acabat de codificar. Probablement pensareu: "Això és tot?", No? Continueu al pas 5 per afegir alguna funció al vostre widget.

Pas 5: afegir una funció

Ara farem que el giny mostri l’hora actual. Per a això caldrà un temporitzador que s’actualitzi cada minut i un altre fitxer. El següent fitxer serà un fitxer JavaScript, que anirà a la carpeta "Contingut". Obriu l’editor de text i creeu un fitxer anomenat main.js. Per afegir l'hora, utilitzarem "l'objecte Date". Per configurar l'objecte de data, creeu una funció. Afegiu aquesta funció al fitxer js: funció updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "L'hora és:" + theHour + ":" + theMinutes; print ('actualització');} El vostre giny encara no mostrarà l'hora, perquè no sap què fer amb el fitxer js. Per tenir-ne cura, afegim aquest gestor d'esdeveniments al fitxer Kon, a les etiquetes però no a les etiquetes: include ('main.js'); Per actualitzar l'hora, hem de crear un temporitzador, que entra el fitxer Kon, a les etiquetes però no a les etiquetes: deseu els fitxers i carregueu el widget. Ha de mostrar l'hora. Si no funciona, descarregueu tant el kon com el js des de baix i substituïu-los pels antics.

Pas 6: resumint-ho tot

Utilitzeu el widget convertidor de widgets per convertir el widget a un fitxer.widget. NOTA: arrossegueu la carpeta que porta per títol el nom del vostre widget al convertidor, no al fitxer kon. Si voleu anar més enllà amb el vostre widget, agafeu alguns recursos aquí. Aquí hi ha una llista de coses que podeu provar de fer amb el widget: -Afegiu preferències per controlar el tipus de lletra mitjançant l’etiqueta i la subetiqueta de tipus de lletra- Afegiu alguns gestors d’esdeveniments com onClick mitjançant les etiquetes o.-Visualitzeu una imatge d’un fitxer local amb l’objecte imatge. Espero que este tutorial us sigui útil i gaudireu de les infinites possibilitats dels ginys, Hunter