Ohjelmointi 2 2016 / Pääteohjaus 2

Oppimistavoitteet

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

Alkuvalmisteluja

Ennen kuin etenet, onhan seuraavat tehtynä?

• Java 8 asennus (luku 1)

• Eclipsen asennus (luku 1)

• SceneBuilderin asennus (luku 1 ja 2)

• Tuo projektisi versionhallinnasta: 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

• Huom! Jos svnht-komennolla tulee virheilmoitus - 'perl is not recognized as an internal or an external command, operable program or batch file' - niin katso ohje Perlin asettaminen polkuun.
• Ja 'svnht' -komentohan toimii valmiina vain yliopiston koneilla. Jos käytät omaa konetta, katso ohjeita omalla koneella käyttämiseen.

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. kuva Kerho-ohjelman pääikkunasta.
• 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 SceneBuilder

• Käynnistä Eclipse (komentoriviltä kirjoittamalla 'ee45')
• 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.
• 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 'Hierarchy' -näkymässä.

Ohjeet malli-ikkunan tekemiseksi

Täältä löytyy ohjeet Scenebuilderin käyttöön ja mallikäyttöliittymän tekemiseen. Malliohjelman tiedostot -kappaleeseen asti ohjeet liittyvät harjoitustyön 2 vaiheeseen, siitä eteenpäin (eli kohdasta Yksinkertaisen koodin lisääminen alkaen) harkan 3 vaiheeseen.

1.2 EditPanel

Tästä oli luennolla esimerkki:

• pikaohjeet:
  • lisää Hbox
  • lisää siihen Label, jolle halutuksi leveydeksi vaikka 100
  • lisää HBoxiin TextField
  • muuta HBoxin kaikki koot lasketuiksi
  • laita HBoxille marginaaliksi vaikka 10 joka suuntaan
  • valitse hierarkiakuvasta HBox
  • Library-kohdan rattaasta ota Import Selected
  • syntyy uusi komponetti esim nimelle HBox_1
  • nyt voit tätä pudotella niin monta kertaa kuin tarvitset.

• Harjoittele kerran oman komponentin tekeminen em. mallin mukaan. Sitten osaat itse tarvittaessa tehdä esimerkiksi elokuvateatterin paikanvarauksessa tarvittavan tuolin.
• Ei vielä fxguissa: 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

• Mallikäyttöliittymän tekemisen jälkeen piirrä omaan harjoitustyöhösi tarvittavat ikkunat Scenebuilderilla (Harjoitustyön 2 vaihe). Ota jokaisesta piirretystä ikkunasta kuvankaappaus (painamalla Alt+Print Screen ja paste Painttiin), ja lisää ne wikiin suunnitelmaasi.
• Tässä vaiheessa voit tehdä ohjelman muut ikkunat lisäämällä projektiin uuden FXML-dokumentin jokaista ikkunaa kohden.
• Itse ei kannata tehdä pieniä huomatusdialogeja, yhden merkkijonon kysyviä dialogeja eikä Kyllä/Ei -tyylisiä dialogeja, koska niihin löytyy valmiita malleja (ks. dokumentti).

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 FXML ja 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.