The page has been modified since the last reload. Refresh now?

There are {{ $ctrl.pendingUpdatesCount() }} pending paragraph updates.

SceneBuilderin käyttö

Tässä dokumentissa käydään läpi miten teet SceneBuilderilla Java-sovellukseesi graafisen käyttöliittymän. Opit, mm.:

  • Luomaan Eclipsellä JavaFX-projektin.
  • Piirtämään yksinkertaisen käyttöliittymän SceneBuilderillä.
  • Asentamaan omia komponentteja, jotka ovat .jar-tiedostossa.
  • Ajamaan ohjelman Eclipsessä.
  • Lisäämään yksinkertaisia tapahtuman käsittelijöitä, joista tulee “ei toimi”.
  • Käsittelemään ohjelman sulkemisraksin.

Tähän osioon liittyviä lukuja kurssimonisteessa:

Tämä dokumentti sisältää ohjeita sekä tekstimuodossa että suunnilleen samansisältöisinä videoina. Ohjevideoilla käytetään seuraavia pikanäppäimiä:

Windows OS X Toiminto
Ctrl-S Cmd-S tallenna
F11 Cmd-F11 Eclipsessä ajaa ohjelman (debug)
Ctrl-P Cmd-P SceneBuilderissä “ajaa” suunnitellun ikkunan
Alt-Tab Cmd-Tab vaihdetaan Eclipsen, SceneBuilderin ja selaimen välillä
#

Please to interact with this component

Miksi tämä on tässä eikä tuolla loppupuolella?
- VL: joo, huonostihan tähän on vastattu. Mutta kun tehtävä voi tehdä vähän kerrallaan ja kaikki eivät koskaan mene loppuun saakka, mutta tämän alun ohi kaikkien pitäisi kulkea. Suo siellä, vetelä täällä...

22 Jan 16 (edited 23 Jan 16)

Mitä tuo Velps tarkoittaa?

  • VL: Velpit: Virtuaalsiet Esipainetut Liukkaat PostIT-laput. Tuo on tarkoitettu siihem että opiskelija voi tehdä merkintöjä (PostIt-lappuja) dokumenttii tai omaan vastaukseen tai opettaja voi tehdä merkintöjä opiskelijan vastaukseen. Tuohon tehtävälaatikkoon ei voi tehdä merkintäjä koska HTML ei niitä siihen salli, mutta jos ruksii Velps, aukeaa tuohon kohti tekstuaalinen esitys vastauksesta ja siihen voi Velp View-tilassa lisätä merkintöjä (kunhan ensi luo Velppejä). Oikeastaan tuon ei kuuluisi näkyä muuta kuin jo Velppejä on annettu tai olla Velp View-tilassa. Kukaan ei ole vaan muistanut sitä näkyvyysehtoa siihen kirjoittaa.
07 Jan 17 (edited 07 Jan 17)

1. Mikä on SceneBuilder?

SceneBuilder on graafinen työkalu, jonka avulla on helppo luoda ulkoasu ja graafinen käyttöliittymä (GUI) ohjelmaasi. SceneBuilder näyttää käytössä suunnilleen tältä:

#

Periaatteessa SceneBuilderilla voidaan rakennella graafisia käyttöliittymiä täysin ilman Eclipsen (tai vastaavan IDE:n) apua, mutta kun nyt kurssilla on tavoitteena tehdä sekä ohjelma, että sille käyttöliittymä on vain järkevää koordinoida käyttöliittymän ja ohjelman kehitystä yhdestä paikasta, tällä kurssilla siis Eclipsestä.

Periaatteessa JavaFX-ohjelman ulkoasu voitaisiin tehdä myös täysin ohjelmallisesti ilman SceneBuilderin kaltaista graafista työkalua, mutta ymmärrettävästi ulkoasun suunnittelu visuaalisesti on usein aluksi helpompaa.

Usein käytännössä graafista käyttöliittymää kehitetäänkin yhdistelemällä visuaalista ja ohjelmoinnillista työskentelyä. Esimerkiksi perussuunnittelu tehdään visuaalisella työkalulla ja sitten selkeästi toistuvia komponentteja lisätään ajonaikaisesti ohjelmakoodilla.

SceneBuilderilla luotujen ulkoasujen kuvauskielenä on FXML -formaatti, joka pohjautuu XML:ään. Tarkentimella .fxml olevia tiedostoja voidaan avata ja kirjoittaa myös millä tahansa tekstieditorilla, kuten NotePad++:lla tai Eclipsessä, ja niiden rakenne on aika ymmärrettävä. Eli pohjimmiltaan SceneBuilder on vain yksi vaihtoehto tietyn muotoisen xml-tiedoston muokkaamiseen.

Oraclen omat SceneBuilder-ohjeet löydät täältä, mutta pääset helpommin alkun tätä dokumenttia lukemalla ja upotettuja videoita katsomalla.

Aletaanpas tutustumaan tarkemmin itse käyttöön, mutta ennen kuin jatkat, niin varmista, että seuraavat on tehtynä:

#
#

2. Projektin luominen Eclipsessä ja SceneBuilderin avaaminen

Seuraavan esimerkin tavoitteena on tuottaa valmiilta näyttävä, ajettava ohjelma mahdollisimman vähällä koodinkirjoittamisella. Tällaisen näköiskäyttöliittymän avulla olisi sitten helpompi keskustella esimerkiksi asiakkaiden kanssa.

Alta löydät ohjeet tekstimuodossa sekä videona.

#

Huom! videolla tehdään “väärän” niminen kontrolleri, se pitäisi olla KerhoGUIController. Käytännössä nimillä ei ole mitään merkitystä, mutta jos niitä vaihtaa luomisen jälkeen, niin niitä esiintyy useassa paikassa ja kaikki pitäisi osata vaihtaa. Tuo GUI on vaan kurssin nimeämistavan mukainen.

Aloitetaan luomalla Eclipseen uusi projekti.

Suositeltavaa on noudattaa ohjelmointikurssin nimeämiskäytänteitä. Korvaa alla olevassa esimerkissä kerho oman projektisi työnimellä ja vesal joko omalla käyttäjätunnuksella tai ryhmänne valitsemalla “projektinimellä”. Muista laittaa kerho samalla tavalla kirjoitettuna kuin mallissa (välillä isolla ja välillä pienellä).

  1. Avaa Eclipse

  2. Avaa valikosta: File / New / Other... / JavaFX / JavaFX Project ja paina ‘Next’

  3. Täytä lomake seuraavasti

    • Project name: kerho
    • Use default location: ota ruksi pois
    • Location: C:\MyTemp\vesal\ohj2\kerho
      (Mac esim: /Users/vesal/ohj2/kerho)
    • tarkista että JRE on varmasti se jdk-11-JavaFX vaikka tarvittaessa ruksimalla se Use a project specific JRE: ja sieltä oikea JRE.
  4. Paina Next, ruksi pois Create Module-info.java file ja sitten Next kunnes olet sivulla, jossa kysytään Application type

  5. Täytä lomakkeen tiedot:

    • Application type: Desktop
    • Pacakage name: fxKerho
    • Language: FXML
    • Root type: javafx.scene.layout.BorderPane
    • FileName: KerhoGUIView
    • ControllerName: KerhoGUIController
  6. Finish

  7. Lisää oma ohj2-kirjasto (jos et ole tehnyt vielä tätä kirjastoa FXGui.jar-ohjeen mukaan, voit ohittaa tämän kohdan ja piirtää käyttöliittymät, mutta et voi ajaa ohjelmaa):

    • projektin nimen päällä hiiren oikeaa
    • Properties/Java Build Path
    • siirry Libraries-välilehdelle
    • mene Classpath päälle ja valitse Add Library
    • sieltä tuplaklikkaa User Library ja ruksi ohj2
    • Apply and close

    Mikroluokissa voi joutua tekemään ohj2-kirjaston, ellei ole valmiina.

  8. Jos olet asettanut Eclipsen varoitukset kurssin suositusten mukaan niin KerhoGUIController.java -tiedosto varoittaa virheestä, koska siinä olevasta luokasta puuttuu sisältö. Tästä pääset eteenpäin ihan vain lisäämällä luokan lohkosulkujen sisään kommenttimerkni: // Samoin valittaa puuttuvista kommenteista alleviivaamalla KerhoGUIController. Mene alleviivatun sanan päälle ja valitse Add javadoc comment. Myös Main luokassa lisää kommentit Main-sanan päältä ja main sanan pääältä. Ja main kommentteihin lisää vielä args jälkeen selitys:

     	 /**
     	  * @param args ei käytössä
     	  */
  9. Mene vasemmalla olevan PackageExplorer -paneelin Main.java -tiedoston nimen päälle ja paina hiiren oikealla: Refactor/Rename ja vaihda nimeksi KerhoMain.java.

  10. Vaihda application.css tiedoston nimeksi kerho.css.

  11. Avaa KerhoMain.java ja vaihda myös siellä application.css tilalle kerho.css . Nyt pitäisi vasemman reunan näyttää seuraavalta:

  12. valitse KerhoMain.java aktiiviseksi ja paina F11 ajaaksesi ohjelman.

  13. Pitäisi aueta ohjelma, jossa on tyhjä dialogi.

  14. Sammuta dialogi ja ehkä kannattaa KerhoMain-tiedostosta vielä poistaa koko rajoitteet 400,400. Eli se 400,400 pois, muuten rivi jää ennalleen.

