Vytvorte si vlastný widget: 6 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:01

Tento návod vás naučí, ako vytvoriť základné Yahoo! Widget. Na konci tohto tutoriálu sa naučíte používať JavaScript a XML.

Krok 1: Začíname

Na vytvorenie miniaplikácie budete potrebovať tieto nástroje:- počítač s Mac OS X alebo Windows Xp/Vista- program na úpravu textu. (Poznámkový blok je perfektný.)- Program na úpravu obrázkov. (Microsoft Paint je v poriadku.)- Trpezlivosť a čas.- Yahoo Widgets- Widget Converter Widget Keď máte tieto programy a widgety, ste pripravení prejsť na druhý krok.

Krok 2: Vytvorenie štruktúry priečinka

Teraz budete musieť vytvoriť štruktúru priečinkov, do ktorej sa budú ukladať všetky súbory tvoriace miniaplikáciu. Štruktúra vyzerá takto: -Widget Name | Obsah | Zdroje Widget.kon Main.js | Všetky obrázky, ktoré widget použije Zmeňte predvoľby Štruktúry na nasledujúce: root: Prejdite do priečinka miniaplikácií. (Nachádza sa v priečinku „Moje dokumenty“v systéme Windows) Teraz môžete kliknúť na miniaplikáciu a otvorí sa dialógové okno so žiadosťou o názov miniaplikácie.

Krok 3: Vytvorenie všetkých potrebných súborov

Začneme vytvorením súboru widget.xml, ktorý oznámi informácie o motore widgetu o vašom widgete. Stiahnite si šablónu, ktorú ste vytvorili a ktorú môžete použiť. Odkaz na stiahnutie nižšie. Uložte súbor do priečinka „Obsah“umiestneného v priečinku s názvom názov, ktorý ste vybrali predtým. Otvorte súbor v textovom editore, ktorý si vyberiete, a nahraďte YourNameHere svojim menom. Uložiť a zavrieť. Ďalej vytvoríme súbor.kon, ktorý je hlavným súborom, ktorý widgetu hovorí, čo má robiť. Súbor.kon je iba súbor XML s premenovanou príponou. Stiahnite si tento základný súbor widget.kon a tiež ho umiestnite do priečinka „Obsah“. Znova otvorte súbor pomocou textového editora. Prvý riadok znamená, že súbor je súbor XML vytvorený s kódovaním UTF-8. Ďalšou značkou, ktorú chcete pridať, je značka widgetu; Potom deklarujete svoje nastavenia, napríklad ladenie;. Teraz ste pripravení pridať svoje okenné prvky;. Widgety majú viacero objektov, ktoré robia určité veci a majú určité vlastnosti. Napríklad textový objekt,, vytvára text. Tu je zoznam niektorých vlastností textového objektu: -názov (vysvetľujúce) -okno (odpisované) -data (text na zobrazenie) -color (samovysvetľujúce) -veľkosť -písmo -hOffset (aka x) -vOffset (aka y) -šírka -výška S tým bolo povedané, začnime s kódovaním. Do súboru kon v tagoch pridajte nasledujúci kód: myTextHello World! BlueArial18left252V angličtine sa tým nastaví textový objekt s názvom myText, ktorý zobrazuje „Hello World!“písmom Arial, modrou farbou a veľkosťou 12. Uložte súbor kon a pokračujte krokom štyri.

Krok 4: Radujte sa

Dvakrát kliknite na súbor kon a widget sa načíta. Gratulujem Vytvorili ste svoj prvý widget. S kódovaním sme však ešte neskončili. Pravdepodobne si myslíte: „To je všetko?“, Však? Pokračujte v kroku 5 a do widgetu pridajte nejakú funkciu.

Krok 5: Pridanie funkcie

Teraz urobíme z widgetu zobrazenie aktuálneho času. Bude to vyžadovať časovač, ktorý sa aktualizuje každú minútu, a ďalší súbor. Ďalším súborom bude súbor JavaScript, ktorý prejde do priečinka „Obsah“. Otvorte textový editor a vytvorte súbor s názvom main.js. Na doplnenie času použijeme „objekt Dátum“. Na nastavenie objektu dátumu vytvoríte funkciu. Pridajte túto funkciu do súboru js: funkcia updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Čas je:"+theHour+":"+theMinutes; print ('update');} Váš widget zatiaľ neukáže čas, pretože nevie, čo robiť so súborom js. Aby sme to vyriešili, pridáme tento obslužný program udalostí do súboru Kon, do značiek, ale nie do značiek: include ('main.js'); Na aktualizáciu času musíme vytvoriť časovač, ktorý sa spustí v súbor Kon, v tagoch, ale nie v tagoch: Uložte súbory a načítajte widget. Malo by ukazovať čas. Ak to nefunguje, stiahnite si kon aj js zospodu a nahraďte ich starými.

Krok 6: Zhrnutie všetkého

Pomocou miniaplikácie na konverziu miniaplikácií skonvertujte miniaplikáciu na súbor.widget. POZNÁMKA: Presuňte priečinok s názvom názov vášho widgetu na prevodník, nie na súbor kon. Ak chcete s miniaplikáciou ísť ešte ďalej, získajte niekoľko zdrojov. Tu je zoznam vecí, ktoré môžete pomocou miniaplikácie skúsiť dosiahnuť:-Pridajte predvoľby na ovládanie písma pomocou značky a podznačky písma- Pridajte niektoré obsluhy udalostí, ako napríklad onClick, pomocou značiek alebo.-Zobrazte obrázok z miestneho súboru pomocou objektu obrázku. Dúfam, že sa vám tento návod zdal užitočný a užijete si nekonečné možnosti widgetov, Hunter.