wiki:k2014/paate/2
Last modified 4 years ago Last modified on 2014-01-22 16:56:25

Ohjelmointi 2 2014 / Pääteohjaus 2

Oppimistavoitteet

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"
  • 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

  • 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 ee43
  • 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
    • jatkossa nimeä lisäämäsi komponentit vastaavasti kuin em. esimerkissä, muuten paneleiden yms 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 tehdä koodia yhtäaikaa.
  • HUOM! Jos joskus tuntuu ettei varsinaiseen kuvan osu oikealle kohdalle, niin komponentin voi pudottaa myös Structure-näkymässä. Tämä taasen ei välttämättä toimi olleenkaan, vaan komponentti, jonka alikomponentiksi olet drag&droppaamassa ei ota mitään vastaan vaikka näyttää vihreää. Tällöin vaihtoehdoksi 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.
  • HUOM! Anna komponenteille HYVIÄ nimiä jo heti pudottamisen jälkeen (ks em. malli)
  • 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 paina kohdasta JPanel ja vie hiiri contentPanen South-kohdan päälle ja klikkaa haluttua kohtaa. Tälle voit antaa nimeksi vaikka panelNappulat
    • Jos vedät väärälle kohdalle, tämän voi korjata esimerkiksi paneelin Properties-ikkunasta löytyvää Constraints Propertya muuttamalla
  • Tähän paneeliin tulee myöhemmin nappulat kontrolloimiseen(ks. mallikuva).
  • Vedä uusi JSplitPane contentPanen Center-kohdan päälle.
  • Tähän paneeliin tulee hakemiseen ja näyttämiseen liittyvät toiminnot, joten nimeä se osuvasti.
  • JSplitPane koostuu kahdesta osasta. Vedä vasemman päälle uusi JPanel ja oikean päälle uusi JSplitPane
  • Vasemmalle puolelle tulee hakulaatikko, jolla haetaan jäseniä.
    • Laita tämän paneelin Layoutiksi BorderLayout aiemman kohdan tapaan.
    • Lisää North-kohtaan uusi JPaneeli (BoxLayout ja sen Constructor-kohdasta Y_AXIS). Tähän tulee hakukenttä
    • Seuraavaksi laitetaan listavalitsin, jonka voit tehdä joko
      1. Ota gui.jar käyttöön ohjeita noudattamalla
      2. Lisää ListChooser
      tai
      1. Lisää Center-kohtaan uusi JScrollPane. Tämän sisälle tulee JList, jota voidaan JScrollPanen avulla vierittää
      2. Jos JList ei mene viewport-kohtaan vetämällä, voit tehdä sen koodissa asettamalla setViewportView(list)
  • Oikealle puolelle tulevaan JSplitPaneen tulee kaksi JPanelia.
  • Oikean Layout on tuttuun tapaan BorderLayout ja siihen tulee jLabel North-kohtaan ja joko
    • StringTable jos on gui.jar käytössä
    tai
    • JScrollPane, jonka sisälle tulee JTable
  • Vasemman Layout on myöskin BorderLayout ja samaan tapaan North-kohdassa on JLabel ja Center-kohdassa JScrollPane, jonka sisällä on Jpanel, joka taas sisältää North-kohdassaan Vertical Boxin. Tämä löytyy Paletten kohdasta Struts & Springs.
  • (Tämä voi olla ettei ole enää 2014 ajankohtainen (???): Vertical Boxin käyttö tosin saattaa aiheuttaa virhetilanteen, koska Eclipse/WindowBuilder luo automaattiset 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 propertieseista kohdan model.
  • Aja ohjelma katso näyttääkö se sellaiselta kuin halusit

1.2 EditPanel

  • avuksi voit tehdä itsellesi pienen apuluokan EditPanel, jossa yhdistyvät otsikkoteksti ja tekstialue.

1.3 Muut ikkunat

  • tässä vaiheessa voit piirrellä ohjelman muut ikkunan niin, että uuden luonnissa (sama projekti) otat Swing/Dialog
  • piirrä kaikki muut ohjelmasi tarvitsemat ikkunat
  • 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