Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

package nl.eniac.klukkluk;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class KlukklukApplication extends Application {
@Override
public void start(Stage stage) throws IOException {
FXMLLoader fxmlLoader = new FXMLLoader(KlukklukApplication.class.getResource("welcome-screen.fxml"));
Scene scene = new Scene(fxmlLoader.load(), 320, 240);
stage.setTitle("Klukkluk v0.01");
stage.setScene(scene);
stage.show();
}

public static void main(String[] args) {
launch();
}
}
(Code snippet 6.1)

Het resultaat van deze code is te zien in de volgende afbeelding. Zoals te zien is wordt de title weergegeven als applicatie naam. :

(Afbeelding 6.1)


Om deze scene iets meer opvulling te geven moet er in het fxml bestand aangegeven worden wat er allemaal in de scene opgenomen moet worden. In dit bestand kunnen echter geen echte functionaliteiten gegeven worden aan de objecten.
Er wordt hieronder wel een knop aangemaakt maar in het bestand wordt nergens gezegd wat de knop nou precies moet doen. Om dit op te lossen wordt er aangegeven wat de controller is van deze scene. Dat wordt gedaan door dit het volgende stukje code fx:controller="nl.eniac.klukkluk.KlukklukController".
Bij de button wordt er met de onAction tag aangegeven welke methode het gedrag van deze button bevat. Dit wordt uitgevoerd op het moment dat er op de button geklikt wordt.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.control.Button?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
fx:controller="nl.eniac.klukkluk.KlukklukController">
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
</padding>

<Label fx:id="welcomeText"/>
<Button text="Test" onAction="#onHelloButtonClick"/>
</VBox>
(Code snippet 6.2)

Nu we de button hebben toegevoegd ziet de applicatie er zo uit:

(Afbeelding 6.2)

Om gedrag te geven aan de button en de label moet er een Controller klasse aangemaakt worden die dit gedrag bevat. Door gebruik te maken van onAction in het FXML bestand weet JavaFX welke methode hij moet gebruiken.
De label welcomeText bevat nu nog geen tekst en is dus eigenlijk onzichtbaar in afbeelding 6.2. In de methode onHelloButtonClick() wordt er wel tekst toegewezen aan dit label.
Als er dus op de knop wordt gedrukt nu wordt deze tekst ook echt toegekend aan welcomeText.
package nl.eniac.klukkluk;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class KlukklukController {
@FXML
private Label welcomeText;

@FXML
protected void onHelloButtonClick() {
welcomeText.setText("Kukkluk is up and running.");
}
}
(Code snippet 6.3)
module nl.eniac.klukkluk.klukkluk {
requires javafx.controls;
requires javafx.fxml;
requires org.controlsfx.controls;
requires com.dlsc.formsfx;
requires org.kordamp.ikonli.javafx;
requires org.kordamp.bootstrapfx.core;
opens nl.eniac.klukkluk to javafx.fxml;
exports nl.eniac.klukkluk;
}
(Code snippet 6.4)
Als er nu op de knop gedrukt wordt komt de volgende tekst tevoorschijn:
Image Added
(Afbeelding 6.3)

Nadat al deze stappen gevolgd zijn zou er een werkende JavaFX applicatie moeten zijn die een button bevat met gedrag.

Hoe maak je een Swing applicatie?

...