Lumikha ng Iyong Sariling Sariling Widget: 6 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:15

Ituturo sa iyo ng Instructable na ito kung paano lumikha ng isang pangunahing Yahoo! Widget. Sa pagtatapos ng tutorial na ito, matutunan mo ang ilang JavaScript at XML.

Hakbang 1: Pagsisimula

Ang ilang mga tool na kakailanganin mong gumawa ng isang widget ay: - Isang computer na may Mac OS X o Windows Xp / Vista- Isang program sa pag-edit ng teksto. (Perpekto ang Notepad.) - Isang programa sa pag-edit ng imahe. (Maayos ang Microsoft Paint.) - Pasensya at oras.- Yahoo Widget- Widget Converter WidgetKapag mayroon ka ng mga program at widget na ito, handa ka na ring magpatuloy sa dalawang hakbang.

Hakbang 2: Paglikha ng Structure ng Folder

Ngayon ay kakailanganin mong likhain ang istraktura ng folder upang maipaloob ang lahat ng mga file na bumubuo ng isang widget. Ganito ang istraktura: -Nangalan ng Widget | Mga Nilalaman | Widget.kon Pangunahing.js Mga Mapagkukunan | Lahat ng mga imahe na gagamitin ng widgetMaaari mong i-download ang widget na ito upang awtomatikong likhain ang istraktura ng folderStruktur - Reinier KaperItakda ang mga kagustuhan ng isang widget sa pamamagitan ng pag-right click sa anumang bahagi nito, at mag-click sa mga kagustuhan. Baguhin ang mga kagustuhan ng Istraktura sa sumusunod: ugat: Mag-navigate sa iyong folder ng widget. (Matatagpuan sa 'Aking Mga Dokumento' sa Windows) Ngayon ay maaari kang mag-click sa widget at isang kahon ng dayalogo ay pop up, na humihiling sa iyo para sa pangalan ng widget.

Hakbang 3: Paglikha ng Lahat ng mga Kinakailanganang Mga File

Magsisimula kami sa paglikha ng widget.xml file, na nagsasabi sa impormasyon ng engine ng widget tungkol sa iyong widget. Mag-download ng isang template na nilikha para magamit mo. I-download ang link sa ibaba. Ilagay ang file sa folder na 'Mga Nilalaman' na matatagpuan sa folder na pinamagatang pangalan na pinili mo kanina. Buksan ang file sa iyong pagpipilian ng text editor at palitan ang YourNameHere ng iyong pangalan. I-save at isara. Susunod lilikha kami ng.kon file na kung saan ay ang pangunahing file na nagsasabi sa widget kung ano ang dapat gawin. Ang.kon file ay isang XML file lamang na may pinalitan ng pangalan. I-download ang pangunahing widget.kon file na ito at ilagay din ito sa folder na 'Mga Nilalaman'. Muli, buksan ang file gamit ang isang text editor. Ang unang linya ay nangangahulugan na ang file ay isang XML file na nilikha kasama ang pag-encode ng UTF-8. Ang susunod na idaragdag na tag ay ang tag ng widget; Pagkatapos ay ideklara mo ang iyong mga setting, tulad ng pag-debug;. Handa ka na ngayong idagdag ang iyong mga elemento ng window;. Ang mga Widget ay mayroong maraming mga bagay na gumagawa ng ilang mga bagay at may ilang mga pag-aari. Halimbawa ang object ng teksto,, lumilikha ng teksto. Narito ang isang listahan ng ilan sa mga pag-aari ng object ng teksto: -pangalan (sariling paliwanag) -window (nabawasan) -data (teksto na ipapakita) -kulay (sariling paliwanag) -size-font -hOffset (aka x) -vOffset (aka y) -width -height Sa nasabing, magsimula tayong mag-coding. Idagdag ang sumusunod na code sa kon file, sa mga tag: myTextHello World! BlueArial18left252 Sa ingles, nagtatakda ito ng isang bagay sa teksto na pinangalanang myText, na nagpapakita ng "Hello World!" sa font Arial, kulay asul, at laki ng 12. I-save ang iyong kon file, at magpatuloy sa hakbang na apat.

Hakbang 4: Magsaya

I-double-click sa kon file at mai-load ang iyong widget. Binabati kita! Nilikha mo ang iyong unang widget. Ngunit hindi pa kami tapos sa pag-coding. Malamang iniisip mo, "Iyon lang?", Di ba? Magpatuloy sa hakbang 5 upang magdagdag ng ilang pagpapaandar sa iyong widget.

Hakbang 5: Pagdaragdag ng Pag-andar

Ngayon ay gagawin namin ang widget na nagpapakita ng kasalukuyang oras. Mangangailangan ito ng isang timer na nag-a-update bawat minuto, at isa pang file. Ang susunod na file ay magiging isang JavaScript file, na mapupunta sa folder na 'Mga Nilalaman'. Buksan ang iyong text editor at lumikha ng isang file na tinatawag na main.js. Upang idagdag ang oras, gagamitin namin ang "object ng Petsa". Upang mai-set up ang object ng petsa, lumikha ka ng isang pagpapaandar. Idagdag ang pagpapaandar na ito sa js file: pagpapa-update ng pagpapaandar ng Text () '{theTime = bagong Petsa (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Ang oras ay:" + theHour + ":" + theMinutes; print ('update');} Hindi pa ipapakita ng iyong widget ang oras, dahil hindi nito alam kung ano ang gagawin sa js file. Upang mapangalagaan ito, idinagdag namin ang handler ng kaganapang ito sa Kon file, sa mga tag ngunit hindi sa mga tag: isama ('main.js'); Upang makagawa ng pag-update ng oras, kailangan naming lumikha ng isang timer, na pumapasok ang Kon file, sa mga tag ngunit hindi sa mga tag: I-save ang mga file at i-load ang widget. Dapat ipakita nito ang oras. Kung hindi ito gumana, i-download ang parehong kon at js mula sa ibaba at palitan ang mga luma.

Hakbang 6: Pagbubuo ng Lahat ng Ito

Gamitin ang widget converter widget upang mai-convert ang widget sa isang.widget file. TANDAAN: I-drag ang folder na may pamagat na pangalan ng iyong widget papunta sa converter, hindi sa kon file. Kung nais mong pumunta nang higit pa sa iyong widget, kumuha ng ilang mga mapagkukunan dito. Narito ang isang listahan ng mga bagay na maaari mong subukang makamit sa iyong widget: -Magdagdag ng mga kagustuhan upang makontrol ang font gamit ang tag, at ang font sub-tag- Magdagdag ng ilang mga handler ng kaganapan tulad ng onMag-click gamit ang mga o tags.-Magpakita ng isang imahe mula sa isang lokal na file gamit ang object ng imahe Inaasahan mong natagpuan mo ang tutorial na ito na kapaki-pakinabang at masisiyahan ka sa walang katapusang mga posibilidad ng mga widget, Hunter