Napravite svoj vlastiti widget: 6 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:38

Ovaj Instructable naučit će vas kako stvoriti osnovni Yahoo! Widget. Do kraja ovog vodiča naučit ćete neke JavaScript i XML.

Korak 1: Početak

Neki alati koje ćete trebati za izradu widgeta su:- Računalo s Mac OS X ili Windows Xp/Vista- Program za uređivanje teksta. (Bilježnica je savršena.)- Program za uređivanje slika. (Microsoft Paint je u redu.)- Strpljenje i vrijeme.- Yahoo Widgets- Widget Converter WidgetKad imate ove programe i widgete, spremni ste za prijelaz na drugi korak.

Korak 2: Stvaranje strukture mapa

Sada ćete morati stvoriti strukturu mapa u koju će se smjestiti sve datoteke koje čine widget. Struktura izgleda ovako: -Widget Name | Sadržaj | Widget.kon Resursi Main.js | Sve slike koje će widget koristitiMožete preuzeti ovaj widget za automatsko stvaranje strukture mape Struktura - Reinier KaperPostavite postavke widgeta tako da desnom tipkom miša kliknete bilo koji njegov dio i kliknete na postavke. Promijenite postavke Strukture na sljedeće: root: Idite u mapu widgeta. (Nalazi se u odjeljku 'Moji dokumenti' u sustavu Windows) Sada možete kliknuti na widget i pojavit će se dijaloški okvir s upitom za naziv widgeta.

Korak 3: Stvaranje svih potrebnih datoteka

Započet ćemo s stvaranjem datoteke widget.xml koja govori mehanizmu widgeta o vašem widgetu. Preuzmite predložak koji ste stvorili da biste ga mogli koristiti. Link za preuzimanje ispod. Stavite datoteku u mapu 'Sadržaj' koja se nalazi u mapi s nazivom koji ste ranije odabrali. Otvorite datoteku s uređivačem teksta po vašem izboru i zamijenite YourNameHere sa svojim imenom. Spremite i zatvorite. Zatim ćemo stvoriti.kon datoteku koja je glavna datoteka koja govori widgetu što treba učiniti. Datoteka.kon samo je XML datoteka s preimenovanim nastavkom. Preuzmite ovu osnovnu datoteku widget.kon i postavite je u mapu 'Sadržaj'. Ponovno otvorite datoteku uređivačem teksta. Prvi redak označava da je datoteka XML datoteka stvorena kodiranjem UTF-8. Sljedeća oznaka za dodavanje je oznaka widgeta; Zatim deklarirate svoje postavke, poput otklanjanja pogrešaka;. Sada ste spremni za dodavanje elemenata prozora;. Widgeti imaju više objekata koji rade određene stvari i imaju određena svojstva. Na primjer, tekstualni objekt,, stvara tekst. Evo popisa nekih svojstava tekstualnog objekta: -name (samoobjašnjenje) -prozor (amortiziran) -podaci (tekst za prikaz) -boja (samoobjašnjenje) -veličina -font -hOffset (poznat i kao x) -vOffset (aka y) -width -height S tim u vezi, počnimo kodiranje. Dodajte sljedeći kôd u datoteku kon, u oznakama: myTextHello World! BlueArial18left252Na engleskom ovo postavlja tekstualni objekt pod nazivom myText koji prikazuje "Hello World!" fontom Arial, plavom bojom i veličinom 12. Spremite datoteku kon i nastavite do četvrtog koraka.

Korak 4: Radujte se

Dvaput kliknite na kon datoteku i vaš će se widget učitati. Čestitamo! Izradili ste svoj prvi widget. Ali još nismo završili s kodiranjem. Vjerojatno mislite: "To je sve?", Zar ne? Nastavite na korak 5 da biste dodali neku funkciju svom widgetu.

Korak 5: Dodavanje funkcije

Sada ćemo učiniti da widget prikazuje trenutno vrijeme. To će zahtijevati mjerač vremena koji se ažurira svake minute i drugu datoteku. Sljedeća datoteka bit će JavaScript datoteka koja će se nalaziti u mapi 'Sadržaj'. Otvorite uređivač teksta i stvorite datoteku pod nazivom main.js. Za dodavanje vremena koristit ćemo "objekt Datum". Da biste postavili objekt datuma, stvorite funkciju. Dodajte ovu funkciju u datoteku js: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Vrijeme je:"+theHour+":"+theMinutes; print ('update');} Vaš widget još neće prikazati vrijeme jer ne zna što učiniti s js datotekom. Da bismo to riješili, dodajemo ovaj rukovatelj događajima u datoteku Kon, u oznakama, ali ne i u oznakama: include ('main.js'); Da bismo ažurirali vrijeme, moramo stvoriti mjerač vremena koji ulazi u Kon datoteku, u oznakama, ali ne i u oznakama: Spremite datoteke i učitajte widget. Trebalo bi pokazati vrijeme. Ako ne radi, preuzmite i kon i js odozdo i zamijenite ih starima.

Korak 6: Sažmite sve

Pomoću widgeta za pretvaranje widgeta pretvorite widget u datoteku.widget. NAPOMENA: Povucite mapu koja nosi naziv vašeg widgeta na pretvarač, a ne datoteku kon. Ako želite otići još dalje sa svojim widgetom, preuzmite neke resurse ovdje. Evo popisa stvari koje možete pokušati postići sa svojim widgetom: -Dodajte postavke za kontrolu fonta pomoću oznake i pod-oznake fonta- Dodajte neke rukovatelje događajima poput onClick pomoću oznaka ili.-Prikažite sliku iz lokalne datoteke pomoću slikovnog objekta Nadam se da vam je ovaj vodič bio koristan i da ćete uživati u beskrajnim mogućnostima widgeta, Hunter