JavaFX työkalujen asennus

Tässä dokumentissa ohjeistetaan JavaFX, e(FX)clipsen ja SceneBuilderin asennus.

Ennen kuin menet eteenpäin, niin onhan:

• Java JDK asennettu?!
• Eclipse asennettu?!

Asennusvideot Windows:

1. JavaFX

JavaFX on yksi Javaan tarjolla olevia kirjastoja tehdä graafisia käyttöliittymiä. Muita ovat mm. AWT, Swing ja SWT. Kurssilla käytetään nykyisin JavaFX:ää, koska se muistuttaa eniten mm. Windows-puolen WPF-kirjastoa (mutta valitettavasti huonommin työkaluin).

Tämä edellyttää että on tehty ohjeiden mukaan oma Java JDK jossa on JavaFX mukana

1.1 Eclipseen JRE jossa JavaFX mukana

Tämä tehtiin Eclipsen asennusohjeen kohdassa: Java 21 JRE tarkistaminen/lisääminen.

Varoitus: jdk-21-JavaFX kohdassa pystyi valitsemaan vain yhden dokumentaationta kerrallaan. Jatkossa pitää selaimella etsiä https://openjfx.io/javadoc/17/

HUOM! Muista aina jatkossa projektia tehdessä tarkistaa, että JRE-kohdassa on tämä JDK!

1.2 Mistä tiedän että toimii?

1. Luo uusi Eclipsen Java projekti:

   1. File/New/Java Project
   2. Project name: hellofx
   3. Location: c:\kurssit\ohj2\hellofx
   4. Valitse Use default JRE (videossa en ruksinut tätä) ja katso huolella että kohdassa lukee edellä luomasi: jdk-21-JavaFX. Jos ei lue, niin valitse Use project specific JRE: ja etsi se siihen.
   5. Module: Poista valinta Create module-info.java file
   6. Finish

2. Tee uusi Eclipse Java-luokka:

   1. Klikkaa uusi projektisi aktiiviseksi.
   2. File/New/Class
   3. Package: fxHello
   4. Name: HelloWorld
   5. Finish

3. Katso että HelloWorld.javan paketti fxHello on src hakemiston alla.
   

4. Eihän vaan ole tiedostoa module-info.java? Jos on, poista se.

5. Kopioi tiedoston HelloWorld sisällöksi:

   package fxHello;
   import javafx.application.Application;
   import javafx.scene.Scene;
   import javafx.scene.control.Button;
   import javafx.scene.layout.BorderPane;
   import javafx.stage.Stage;
   
   /**
   * Yksinkertainen esimerkki JavaFX ohjelmasta
   * @author vesal
   * @version 4.3.2016
   */
   public class HelloWorld extends Application {
      @Override
      public void start(Stage primaryStage) {
          BorderPane root = new BorderPane();
          Button button = new Button("Moi!");
          root.setCenter(button);
          Scene scene = new Scene(root);
          primaryStage.setScene(scene);
          primaryStage.show();
      }
   
   
      /** @param args  ei käytössä  */
      public static void main(String[] args) {
          launch(args);
      }
   }

6. Mitään ei saa olla punaisella tai keltaisella!

7. Run/Run

8. Pitäisi aueta pieni ikkuna, jossa lukee Moi!. Jos haluat isomman ikkunan pidennä Button-komponentin sanaa.

✅ Nyt saat ruksia asennetuksi kohdan: JavaFX.

1.3 Miten saan toimimaan

• JavaFX Mac OS X SDK 11.0.2 aiheuttaa virheen

    CoreText note: Client requested name “.SFNS-Regular”,
    it will get Times-Roman rather than the intended font.
    All system UI font access should be through proper APIs such as
    CTFontCreateUIFontForLanguage() or +[NSFont systemFontOfSize:]

  Ratkaisu on asentaa versio 11.0.12 (LTS) tai 17 (LTS), joka julkaistiin kurssin aikana.

• Näkyy vain tyhjä ikkuna

  Root-elementin on hyvä olla muuta kuin label. Macin (10.15) tapauksessa labelin teksti ei jostain syystä tullut näkyviin. Harjoitustyössä käytetään usein pohjana

    javafx.scene.layout.BorderPane

  Ongelma ei varmaankaan tule enää vastaan työkalujen asentamisen jälkeen.

• Jos ei toimi, niin katso että asetukset (eli hiiren oikealla projekin nimen hellofx päällä ja Properties) ovat seuraavasti:

