Creați-vă propriul widget: 6 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:46

Acest instructable vă va învăța cum să creați un Yahoo! Widget. La sfârșitul acestui tutorial, veți fi învățat unele JavaScript și XML.

Pasul 1: Introducere

Unele instrumente de care veți avea nevoie pentru a crea un widget sunt: - Un computer cu Mac OS X sau Windows Xp / Vista - Un program de editare a textului. (Notepad este perfect.) - Un program de editare a imaginilor. (Microsoft Paint este bine.) - Răbdare și timp. - Yahoo Widgets - Widget Converter Widget Odată ce aveți aceste programe și widget-uri, sunteți gata să treceți la pasul doi.

Pasul 2: Crearea structurii de foldere

Acum va trebui să creați structura de dosare pentru a găzdui toate fișierele care alcătuiesc un widget. Structura arată astfel: -Nume widget | Conținut | Widget.kon Main.js Resurse | Toate imaginile pe care le va utiliza widgetul Puteți descărca acest widget pentru a crea automat structura folderelor Structură - Reinier Kaper Setați preferințele unui widget făcând clic dreapta pe orice parte a acestuia și faceți clic pe preferințe. Schimbați preferințele Structurii cu următoarele: rădăcină: Navigați la folderul widget. (Situat în „Documentele mele” pe Windows) Acum puteți să faceți clic pe widget și va apărea o casetă de dialog care vă va cere numele widgetului.

Pasul 3: Crearea tuturor fișierelor necesare

Vom începe cu crearea fișierului widget.xml, care oferă informații despre motorul widgetului despre widgetul dvs. Descărcați un șablon pe care l-ați creat pentru al utiliza. Descărcați linkul de mai jos. Plasați fișierul în folderul „Conținut” situat în folderul intitulat numele pe care l-ați ales mai devreme. Deschideți fișierul cu editorul de text la alegere și înlocuiți YourNameHere cu numele dvs. Salvați și închideți. Apoi vom crea fișierul.kon, care este fișierul principal care îi spune widgetului ce trebuie să facă. Fișierul.kon este doar un fișier XML cu o extensie redenumită. Descărcați acest fișier widget.kon de bază și plasați-l și în folderul „Conținut”. Din nou, deschideți fișierul cu un editor de text. Prima linie înseamnă că fișierul este un fișier XML creat cu codificarea UTF-8. Următoarea etichetă de adăugat este eticheta widget; Apoi vă declarați setările, cum ar fi depanarea;. Acum sunteți gata să adăugați elementele ferestrei;. Widgeturile au mai multe obiecte care fac anumite lucruri și au anumite proprietăți. De exemplu obiectul text,, creează text. Iată o listă cu câteva dintre proprietățile obiectului text: -name (auto-explicativ) -window (depreciat) -data (text de afișat) -color (auto-explicativ) -size -font -hOffset (aka x) -vOffset (aka y) -width -height Cu toate acestea, să începem codarea. Adăugați următorul cod în fișierul kon, în etichetele: myTextHello World! BlueArial18left252În limba engleză, acesta setează un obiect text numit myText, care afișează „Hello World!” cu font Arial, culoare albastru și dimensiunea 12. Salvați fișierul kon și continuați cu pasul patru.

Pasul 4: Bucură-te

Faceți dublu clic pe fișierul kon și widgetul dvs. se va încărca. Felicitări! Ați creat primul dvs. widget. Dar nu am terminat încă codarea. Probabil că te gândești: „Asta e tot?”, Nu? Continuați cu pasul 5 pentru a adăuga o funcție la widget.

Pasul 5: Adăugarea funcției

Acum vom face ca widgetul să afișeze ora curentă. Acest lucru va necesita un cronometru care se actualizează în fiecare minut și un alt fișier. Următorul fișier va fi un fișier JavaScript, care va intra în folderul „Conținut”. Deschideți editorul de text și creați un fișier numit main.js. Pentru a adăuga ora, vom folosi „obiectul Date”. Pentru a configura obiectul de dată, creați o funcție. Adăugați această funcție în fișierul js: funcția updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Ora este:" + theHour + ":" + theMinutes; print („actualizare”);} Widgetul dvs. nu va afișa încă ora, deoarece nu știe ce să facă cu fișierul js. Pentru a avea grijă de acest lucru, adăugăm acest gestionar de evenimente în fișierul Kon, în etichete, dar nu și în etichete: include ('main.js'); Pentru a actualiza ora, trebuie să creăm un temporizator, care să intre fișierul Kon, în etichete, dar nu în etichete: Salvați fișierele și încărcați widgetul. Ar trebui să arate ora. Dacă nu funcționează, descărcați atât kon, cât și js de jos și înlocuiți-le cu cele vechi.

Pasul 6: rezumând totul

Utilizați widget-ul pentru a converti widgetul într-un fișier.widget. NOTĂ: Trageți folderul care poartă numele widgetului dvs. pe convertor, nu fișierul kon. Dacă doriți să mergeți și mai departe cu widgetul dvs., luați câteva resurse aici. Iată o listă de lucruri pe care le puteți încerca să realizați cu widgetul dvs.: -Adăugați preferințe pentru a controla fontul folosind eticheta și subeticheta fontului- Adăugați niște gestionare de evenimente, cum ar fi onClick, folosind butoanele sau.