Page History

...

Veiviser for FXML-dokumenter

FXML-editor med nytt FXML-dokument

FXML-kode for tomt HBox-panel. Den første linja er obligatorisk for alle XML-dokumenter (utelates i eksemplene under).

<?import ...>-elementet lar oss bruke HBox som navn på det som egentlig er Java-klassen javafx.scene.layout.HBox.

<HBox ...>-elementet angir at app-vinduet skal inneholdet et objekt av typen javafx.scene.layout.HBox, som gir en horisontal layout på panel-innholdet. Her er elementet imidlertid tomt, så ingenting vises ved kjøring.

Merk attributtet xmlns:fx="...", som angir at elementene skal tolkes som FXML-kode, altså referanser til JavaFX-klasser. Uten dette attributtet på det ytterste elementet vil ingenting virke.

...

Code Block

language	javafx

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>

<HBox xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
   <children>
      <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Current counter value: 0" />
   	  <Button text="Count" />
   </children>
</HBox>

Så Så langt har vi et GUI uten oppførsel, for hvis du kjører og trykker på knappen så skjer det ingenting.

...

. Det vi mangler er app-logikken som styrer koblingen mellom den indre tilstanden til applikasjonen og GUI-fasaden. I vårt tilfelle utgjøres den indre tilstanden av Counter-objektet og GUI-fasaden består av Text- og Button-objektene, eller generelt av hierarkiet av JavaFX-objekter. Koblingslogikken må sikre at Text-objektet viser counter-verdien (til Counter-objektet) og at trykking på Count-knappen trigger count-metoden. Koblingen er altså toveis: den indre tilstanden vises i GUI-fasaden og GUI-fasaden styrer den indre tilstanden.

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

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());
	}
}

Counter-app - komplett variant

En mer komplett app for å lage nye Counter-objekter og telle.

I starten har en ikke noe Counter-objekt. En ny lages ved å fylle inn den øvre grensa i tekstfeltet og trykke New Counter-knappen. Tilstanden til dette Counter-objektet vises på linja under og en kan telle opp telleren ved å trykke Count-knappen.

Page tree

Versions Compared

Old Version 8

New Version 9

Key

Counter-app - komplett variant