2. e(fx)clipse

Eclipsen e(fx)clipse-laajennus tuo Eclipseen työkaluja JavaFX-ohjelmien kirjoittamiseen.

Huom. Nämä ohjeet Eclipsen versiolle 2023-12 tai uudemmalle.

Asenna Eclipsen e(fx)clipse (3.8.0) päivitys tukemaan Java 21

1. Avaa Eclipse (Mikroluokissa voit käynnistää myös komentoriviltä komennolla: ee2012.)
2. Valitse menusta Help/Eclipse Marketplace:
   1. Etsi e(fx)clipse
   2. Valitse e(fx)clipse 3.8.0
   3. Install
   4. Painele OK/Next ja hyväksy tarvittavat lisenssiehdot.
3. Lopuksi muista odottaa tarpeeksi kauan (seuraa alareunasta asennuksen edistymistä), että ehtii asentua. Ensin haetaan asennuspaketti ja sitten ruvetaan asentamaan ja sen edistyminen näkyy oikeassa alanurkassa ja se kestää... Tarvittaessa ruksi että luotat lähteeseen. Lopuksi pitää odottaa Eclipsen kysymysikkuna, että sen saa käynnistää uudelleen.

Varmistu siitä, että edelliset vaiheet ovat kunnossa. Muuten Eclipse voi kaatua, eikä enää käynnisty.

2.1 Mistä tiedän että toimii

1. Ota Eclipsessä File/New/Other/
2. Jos löytyy kohta JavaFX ja sen alta JavaFX Project

✅ Nyt saat ruksia asennetuksi kohdan: e(fx)clipse.

Jee, asennetaan seuraavaksi SceneBuilder…

3. SceneBuilder

SceneBuilder on työkalu tuottaa JavaFX:ässä käytettyä ulkoasun esittämismuotoa, eli .fxml-tiedostoja. Näitä tiedostoja voidaan aivan hyvin tehdä millä tahansa tekstieditorilla, ja siis myös Eclipsellä. Ja usein tekstimuotoista muokkaamista käytetäänkin, koska se on nopeampaa kuin hiirellä klikkailu. Mutta siihen asti kunnes kieleen pääsee sisälle, voi olla helpointa ainakin aloittaa uudet käyttöliittymät tuottamalla ensimmäiset .fxml-tiedosto graafisella työkalulla. Ja SceneBuilder on yksi tähän välttävästi sopiva työkalu (välttävästi tarkoittaa tässä ettei se alkuunkaan vedä vertoja Microsoftin Visual Studion tai Blendin tasoisille työkaluille).

Seuraavassa on ohjeet SceneBuilderin asentamiseen.

Jos sinulla on omassa koneessasi vanha SceneBuilder, niin tee sille uninstall ja poista kaikki siihen liittyvät tiedostot aluksi.

3.1 Asentaminen

1. Valitse Gluonin SceneBuilder-lataussivulla oikea käyttöjärjestelmä kohdasta SceneBuilder-21.0.0 (videolla taisin valita väärästä) lataa asennustiedostot ja asenna SceneBuilder. Windows saattaa antaa suojausvaroituksen.

   • Windows: Voit asentaa muuhunkin kuin oletushakemistoon, esimerkiksi:
     C:\devel\SceneBuilder

   • OS X: Pudota normaalisti Ohjelmat/Applications -kansioon.

   • Debian-pohjaisissa Linuxeissa (esim. Ubuntu) paras tapa asentaa on avata ladattu tiedosto Software Center:lla. Vaihtoehtoisesti alla olevat komennot voi syöttää terminaaliin.

     sudo dpkg -i SceneBuilder*.deb

   • Fedora/CentOS (esim. Red Hat Enterprise Linux) käyttää

     sudo rpm -i SceneBuilder*.rpm
     

     tai vaihtoehtoisesti voi extractata SceneBuilderin .rpm-tiedostosta toimimaan standalonena (ei kokeiltu)

     sudo dpkg -i scenebuilder-9.0.1.deb
     sudo apt-get -f install

   • Arch Linuxin tapauksessa voit tehdä

     git clone https://aur.archlinux.org/javafx-scenebuilder.git
     makepkg -sr
     sudo pacman -U javafx-scenebuilder*.pkg.tar.zst

2. Asennuksen jälkeen avaa Eclipse ja hyväksy kysymys Workspacen käytöstä.