Luulin, että asennukset olivat menneet oikein, mutta luodessani tuon kerho projektin, niin näyttää punaista ruksia siinä sen projektin .java tiedostojen päällä. Valittaa seuraavaa: Empty block should be documented - Javadoc: Missing comment for public. ja siinä KerhoMain.java valittaa javafx could not be resolved. Ja lisäksi, kun yritän lisätä tuon user libraryn JavaFX, niin sitä ei löydy sieltä. Edit: katsoin, että videolla näkyy siinä vasemmalla kerho-projektin alla JRE SYstem Library[JavaSE jne..] ja sen alapuolella JavaFX SDK, minulla ei tätä näy jonkun syyn takia.

    VL: joo, ihan oikein se on. Jos sulla on tyhjä sulut, niin mun asetuksilla siitä on tehty verhe, koska aina on joku vika jos on tyhjät sulut. Tästä selviää esim laittamalla sinne jokun kommentin //-merkeillä.
Ja kommentit pitää kirjoittaa. Oletko jo tehnyt sen User-library-kohdan, eli tee Ali.jar kohta ennen tätä SceneBuilder-kohtaa! Lisäsin ohjeeseen järjestyksen vaihtamisen tuolta osin. Samoin lisäsin ohjeita kohtaan 8. tuon kommentoinnin osalta. Ja tein vielä uuden asennusvideonkin tämän vuoden työkaluilla, niin näyttää samalle.

04 Jan 19 (edited 04 Jan 19)

En onnistu ajamaan projektia. Ilmeisesti Graphics.jar tiedostoa ei löydy. Olen ne kuitenkin koneelleni ladannut.

VL: on syytä kertoa enemmän virheilmoituksista. Katso kurssin Työkalut/Virhesivu.

09 Jan 19 (edited 12 Jan 19)

Onko Run / Run configurations… / Main välilehdellä Main class: oikein? -KW-

12 Jan 19 (edited 12 Jan 19)

Jäin tähän jumiin, en saa ajettua. Virheilmoitus liittyy puuttuvaan sample kuvaan: Exception in thread “main” java.lang.NullPointerException: filename sample/CarSample.png not found at fi.jyu.mit.graphics.Bitmap.(Bitmap.java:55) at fi.jyu.mit.graphics.Bitmap.(Bitmap.java:97) at sample2.BitmapArraySample.main(BitmapArraySample.java:19)

jar:t on asennettu ja testattu toimiviksi, niiden Java locationit on oikein, mutta ilmeisesti jonkin kirjaston ole onnistunut rikkomaan? mikä nyt avukis? Kaikki alusta uusiksi?

17 Jan 19 (edited 17 Jan 19)

Nyt voit avata SceneBuilderin klikkaamalla hiiren oikealla KerhoGUIView.fxml tiedostoa ja sitten Open with SceneBuilder. Ruutu näyttää tyhjältä, mutta siellä on pohjana yksi BorderPane.

Pitääkö NIMIGuiView.fxml avata src- vai bin-hakemistosta?

VL: itse käsitellään aina vain src hakemiston juttuja.

26 Jan 19 (edited 26 Jan 19)
#

Hei taas. En ollut tosiaan tehnyt sitä Ali.jar kohtaa vielä. Muuten ok, mutta ajettaessa tulee: Error occurred during initialization of boot layer java.lang.module.FindException: Module javafx.web not found

Kävin tarkastamassa JavFX asennus kohdasta nuo VM argumentit, jotka ovat oikein mielestäni ja niissä .jar tiedostoissa on se Javadoc location

04 Jan 19

