Graafisen käyttöliittymän rakentelua hiirellä vetelemällä

Tämän selostuksen tarkoituksena on näyttää miten Netbeans-IDE:llä voi rakentaa käyttöliittymän muutamassa minuutissa vetelemällä komponentteja komponenttipaletilta Formille hiirellä. Useissa eri IDE:issä on tälläisia toimintoja ja myös Eclipseen pitäisi olla saatavilla vastaavanlainen plugini. Tässä esimerkissä käytetään kuitenkin Netbeansin versiota 6.5.1, johon ei tarvitse asentaa mitään plugineja ohjeen seuraamiseksi. Tällaisessa sähköisessä käyttöliittymän rakentamisessa on paperiversioon verrattuna etuna ajokelpoisuus (siis nappuloita voi klikata, valikkoja selata, vaihtoehtoja valita, eli käyttöliittymää pääsee oikeasti vähän käyttämäänkin), sähköinen tallentamis-, jakamis- ja versionhallintamahdollisuus yms. Alla olevan käyttöliittymän luontiin ei mene montaa minuuttia, kunhan tulee tutuksi luomisprosessin kanssa. Huomaa, että selostuksessa luotavan käyttöliittymän ei ole tarkoitus olla kaunis tai hyvä, se on vaan todella nopeasti luotu (ruman näköinen) esimerkki tarvittavista työvaiheista. Selostuksessa oletetaan Netbeansin olevan jo asennettu koneelle.


1. Käynnistä NetBeans IDE

kuva1


2. Luo uusi Java-projekti

kuva2 kuva3 kuva4


3. Lisää projektiin uusi Formi

Lisää JFrame Formi klikkaamalla projektia oikealla hiiren näppäimellä ja valitsemalla valikosta New ja JFrame Form. Voit antaa Formille uuden nimen kuten alla näkyy. Formi avautuu IDE:n keskelle. Oikeassa reunassa näkyy GUI-komponenttipaletti, josta voi valita erilaisia komponentteja ja lisätä niitä formille.

kuva5 kuva6 kuva7 kuva8


4. Suurenna Formia

Voit muuttaa Formin kokoa joko tarttumalla hiirellä sen reunasta ja vetämällä, tai Properties-kohdasta etsimällä kaikkien ominaisuuksien joukosta koon ja antamalla sille jotkin lukuarvot näppäimistöltä. Jos ja kun formi ei mahdu kunnolla näkyviin, voit isontaa aluetta kaksoisklikkaamalla hiirellä MainFrame.java-välilehden otsikkoa.

kuva9 kuva10


5. Lisää Tabbed Pane

Lisää Tabbed Pane klikkaamalla sen nappualaa ja siirtymällä sitten Formin päälle. Suurenna lopuksi sen kokoa. Voit myös antaa sille paremman nimen oletusnimen tilalle.

kuva11 kuva12 kuva13 kuva15


6. Lisää välilehtiä

Lisää Tabbed Paneen välilehtiä valitsemalla Panel ja lisäämällä niitä. Vaihda välilehtien otsikkotekstit.

kuva16 kuva17 kuva18 kuva19 kuva20


7. Lisää Label ja siihen kuva

kuva21 kuva22 kuva23 kuva24 kuva25


7. Lisää ja muokkaa komponentteja...

kuva26 kuva27 kuva28 kuva29 kuva30 kuva31 kuva32 kuva33 kuva34 kuva35


8. Testaa käyttöliittymää valitsemalla Debug MainFrame.java...

kuva36


9. Käyttöliittymää voi nyt testata

kuva37 kuva39 kuva38