Opret din helt egen widget: 6 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:30

Denne instruks vil lære dig, hvordan du opretter en grundlæggende Yahoo! Widget. Ved afslutningen af denne vejledning har du lært noget JavaScript og XML.

Trin 1: Kom godt i gang

Nogle værktøjer, du skal bruge til at lave en widget, er:- En computer med Mac OS X eller Windows Xp/Vista- Et tekstredigeringsprogram. (Notesblok er perfekt.)- Et billedredigeringsprogram. (Microsoft Paint er i orden.)- Tålmodighed og tid.- Yahoo Widgets- Widget Converter Widget Når du har disse programmer og widgets, er du klar til at gå videre til trin to.

Trin 2: Oprettelse af mappestruktur

Nu skal du oprette mappestrukturen for at huse alle de filer, der udgør en widget. Strukturen ser sådan ud: -Widget Name | Indhold | Widget.kon Main.js -ressourcer | Alle de billeder, widgeten vil bruge Du kan downloade denne widget for automatisk at oprette mappestrukturen Struktur - Reinier Kaper Indstil en widgets præferencer ved at højreklikke på en hvilken som helst del af den og klikke på præferencer. Skift strukturens præferencer til følgende: root: Naviger til din widgetmappe. (Placeret i 'Mine dokumenter' på Windows) Nu kan du klikke på widgeten, og en dialogboks vil dukke op og bede dig om widgetens navn.

Trin 3: Oprettelse af alle de nødvendige filer

Vi starter med at oprette widget.xml -filen, som fortæller widgetmotoroplysningerne om din widget. Download en skabelon, som du har oprettet, så du kan bruge den. Download link herunder. Placer filen i mappen 'Indhold' i mappen med navnet det tidligere valgte. Åbn filen med tekstredigereren efter eget valg, og erstat YourNameHere med dit navn. Gem og luk. Derefter opretter vi.kon -filen, som er hovedfilen, der fortæller widgeten, hvad den skal gøre.. Kon -filen er bare en XML -fil med en omdøbt udvidelse. Download denne grundlæggende widget.kon -fil og placer den også i mappen 'Indhold'. Åbn igen filen med en tekstredigerer. Den første linje angiver, at filen er en XML-fil, der er oprettet med UTF-8-kodningen. Det næste tag, der skal tilføjes, er widget -tagget; Derefter deklarerer du dine indstillinger, ligesom debug;. Nu er du klar til at tilføje dine vindueselementer;. Widgets har flere objekter, der gør bestemte ting og har bestemte egenskaber. F.eks. Opretter tekstobjektet,, tekst. Her er en liste over nogle af tekstobjektets egenskaber: -navn (selvforklarende) -vindue (afskrevet) -data (tekst til visning) -farve (selvforklarende) -størrelse -font -hOffset (aka x) -vOffset (aka y) -bredde -højde Med det sagt, lad os begynde at kode. Tilføj følgende kode til kon -filen i tags: myTextHello World! BlueArial18left252 På engelsk opretter dette et tekstobjekt ved navn myText, der viser "Hello World!" i skrifttypen Arial, farve blå og størrelse 12. Gem din kon -fil, og fortsæt til trin fire.

Trin 4: Glæd dig

Dobbeltklik på kon-filen, og din widget indlæses. Tillykke! Du har oprettet din første widget. Men vi er ikke færdige med at kode endnu. Du tænker sikkert, "Det er alt?", Ikke? Fortsæt til trin 5 for at tilføje en funktion til din widget.

Trin 5: Tilføjelse af funktion

Nu skal vi få widgeten til at vise den aktuelle tid. Dette kræver en timer, der opdateres hvert minut, og en anden fil. Den næste fil vil være en JavaScript -fil, der kommer i mappen 'Indhold'. Åbn din teksteditor og opret en fil kaldet main.js. For at tilføje klokkeslættet bruger vi "Datoobjektet". For at konfigurere datoobjektet opretter du en funktion. Føj denne funktion til js -filen: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Klokken er:"+theHour+":"+theMinutes; print ('opdatering');} Din widget viser ikke tidspunktet endnu, fordi den ikke ved, hvad den skal gøre med js -filen. For at tage sig af dette tilføjer vi denne hændelseshåndterer til Kon -filen i tagsne, men ikke i tags: include ('main.js'); For at foretage tidsopdateringen skal vi oprette en timer, som går ind Kon -filen i tags, men ikke i tags: Gem filerne, og indlæs widgeten. Det skulle vise tiden. Hvis det ikke virker, skal du downloade både kon og js nedenfra og erstatte med de gamle.

Trin 6: Sammendrag af det hele

Brug widgetkonverter -widgeten til at konvertere widgeten til en.widget -fil. BEMÆRK: Træk den mappe, der har titlen navnet på din widget til konverteren, ikke kon -filen. Hvis du vil gå endnu længere med din widget, kan du få fat i nogle ressourcer her. Her er en liste over ting, du kan prøve at opnå med din widget: -Tilføj præferencer for at styre skrifttypen ved hjælp af tagget og skrifttypen sub-tag- Tilføj nogle hændelsesbehandlere som onKlik ved hjælp af eller -taggene.-Vis et billede fra en lokal fil ved hjælp af billedobjektet Håber du fandt denne vejledning nyttig, og du vil nyde de uendelige muligheder for widgets, Hunter