Skapa din egen widget: 6 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:47

Denna instruktionsbok lär dig hur du skapar en grundläggande Yahoo! Widget. I slutet av denna handledning har du lärt dig lite JavaScript och XML.

Steg 1: Komma igång

Några verktyg du behöver för att skapa en widget är:- En dator med Mac OS X eller Windows Xp/Vista- Ett textredigeringsprogram. (Anteckningsblock är perfekt.)- Ett bildredigeringsprogram. (Microsoft Paint är bra.)- Tålamod och tid.- Yahoo Widgets- Widget Converter Widget När du har dessa program och widgets är du redo att gå vidare till steg två.

Steg 2: Skapa mappstruktur

Nu måste du skapa mappstrukturen för att rymma alla filer som utgör en widget. Strukturen ser ut så här: -Widget Name | Innehåll | Widget.kon Main.js -resurser | Alla bilder som widgeten kommer att använda Du kan ladda ner den här widgeten för att automatiskt skapa mappstrukturen Struktur - Reinier Kaper Ange inställningar för en widget genom att högerklicka på någon del av den och klicka på inställningar. Ändra inställningarna för Struktur till följande: root: Navigera till din widgetmapp. (Finns i "Mina dokument" på Windows) Nu kan du klicka på widgeten och en dialogruta dyker upp och ber dig om widgetens namn.

Steg 3: Skapa alla nödvändiga filer

Vi börjar med att skapa widget.xml -filen som berättar widgetmotorinformation om din widget. Ladda ner en mall som du har skapat för dig att använda. Ladda ner länken nedan. Placera filen i mappen "Innehåll" i mappen med namnet det namn du valde tidigare. Öppna filen med den textredigerare du väljer och ersätt YourNameHere med ditt namn. Spara och stäng. Därefter skapar vi.kon -filen som är huvudfilen som berättar widgeten vad den ska göra.. Kon -filen är bara en XML -fil med ett bytt namn. Ladda ner denna grundläggande widget.kon -fil och placera den också i mappen "Innehåll". Återigen, öppna filen med en textredigerare. Den första raden betyder att filen är en XML-fil som skapats med UTF-8-kodningen. Nästa tagg att lägga till är widget -taggen; Sedan deklarerar du dina inställningar, som felsökning;. Nu är du redo att lägga till dina fönsterelement;. Widgets har flera objekt som gör vissa saker och har vissa egenskaper. Till exempel skapar textobjektet,, text. Här är en lista över några av textobjektets egenskaper: -namn (självförklarande) -fönster (avskrivet) -data (text att visa) -färg (självförklarande) -storlek -font -hOffset (aka x) -vOffset (aka y) -bredd -höjd Med det sagt, låt oss börja koda. Lägg till följande kod i kon -filen i taggarna: myTextHello World! BlueArial18left252 På engelska skapar detta ett textobjekt med namnet myText som visar "Hej världen!" i teckensnitt Arial, färg blå och storlek 12. Spara din kon -fil och fortsätt till steg fyra.

Steg 4: Gläd dig

Dubbelklicka på kon-filen och din widget laddas. Grattis! Du har skapat din första widget. Men vi har inte kodat klart ännu. Du tänker förmodligen "Det är allt?", Eller hur? Fortsätt till steg 5 för att lägga till en funktion till din widget.

Steg 5: Lägga till funktion

Nu ska vi göra widgeten aktuell tid. Detta kräver en timer som uppdateras varje minut och en annan fil. Nästa fil kommer att vara en JavaScript -fil, som kommer i mappen "Innehåll". Öppna din textredigerare och skapa en fil som heter main.js. För att lägga till tiden använder vi "Date -objektet". För att konfigurera datumobjektet skapar du en funktion. Lägg till den här funktionen i js -filen: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Tiden är:"+theHour+":"+theMinutes; print ('update');} Din widget visar inte tiden ännu, eftersom den inte vet vad han ska göra med js -filen. För att ta hand om detta lägger vi till den här händelsehanteraren i Kon -filen, i taggarna men inte i taggarna: include ('main.js'); För att göra tidsuppdateringen måste vi skapa en timer som går in Kon -filen, i taggarna men inte i taggarna: Spara filerna och ladda widgeten. Det ska visa tiden. Om det inte fungerar, ladda ner både kon och js underifrån och ersätt med de gamla.

Steg 6: Sammanfatta allt

Använd widgetkonverteringswidgeten för att konvertera widgeten till en.widget -fil. OBS: Dra mappen som heter widgetens namn till omvandlaren, inte kon -filen. Om du vill gå ännu längre med din widget, ta några resurser här. Här är en lista över saker som du kan försöka åstadkomma med din widget: -Lägg till inställningar för att styra teckensnittet med taggen och teckensnitts-taggen- Lägg till några händelsehanterare som onKlicka med taggarna eller.-Visa en bild från en lokal fil med bildobjektet Hoppas du tyckte att denna handledning var användbar och du kommer att njuta av de oändliga möjligheterna för widgets, Hunter