Ikälaskurille kuoret
Vihdoin on aika ottaa ensimmäiset konkreettiset askeleet Ikälaskurimme tekemiseksi. Aloitamme käyttöliittymän toteuttamisella, ja vasta sen jälkeen käymme käsiksi itse ohjelmakoodiin. Käyttöliittymän suunnittelu on hyvä aloittaa selvittämällä, mitä tietoa käyttäjän täytyy antaa ja mitä palautteita ohjelma näistä tiedoista tuottaa. Ikälaskuri tarvitsee käyttöönsä käyttäjän syntymäajan - siis päivän, kuukauden ja vuoden - ja antaa palautteena yhden tiedon, iän päivissä laskettuna.
Ohessa on hahmoteltu esimerkki siitä, millainen ohjelman käyttöliittymä voisi olla. Iän näyttämiseen käytettäisiin Label-komponenttia (musta teksti ikkunan ylälaidassa). Ikkunan keskiosassa on kolme TextFieldiä, ja päivän ja kuukauden erottimina olevat pisteet ovat pienenpieniä Labeleita. Ikkunan alaosassa oleva nappi on luonnollisesti Button-luokkaa. Seuraavaksi katsomme, miten tähän lopputulokseen päästään.
Pohjana on ruudukko
Ennen kuin aloitat, tarkista että näkymäsi on suunnilleen seuraavankaltainen. Itse ohjelmalomaketta voit venyttää ja pienentää oikean alakulman kahvoista, jotka tulevat näkyviin kun klikkaat sitä.
Aiempaa valmiin appletin mallikuvaa katsomalla voi nähdä, että ruutu jakautuu pystysuunnassa kolmeen osaan: palauteosioon, syöttöosioon ja napin alueeseen. Aloitetaan ohjelman käyttöliittymän suunnitteleminen jakamalla ikkuna ensin kolmeen osaan. Klikkaa ohjelman harmaata taustaa ja valitse Inspector-ikkunasta kenttä layout. Muuta sen arvoksi GridLayout.
GridLayout on eräs sijoittelijaluokka, joka jakaa ohjelman ikkunan haluamasi kokoiseksi ruudukoksi, joten sen avulla jako pystysuunnassa on helppo toteuttaa. Kurkista seuraavaksi vasemman reunan rakenneikkunaan, jonka pitäisi näyttää osapuilleen tältä.
Klikkaa
GridLayout1-komponenttia, joka sijoittuu puussa this-olion (itse appletin pääohjelma) alle. Muuta Inspectorista luokan nimeksi (name) "Pystyjako" ja rows-kentän arvoksi 3 (jako kolmeen).
Ikkuna on nyt pilkottu kolmeen osaan. Nyt aika on sijoittaa ruudulle kolme paneelia, jotta GridLayoutin luomien osasten päälle voidaan sijoittaa lisää elementtejä.
Valitse paletista paneeli-luokka
ja klikkaa ohjelman alueelle. Ensimmäinen paneeli muodostuu näkymän yläosaan. Toista tämä vielä pari kertaa, jotta saat näkymään kaiken kaikkiaan kolme paneelia. Anna seuraavaksi paneeleille järkevät nimet valitsemalla ne rakenneikkunasta ja muuttamalla Inspectorissa name-kenttää. Rakenneikkunan pitäisi nyt näyttää oheisen kaltaiselta.
Itse pääappletin sisällä on nyt kolme paneelia ja yksi Pystyjako-olio (tyyppiä GridLayout). Jokaisessa paneelissa on valmiiksi sisällä jonkinlainen muotoiluluokka. Oletusarvona on FlowLayout-olio, joka sijoittaa komponenttinsa peräkkäin alueen yläreunasta alkaen.
Palikat paikalleen
Jatketaan käyttöliittymän rakentamista valitsemalla ylin paneeli. Klikkaa hiirellä ohjelma-alueen ylimpään kolmannekseen. Ota tämän jälkeen AWT-paletista Label-olio ja sijoita se ylimpään paneeliin.
Muuta Inspectorista Labelin nimeksi "TulosTeksti". Muuta seuraavaksi Font-kentän kautta tekstin pistekoko esimerkiksi 22:een. Vaihda tekstityyppi samalla SansSerif:ksi, jolloin appletti toimii siistimmin Internet Explorerissa. Helpoiten tämä onnistuu klikkaamalla muokkauskentän oikeassa reunassa olevaa ...-painiketta, jolloin voit muuttaa tietoja lomakkeella. Valitse vielä lopuksi Inspectorista Text-kenttä ja kirjoita siihen sopiva oletusarvo, esimerkiksi: "Syötä ikäsi!". Näkymän pitäisi nyt olla seuraavanlainen.
Kun tulospalvelu toimii, on aika pyöräyttää kentät tietojen syöttöä varten. Klikkaa ohjelman keskimmäiseen kolmannekseen ja pudota lomakkeelle peräkkäin kolme TextFieldiä ja kaksi Labelia. Helpoimmalla pääset kun pudotat Labelit lomakkeelle suoraan ensimmäisen ja toisen TextFieldin jälkeen, mutta järjestystä voit muuttaa jälkikäteen raahaamalla komponentteja toistensa lomassa.
Kauniimpiakin ohjelmia on joskus nähty. Siistitään hommaa hieman, ja muutetaan labelien tekstiksi pelkät pisteet (klikkaa labelia, muuta Inspectorin text-kenttää ja anna arvoksi "." ). Muuta seuraavaksi kahden ensimmäisen TextFieldin columns-kentän arvoksi 2, jolloin tilaa varataan yhteensä kahdelle numerolle. Viimeisen kentän columns-arvoksi käy 4. TextFieldien oletusteksti on sama kuin itse komponentin nimi, mutta se ei ole kovin kaunista. Tyhjennä siis kaikista TextFieldeistä text-arvot Inspectorin kautta.
Muista vielä antaa keskimmäisen paneelin asukkaille hyvät nimet, mallia saat vaikka kuvasta. Rakennenäkymän pitäisi tämän vaiheen jälkeen näyttää suunnilleen seuraavanlaiselta:
Lopuksi lisäämme vielä napin paikalleen alimpaan paneeliin. Klikkaa paneeli aktiiviseksi ja raahaa paletista yksi Button sen päälle. Anna luodulle nappulalle nimi "LaskeNappi" ja muuta label-kentän arvoksi "Laske!". Kutista ikkunaa siten, että komponentit sopivat ruudulle kauniisti. Näin päädytään tulokseen, joka on melko lähellä alkuperäistä ajatustamme.
Huomaa, että kun koko ohjelman alue on peitetty paneeleilla, on itse ohjelman kutistuskahvoihin mahdotonta tarttua kiinni, koska et saa ohjelma-aluetta valittua suoraan sommittelunäkymästä. Valitse siis This-olio rakenneikkunasta, niin kahvat ilmestyvät näkyviin.
Kun ohjelman ulkokuoret ovat nyt kasassa, voimmekin ryhtyä puuhastelemaan itse toimintojen kanssa. Sitä ennen tutustumme kuitenkin vielä siihen, mitä äsken harrastamamme suunnittelu tuotti lähdekoodin puolella.