En saanut ohjelmaa ajettua. Valittaa että pitäisi lisätä @Override riville “public void start(Stage primaryStage) {” Sen lisäämisen jälkeen samalla rivillä sanoo “Missing comment for public declaration”

VL: katsoitiko mitä tein videolla? Lisäsin joka tapauksessa tuohon alle että miltä niiden tiedostojen ptiöisi näyttä noiden muokkausten jälkeen. Tuota overridea ihmettelen, koska kyllä mulla kaikki wizardit (mm. se mitä videossa käytettiin), laittavat sen.



Olikin jäänyt koodista vaihtamatta oikea nimi .css -kohtaan, hommat nyt kunnossa. Pienestä aina kiinni…

13 Jan 19 (edited 13 Jan 19)

Kato miltä tiedotojen pitäisi näyttää muokkauksen jälkeen

Mahdollisissa virhetilanteissa katso onko täältä apua

HUOM! Projektin teko tuntuu varsin työläältä, mutta onneksi viime kevään kurssilaisista Antti teki asiaan helpotuksen, jolla kaikki saadaan yhdellä kysymyksellä. Eli jatkoa varten lue aikanaan ohjeet tuolta: fxmlpackage.jar.

#

3. Valmiiden apukomponenttien asentaminen

Kun piirretään harjoitustyön suunnitelma SceneBuilderillä, olisi se hyvä saada mahdollisimman aidon näköiseksi. Valmiilla komponenteilla ei monimutkaisempiin komponentteihin saa näköisdataa, esim. vakiokomponenteilla listat ovat tyhjiä, mikä vaikeuttaa hahmottamista. Tällä kurssilla onkin tarjolla avuksi muokattuja komponentteja, joihin voit syöttää “aidon näköistä” dataa, kuten esim. havainnekuvien jäsenlistauksen.

Toimi seuraavasti:

#

3.1 Omien komponenttien asentaminen

Kurssia varten on tehty käyttöliittymäkomponentteja sisältävä aliohjelmakirjasto, joka on FXGui.jar-nimisessä tiedostossa. Alla on ohjeet sen asentamiseksi:

  1. Jos olet mennyt asennuksia huolella läpi, tämä kohta onkin jo tehtynä. Jos et, niin: Lataa tiedosto fxgui.jar joko c:\MyTemp\\ohj2\jar tai c:\devel\jar hakemistoon. Varmista, että tiedostopääte on latauksenkin jälkeen .jar, eli tiedoston kokonimi on fxgui.jar (jotkin selaimet - lue IE yms - vaihtavat ilman lupaa ladatessa tiedostopäätteeksi .zip jolloin tiedostopääte pitää itse muuttaa: “Nimeä uudelleen” fxgui.zip -> fxgui.jar).
  2. Klikkaa SceneBuilderissä vasemmassa yläkulmassa Library -sanan oikealla puolella olevaa rattaan kuvaa.
  3. Valitse JAR/FXML Manager.
  4. Aukeaa Library Manager.
  5. Valitse 1. kerralla Add Library/FXML from file system`.
  6. Etsi äsken lataamasi .jar -tiedosto.
  7. Paina OK.
  8. Ruksi mitä komponentteja haluat asentaa (suositus on kaikki).
  9. Paina Import Components.
  10. Voit sulkea Library Managerin (muista mistä sen saa jatkossa käyntiin).
  11. Uudet komponentit löytyvät Custom -paneelista.

Huom! Uudet komponentit täytyy käydä vielä lisäämässä Eclipsenkin puolella:

  1. Package Exploreissa klikkaa hiiren oikealla painikkeella projektin nimeä ja valitse Properties
  2. Valitse avautuvan ikkunan listalta Java Build Path ja sen välilehti Libraries
  3. Jos on vaihtoehdot Module ja Classpath, niin klikkaa Classpath-kohtaa
  4. Paina Add External JARs...
  5. Etsi paikka mihin olet fxgui.jar-tiedoston tallentanut. Voit käyttää myös sitä Library paikkaa, johon SceneBuilder sen tallensi.

Huom! Omat komponentit voivat aiheuttaa kaikenlaisia epäyhteensopivuusongelmia. Tyypillisin on se, ettei .fxml-tiedostoa pysty avaamaan SceneBuilderiin Eclipsestä käsin, ratkaisu on avata tiedosto SceneBuilderin kautta. Kts. tämän sivun lopusta lisää.

Erehdyin lataamaan tiedoston ensin IE:llä, joka muutti sen väkisin zip-muotoon eikä asennus tietenkään onnistunut. Chrome suostui lataamaan .jar-muodossa, jolloin homma onnistui.
VL: Sääntö nro 1: Älä koskaan käytä IE:tä :-)

05 Jan 16 (edited 07 Jan 18)

3.2 Komponenttien päivittäminen

Tämä on tässä vaiheessa enemmänkin “nice to know” -tietoa.

Tapa 1: Poista vanhat ja asenna uudet:

  1. Klikkaa SceneBuilderissä vasemmassa yläkulmassa Library -sanan oikealla puolella olevaa rattaan kuvaa
  2. Valitse Jar/FXML manager
  3. Library manager aukeaa
  4. Sulje kaikki mahdollisesti auki olevat SceneBuilderit
  5. Deletoi kaikki listassa olevat tiedostot jotka haluat päivittää.
  6. Asenna tuoreet komponentit ylempänä olevan ohjeen mukaan.

Tapa 2: Asenna uudet vanhojen päälle:

  1. Sinun täytyy tietää Library-hakemiston sijainti. Sijainti voi olla esimerkiksi: C:\Users\Vesa\AppData\Roaming\Scene Builder\Library
  2. Sulje kaikki SceneBuilderit
  3. Tallenna tuore komponenttipaketti (.jar) vanhan päälle.
  4. Avaa SceneBuilder, päivitetyt komponentit ovat nyt käytössä.

4. Suunnitelman piirtäminen

Seuraavassa ohjeet hieman yksinkertaistetun suunnitelman piirtämiseksi (vastaa harjoitustyön mallin vaiheen 1 kuvaa):

Suunnitelman mallikuva
Suunnitelman mallikuva

4.1 Perusjako alueisiin

Käyttöliittymän tekemisen yksi lähtökohta on se, että käyttöliittymä mukautuu ikkunan (stage) koon muutoksiin. Siksi tehdessä pitää hieman miettiä minkälaisten pohjakomponenttien (Container) päälle itse komponentteja (Component) laitetaan.

Tässä harjoituksessa ikkunan käyttöliittymän asettelun pohjaksi on valittu BorderPane-niminen container, koska se jakaa mukavasti ikkunan viiteen eri osaan. Kaikkia osia ei ole aina pakko käyttää (tämän harjoituksen 1. vaiheessa käytämme vain neljää) ja container-komponentteja voi sijoittaa sisäkkäinkin.

Ennen kuin aloitetaan rakentelu, niin kurkataan hieman millaista lopputulosta kohti mennään. Seuraavassa kuvassa on näkymä SceneBuilder documentin hierarkiasta kun kaikki komponentit ovat paikallaan:

{}
#

Animaatiossa nuolten painelu ei tee minulle mitään. Näkyy vain yksi ja sama kuva.

VL: kyllä mullakin kuva on sama, mutta nuolet vaihtavat paikkaa että mistä lähtee ja kihin osoittaa. Eikä sulla?

15 Jan 18 (edited 15 Jan 18)
#
  • Huom! Olethan asentanut kurssin FXGui.jar -apukomponentit?
  • Vinkki: SceneBuilderissa valitse vasemman yläkulman Libraryn oikeanpuoleisen rattaan alta View as List, jolloin kaikki komponentit näkyvät samassa listassa.

Aloitetaan täyttämällä ensin ikkunan reunaosat:

  1. Luodaan ikkunan alareunaan tila painikkeille HBoxin avulla
    • Avaa vasemmasta reunapaneelista Library/Containers -lista ja etsi HBox (huomaa, että voit käyttää myös hakua)
    • Raahaa HBox-elementti hiirellä BorderPane-alueen alareunaan (Bottom). Helpointa on raahata elementti vasemmalla olevaan Hierarchy -hierarkianäkymässä olevaan insert BOTTOM-kohtaan, koska itse käyttöliittymän kuva elää hyvin paljon kehityksen aikana mikä aiheuttaa helposti virhesijoituksia.
    • Säädetään seuraavaksi elementin asetukset: Varmista, että juuri pudottamasi HBox on valittuna ja avaa oikeasta reunasta ´Layout:HBox´
    • Vaihda Pref Width ja Pref Height koot asetukseen USE_COMPUTED_SIZE.
    • Aseta Spacing-kohtaan 10
    • Aseta kaikkiin Margin kohtiin 10. Tämä onnistuu helpostin kun laittaa ensimmäiseen 10 ja sitten klikkaa väkästä (>) joka vie saman muihin kohtiin
  2. Lisätään painikkeet (Button):
    • Etsi Library/Controls-listalta Button ja vedä ne luomasi HBoxin päälle.
    • Vaihda painikkeisiin sopivat tekstit (esim Uusi jäsen ja Tallenna).
      • tuplaklikkaamalla tekstiä TAI
      • oikealta Properties:Button/Text TAI
      • vasemmalta `Hierarchy/HBox´ alta
  3. Lisätään Menu-palkki (MenuBar):
    • Etsi Library/Controls-listalta MenuBar ja raahaa se BorderPane-alueen Top-osaan.
    • Pääset muokkaamaan menun tekstejä ja poistamaan tarpeettomia alavalintoja avaamalla MenuBarin rakenteen vasemman reunan Hierarchy-valikosta.
  4. Luodaan uusi BorderPane valintalistaa ja sen otsikkoa varten:
    • Etsi Library/Containers-listalta uusi BorderPane ja raahaa se olemassa olevan BorderPanen Left-osaan.
    • Avaa uusi BordePane Hierarchy-näkymässä niin, että näet sen osa-alueet.
  5. Lisätään valintalista (ListChooser) ja sille otsikko (Label):
    • Etsi Library/Controls-listalta Label, ja raahaa se uuden BorderPane alueen Top-osaan.
    • Vaihda sopiva teksti siihen (mallissa Jäsenet).
    • Olettaen, että olet asentanut FXGui.jar -apukomponentit, etsi Library/Custom-listalta ListChooser ja raahaa se uuden BorderPanen keskiosaan (Center).
    • Avaa oikealta Properties:ListChooser
    • Vie hiiri kohdan Rivit päälle.
    • jos ei ole monirivinen alue, niin paina oikeaan reunaan ilmestyvästä rattaasta Switch to multi-lines mode.
    • Kirjoita riveiksi sen, mitä haluat näkyvän listassa. Katso ettei alkuun jää tyhjää riviä.
  6. Muista tallentaa aina välillä.

Seuraavaksi täytetään keskiosaa, johon pitää saada komponentit niin, että niiden koko muuttuu kun alueen kokoa muutetaan:

  1. Luodaan alkuperäisen BorderPanen keskiosaan vieritettävä ScrollPane (empty) -osio: -Library/Containers: ScrollPane (empty)
    • Laita ruksi oikean reunan Layout:ScrollPane -paneelissa kohtaan Fit to Width, jotta se täyttää kaiken alueen tilan
  2. Lisätään Library/Containers: GridPane edellä luodun ScrollPanenpäälle
    • Avaa Layout:GridPane -paneeli ja tee muutokset:
      • Hgap -kohtaan arvo 10, jotta sarakkeiden väliin tulee sopivasti tyhjää.
      • Padding-kohtiin muihin 10 paitsi alaosaan.
    • Klikkaa 0-sarakkeen otsikkoa ja Layout: ColumnConstraints-paneelista:
      • Pref Width -kohtaan USE_COMPUTED_SIZE
      • Poista ruksi kohdasta Fill Width
      • Vaihda Halignment-kohtaan RIGHT.
    • Klikkaa 1-sarakkeen otsikkoa ja Layout: ColumnConstraints-paneelista:
      • Katso että Fill Width -kohdassa on ruksi
      • Vaihda HGROW -kohtaan Always.
      • Tarkista että leveydet ovat USE_COMPUTED_SIZE.
  3. Lisätään Label -komponentteja 0-sarakkeen eri riveille ja vaihdetaan niihin sopivat otsikot.
    • Uusia rivejä saat raahaamalla komponentin tarkasti GridPane-komponentin alareunaan TAI klikkaamalla hiiren oikealla napilla rivinumeroa.
  4. Lisätään TextField-komponentit 1-sarakkeen riveille
    • Raahaa Library/Controls: TextField
    • Layout: TextField: Vaihda HGROW-kohtaan Always. (Videossa tätä ei tarvinnut tehdä, kokeile ilman ja kerro toimiiko!)

Kokeillaan toimiiko komponenttien skaalaus: Paina Ctrl+P (Mac: Cmd+P) ja muuttele “ohjelman” kokoa ja katso että TextField pienenee ja kasvaa halutulla tavalla. Samoin katso että ScrollPane alueen vierityspalkki tulee kun kokoa muutetaan riittävän pieneksi.

Sitten vielä lisää loput TextField -komponentit ottamalla kopio alkuperäisestä ja pastea niitä riittävä määrä. Ne voivat mennä väärään ruutuun, mutta raahaa ne siltä paikalleen. Laita kuhunkin TextField -kenttään malliksi sopiva teksti jotta käyttöliittymä näyttää aidommalta.

4. OS X:llä ainakin täytyy asettaa "Hgrow Always", jottei otsikko lähde ajelehtimaan.

02 Jan 16 (edited 14 Feb 16)

Mac: ei ctrl + P vaan komento + P

14 Jan 16

En saa myöskään skaalautumaan oikein, vaikka teen ohjeen mukaan. Tutkin koodia, että mikä menee mulle erilailla, niin minulla koodin tulee labelien ja textfieldin jälkeen <GridPane.margin> < Insets /> </GridPane.margin> Voisiko tämä olla syynä, miksi skaalautuminen ei onnistu? Jos on, mitä pitäisi tehdä?

VL: Katso tuolta KerhoGUIView.fxml miltä mun .fxml näyttää.

25 Jan 19 (edited 25 Jan 19)

Nyt ulkoasun pitäisi olla suunnitelman mukainen. Seuraavaa vaihetta varten vielä pieni viimeistely.

Mitä voi olla pielessä, jos ei skaalaudu oikein?

VL: tähän ei voi kukaan vastata näkemättä itse toteutusta. Virhemakhdollisuuksia on enemmän kuin Päijänteessä kaloja :-)

