Hiukan isompi esimerkki

Käyttöliittymien toteutuksessa käytetään yleensä valmiiksi toteutettuja kirjastokomponentteja. Yksinkertaisimpia tällaisia ovat nappula (engl. Button) ja tekstikenttä (engl. TextField). Listan tavallisista komponenteista löydät JavaFx-tutoriaalista.

Jokaisella elementillä on sijainti ruudulla. Sijainnin voi määritellä useammalla erilaisella elementillä. Aiempi esimerkki käytti FlowPanea. Muita ladontaruutuja:

  • BorderPane: asemoi lapsielementtinsä ylös, alas, vasemalle, oikealle ja keskelle

  • HBox: asemoi lapsielementtinsä vaakasuoraan riviin

  • VBox: asemoi lapsielementtinsä pystysuoraksi sarakkeeksi

  • GridPane: asemoi lapsielementtinsä joustavaan ruudukkoon rivejä ja sarakkeita

  • TilePane: asemoi lapsielementtinsä vakiokokoisten ruutujen ruudukkoon

Ladontoja voi myös asettaa sisäkkäin. Ladonnat sijaitsevat pakkauksessa javafx.scene.layout. Otetaan esimerkki:

package example.range;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;


// Toteutetaan ohjelma, joka laskee sähköauton odotettavissa olevan käyttömatkan
// sen hetkisellä kulutuksella

public class App extends Application {

    @Override
    public void start(Stage stage) {
        // Ohjelman pääikkunan otsikoksi asetetaan "Range Calculator"
        stage.setTitle("Range Calculator");

        // Käytetään käyttöliittymäkomponenttien asemointiin
        // ruutuasettelua
        GridPane grid = new GridPane();

        // Luodaan skene, johon ruudukko sijoitetaan
        Scene scene = new Scene(grid, 350, 275);
        stage.setScene(scene);

        // Text luo yksinkertaisen tekstialueen
        Text scenetitle = new Text("Calculate expected range");
        // jonka voi sijoittaa ruudukolle
        // 0,0 tarkoittaa vasenta yläkulmaa
        // lisäksi määritellään, kuinka monta saraketta ja riviä elementti kattaa
        grid.add(scenetitle, 0, 0, 2, 1);

        // Vastaavasti voidaan lisätä paikoilleen tarvittavat syötekentät
        // Label eroaa Textistä siinä, ettei Labelin sisältöä voi muuttaa
        Label battery = new Label("Battery kWh:");
        grid.add(battery, 0, 1);

        Label consumption = new Label("Consumption kWh/100km");
        grid.add(consumption, 0, 2);

        Label result = new Label("Current Range");
        grid.add(result, 0, 3);

        // Lisätään ruudukkoon vielä tekstikentät
        // akuston kapasiteetille
        TextField inputBatt = new TextField();
        grid.add(inputBatt, 1, 1);

        // sen hetkiselle keskikulutukselle
        TextField inputCon = new TextField();
        grid.add(inputCon, 1, 2);

        // ja tulokselle
        TextField resultField = new TextField();
        grid.add(resultField, 1, 3);

        // Ohjelman kolme nappulaa ladotaan vaakasuoraan
        // HBoxin avulla
        // Rakentajan parametri määrittää elementtien välisen tilan suuruuden
        HBox hbBtn = new HBox(10);
        grid.add(hbBtn, 1, 5);

        Button btn1 = new Button("Calculate");
        hbBtn.getChildren().add(btn1);

        Button btn2 = new Button("Clear");
        hbBtn.getChildren().add(btn2);

        Button exitBtn = new Button("Exit");
        hbBtn.getChildren().add(exitBtn);

        // Nappula laskee käyttömatkan syötekenttien arvojen mukaisesti
        // Huom! ei sisällä virhetarkasteluja!
        btn1.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent e) {
                var b = Double.parseDouble(inputBatt.getText());
                var c = Double.parseDouble(inputCon.getText());
                var r = (b/c)*100;
                resultField.setText(String.format("%.2f", r));

            }
        });

        // Nappulan painaminen tyhjentää kentät
        btn2.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent e) {
                inputBatt.clear();
                inputCon.clear();
                resultField.clear();
            }
        });

        // Nappulan painaminen sulkee ohjelman
        // ensin suljetaan stage
        exitBtn.setOnAction((event) -> {stage.close();});
        // ja stagen sulkeminen sulkee koko ohjelman
        stage.setOnCloseRequest((event) -> { Platform.exit();});

        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }

}

Ohjelma näyttää tältä:

JavaFX program for a range calculator

Useiden näkymien käyttö

Ohjelmassa on usein tilanteita, joissa tarvitaan enemmän kuin esimerkeissä käytetty yksi ikkuna. Skenejä voi luoda useita ja niiden välillä vaihtaa tapahtumaan sidotusti.

public class App extends Application {

    @Override
    public void start(Stage stage) {

        Button printButton = new Button();
        printButton.setText("Print");

        TextField output = new TextField();
        output.setPrefWidth(250);

        Button switchButton = new Button();
        switchButton.setText("Switch");

        // Nappulat asemoidaan flowpanella
        var group = new FlowPane();
        group.getChildren().add(printButton);
        group.getChildren().add(switchButton);
        group.getChildren().add(output);

        printButton.setOnAction((event) -> {
            output.setText("And all the men and women merely players;");
        });

        printButton.setOnKeyPressed( new EventHandler<KeyEvent>() {
        @Override
        public void handle(KeyEvent k) {
            if (k.getCode().equals(KeyCode.ENTER)) {
                output.clear();
            }
        }
        });

        // Ensimmäinen skene ohjelman ikkunalle
        Scene scene = new Scene(group, 300, 150);
        stage.setScene( scene );
        stage.setTitle("All the world's a stage");

        // Gridpane ja uusi skene toiselle näkymälle
        GridPane grid = new GridPane();
        Scene scene2 = new Scene(grid, 350, 275);
        // Toinen skene sisältää nappulat poistumiseen
        // ja paluuseen ensimmäiseen näkymään
        Button exitButton = new Button("Exit");
        Button switchBack = new Button("Back");

        // jotka asemoidaan gridpanella
        grid.add(exitButton, 0,1);
        grid.add(switchBack, 0,0);

        // Ykkösnäkymässä nappula vaihtaa kakkosnäkymään
        switchButton.setOnAction((event) -> {
            stage.setScene(scene2);
        });

        // ja kakkosnäkymässä nappula palaa takaisin ykkösnäkymään
        switchBack.setOnAction((event) -> {
            stage.setScene(scene);
        });

        exitButton.setOnAction((event) -> {stage.close();});
        stage.setOnCloseRequest((event) -> {Platform.exit();});

        stage.show();
    }

    public static void main(String[] args) {
        launch( args );
    }

}

Tapahtumakäsittelijän sisällä voidaan luoda myös kokonaan uusi ikkuna ohjelmaan.

Toimintalogiikka erilleen!

On tärkeää pitää ohjelman toimintalogiikka erillään käyttöliittymän toteutuksesta. start()-funktion alussa voi luoda ohjelman tarvitsemia olioita, jotka toteuttavat ohjelman toimintalogiikan. Vältä ns. jumalluokkia. Jokaisella luokalla pitäisi olla selkeä vastuualue ohjelmassa.

Ohjelmointidemo (kesto 9:09)

Käyttöliittymiä toteutettaessa

Palautusta lähetetään...