Page History

...

App-logikken ligger i en egen klasse, som gjerne kalles en kontroller-klasse, og når appen kjøres vil det finnes ett objekt av denne klassen, som er koblet sammen med de relevante JavaFX-objektene og objektene som utgjør den indre tilstanden. Sammenkoblingen av alle disse objektene krever spesiell kode i både FXML-koden og i kontroller-klassen. Under ser du den relevant relevante FXML- og kontroller-kode, med en forklaring på sammenhengene i midten.

FXML-kode

Forklaring

Kontroller-kode

Code Block

language	javafx

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.text.Text?>

<HBox xmlns:fx="http://javafx.com/fxml/1" fx:controller="counter.CounterController">
	<Text fx:id="counterOutput" text="Current counter value: 0"/>
	<Button text="Count" onAction="#handleCountAction"/>
</HBox>

FXML-koden inneholder et fx:controller-attributt, som angir (det fulle) navnet til kontroller-klassen. Når FXML-koden kjøres (lastes inn og vises), så vil det automatisk lages et objekt av denne klassen. Her vil det altså være et CounterController-objekt.

CounterController-objektet gis sjansen til å utføre initialiseringskode, ved at en metode med signaturen void initialize() og annotert med @FXML (egentlig javafx.fxml.FXML) automatisk kalles (hvis den finnes). Annotasjonen står foran metoden og en import-setningen gjør at vi slipper å bruke det fulle navnet. Her opprettes det et Counter-objekt med 5 som øvre grense for telleren, og en får koblingen som vist under.

PlantUML Macro
object "counter:Counter" as counter object "kontroller:CounterController" as controller controller -> counter: counter

CounterController-objektet skal bl.a. oppdatere Text-objektet som viser counter-verdien. For å kunne gjøre det, så må CounterController-objektet ha en referanse til Text-objektet, altså et felt av typen Text (egentlig javafx.scene.text.Text). Problemet er å få satt verdien, når det er JavaFX og FXML-mekanikken som lager både CounterController-objektet og Text-objektet., slik at en får koblingene vist under.

PlantUML Macro
object "counter:Counter" as counter object "kontroller:CounterController" as controller controller -> counter: counter object "text:Text" as text controller -> text: counterOutput

Selv koblingen opprettes automatisk av JavaFX vha. to elementer i koden:

counterOutput-feltet i CounterController, med Text som type og annotert med @FXML
fx:id-attributtet på Text-elementet i FXML-koden, med navnet på feltet som verdi

Det siste som trengs er kode som håndterer Count-knappen og koblingen mellom knappen og koden. Dette håndteres med to elementer i koden:

handleCountAction-metoden annotert med @FXML
onAction-attributtet med #handleCountAction som verdi

Code Block

import javafx.fxml.FXML;
 
public class CounterController

Code Block

public class CounterController1a {

	Counter counter;

	@FXML
	Text counterOutput;

	@FXML
	void initialize() {
		counter = new Counter(5);
	}

	@FXML
	void handleCountAction() {
		counter.count();
		counterOutput.setText("Current counter value: " + counter.getCounter());
	}
}

...

Page tree

Versions Compared

Old Version 9

New Version 10

Key