Vertaa tuohon mun KerhoGUIView.fxml-tiedostoon.

21 Jan 18 (edited 25 Jan 19)
#

4.2 Viimeistely

#

Luonnollisesti haluamme lisätä käyttöliittymään uusia käyttäjiä helpottavat Tooltipit sekä tottuneita käyttäjiä helpottavia pikavalintoja.

#

Tooltippien lisääminen:

  1. Madalletaan ensin vähän rivejä: Valitse kaikki rivit pitämällä Ctrl pohjassa ja klikkaile rivinumeroita ja sitten valitse Pref Height kohtaan USE_COMPUTED_SIZE. Huom. Tätä ei kannata tehdä ennen kuin kaikki labelit ovat paikallaan, koska muuten rivit kutistuvat niin pieniksi että niihin on vaikea pudottaa.
  2. Etsi Tooltip (Miscellaneous) ja raahaa Button-komponentin päälle.
  3. Vaihda siihen sopiva teksti.
  4. Tee sama muillekin painikkeille.

Pikavalintojen lisääminen:

Esimerkiksi haluamme että Uusi jäsen-painike aktivoituu painamalla näppäimistöltä Alt-U. Toimitaan seuraavasti:

  1. Valitse Uusi jäsen -painike
  2. Etsi oikealla olevasta Properties-paneelista kohta Mnemonic Parsing ja laita siihen ruksi.
  3. Properties-paneelin yläosaan ja lisää Text-kentässä painikkeen nimen eteen alaviiva (_Uusi jäsen)
  4. Nyt kirjain, joka on alaviivan jälkeen, toimii pikavalintana kun Alt on painettuna.
  5. Lisää samalla tavalla pikavalintoja kaikkiin painikkeisiin ja menuihin.

Lisätään Tallentaminen valinnalla Ctrl-S:

  1. Valitse Tallenna -menu item
  2. Etsi Properties-paneelista Accelerator
  3. Tästä aukeaa valikko, jossa on kolme kohtaa:
  • ota ensimäiseen CONTROL_DOWN,
  • toiseen none
  • ja viimeiseen S. Hieman hassusti noilla valikoilla ei ole sulkemisnappia, vaan valinta tulee voimaan kun poistut sen alueelta.
  1. Lisää samalla tavalla pikavalinnat muihin menutoimintoihin
  • Lopeta -kohtaan Ctrl-Q
  • uuden jäsenen lisäämiseen Ctrl-N.

Accelerator-kohtaa ei löydy Macilla vai olenko vain itse hukassa?

01 Feb 16

Macilla loin MenuBarin ja lisäsin valmiina tulleen Menun (File) alle MenuItem:in, ja esimerkiksi tämän ominaisuuksista accelerator löytyy. Toisaalta esimerkiksi puhtaan Buttonin ominaisuuksissa en accelerator-kohtaa nähnyt.

Kyse ei tässä taida olla eroista käyttöjärjestelmien välillä, ja joka tapauksessa voihan yrittää editoida SceneBuilderin luomaa .fxml-tiedostoa, ja käsin lisätä sinne accelerator.

08 Feb 16

VL: Acceleraattoria ei taida olla muuta kuin MenuItem-komponenteille.

14 Feb 16

