wiki:k2015/paate/2
Last modified 3 years ago Last modified on 2015-01-18 22:47:33

Ohjelmointi 2 2015 / Pääteohjaus 2

Oppimistavoitteet

  • käyttöliittymän tekeminen WindowBuilderillä
  • oman komponentin tekeminen

Tehtävät

1. Ohjelman pääikkuna

  • Useimmiten GUI-ohjelmat ovat sellaisia, että niissä on yksi selkeä pääikkuna, missä suurin osa toiminnoista tehdään ja jonka alta voi aueta uusia "ali-ikkunoita". Katso esim. Kerho-ohjelman pääikkuna.
  • Pääikkuna ei välttämättä ole ohjelman ensimmäisenä näyttöön tuleva ikkuna, vaan sitä ennen voi tulla jokin muu ikkuna näkyville jossa kysytään jotakin alkutietoja.
  • Päätä ensin, mistä osista pääikkuna koostuu.

1.1 Eclipse ja WindowBuilder

Alkuvalmisteluja

  • Mene komentorivillä aluksi omaan hakemistoosi (tee jos ei vielä ole) C:\mytemp\ohj2\OMATUNNUS
  • Hae harjoitusyön tämän hetkinen tilanne svn:stä antamalla komento
    svnht PROJNAME
    
  • Käynnistä Eclipse komentoriviltä kirjoittamalla ee44
  • Luo WindowBuilder-ohjeen mukaisesti itsellesi uusi projekti (C:\mytemp\ohj2\OMATUNNUS)
  • Alla olevilla ohjeilla tulee tämän kaltainen GUI. Joudut tietysti soveltamaan joitain kohtia.
    • Ota em. malli omaan selaimen välilehteen itsellesi näkyviin
    • HUOM! Jatkossa nimeä lisäämäsi komponentit vastaavasti kuin em. esimerkissä. Muuten paneelien kanssa on vaikea pärjätä, kun ei tiedä, mikä on missäkin.
  • Jaa näyttösi osiin siten, että selain, jossa tämä ohje on, on noin 30-40% näytön leveydestä ja Eclipse loput. Näin voit lukea ohjetta ja käyttää Eclipseä yhtäaikaa.
  • Ota gui.jar käyttöön ohjeita noudattamalla.
  • HUOM! Jos joskus tuntuu, ettei komponentin lisääminen paneeliin onnistu visuaalisen näkymän kautta (koska paneeli on litteä), niin komponentin voi pudottaa myös Structure-näkymässä. Tämäkään ei aina välttämättä onnistu. Tällöin vaihtoehdoiksi jäävät komponenttien paikalleen laittaminen koodissa (hyvää harjoitusta) tai ylätason komponentin layoutin vaihtaminen vähäksi aikaa flow:ksi, jonka jälkeen uuden komponentin mahtuu laittamaan oikealle paikalle, flow pitää luonnollisesti muistaa vaihtaa borderiksi, mikäli näin oli tarkoitus.

