Enkel app-programmering med JavaFX og FXML

JavaFX og det tilhørende filformatet FXML og verktøyet SceneBuilder, gjør det relativt enkelt å lage fasaden til app-er. Med Eclipse-tillegget e(fx)clipse så kan du faktisk lage fasaden uten programmering, og så trinnvis gjøre app-en funksjonell ved å koble elementene i fasaden, så som knapper og tekstfelt, til selve (koden for) app-logikken. Her viser vi hvordan dette gjøres for en enkel app basert på Counter-logikken i Tilstand og oppførsel.

Counter-klassen - kode og oppførsel

Counter-klassen implementerer en enkel teller, som får fra 1 til en angitt øvre grense. Koden og en enkel forklaring er gitt under:

public class Counter {
	int end;
	int counter = 0;


	Counter(int end) {
		this.end = end;
	}

	int getCounter() {
		return counter;
	}

	void count() {
		if (counter < end) {
			counter = counter + 1;
		}
	}
 }

Counter-appen

Tanken er nå å lage en app som lar oss opprette og initialisere, lese og endre tilstanden til et Counter-objekt. Vi skal starte med en enkel variant, som lar oss lese og endre tilstanden til et forhåndsopprettet Counter-objekt, og så utvider vi den til å støtte å lage nye Counter-objekter.

Counter-app - enkel variant

Enkel app for å telle opp telleren til et Counter-objekt, som er laget på forhånd med en grense på 3. Trykk Count-knappen for å telle opp.

Med JavaFX kan en velge å bruke kode for å bygge opp GUI-et eller beskrive GUI-et med FXML-filer og så lese inn og vise frem innholdet. Vi velger å bruke FXML, siden det er mye enklere.

En lager en FXML-fil med Eclipse sin New FXML Document veiviser: høyreklikk på pakka (kode-mappa) hvor Counter-klassen ligger, og velg New > Other... > New FXML Document. Fyll så ut navnet, f.eks. Counter1 og velg HBox (for horisontal box) som såkalt "Root Element" (panel-type). Avslutt og du vil få opp en FXML-editor med kode for et tomt HBox-panel. For å vise frem innholdet, altså "kjøre" FXML-koden, så kan du høyre-klikke på fila og velge Run As > FXML Application (dette forutsetter et spesielt Eclipse-tillegg). Du vil da få opp et tomt vindu, siden du ikke har redigert FXML-koden og lagt inn noe synlig innhold.

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.

Redigering av FXML-koden

FXML-filer kan redigeres som tekst i Eclipse. Prøv f.eks. å erstatte <!-- ... --> med <Button text="Count"/> (du trenger også et import-element for javafx.scene.control.Button). Ved kjøring vil du da få opp et vindu med en Count-knapp i (inni et HBox-panel). Hvis en redigerer FXML som tekst på denne måten, kan det være nyttig å åpne JavaFX Preview-panelet med Window > Show View > Other... > JavaFX Preview. Dette panelet viser hele tiden frem hva innholdet i den aktive FXML-editoren betyr, altså slik det vil se ut hvis FXML-koden kjøres. Under vises koden for HBox-panelet med en Count-knapp i og JavaFX Preview-panel.

For en så liten app er det greit å redigere FXML-koden som tekst, men generelt er det greiere å bruke applikasjonen SceneBuilder. Høyreklikk på fila (installer først ved å følge lenka og instruksjonene) og velg Open with SceneBuilder, og du vil kunne redigere FXML-koden grafisk. SceneBuilder bruker altså FXML som lagringsformat, men lar deg redigere innholdet vha. direkte manipulasjon, tekstfelt, menyer og dialoger.

SceneBuilder-applikasjonen lar deg redigere FXML-koden grafisk. Området i midten viser GUI-et. Øverst til venstre er det en palett med elementer en kan dra og slippe i GUI-området i midten. Nederst til venstre vises den hierarkiske strukturen av paneler og elementer, her med en HBox med en Button inni. Til høyre er det et tredelt detalj-panel. Properties-seksjonen viser generelle grafiske egenskaper og egenskaper som er mer spesifikke for det valgte elementet. Her er knappen valgt, og vi ser at knappeteksten styres av Text-egenskapen, som har verdien Count. Layout-seksjonen har med plassering av elementet å gjøre og Code-seksjonen med koblingen til GUI-logikken.

I den enkle varianten app-en trenger vi en tekst til venstre for knappen. Det kan en få til ved å legge til et Text-objekt slik at det havner før Butten-objektet inni HBox-objektet. Finn først frem til Text-objektet i paletten ved å velge Shapes-seksjonen og bla nedover. Så kan du enten dra og slippe Text-objektet til venstre for knappen i GUI-området i midten, eller rett over Button-objektet i hierarkiet nede til venstre. Rediger så teksten så den blir Current counter value: 0, enten ved å dobbelt-klikke på teksten i GUI-området og redigere, eller ved å redigere Text-egenskapen i Properties-seksjonen oppe til høyre. Resultatet er vist under til venstre. Lagre, gå tilbake til Eclipse og klikk på eller i FXML-editoren for å sikre at Eclipse viser den nylig lagrede versjonen. Koden skal være omtrent som vist under til høyre.

<?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å 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 relevante FXML- og kontroller-kode, med en forklaring på sammenhengene i midten.

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

import javafx.fxml.FXML;
 
public class CounterController {

	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.