Muista tallentaa syntynyt .fxml-tiedosto. Huomioi, että jos omaan ohjelmaan on lisätty pikatoiminto Ctrl-S, niin SceneBuilderin Ctrl-S ei enää toimi, vaan tallennus pitää tehdä menun kautta.

#


VINKKI: Tämä on hyvä paikka ottaa käyttöliittymästä ruutukaappauksia Harjoitustyön 2. vaihetta varten.

4.3 Malliohjelman tiedostot

Voit avata alle mallia tehdessä syntyneet tiedostot, joita voit verrata omiisi. Tai voit niitä myös kokeilla muutella ja ajaakin, kunhan painelet noiden Tallenna, Käännä ja Aja-painikkeita järjestyksessä.

<< Avaa esimerkkikoodit reunassa olevaa [+] -symbolia klikkaamalla.

5. Yksinkertaisen koodin lisääminen

Seuraavaksi palaamme takaisin Eclipsen puolelle. Ensin pari vinkkiä, jotka voivat ennakoivasti auttaa näennäisissä vikatilanteissa:

FXML-tiedostojen päivittämisestä: Kun kehitystyössä pompimme Eclipsen ja SceneBuilderin välillä, on meidän syytä huomioida, että välillä Eclipse huomaa automaattisesti SceneBuilderia käytettässä .fxml-tiedostoon syntyneet muutokset ja välillä ei. Saat päivitettyä muutokset klikkaamalla projektin nimen päällä hiiren oikeaa nappia ja valitsemalla Refresh (pikavalintana F5). Elleivät muutokset vieläkään päivity, niin olethan varmasti muistanut tallentaa tekemäsi muutokset SceneBuilderissa?

FXML-tiedostojen tarkastelusta. Kohti edistyeempää käyttöä:* Muistathan, että voit avata .fxml-tiedoston Eclipsellä XML-muodossa ottamalla hiiren oikealla tiedoston nimen päällä ja Open With/FXML editor. Tällöin voit itse varmistua, mitä muutoksia tiedostoon syntyy, kun muokkaat sitä SceneBuilderissa. Huomaa, että voi tehdä muutoksia myös suoraan tekstieditorissa – se voi tuntua alkuun hieman vieraalta, mutta on pohjimmiltaan aika yksinkertaista.

#

Varmistetaan, että ohjelma käynnistyy: Avaa Eclipsessä KerhoMain.java ja kokeile ajaa se (F11).

Jos saat virheen puuttuvasta ListChooser-komponentista, niin et ole vielä kertonut Eclipselle, että käytössämme on omia komponentteja. Ohjeet löytyvät yllä olevalta videolta, mutta lyhyesti summattuna:

  1. Package Exploreissa klikkaa hiiren oikealla painikkeella projektin nimeä ja valitse Properties
  2. Valitse avautuvan ikkunan listalta Java Build Path ja sen välilehti Libraries
  3. Paina Add External JARs...
  4. Etsi paikka mihin olet fxgui.jar-tiedoston tallentanut. Voit käyttää myös sitä Library paikkaa SceneBuilder sen tallensi.
  5. Nyt pitäisi koodi jälleen olla ajettavissa. Kokeile. (Ja muistathan, että jos .fxml-tiedostot eivät aukene SceneBuilderiin Eclipsestä käsin, joudut avaamaan ne itse SceneBuilderista: File/Open)
#
#

Kommentit kuntoon. Hyvän tavan ja kurssin vaatimusten mukaisesti laitetaan kommentit kuntoon. Aloita kommentoimalla KerhoMain.java -tiedostossa itse luokka ja main-metodi: Kirjoita yläpuolelle

/**

ja paina return. Tällöin Eclipse täydentää kommenttien pakolliset osat ja voit itse täydentää ne loppuun.

Siirrytään varsinaiseen toiminnallisuuksien lisäämiseen:

Kutsuttavien metodien lisäys. Jotta graafiseen käyttöliittymään luomamme painikkeet tekisivät jotain Java-ohjelmassamme, meidän täytyy Eclipsessä lisätä KerhoGUIController.java-tiedostoon metodeja, joita painikkeet kutsuvat. Lisätään ensin koodi:

#

Avaa Eclipsessä KerhoGUIController.java-tiedosto ja lisää KerhoGUIController-luokan sisään metodeja tyyliin:

package fxKerho;
import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import java.net.URL;
import java.util.ResourceBundle;

import fi.jyu.mit.fxgui.*;

/**
 * Luokka kerhon käyttöliittymän tapahtumien hoitamiseksi.
 * @author vesal
 * @version 3.1.2018
 */
public class KerhoGUIController implements Initializable {

    @Override
    public void initialize(URL url, ResourceBundle bundle) {
        //
    }

    /**
     * Käsitellään uuden jäsenen lisääminen
     */
    @FXML private void handleUusiJasen() {
        Dialogs.showMessageDialog("Ei osata vielä lisätä");
    }
    
    
    /**
     * Käsitellään tallennuskäsky
     */
    @FXML private void handleTallenna() {
        tallenna();
    }
    
    
    /**
     * Käsitellään lopetuskäsky
     */
    @FXML private void handleLopeta() {
        tallenna();
        Platform.exit();
    }

    
    /**
     * Tietojen tallennus
     */
    private void tallenna() {
        Dialogs.showMessageDialog("Tallennetetaan! Mutta ei toimi vielä");
    }

}

Metodikutsujen lisäys SceneBuilderissa Seuraavaksi lisäämme SceneBuilderissa painikkeille ja valikoille ohjeet, että mitä koodissa olevaa metodia kukin niistä kutsuu:

#

Avaa taas SceneBuilder:

  1. Valitse vaikka Uusi jäsen -painike.
  2. Etsi oikeasta reunan Code-paneelista kohta On Action
  3. Kun painat sen alasvetovalikkoa, niin näet kaikki @FXML-merkityt metodit: Valitse tässä tapauksessa handleUusiJasen – tämä on siis metodi, jonka lisäsimme juuri edellä koodiin.
    • Huom! Jos alasvetovalikkoa ei jostain syystä ole, niin kirjoita On Action-kenttään risuaita ja metodin nimi, esim.: #handleUusiJasen
  4. Liitä vastaavasti tapahtumat kaikkiin muihinkin painikkeisiin ja menukohtiin.
  5. Voit tarkistaa Eclipsessä KerhoGUIView.fxml-tiedostoa silmäilemällä, että homma meni oikein. Siellä pitäisi olla rivi tyyliin (rivillä voi olla myös muita attribuutteja, jos niitä on määritelty):
<Button onAction="#handleUusiJasen" text="Uusi jäsen">

En saa Macilla näkyviin mitään alasvetovalikkoa?

02 Feb 16

Näköjään voi vain kirjoittaa input-kenttään "#handleUusiJasen".

02 Feb 16

Palaa Eclipseen ja kokeile ajaa ohjelma. Nyt ohjelman pitäisi reagoida menuihin ja painikkeisiin.

#

5.1 Tallentaminen kun ohjelma loppuu

Menuvalintaan lisätyn Lopeta-kohdan kautta ohjelma kyllä kiertää tallenna-metodin kautta kun ohjelma lopetetaan sitä kautta, mutta mikäli ohjelma suljetaan esim. painamalla Windowsissa ikkunan oikean ylänurkan ruksia, onnistutaan kiertämään tallennusvaihtoehdot. Tämän korjaaminen on tehty lievästi haastavaksi JavaFX:ssä, mutta onnistuu start-metodia muokkaamalla:

{}
#

Ongelma: Ikkunan sulkeminen ohittaa tallennuksen.