3. Siirry Eclipsen valikkoriviltä asetuksiin ja siellä JavaFX-kohtaan:

   • Windows: Window/Preferences/JavaFX
   • OS X: Eclipse/Asetukset/JavaFX
   • Linux: Window/Preferences/JavaFX

4. Kirjoita SceneBuilder executable -kenttään SceneBuilder asennuksen sijainti:

   • Windows:
     • Mahdollisesti C:\Program Files\SceneBuilder\SceneBuilder.exe, tai
     • C:\Users\OMATUNNUS\AppData\Local\SceneBuilder\SceneBuilder.exe
     • tai C:\devel\SceneBuilder\SceneBuilder.exe jos teit asennuksen sinne.
     • Huomaa että nimi pitää nimenomaan olla SceneBuilder.exe, eli se asennettu versio, ei se sivuilta ladattu asennuspaketti.
   • OS X: /Applications/SceneBuilder.app
   • Linux: /opt/scenebuilder/bin/SceneBuilder

5. Jätä JavaFX 11+ SDK kenttä tyhjäksi (joillakin videoilla siihen on laitettu muuta, mutta ÄLÄ LAITA)

3.2 Mistä tiedän että toimii?

1. Luo uusi JavaFX-projekti:

   1. File/New/Other.../JavaFX/JavaFX Project
   2. Next
   3. Project name: scene
   4. Location: .../ohj2/scene (siis ... tilalle mihin pistit edellisiäkin projekteja)
   5. JRE: Use default JRE 'jdk-21-JavaFX' and workspace compiler preferences
   6. Poista ruksi: Create module-info.java file
   7. Next
   8. Next
   9. Application type: Desktop
   10. Package Name: application
   11. Language: FXML
   12. Root-Type: javafx.scene.layout.BorderPane
   13. File Name: Sample
   14. Controller Name: SampleController
   15. Finish

2. Kokeillaan kääntyykö projekti:

   1. Poista module-info.java tiedosto, jostain syystä Eclipse haluaa välttämättä sellaisen tehdä.
   2. Jos on puniasta tiedostossa SampleController.java, niin lisää sen riville 4 kommentti //
   3. (Poista JavaFX SDK projektin asetuksista (hiiren oikea projektin nimen päällä, Java Build Path ja JavaFX SDK pois))
   4. Näiden kanssa ei tarvitse myöhemmin enää painia sitten kun on asentanut kursiin FXMLPackage.jar-paketin. Silloin voi tehdä tavallisen Java Projektin.
   5. Avaa Main.java ja aja ohjelma, pitäisi avautua tyhjä ikkuna.

3. Käynnistetään SceneBuilder:

   1. Valitse Sample.fxml-tiedosto hiiren oikealla painikkeella ja valitse Open with SceneBuilder.
   2. Pitäisi avata SceneBuilder-ohjelma uuteen ikkunaan ja yläpalkissa lukea Sample.fxml.
   3. Lisätään ruudun keskelle yksi painike (Button) vasemmasta Controls-valikosta.
   4. Tallennetaan muutokset File/Save tai Ctrl+S.
   5. Pitäisi näkyä ylälaidassa viesti Changes saved to 'Sample.fxml'.
   6. Suljetaan SceneBuilder.

   Huom! e(fx)clipsen asentamisen ainoa hyöty on tuo Open with SceneBuilder valikko. JavaFX-projektin tekeminen kannattaa tehdä jatkossa FXMLPackage.jar avulla.

4. Kokeillaan uudelleen kääntyykö projekti:

   1. Jos muokkaat lähdekooditiedostoa Eclipsen ulkopuolella SceneBuilderissa, täytyy muistaa päivittää projekti ulkopuolisten muutoksien takia.
   2. Hiiren oikealla projektin scene kohdalta Refresh tai F5.
   3. Aja ohjelma. Pitäisi näkyä äsken lisätty painike.

✅ Nyt saat ruksia asennetuksi kohdan: SceneBuilder.

Jee! Jos tulit tänne Eclipsen asennusvaiheesta, niin voit mennä takaisin jatkamaan asetusten säätöä.

Nice to know: Jos ihmettelit, miksei SceneBuilderia ladattu Oraclen sivuilta, niin Oracle jakelee nykyisin vain SceneBuilderin lähdekoodia, ja Gluon on hyvä lähde valmiiksi käännetylle versiolle.