...

For at KalkulatorController-koden skal ha en synlig effekt, så må den kunne endre på elementene som vises i app-vinduet. F.eks. så ønsker jo vi å endre på teksten som vises i tekstfeltet. For å få det til, så må en ha én eller flere variabler som peker på elementer i KalkulatorApp.fxml-fila og få satt disse automagisk når FXML-fila lastes inn. Trikset er igjen å legge inn kode både i KalkulatorController og KalkulatorApp.fxml. I dette tilfellet deklarerer man en variabel i KalkulatorController og legger in et fx:id-attributt i KalkulatorApp.fxml. Typen og navn til variabelen må stemme med typen FXML-element og fx:id-en. 

public class KalkulatorController {
 
	... annen kode ...
 
	@FXML
	TextField valueTextvalueTextField; // denne vil bli satt til å peke på tekstfeltet med fx:id="valueTextvalueTextField"
	@FXML
	void handleDigitButton(ActionEvent event) {
		Button button = (Button) event.getSource();
		valueTextvalueTextField.setText(button.getText());
	}
}

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

<AnchorPane ...	fx:controller="kalkulator.KalkulatorController">
	<children>
		<TextField fx:id="valueTextvalueTextField" ... />
 
		<Button text="1" onAction="#handleDigitButton" ... />
		<Button text="2" onAction="#handleDigitButton" ... />
 
	... de andre knappene kommer her ...
	</children>
</AnchorPane>

Prøv å gjøre endringene vist over, kjør koden og se om teksten i tekstfeltet endres når du trykker på tall-knappene. handleDigitButton-metoden.

Steg 3: Kalkulator-logikk

Så langt har vi fokusert på å få teknikken for å koble FXML-fil og Controller-klasse sammen til å virke. Nå kan vi begynne å se på kalkulator-logikken. Det vanskeligste er i grunnen å finne ut hvilke variabler som trengs for å holde rede på kalkulator-tilstanden, og så endre variablene på riktig måte når knappene trykkes på. Det kan også være vanskelig å organisere koden så det ikke bare blir rot når en legger til logikk. Vi skal starte med logikken for å bygge opp et tall ved å legge nye sifre til bakerst, altså det som gjør at en får 2469 hvis en trykker knappene 2, 4, 6 og 9 i rekkefølge.

Den mest direkte måten å gjøre det på er å endre teksten i tekstfeltet ved å kalle valueTextField.setText(valueTextField.getText() +  button.getText()) i handleDigitButton-metoden. En henter altså ut teksten slik den er i tekstfeltet, legger teksten på knappen bak denne og putter resultatet tilbake. Koden er vist under til venstre. Vi skal imidlertid gjøre det litt mer indirekte, fordi det i lengden gjør koden ryddigere. Trikset er å ha en egen variabel (valueText) for tallet som bygges opp, og ha to metoder, én for å legge til nye tall (appendDigit) og én for å oppdatere teksten i tekstfeltet (updateTextField). Koden er vist under til høyre.

public class KalkulatorController {
 
	... annen kode ...
 
	@FXML
	TextField valueTextField;
 
	@FXML
	void handleDigitButton(ActionEvent event) {
		Button button = (Button) event.getSource();
		String currentText = valueTextField.getText();
		String newText = currentText + button.getText();
		valueTextField.setText(newText);
	}
}

public class KalkulatorController {
 
	String valueText = "";
 
	void appendDigit(String digit) {
		valueText = valueText + digit;
	}

	@FXML
	TextField valueTextField;
 
	void updateTextField() {
		valueTextField.setText(valueText);
	}
 
 @FXML
	void handleDigitButton(ActionEvent event) {
		Button button = (Button) event.getSource();
		appendDigit(button.getText());
		updateValueTextField();
	}
}

Vi ser at det er litt mer kode, men i praksis skjer det samme: Teksten i valueTextField blir lengre og lengre. Fordelen med den høyre varianten er at vi deler koden opp i mer håndterlige deler (metoder) med logiske navn. Etterhvert som vi legger til mer logikk, så utvider vi kanskje med flere variabler og metoder og/eller vi utvider metodene vi allerede har laget. et viktig prinsipp å skille mellom metoder som endrer på variabler og metoder som oppdaterer det som vises i app-vinduet. Siden vi bare har ett tekstfelt, så trenger vi faktisk bare én metode for å oppdatere app-vinduet, nemlig updateTextField.

Hva har du lært?

• å koble FXML-koden til Java-koden med fx:id- og onAction-attributter

...