Ratkaisu: Muokataan KerhoMain.java-tiedoston sisältämää start-nimistä käynnistysmetodia. Tarvittava koodi on luotu sinulle alle jo valmiiksi - meidän ei tarvitse nyt syventyä siihen sen tarkemmin, mutta muutoksen tarkoituksena on, että kun KerhoGUIView.fxml-tiedosto luetaan ja siitä muodostetaan käyttöliittymä ja luodaan controller-luokka, niin samalla otetaan tuo controller-luokan viite talteen.

Muutos start-metodiin: Kopioi siis alla olevan koodin oman ´start´-metodisi päälle, mutta muista korjata kaikki viittaukset projektin tiedostoihin, nimiin ja muuttujiin niin että ne vastaavat omaasi - käy koodi läpi ja sinun pitäisi tunnistaa jotakuinkin 6 korjattavaa kohtaa. Nyt on hyvä tilaisuus harjoitella koodin kommentointia, jotta löydät tekemäsi muutokset jos myöhemmin huomaat tehneesi virheen.

Myös pitää lisätä import riveihin (vastaava BorderPane-rivi voi muuttua tarpeettomaksi):

import javafx.scene.layout.Pane;

koska tuolla viitataan luokkaan Pane. Kohti edistyneempää käyttöä: Voit toki vertailla omaa ja allaolevaa koodia ja tehdä tarvittavat muutokset rivi kerrallaan – siinä samalla jää ehkä paremmin muistijälkiä metodin rakenteesta :)

