...
Om een JavaFX applicatie te starten en een scherm aan te maken moet er een start() methode aangemaakt worden en daarin moet er een stage aangemaakt worden. Deze stage krijgt een title en een scene. Om aan te geven hoe de scene eruit ziet wordt er een bestand aangeroepen genaamd welcome-screen.fxml. In dit bestand wordt bijgehouden hoe groot de scene is, wat er in zit (denk aan knoppen of labels met tekst) en bijvoorbeeld padding van de objecten die zich in de scene bevinden. Dit bestand wordt aangeroepen door de FXMLLoader. Dit is dan ook te zien in Code snippet 6.1.
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)
Als
...
er
...
nu
...
op
...
de
...
knop
...
gedrukt
...
wordt
...
komt
...
de
...
volgende
...
tekst
...
tevoorschijn:
(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?
...