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ä
# onnistuminen

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: Virtuaaliset 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 19 Jan 20)

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ä:

# kuva1

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ä:

# asennukset
# projekti

2. Projektin luominen Eclipsessä ja SceneBuilderin avaaminen

Käy pudottamassa FXMLPackage.jar Eclipsen dropins kansioon ja käynnistä Eclipse uudelleen ennen kuin jatkat! Äläkä vain käytä kurssilla e(fx)clipse mukana tullutta JavaFX Project -pohjaa!

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.

```

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ä).

Seuraavassa jos teet omaa harkkaasi, niin käytä kerho-sanan tilalla hakemiston nimessä ht. Pelkkää harjoittelua varten kerho.

  1. Avaa Eclipse

  2. Avaa valikosta: File / New / Java Project ja paina 'Next'

  3. Täytä lomake seuraavasti

    • Project name: kerho
    • Use default location: ota ruksi pois
    • Location: C:\kurssit\ohj2\kerho
      (Mac esim: /Users/Anonymous/kurssit/ohj2/kerho)
    • tarkista että JRE on varmasti se jdk-22-JavaFX vaikka tarvittaessa ruksimalla se Use a project specific JRE: ja sieltä oikea JRE.
    • Ruksi pois Create Module-info.java file, paina Finish
  4. Avaa valikosta: File / New / Other... / JavaFXML Package / Uusi JavaFXML Package ja paina Next

    Älä käytä JavaFX Project syksyn kurssilla, vaikka tulisi vastaan ohjeissa.

  5. Täytä lomake seuraavasti

    • Project src folder: /kerho/src
    • Packagen nimi: fxKerho
    • Ohjelman nimi: Kerho, ja paina Finish Nyt tilanne pitäisi olla seuraavan näköinen:
      Projekti tehty
  6. 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 ja valitse Classpath
    • valitse Add Library
    • sieltä tuplaklikkaa User Library ja ruksi ohj2
    • Apply and close

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

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

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

HUOM! Kohdassa 7 välilehdellä Libraries valitse Classpath (ei Modulepath, joka ainakin itsellä oli ensimmäinen vaihtoehto), johon lisäät ohj2-kirjaston. Muuten ei löydä .jar tiedostoja!

21 May 20

Tulee java.lang.ArrayIndexOutOfBoundsException: Index 0 out of bounds for length 0 at sample.Runner.main(Runner.java:33) valitus kun koittaa ajaa.

Korjailin javaFX ohjeet - veikkaan, että johtuu vääristä versioista. Kokeileppas tehdä oma JDK uudestaan! OH

14 Sep 22 (edited 15 Sep 22)

Tässä kohtaa on epäloogisuutta halutusta hakemistorakenteesta: Toisalla ohjeistetaan luomaan hakemistorakenne c: Ja tässä C:. Tuolla logiikalla projektin filet menee eri kansioon kuin mihin aiemmat Git:iin siirretyt filet. () Eli pitäisikö kaikki, myös HT1-vaiheen, filet olla samassa kansiossa Java-projektin filejen kanssa?

VL: pistin huomautuksen että jos harjoittelee, niin kerho, jos oma harkka, niin ht.

18 Jan 24 (edited 18 Jan 24)

6. kohta: Missä tässä vaiheessa löytyy projektin nimi, jonka päällä pitää painaa hiiren oikeaa ?

VL: Sen pitäisi tulla sinne vasempaan reunaan johonkin kohti.

09 Sep 24 (edited 09 Sep 24)

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.

Huom! Jos nimi on KerhoView.fxml, niin sinulla on vanhempi FXMLPackage.jar käytössä. Lataa uusi sen päälle, käynnistä Eclipse uudelleen, tuhoa fxKerho ja jatka kohdasta 4 uudelleen.

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

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

26 Jan 19 (edited 13 Jan 23)

Sain tämän tehtyä mutta löysin src-valikosta ainoastaan KerhoView.fxml (jonka sain avattua SceneBuilderissä ja siellä on se 1 borderpane), en lainkaan KerhoGUIView.fxml. Onko ongelma?

VL: Näköjään jaossa ollut vanha FXMLPackage.jar, lisäsin huomautuksen.

13 Jan 23 (edited 14 Jan 23)
# pluginprojekti

Katso miltä tiedostojen 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.

# FXGuiAsennus

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 (videossa on Import JAR/FXML File..., nykyisin siinä on JAR/FXML Manager)

# v02
# omalib

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:\kurssit\ohj2\jar tai c:\devel\jar hakemistoon (Mac/LInux ~/devel/jar). 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 (paitsi jos lisäsit aikaisemmin ohj2-kirjaston, johon ne sisältyvät valmiiksi):

  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:

Miten saan luotua samaan projektiin useamman eri ikkunan?

VL: sun pitää luoda sinne aina vastaava pari noita tiedostoja XXXView.fxml ja XXXController.java. Mulla on esim tyyliin: JasenDialogView.fxml ja JasenDialogController.java. Ks: https://gitlab.jyu.fi/tie/ohj2/kerhoja/kerho20/kerho/-/tree/tyo3/src/fxKerho Tuolle ei ole noita muita COntrollereita vielä tarvittu, joten siellä on vain ne .fxml-tiedosto. Sitten kun ruvetaan tarvitsemaan controllereita, niin esim: https://gitlab.jyu.fi/tie/ohj2/kerhoja/kerho20/kerho/-/tree/tyo7/src/fxKerho. Eli HT2-HT6 vaiheessa riittää ihan että esim sillä SceneBuilderillä on luotu uusi .fxml-tiedosto kutakin dialogia (=ikkunaa) varten.

26 Jan 23 (edited 26 Jan 23)
# sceneBuilderAnimaatio
# v02-2

Jos jollakulla muullakin SceneBuilder kaatuu lähes jatkuvasti, yrittäkää käynnistää SceneBuilder ensin järjestelmänvalvojan oikeuksilla ja vasta sitten avata muokattava fxml-tiedosto IDE:n kautta.

12 Jan 21
  • 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ä.

Ubuntussa ei pysty ollenkaan raahaamaan asioita librarystä pois. Joskus silloin tällöin saattaa onnistua. Mutta näinkin käydessä objectit menevät ihan minne sattuu eikä sinne, minne halusi.

07 Jan 20

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)

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)
# perusjako

4.2 Viimeistely

# v02-4

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

# tooltip

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.

# tooltipit


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.

Tämä lienee tehty eri järjestyksessä kuin ohjeessa tehtiin. itsellä ainakin tuli hbox ylimmäksi

05 Feb 21 (edited 05 Feb 21)

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.

# v02-5

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)
# v03
# v03-2

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:

# v03-3

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:

# v04

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.

# koodi

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:

# v04-2

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ä.

# tallennus

(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:

# showQuestionDialog

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.

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.

Jostain syystä ei auennut uusi FXML Documentti. Tulee virheilmoitus: An error has occurred. See error log for more details. org/eclipse/jface/databinding/swt/WidgetProperties Mikä avuksi?

VL: Parasta katsoa ehkä pääteohjauksissa.

Syy ei selvinnyt, mutta todettiin, että ongelman voi kiertää tekemällä JavaFXML paketin ja poistamalla ylimääräiset tiedostot(css ja main)

23 Jan 24 (edited 26 Jan 24)
# dialogit

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
# c2

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:

# 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.

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)
# jako3


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 13 Jan 23)
# hakuehdot

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.
# uudetpainikkeet

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ä.

# muidennayttaminen

8. Muiden itsepiirrettyjen dialogien näyttäminen

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

Ei oo kuulemma lupaa nähä ton https://www.mit.jyu.fi/demowww/ohj2/ht17/vesal/vaihe3/ linkin sisältöä.

VL: Siis tuolta se eka frame jää aukeamatta, mutta mulle ainakin kaikki tässä olevat linkit aukeavat. Ehkä nykyisin on fiksumpaa silti mennä tuolta https://tim.jyu.fi/view/kurssit/tie/ohj2/harjoitustyo/vaiheet/malli jossa on selitetty enemmän vaiheiden eroja. Muutin noita linkkejä suoraan tuonne.

08 Feb 23 (edited 08 Feb 23)

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)

Tuon linkin takana oli sen verran hyödyllisiä juttuja, että niiden olisi ehkä ollut hyödyllistä olla (jossain muodossa) osa demoja. Löysin vasta itse koko sivun, ja nyt tuntuu, että aikaa (harkkatyön takia) niiden tekemiseen ei ole, vaikka mallia voikin olla hyödyllistä tuolta katsoa.

EDIT: Tuossa lukee, että on ollut osana demoja… meni kyllä ainakin itseltä ihan ohi. Ehkä nuo tehtävät olisivat voineet olla pilkotusti osa useampaa demoviikkoa.

VL: ne oli. Niitä sai tehdä usealla kerralla ja lopulta ne oli pakollisena…

Tein minä JavaFX tehtäviäkin demoilla, mutta ehkä jäi huomaamatta tuo Autolaskuri ja oman komponentin teko demoviikoilla.

09 Apr 20 (edited 15 Apr 20)

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.

Kokemus ongelmasta ja sen ratkaisusta (kiitokset Harri L)

-Ongelma: Aikaisemmin toiminut Scenebuilder (SB) ei enaa avannut ohjelman GUIview.fxml-tiedostoa (Eclipsesta tai itsenaisesti kaynnistettyna). SB kaatui kaynnistysta yrittaessa aina LoadExceptioniin pitkällä virhelistalla.

-Ratkaisu: tee talta sivulta kohta 3.1 Omien komponenttien asentaminen, jossa fxgui.jar pitaa ladata SB:ssa libararyyn. Jos SB ei kaynnisty Eclipsessa, niin kaynnista itsenaisesti.

09 Dec 21 (edited 09 Dec 21)

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.

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)
<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.