Luo oma widget: 6 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:04

Tämä opas opettaa sinulle Yahoo -peruspalvelun luomisen! Widget. Tämän opetusohjelman loppuun mennessä olet oppinut JavaScriptiä ja XML: ää.

Vaihe 1: Aloittaminen

Joitakin työkaluja, joita tarvitset widgetin luomiseen, ovat:- Tietokone, jossa on Mac OS X tai Windows Xp/Vista- Tekstin muokkausohjelma. (Muistio on täydellinen.)- Kuvankäsittelyohjelma. (Microsoft Paint on kunnossa.)- Kärsivällisyyttä ja aikaa.- Yahoo-widgetit- Widget-muunnin-widget Kun sinulla on nämä ohjelmat ja widgetit, olet valmis siirtymään vaiheeseen kaksi.

Vaihe 2: Kansiorakenteen luominen

Nyt sinun on luotava kansiorakenne, joka sisältää kaikki widgetin muodostavat tiedostot. Rakenne näyttää tältä: -Widgetin nimi | Sisältö | Widget.kon Main.js -resurssit | Kaikki widgetin käyttämät kuvat Voit ladata tämän widgetin luodaksesi kansiorakenteen automaattisesti Rakenne - Reinier Kaper Aseta widgetin asetukset napsauttamalla hiiren kakkospainikkeella mitä tahansa sen osaa ja napsauttamalla asetuksia. Muuta Rakenne -asetuksiksi seuraavat: root: Siirry widget -kansioon. (Sijaitsee Windowsin "Omat tiedostot" -kohdassa) Nyt voit napsauttaa widgettiä ja esiin tulee valintaikkuna, jossa kysytään widgetin nimeä.

Vaihe 3: Luo kaikki tarvittavat tiedostot

Aloitamme luomalla widget.xml -tiedoston, joka kertoo widget -moottorin tiedot widgetistäsi. Lataa malli, jonka olet luonut käytettäväksi. Lataa alla oleva linkki. Aseta tiedosto "Sisältö" -kansioon, joka sijaitsee aiemmin valitsemasi nimen kansiossa. Avaa tiedosto valitsemallasi tekstieditorilla ja korvaa YourName Here nimesi kanssa. Tallenna ja sulje. Seuraavaksi luomme.kon -tiedoston, joka on päätiedosto, joka kertoo widgetille, mitä tehdä.. Kon -tiedosto on vain XML -tiedosto, jonka laajennus on nimetty uudelleen. Lataa tämä widget.kon -perustiedosto ja aseta se myös Sisältö -kansioon. Avaa tiedosto uudelleen tekstieditorilla. Ensimmäinen rivi tarkoittaa, että tiedosto on XML-tiedosto, joka on luotu UTF-8-koodauksella. Seuraava lisättävä tagi on widget -tunniste; Ilmoitat sitten asetukset, kuten debug;. Nyt olet valmis lisäämään ikkunaselementtejä;. Widgetillä on useita objekteja, jotka tekevät tiettyjä asioita ja joilla on tiettyjä ominaisuuksia. Esimerkiksi tekstiobjekti, luo tekstiä. Tässä on luettelo joistakin tekstiobjektin ominaisuuksista: -nimi (itsestään selvä) -ikkuna (poistettu) -data (näytettävä teksti) -väri (itsestään selvä) -size -font -hOffset (aka x) -vOffset (alias y) -leveys -korkeus Aloitetaan koodaus. Lisää seuraava koodi kon -tiedostoon tunnisteisiin: myTextHello World! BlueArial18left252Suomen kielellä tämä luo tekstiobjektin nimeltä myText, joka näyttää "Hello World!" kirjasimella Arial, väri sininen ja koko 12. Tallenna kon -tiedostosi ja jatka vaiheeseen neljä.

Vaihe 4: Nauti

Kaksoisnapsauta kon-tiedostoa ja widgetisi latautuu. Onnittelut! Olet luonut ensimmäisen widgetin. Mutta emme ole vielä lopettaneet koodausta. Luultavasti ajattelet: "Siinä kaikki?", Eikö? Jatka vaiheeseen 5 lisätäksesi toimintoja widgetisi.

Vaihe 5: Toiminnon lisääminen

Nyt saamme widgetin näyttämään nykyisen ajan. Tämä vaatii ajastimen, joka päivittyy joka minuutti, ja toisen tiedoston. Seuraava tiedosto on JavaScript -tiedosto, joka siirtyy Sisältö -kansioon. Avaa tekstieditori ja luo tiedosto nimeltä main.js. Kellonajan lisäämiseksi käytämme "Date -objektia". Voit määrittää päivämääräobjektin luomalla toiminnon. Lisää tämä toiminto js -tiedostoon: function updateText () '{theTime = new Date (); theHour = Jono (theTime.getHours ()); theMinutes = Jono (theTime.getMinutes ()); myText.data = "Aika on:"+theHour+":"+theMinutes; print ('update');} Widgetisi ei näytä vielä aikaa, koska se ei tiedä mitä tehdä js -tiedostolle. Huolehtiaksemme tästä lisäämme tämän tapahtumakäsittelijän Kon -tiedostoon, tunnisteisiin, mutta ei tunnisteisiin: include ('main.js'); Jotta päivitämme ajan, meidän on luotava ajastin, joka menee Kon -tiedosto, tunnisteissa, mutta ei tunnisteissa: Tallenna tiedostot ja lataa widget. Sen pitäisi näyttää aika. Jos se ei toimi, lataa sekä kon että js alhaalta ja korvaa vanhat.

Vaihe 6: Yhteenveto kaikesta

Muunna widget.widget -tiedostoksi widget -muunnin -widgetin avulla. HUOMAUTUS: Vedä widgetisi nimi -kansio muuntimeen, ei kon -tiedostoon. Jos haluat mennä vielä pidemmälle widgetisi kanssa, hanki resursseja täältä. Tässä on luettelo asioista, joita voit yrittää saavuttaa widgetilläsi: -Lisää asetuksia fontin hallitsemiseksi tunnisteella ja fontin alitunniste- Lisää tapahtumakäsittelijöitä, kuten onClick käyttämällä tai-tunnisteita.-Näytä kuva paikallisesta tiedostosta kuvaobjektin avulla Toivottavasti pidit tätä opetusohjelmaa hyödyllisenä ja nautit widgetien loputtomista mahdollisuuksista, Hunter