Introduksjon
I denne leksjonen vil du lære hvordan du kan koble FXML-koden til Java-koden og gjøre app-en levende (interaktiv)!Steg 1: Opprette app-pakke, app-klasse, FXML-fil og controller-klasse.
Lag først en ny app-pakke og app-klasse som forklart i Hello world-leksjonen. Bruk kalkulator som navn på pakken og KalkulatorApp som navn på app-klassen.
Åpne KalkulatorApp-klassen og rediger slik at du får følgende kode:
package kalkulator; import java.io.IOException; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.stage.Stage; public class KalkulatorApp extends Application { public void start(Stage primaryStage) throws IOException { FXMLLoader fxmlLoader = new FXMLLoader(KalkulatorApp.class.getResource("KalkulatorApp.fxml")); Pane root = fxmlLoader.load(); primaryStage.setScene(new Scene(root)); primaryStage.show(); } public static void main(String[] args) { launch(KalkulatorApp.class, args); } }
Dette er nesten akkurat samme kode som i FxmlLogoApp fra FXML-logo-leksjonen, vi har bare byttet ut FxmlLogoApp med KalkulatorApp på fire steder: etter public class, KalkulatorApp.class og KalkulatorApp.fxml i start-metoden og KalkulatorApp.class i main-metoden). Når du senere skal lage app-klasser, så kan du gjøre det samme: Ta denne koden og putt inn navnet på den nye klassen på de riktige stedene.
Lag en ny FXML-fil ved navn KalkulatorApp.fxml som forklart i FXML-logo-leksjonen.
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 ut omtrent som vist til høyre. |
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.
Steg 2: Koble FXML-fil og Controller sammen
Hvis du har lagt inn fx:controller="kalkulator.KalkulatorController" i KalkulatorApp.fxml, så vil det automagisk bli laget en KalkulatorController når FXML-en lastes inn (av FXMLLoader-en i KalkulatorApp sin start-metode). Det som da gjenstår er å koble KalkulatorController-en til knappene og tekstfeltet, og tenke ut hva som er riktig kalkulatoren-logikk. Kalkulator-logikken er ikke så enkel som en kan tro, så vi tar sammenkoblingen først.
Sammenkobling går to veier:
- Fra Kalkulator.fxml til KalkulatorController: knappene sier fra når de trykkes på
- Fra KalkulatorController til Kalkulator.fxml: teksten i tekstfeltet endres på
I begge tilfeller må en legge til kode i både Kalkulator.fxml og KalkulatorController, men på ulike måter.
Hva har du lært?
- å koble FXML-koden til Java-koden med fx:id- og onAction-attributter