{}
public void start(Stage primaryStage) {
    try {
        FXMLLoader ldr = new FXMLLoader(getClass().getResource("KerhoGUIView.fxml")); // korjaa tiedostonimi
        final Pane root = (Pane)ldr.load();
        final KerhoGUIController kerhoCtrl = (KerhoGUIController)ldr.getController(); // korjaa nimet
        
        final Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("kerho.css").toExternalForm()); // korjaa tiedostonimi
        primaryStage.setScene(scene);
        primaryStage.setTitle("Kerho"); // korjaa title
        
        // Platform.setImplicitExit(false); // jos tämän laittaa, pitää itse sulkea
        
        primaryStage.setOnCloseRequest((event) -> {
            // Kutsutaan voikoSulkea-metodia
            if ( !kerhoCtrl.voikoSulkea() ) event.consume(); // korjaa nimi
        });
        
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

Dokumentissa JavaFX/kaytto on kuvattu tarkemmin mitä mikäkin rivi edellä tarkoittaa. Tässä vaiheessa voidaan toki vielä mennä ajatuksella “nuo siinä pitää olla”.

Mitä tapahtui? Metodiin start lisättiin kuuntelija sille, että kun käyttäjä haluaa sulkea ohjelman, niin ohjelma kysyy controller-luokan metodilta voikoSulkea, että saako ohjelman sulkea vaiko ei. Mikäli metodi vastaa “ei saa”, niin poistetaan sulkemistapahtuma jonosta ja estetään sulkeminen. Nyt controller-luokka voi itse päättää salliiko se ohjelman sulkeutumisen ja samalla tallentaa tiedot jos haluaa. Mutta meiltähän vielä puuttuu se voikoSulkea-metodi, jota nyt kutsumme, joten…

Lisätään voikoSulkea-metodi. Seuraavaksi meidän täytyy luoda edellä luotuun kutsuun vastaava metodi. Sen sijoitamme KerhoGUIController.java-tiedostossa esiteltyyn KerhoGUIController-luokkaan, siis sinne minne aikaisemmin loimme tapahtumakäsittelijöitä. Lopullisessa ohjelmassa metodi tekisi erilaisia tarkastuksia, mutta tässä vaiheessa pärjäämme yksinkertaisella koodilla, jonka voit kopioida alta:

    /**
     * Tarkistetaan onko tallennus tehty
     * @return true jos saa sulkaa sovelluksen, false jos ei
     */
    public boolean voikoSulkea() {
        tallenna();
        return true;
    }

Myöhemmin tehtäviä muutoksia: Tulevaisuudessa tässä metodissa tietysti tarkistetaan onko tallentamiselle tarvetta ja jos on, niin kysytään käyttäjältä mitä hän haluaa tehdä.

#

(Mac) Hmm. Mikäköhän on kun Eclipse ei enää käynnistä sovellusikkunaa. Säen kyllä, että jokin Java-ohjelma käynnistyy, mutten näe ikkunaa. en pysy edes sulkemaan sitä muutoin kuin "Pakota lopettamaan" -valikosta (cmd+alt+esc).
- VL: vaikuttaisi siltä, että jostakin syystä se ei onnistu näyttämään sitä sovelluksen pääikkunaan? Vaihtoehtoja on niin monta että ei oikein osaa sanoa muuta, kuin että "peruuttaa" siihen kohtaan kun vielä toimi ja katsoo mikä katkaisi kamelin selän.
Usein vikana voi olla se, että FXML-tiedostossa on esim. controller-luokan nimi väärin, se pitää olla täsmälleen oikein paketin nimen ja luokan nimen suhteen. Eli mallissa tuo rivi:

02 Feb 16 (edited 14 Feb 16)

Voit katsoa miltä tiedostot näyttävät tämän vaihen jälkeen.

6. Dialogi-ikkunoiden luominen (suunnitelmaa varten)

Alta löydät vinkkejä dialogien luomiseen harjoitustyön suunnitelmaa (ja myös itse harjoitustyötä varten). Kokeile esimerkiksi ajaa seuraava yksinkertaisen dialogin luova ohjelma:

#

Please to interact with this component

//
        // Kun tarvitsee kysyä Kyllä/Ei tyyppisiä kysymyksiä:

        boolean vastaus = Dialogs.showQuestionDialog("Poisto?",
                           "Tallennetaanko", "Kyllä", "Ei");
        // if ( vastaus ) tallenna(...

Terminologiakertaus: “Dialogilla” tarkoitetaan ikkunoita, jotka haluavat käyttäjältä jonkin syötteen, olipa se sitten napin painallus tai tekstiä. Dialogi-ikkunat voidaan jakaa modaalisiin (mikään ei etene, ennen kuin käyttäjä on vastannut siihen) ja ei-modaalisiin (syöte ei ole pakollinen tai käyttäjän annetaan käyttää samalla muita toimintoja, myös ohjelman työkalupaneelit ovat ei-modaalisia dialogeja). Suppeimmillaan dialogi kostuu yhdestä painikkeesta (esim. kuitataan pop-up -huomautus virheestä), laajemmillaan täytetään kokonaista lomaketta.

Pitäisi tehdä dialogi, joka on vähän saman tyyppinen kuin tuo malli HT:n lisää harrastus dialogi. Ja olin tehnyt jo yhden“ei-yksinkertaisen” dialogin tuolla new FXML Document- kautta, ja ei ongelmia, mutta nyt ei suostu lisäämään uutta. Toisiin fx projekteihin lisää, muttei suostu enää tuohon HT:hen. Ei vain tapahdu mitään kun olen nimennyt tiedoston ja painan finish. Mikäköhän siinä voisi olla?

Edit: ei enää mitään.

28 Jan 19 (edited 28 Jan 19)

Yksinkertaisten dialogien lisäämisestä: Hyvin yksinkertaisia dialogeja varten ei itse kannata koodia koodia kirjoittaa, koska niitä löytyy JavaFX:stä valmiina ja myös lisäämästämme FXGui-kirjastosta vielä helpommin. Suositeltavaa on tutustua TIM:issä olevaan JavaFX-dialogeja käsittelevään sivuun, josta löydät ohjeita ja mikä parasta: valmista koodia, jota voit muokata ja testata suoraan TIM:issä! Huomaa, että TIM tulostaa dialoginäkymiä kuvina, joita voit hyödyntää harjoitustyösuunnitelmasi liitteenä! Vaihda em. sivulla oleviin esimerkkikoodeihin oman työsi vaatimia tekstejä ja kaappaa sitten kuvia. Otsikkopalkkia ei tule TIMissä oleviin dialogeihin, mutta siitä ei tarvitse tässä vaiheessa huolestua.

Monimutkaisempien dialogien lisäämisestä: Mikäli suunnitelmassasi on useampia “ei yksinkertaisia” dialogeja, voit lisätä niitä projektiisi seuraavalla tavalla:

  1. Eclipsessä paina hiiren oikealla painikkeella packagen nimen (esimerkissä fxKerho) päällä:
  2. Valitse New/Other.../JavaFX/New FXML Document/Next
  3. Anna hyvä nimi tyyliin TulostusView
  4. Avaa tiedosto SceneBuilderissa ja luo halutun kaltainen ikkuna
  5. Aja ikkuna Ctrl-P:llä (Mac Cmd-P) ja kaappaa kuva suunnitelman dokumenttia varten.
#

7. Täydellisempi suunnitelma

Varsinaista suunnitelmaa varten tarvitaan enemmän komponentteja.

Kerho-esimerkissä lisätään harrastuksia varten StringGrid ja sitten muutama muu omatekoinen ikkuna. Varsinainen pääikkuna jaetaan keskeltä kolmeen osaan, joiden rajaa voidaan siirtää. Tähän käytetään SplitPane -containeria.

Seuraavassa kuvassa on näkymä SceneBuilder dokumentin hierarkiasta täydellisemmässä suunnitelmassa kun kaikki komponentit ovat paikallaan:

Hierarkianäkymä vaiheen 2 suunnitelmasta
Hierarkianäkymä vaiheen 2 suunnitelmasta
#

KerhoGUIView.fxml

064    <center>
065       <SplitPane dividerPositions="0.27, 0.66" BorderPane.alignment="CENTER">
066         <items>
067             <BorderPane maxWidth="150.0" minWidth="100.0" prefWidth="138.0">
068                <center>

Voit katsella edellä olevaa tiedostoa kokonaisena klikkaamalla oikeassa alakulmassa pienellä olevaa nimeä. Tai voit ladata sen SceneBuilderillä avattavaksi klikkaamalla oikealla ja valitsemalla linkin tallennuksen.

Voit katsoa miltä tiedostot näyttävät tämän vaihen jälkeen.

7.1 Alkuperäisen piirroksen muuttaminen laajemmaksi

Uutta suunnitelmaa varten tarvitsemme keskelle SplitPanelin jolla voidaan jakaa keskiosan aluetta käyttäjän tarpeiden mukaan eri kokoisiin osiin. Ohjeissa siirrellään aluksi valmiita kokonaisuuksia pois tietä, jotta saadaan BorderPanen keskiosa käyttöön. SceneBuilderissä voi myös luoda paneelin komponentin alle painamalla hiiren oikeaa ja Wrap in, jolla osin voisi kiertää tuota siirtämisen ongelmaa.

Keskiosan alueen jakaminen kolmeen osaan:

#
{"taskId": "stringgrid"}
  1. Lisää alkuperäisen BorderPanen oikeaan reunaan uusi BorderPane.
  2. Lisää sen yläosaan Label jossa lukee Jäsenen tiedot.
  3. Vaihda tästä BorderPanesta layoutista kaikki koot lasketuiksi.
  4. Raahaa se ScrollPane, jossa on GripPane jäsenen tietojen BorderPanen keskelle.
  5. Lisää alkuperäisen BorderPanen nyt vapaaseen keskiosaan SplitPane (empty).
  6. Raahaa Jäsenet BorderPane SplitPanen päälle.
  7. Vaihda Jäsenet BorderPanelle rajat joissa sen koko voi liikkua:
    • Layout/Min Width: 100
    • Layout/Perf Width: 138
    • Layout/Max Width: 160
  8. Raahaa Jäsenen tiedot BorderPane SplitPanen päälle.
  9. Lisää vielä SplitPanen päälle yksi BorderPane harrastuksia varten.
  10. Vaihda Splitpanen koot lasketuiksi.
  11. Lisää harrastusten BorderPaneen yläreunaan Label jossa lukee Jäsenen harrastukset.
  12. Lisää harrastusten BorderPanen keskellä Custom-kohdasta StringGrid.
  13. Kirjoita StringGrid komponentin Rivit ominaisuuteen muodossa (ensin kannattaa valita vieressä olevasta rattaasta Switch to multine mode, joskus tämä näkyy ja joskus ei, jos valinnat ovat näkymättömiä, on tämä alin niistä):
ala|aloitusvuosi|h/vko
kalastus|1955|20
laiskottelu|1950|20
työn pakoilu|1952|40
  1. Raahaa SplitPanen rajoja sopivasti. Jakokohdat näet numeerisena ominaisuudesta Divider Positions
  2. Kokeile Ctrl-P:llä miten skaalautuu kun kokoa muutetaan.

Pitäisikö kohdassa 8 olla ScrollPane BorderPanen sijaan? – Muokkaus: Ei kun ei sittenkään, ymmärsin jotenkin väärin...

13 Jan 18 (edited 13 Jan 18)

StringGridin palstojen leveyttä olisi kiva sovittaa tekstimäärää vastaavaksi (itsellä esim yhdelle palstalle tulee vain harjoituksen “numero-id”, eli hyvin vähän kirjaimia). SceneBuilder tarjoaakin, että palstojen kokoa voisi hiirellä raahata. Kun näin tekee, SceneBuilder menee Not responding-tilaan, eikä tästä toivu vaan SB pitää sulkea. Tällöin SB ilmoittaa
"OpenJDK Platform binary is not responding
If you close plaa plaa..."

En ole löytänyt layout-valikosta (tai muistakaan) missä palstojen leveyttä voisi säätää.



VL: Niitä voi aikanaan muuttaa ohjelmakoodista, ei tuossa suunnitteluaikana: https://tim.jyu.fi/view/kurssit/tie/ohj2/tyokalut/JavaFX/fxgui/StringGrid#sarakeiden-luominen

29 Jan 19 (edited 01 Feb 19)

Tää StringGrid kaataa eclipsen koko ajan edit: Taitaa olla sama homma ku ylempänä, eli kaatuu kun yritän palstojen leveyttä muuttaa

29 Jan 19 (edited 29 Jan 19)
#


Lisätään seuraavaksi vielä jäsenlistan päälle hakuehdot:

  1. Siirrä tilapäisesti Label Jäsenet oman BorderPanensa alareunaan.
  2. Lisää tämän BorderPanen yläreunaan VBox
  3. Vaihda VBoxin kaikki koot lasketuiksi.
  4. Lisää VBoxin sisälle järjestyksessä:
    • Label jossa lukee Hakuehto
    • Custom-kohdasta ComboBoxChooser ja kirjoita sen Rivit ominaisuuteen samat tekstit jotka ovat Jäsenen tiedot kohdassa otsikoina, eli nimi, hetu jne.
    • TextField
  5. Rahaa Jäsenet-label VBoxiin.
  6. Labelit saat alueensa keskelle vaihtamalla:
    • Layout/Max Width: 300
    • Properties/Node/Alignment: Center
  7. Vaihda ComboBoxChooserille: Layout/Max Width: 300
  8. textFieldille vaihda kaikki koot lasketuiksi jolleivat jo ole.

Scenebuilder kaatuu myös kun yrittää ComboBoxChooserin riveihin yrittää kirjoittaa

vl; vaikuttaako jos käynnistää sb;n suoraan ilman eclipseä?

edit : Joo näin sai homman toimimaan

29 Jan 19 (edited 30 Jan 19)
#

Laitetaan alareunaan 4 painiketta kahdesa ryhmässä. Tätä varten lisätään BorderPane, jonka laidoille laitetaan HBoxit joissa painikkeet ovat:

  1. Siirrä tilapäisesti painikkeiden nykyinen HBox uloimman BorderPanen oikeaan reunaan.
  2. Lisää uloimpaan BorderPaneen alareunaan uusi BorderPane. Koot lasketuiksi.
  3. Siirrä painikkeiden HBox alareunan BorderPanen vasempaan reunaan.
  4. Lisää oikeaan reunaan uusi HBox. Koot lasketuiksi. Katso muut asetukset alkuperäisestä HBoxista.
  5. Lisää oikean reunan HBoxiin painikkeet Lisää harrastus ja Poista harrastus.
  6. Lisää vastaavat menukohdat Muokkaa menun alle.
#

Esimerkiksi tämä viimeinen muutos olisi voitu tehdä myös niin, että valitaan ensin HBox ja sitten hiiren oikella Wrap In ja sieltä valitaan BorderPane. Oletuksena olisi mennyt väärään osaan (alaosaan), mutta sieltä on helppoa raahata HBox vasempaan reunaan. Sitten olisi jatkettu kuten yllä.

#

8. Muiden itsepiirrettyjen dialogien näyttäminen

Erikseen piirrettyjen dialogien näyttäminen vaatii jo ohjelmakoodia. Sitä voit katsoa malliharjoitustyön vaiheesta 3:

  • avaa linkki https://www.mit.jyu.fi/demowww/ohj2/ht17/vesal/vaihe3/
  • katso linkistä fxKerho/KerhoGUIController.java mitä koodia on jaettu .fxml-tiedostolle ja tietysti vastaavasti liitetty siellä paikalleen.
  • katso tapahtumankäsittelymetodista handleTietoja miten AboutView.fxml näytetään kun Tietoja-valintaa klikataan
  • tapahtumankäsittelymetodissa handleTulosta kutsutaan itse tehdyn luokan (lisätty ihan uusi Class Ecplipsessä) TulostusController staattista metodia tulosta
  • katso TulostusController.java tiedostosta miten tämä luokka on tehty ja mitä siitä on jaettu vastaavaan .fxml -tiedostoon.
  • lisäesimerkki vaikkapa jäsenen tietojen kysymisestä on yksinkertaisen dialogiesimerkin vaiheessa 3.
  • ole erityisen tarkkana kontrollerin nimen kanssa että paketin nimi ja luokan nimi ovat juuri oikein.

9. Komponenttien värien muuntelu

Komponenttien värien muuntelu kannattaa tehdä tyylitiedostojen avulla. Tyylitiedoston näet Eclipsessä .css-päätteisenä tiedostona - tämän harjoituksen esimerkissä se olisi kerho.css.

CSS-tyyliohjeet ovat ehkä osalle tuttuja WWW-suunnittelusta.

Löydät lisäohjeita tyylitiedostojen käyttöön JavaFX:n käyttöä käsittelevästä TIM-dokumentista.

10. Kuvien käyttäminen

Jotta käyttöliittymään lisätyt kuvat näkyisivät sekä SceneBuilderissa että ajettavassa JAR-tiedostossa, kannattaa kuvat sisältävä hakemisto siirtää sen paketin sisään, jossa käyttöliittymän FXML-tiedostot sijaitsevat (yleensä fxHarkannimi-niminen paketti).

Jos olet ennen tätä ehtinyt jo lisätä kuvia SceneBuilderissa poimien kuvat jostain muualta, niin näiden kuvien polut täytyy korjata muotoon

<Image url="@kuvat/jokukuva.png" />

jossa kuvat-hakemisto sijaitsee fxHarkannimi-paketissa. Kuvahakemisto voi sisältää alihakemistojakin.

11. Lisää ymmärrystä JavaFX:ään

  • heti kun olet valmis ymmärtämään (voi olla ettei kurssin parilla ekalla viikolla, mutta kokeile aina välillä) tee harjoitus: JavaFX käyttö.
  • tämä on myöhemmin kurssilla demotehtävä, niin kaikki mitä olet tästä tehnyt, on kotiinpäin ja auttaa ymmärtämään kurssin luentoja paremmin.

Nämäkin?

03 Jan 18 (edited 03 Jan 18)

12. fxgui:n ja SceneBuilderin yhteiskäytön ongelmia

12.1 Omia komponenttikirjastoja sisältävien projektien avaaminen SceneBuilderilla

Ongelma: Monesti erityisesti mikroluokissa omia komponenttikirjastoja käyttävien .fxml-tiedostojen uudelleenavaamisessa Eclipsen kautta tulee ongelmia, ja SceneBuilder näin avattuna kaatuu.

  • Ratkaisu: Ennen kuin aloitat työskentelyn Eclipsellä, avaa SceneBuilder ja lisää kaikki käyttämäsi omat komponenttikirjastot SceneBuilderiin mukaan. Tämän jälkeen tiedostojen avaaminen Eclipsen kautta (Open with SceneBuilder) pitäisi onnistua tällä kirjautumiskerralla. Huom: Tämän voi joutua mikroluokissa tekemään joka kerta uudestaan.

12.2 Kurssin omien komponenttien asentamisen tuomat ongelmat

Ongelma: Kurssin omien komponenttien käyttö vaikuttaisi monissa tapauksissa johtavan tilanteeseen, jossa .fxml-tiedostoa ei enää pysty aukaisemaan Eclipsestä käsin SceneBuilderiin.

  • Ratkaisu 1: Käynnistä ensin SceneBuilder ja avaa haluttu tiedosto sen sisältä: File/Open
  • Ratkaisu 2: Pidä koko ajan käynnissä yksi SceneBuilder, johon on ihan sama mitä siihen on avattuna. Silloin SceneBuilder on ladannut kirjaston ja kun toinen aukeaa, niin kirjasto on valmiina.

ComboBoxChooserin kanssa on allekirjoittaneella myös sellainen ongelma, että jos SceneBuilderin preview-tilassa klikkaa sen auki, niin koko SceneBuilder lakkaa vastaamasta saman tien. Muilla samoja ongelmia?
- VL: voisitko lähettää sen .fxml-tiedoston tutkittavaksi. Mikä käyttis?

05 Feb 16 (edited 14 Feb 16)

12.3 ListChooser ja margin

Jos ListChooserin laittaa GridPanelin sisään ja laittaa ListChooserille marginia, niin tallennuksen jälkeen SceneBuilder ei enää suostu avaamaan tiedostoa ennen kuin poistaa fxml-tiedostosta margin-tagin:

- tässä täytyy olla joku ajoitusongelma, eli SceneBuilder ei ehdi ladata kirjastossa olevia .jar tiedostoja ennenkuin itse .fxml-tiedosto on avattu (???).

21 Jan 16 (edited 06 Feb 16)

Kas. Olisi pitänyt lukea sivun loppuun. Meni aika kauan ongelman kanssa tapellessa…

01 Feb 16
<GridPanel.margin>
...
</GridPanel.margin>

Ongelma saattaa ilmaantua myös muiden kuin GridPanelin kanssa. Ja ilmeneekin monella muulla tavalla ja tuo SceneBuilderin avaaminen ensin erikseen ja sitten File/Open ja etsii muokattavan .fxml-tiedoston.

12.4 SceneBuilderilla piirretyn käyttöliittymän kontrolleri

  1. Valitse View/Show Sample Controller Skeleton.
  2. Kopioi leikepöydälle Copy.
  3. Siirrä valmis runko Eclipsen puolella uuteen java-tiedostoon.

These are the current permissions for this document; please modify if needed. You can always modify these permissions from the manage page.