Ohjeet malli-ikkunan tekemiseksi

  • Aluksi luo uusi JFrame ja anna tälle hyvä nimi (joka alkaa isolla kirjaimella)
  • Valitse contentPane-componentille Layoutiksi BorderLayout
    • Valitse contentPane joko Structure-ikkunasta tai painamalla hiirellä ikkunaa ja Properties-ikkunasta Layout valikosta valitse java.awt.BorderLayout.
    • Voit myös vetää Palette-ikkunasta BorderLayoutin contentPanen päälle.
  • Sitten valitse työkalupalkista JPanel ja vie hiiri contentPanen South-kohdan päälle ja klikkaa tätä. Anna syntyneelle paneelille nimeksi vaikka panelNappulat. Nimen voi vaihtaa Properties-ikkunan Variable-kohdasta. Tähän paneeliin tulee myöhemmin nappulat kontrolloimiseen (ks. mallikuva).
    • Jos laitat paneelin väärään kohtaan, paikan voi korjata paneelin Properties-ikkunasta löytyvää Constraints Propertya muuttamalla.
  • Lisää JSplitPane contentPanen Center-kohdan päälle. Tähän paneeliin tulee hakemiseen ja näyttämiseen liittyvät toiminnot.
  • JSplitPane koostuu kahdesta osasta. Lisää vasemman päälle uusi JPanel (nimeksi esim. vasenPanel) ja oikean päälle uusi JSplitPane.
  • Vasemmalle puolelle tulee hakulaatikko, jolla haetaan jäseniä.
    • Laita vasenPanelin layoutiksi BorderLayout. Tässä vaiheessa paneeli litistyy viivaksi, koska sen sisällä ei vielä ole mitään.
    • Lisää vasenPanelin North-kohtaan uusi JPanel (nimeksi esim. hakuPanel) Structure-ikkunan avulla, eli valitse työkalupalkista JPanel ja klikkaa Structure-ikkunassa vasenPanelia. Laita hakuPanelin layoutiksi BoxLayout ja sen Constructor-kohdasta Y_AXIS.
      • Lisää hakuPanelin sisään JLabel, ComboBoxChooser ja JTextField (Structure-ikkunan avulla).
    • Lisää ListChooser vasenPanelin Center-kohtaan (taas Structure-ikkunan kautta, koska vasenPanel on litistynyt).
  • Lisää JPanelit oikealla puolella olevan JSplitPanen kumpaankin lokeroon.
    • Laita oikean JPanelin layoutiksi BorderLayout ja sen sisälle JLabel North-kohtaan ja StringTable (löytyy gui.jar:sta) Center-kohtaan.
    • Vasemman JPanelin layoutiksi tulee myös BorderLayout. Sen North-kohtaan tulee JLabel ja Center-kohtaan JScrollPane. Tämän JScrollPanen sisälle (eli Viewport-kohtaan) tulee JPanel, jonka layout on BorderLayout ja joka sisältää North-kohdassaan Vertical Boxin. Tämä löytyy työkalupalkin kohdasta Struts & Springs.
  • (Tämä voi olla ettei ole enää 2015 ajankohtainen (???): Vertical Boxin käyttö tosin saattaa aiheuttaa virhetilanteen, koska Eclipse/WindowBuilder luo automaattisesti koodirivin, joka kutsuu VerticalBoxin setLayout-aliohjelmaa, joka vastaavasti heittää (dokumentoidun) poikkeuksen. Kyseisen funktiokutsun voi kuitenkin laittaa huoletta kommentteihin, jonka jälkeen se ei enää estä ohjelman toimintaa.)
  • Huomaat varmaan, että esimerkissä boxin sisälle on laitettu tekstiä ja kenttiä. Ennen kun lähdemme käsin lisäämään JLabeleja ja JTextFieldejä, on syytä huomioida, että nehän ovat täysin samanlaisia, tekstiä lukuunottamatta.
    • Hyvä ohjelmoija pyrkii välttämään toistoa, joten tehdään komponentti, joka yhdistää tekstin ja tekstikentän. Tämä ohjeistetaan seuraavassa kohdassa.
  • Loput komponentit, kuten napit, ylävalikon ja taulukon, voit lisätä mallin jäsennyksen mukaan.
  • Taulukkoon ja listaan voi lisätä sisältöä valitsemalla komponentin ominaisuusikkunasta kohdan model.
  • Aja ohjelma ja katso, näyttääkö se sellaiselta kuin halusit.

1.2 EditPanel

  • Harjoittele kerran oman komponentin tekeminen EditPanelin mallin mukaan. Sitten osaat itse tarvittaessa tehdä esimerkiksi elokuvateatterin paikanvarauksessa tarvittavan tuolin.
  • Käytä kuitenkin harjoitustyössäsi valmista gui.jar:issa olevaa EditPanel-luokkaa, jossa toiminnallisuus ja ominaisuudet on viety pidemmälle.

1.3 Muut ikkunat

  • Tässä vaiheessa voit tehdä ohjelman muut ikkunan niin, että uuden luonnissa (sama projekti) otat Swing/Dialog (HUOM! Ei enää JFrame!)
  • Itse ei kannata tehdä pieniä huomatusdialogeja, yhden merkkijonon kysyviä dialogeja eikä Kyllä/Ei -tyylisiä dialogeja, koska ne löytyvät valmiina Swing-kirjastosta (ks. dokumentti).
  • Aja kukin dialogi erikseen (myöhemmin/vaihe 3 niistä otetaan main pois ja ne käynnistetään pääikkunasta sopivista toiminnoista).

1.4 Kuvaruutukaappaukset ja files.txt

  • Ota kustakin ikkunasta kuvaruutukaappaus ohjeen mukaan ja talleta hakemistoon C:\mytemp\ohj2\OMATUNNUS\kuvat.
  • Lisää saman ohjeen mukaan files.txt:hen viitteet kuviin (muista / eikä \ ).
  • Lisää kaikki tekemäsi Java-tiedostot files.txt:hen.
  • Vie työ takaisin versionhallintaan antamalla komentoriviltä komento:
    svnht PROJNAME
    
  • Jos kone valittaa, ettei komentoa svnht ole, niin yhdistä N-levy.