...

Rediger KalkulatorApp.fxml-fila med FXML-editoren og/eller SceneBuilder, slik at du får en kalkulator med knapper (type Button) for hvert tall 0-9, desimalpunktum, de fire regneartene +, -, *, / og likhetstegn =. Over disse har du et tekstfelt (TextField). Det kan se omtrent slik du ser i figuren til høyre.

Image Removed

ut omtrent som vist til høyre.

Image Added

Hvis du kjører KalkulatorApp med Run As > Java Application, så vil du få opp et vindu som ser ut som en kalkulator, men som ikke gjør noe. Dvs. du kan trykke på knappene og skrive i tekstfeltet, men app-en reagerer jo ikke som en vanlig kalkulator. Vi ønsker f.eks. at hvis du trykker på knappene 1, 2, +, 3, 4, = så skal resultatet 46.0 vises i tekstfeltet. For å få det til må vi lage en egen KalkulatorController-klasse, som skal ha kode for å reagere på knappetrykkene, gjøre utregningene og hele tiden oppdatere tekstfeltet, som en ekte kalkulator ville gjort. Lag KalkulatorController-klassen ved å høyreklikke på kalkulator-pakken og velge New > Class og fylle inn KalkulatorController som navn.

Det neste trinnet er å fortelle JavaFX at denne klassen skal være controller-klassen til app-en. Dette gjøres ved å legge inn fx:controller="kalkulator.KalkulatorController" i FXML-koden for kalkulator-panelet, altså KalkulatorApp.fxml. Hvis du f.eks. bruker en AnchorPane som panel så vil koden se omtrent slik ut:

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

<?import javafx.scene.text.*?>
... flere <?import ... ?> her ...
<?import javafx.scene.control.TextField?>

<AnchorPane prefHeight="126.0" prefWidth="222.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
	fx:controller="kalkulator.KalkulatorController">

 
	... alle knappene kommer her ...
 
</AnchorPane>

 Det vesentlig her er fx:controller="kalkulator.KalkulatorController", som forteller at KalkulatorController er klassen som skal reagere på og styre knappene og tekstfeltet i KalkulatorApp.fxml. 

Hva har du lært?

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

...