Introduksjon

Steg 1: Opprette app-pakke, app-klasse og FXML-fil

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 omtrent slik du ser i figuren til høyre.

Hva har du lært?

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