Vytvořte si vlastní widget: 6 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:24

Tento Instructable vás naučí, jak vytvořit základní Yahoo! Widget. Na konci tohoto kurzu se naučíte používat JavaScript a XML.

Krok 1: Začínáme

Některé nástroje, které budete potřebovat k vytvoření widgetu, jsou:- Počítač s Mac OS X nebo Windows Xp/Vista- Program pro úpravu textu. (Poznámkový blok je perfektní.)- Program pro úpravu obrázků. (Microsoft Paint je v pořádku.)- Trpělivost a čas.- Yahoo Widgety- Widget Converter Widget Jakmile máte tyto programy a widgety, jste připraveni přejít ke kroku dva.

Krok 2: Vytvoření struktury složky

Nyní budete muset vytvořit strukturu složek pro uložení všech souborů, které tvoří widget. Struktura vypadá takto: -Widget Name | Obsah | Zdroje Widget.kon Main.js | Všechny obrázky, které widget použije Můžete si stáhnout tento widget, aby automaticky vytvořil strukturu složek Struktura - Reinier Kaper Nastavte předvolby widgetu kliknutím pravým tlačítkem na libovolnou jeho část a kliknutím na předvolby. Změňte předvolby struktury na následující: root: Přejděte do složky widgetu. (Nachází se ve Windows v části „Moje dokumenty“) Nyní můžete kliknout na widget a vyskočí dialogové okno s dotazem na název widgetu.

Krok 3: Vytvoření všech nezbytných souborů

Začneme vytvořením souboru widget.xml, který sdělí modulu widgetu informace o vašem widgetu. Stáhněte si šablonu, kterou jste vytvořili a kterou můžete použít. Odkaz ke stažení níže. Umístěte soubor do složky „Obsah“ve složce s názvem název, který jste vybrali dříve. Otevřete soubor pomocí textového editoru, který si vyberete, a nahraďte YourNameHere svým jménem. Uložte a zavřete. Dále vytvoříme soubor.kon, což je hlavní soubor, který říká widgetu, co má dělat. Soubor.kon je pouze soubor XML s přejmenovanou příponou. Stáhněte si tento základní soubor widget.kon a také jej umístěte do složky „Obsah“. Znovu otevřete soubor pomocí textového editoru. První řádek znamená, že soubor je soubor XML vytvořený pomocí kódování UTF-8. Další tag, který chcete přidat, je značka widgetu; Poté deklarujete svá nastavení, například ladění;. Nyní jste připraveni přidat prvky okna;. Widgety mají více objektů, které dělají určité věci a mají určité vlastnosti. Například textový objekt,, vytvoří text. Zde je seznam některých vlastností textového objektu: -název (vysvětlující) -vOffset (aka y) -width -height S tím bylo řečeno, začněme kódovat. Do souboru kon ve značkách přidejte následující kód: myTextHello World! BlueArial18left252V angličtině se tím nastaví textový objekt s názvem myText, který zobrazí „Hello World!“písmem Arial, modrá barva a velikost 12. Uložte soubor kon a pokračujte krokem čtyři.

Krok 4: Radujte se

Poklepejte na soubor kon a widget se načte. Gratulujeme! Vytvořili jste svůj první widget. Ale s kódováním jsme ještě neskončili. Pravděpodobně si říkáte: „To je všechno?“, Že? Pokračujte krokem 5 a přidejte do widgetu nějakou funkci.

Krok 5: Přidání funkce

Nyní se chystáme, aby widget zobrazoval aktuální čas. To bude vyžadovat časovač, který se aktualizuje každou minutu, a další soubor. Dalším souborem bude soubor JavaScript, který přejde do složky „Obsah“. Otevřete textový editor a vytvořte soubor s názvem main.js. Abychom přidali čas, použijeme „objekt Datum“. Chcete -li nastavit objekt data, vytvořte funkci. Přidejte tuto funkci do souboru js: funkce updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Čas je:"+theHour+":"+theMinutes; print ('update');} Váš widget zatím neukáže čas, protože neví, co dělat se souborem js. Abychom se o to postarali, přidáme tuto obslužnou rutinu události do souboru Kon ve značkách, ale ne ve značkách: include ('main.js'); K aktualizaci času potřebujeme vytvořit časovač, který vstupuje do soubor Kon, ve značkách, ale ne ve značkách: Uložte soubory a načtěte widget. Mělo by ukazovat čas. Pokud to nefunguje, stáhněte si kon a js z níže a nahraďte je starými.

Krok 6: Shrnutí všeho

Pomocí widgetu převaděče widgetů převeďte widget na soubor.widget. POZNÁMKA: Přetáhněte složku s názvem názvu widgetu do převaděče, nikoli do souboru kon. Pokud chcete s widgetem jít ještě dále, získejte zde několik zdrojů. Zde je seznam věcí, které můžete pomocí widgetu zkusit dosáhnout: -Přidáním předvoleb můžete písmo ovládat pomocí tagu a sub-tagu fontu- Přidejte některé obslužné rutiny událostí, jako je onClick, pomocí značek nebo.-Zobrazte obrázek z místního souboru pomocí objektu obrázku Doufám, že jste tento návod shledali užitečným a užijete si nekonečné možnosti widgetů, Hunter