JavaFX で電卓をつくる その5
環境構築
OpenJDK と OpenJFX で JavaFX の環境を構築しました。また、IDE は IntelliJ です。
Scene Builder
GUI で JavaFX の外側だけを作成することができます。fxml に自動で変換してくれるので、直感的な操作ができます。
fxml ファイル
シンタックスハイライトは fxml がないので xml を使っています。
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.geometry.Insets?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.ColumnConstraints?> <?import javafx.scene.layout.GridPane?> <?import javafx.scene.layout.RowConstraints?> <?import javafx.scene.layout.VBox?> <?import javafx.scene.text.Font?> <VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"> <children> <Label alignment="CENTER_RIGHT" prefHeight="50.0" prefWidth="480.0" text="0"> <VBox.margin> <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> </VBox.margin> <font> <Font size="28.0" /> </font> </Label> <GridPane minHeight="50.0" minWidth="50.0" prefHeight="320.0" prefWidth="100.0"> <columnConstraints> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> </columnConstraints> <rowConstraints> <RowConstraints minHeight="20.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> </rowConstraints> <children> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="7"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="8" GridPane.columnIndex="1"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="9" GridPane.columnIndex="2"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="+" GridPane.columnIndex="3"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="4" GridPane.columnSpan="2" GridPane.rowIndex="1"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="5" GridPane.columnIndex="1" GridPane.rowIndex="1"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="6" GridPane.columnIndex="2" GridPane.rowIndex="1"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="-" GridPane.columnIndex="3" GridPane.rowIndex="1"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="1" GridPane.rowIndex="2"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="0" GridPane.columnIndex="1" GridPane.rowIndex="2"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="3" GridPane.columnIndex="2" GridPane.rowIndex="2"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="×" GridPane.columnIndex="3" GridPane.rowIndex="2"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="±" GridPane.rowIndex="3"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="0" GridPane.columnIndex="1" GridPane.rowIndex="3"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="." GridPane.columnIndex="2" GridPane.rowIndex="3"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="/" GridPane.columnIndex="3" GridPane.rowIndex="3"> <font> <Font size="22.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="=" GridPane.columnIndex="3" GridPane.rowIndex="4"> <font> <Font size="20.0" /> </font> </Button> <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="C" GridPane.columnIndex="2" GridPane.rowIndex="4"> <font> <Font size="22.0" /> </font> </Button> </children> <VBox.margin> <Insets left="5.0" right="5.0" /> </VBox.margin> </GridPane> </children> </VBox>
JavaFX
GridPane のセルの結合はサポートしていないみたいなので、下部に空白が残ってしまいました。まあ、セルは基本的に結合するべきではないと思います。
感想
今回は外側だけを作りました。機能面が問題なんですが、Python みたいな eval メソッドがあると楽なんですよね。まあ、電卓のアルゴリズムは有名なものがあるので、それを利用しようと思います。一から真面目にアルゴリズムを考えるとかなり大変ですよね。