Lag din helt egen widget: 6 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:25

Denne instruksen vil lære deg hvordan du lager en grunnleggende Yahoo! Widget. På slutten av denne opplæringen har du lært litt JavaScript og XML.

Trinn 1: Komme i gang

Noen verktøy du trenger for å lage en widget er:- En datamaskin med Mac OS X eller Windows Xp/Vista- Et tekstredigeringsprogram. (Notisblokk er perfekt.)- Et bilderedigeringsprogram. (Microsoft Paint er fint.)- Tålmodighet og tid.- Yahoo Widgets- Widget Converter WidgetNår du har disse programmene og widgetene, er du klar til å gå videre til trinn to.

Trinn 2: Opprette mappestruktur

Nå må du lage mappestrukturen for å huse alle filene som utgjør en widget. Strukturen ser slik ut: -Widget Name | Innhold | Widget.kon Main.js Ressurser | Alle bildene widgeten vil bruke Du kan laste ned denne widgeten for å automatisk lage mappestrukturen Struktur - Reinier Kaper Angi preferanser for en widget ved å høyreklikke på hvilken som helst del av den, og klikke på preferanser. Endre innstillingene til Struktur til følgende: root: Naviger til widgetmappen. (Plassert i 'Mine dokumenter' på Windows) Nå kan du klikke på widgeten, og en dialogboks vil dukke opp og be deg om navnet på widgeten.

Trinn 3: Opprette alle nødvendige filer

Vi starter med å lage widget.xml -filen, som forteller widgetmotorinformasjonen om widgeten din. Last ned en mal som du har laget for å bruke. Last ned lenken nedenfor. Plasser filen i mappen "Innhold" i mappen med navnet du valgte tidligere. Åpne filen med tekstredigereren du velger, og erstatt YourNameHere med navnet ditt. Lagre og lukk. Deretter lager vi.kon -filen som er hovedfilen som forteller widgeten hva den skal gjøre.. Kon -filen er bare en XML -fil med en nytt navn. Last ned denne grunnleggende widget.kon -filen og legg den også i mappen "Innhold". Igjen, åpne filen med et tekstredigeringsprogram. Den første linjen betyr at filen er en XML-fil opprettet med UTF-8-kodingen. Den neste taggen som skal legges til er widget -taggen; Deretter deklarerer du innstillingene dine, som debug;. Nå er du klar til å legge til vinduelementene dine;. Widgets har flere objekter som gjør visse ting og har visse egenskaper. For eksempel lager tekstobjektet,, tekst. Her er en liste over noen av egenskapene til tekstobjektet: -navn (selvforklarende) -vindu (avskrevet) -data (tekst som skal vises) -farge (selvforklarende) -størrelse -font -hoffset (aka x) -vOffset (aka y) -bredde -høyde Med det sagt, la oss begynne å kode. Legg til følgende kode i kon -filen i taggene: myTextHello World! BlueArial18left252 På engelsk setter dette opp et tekstobjekt som heter myText, som viser "Hello World!" i skrift Arial, farge blå og størrelse 12. Lagre kon -filen, og fortsett til trinn fire.

Trinn 4: Gled deg

Dobbeltklikk på kon-filen, og widgeten lastes inn. Gratulerer! Du har opprettet din første widget. Men vi er ikke ferdige med kodingen ennå. Du tenker sannsynligvis "Det er alt?", Ikke sant? Fortsett til trinn 5 for å legge til en funksjon i widgeten.

Trinn 5: Legge til funksjon

Nå skal vi få widgeten til å vise gjeldende tid. Dette krever en timer som oppdateres hvert minutt, og en annen fil. Den neste filen vil være en JavaScript -fil, som kommer i mappen "Innhold". Åpne tekstredigereren og lag en fil som heter main.js. For å legge til klokkeslettet, bruker vi "Date -objektet". For å sette opp datoobjektet, oppretter du en funksjon. Legg denne funksjonen til js -filen: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Tiden er:"+theHour+":"+theMinutes; print ('oppdatering');} Widgeten din vil ikke vise tiden ennå, fordi den ikke vet hva han skal gjøre med js -filen. For å ta vare på dette, legger vi denne hendelsesbehandleren til Kon -filen, i taggene, men ikke i taggene: include ('main.js'); For å gjøre tidsoppdateringen må vi lage en timer som går inn Kon -filen, i taggene, men ikke i taggene: Lagre filene og last inn widgeten. Det skal vise tiden. Hvis det ikke fungerer, last ned både kon og js nedenfra og erstatt med de gamle.

Trinn 6: Oppsummering av det hele

Bruk widget -omformer -widgeten til å konvertere widgeten til en.widget -fil. MERK: Dra mappen som heter navnet på widgeten til konverteren, ikke kon -filen. Hvis du vil gå enda lenger med widgeten din, kan du få tak i noen ressurser her. Her er en liste over ting du kan prøve å oppnå med widgeten din: -Legg til preferanser for å kontrollere skrifttypen ved hjelp av taggen, og skrifttypen sub-tag- Legg til noen hendelsesbehandlere som onKlikk på eller -koder.-Vis et bilde fra en lokal fil ved hjelp av bildeobjektet Håper du synes denne opplæringen var nyttig, og du vil nyte de uendelige mulighetene for widgets, Hunter