Help us understand the problem. What is going on with this article?

JavaFXとJavaScriptを使った簡易電卓

More than 3 years have passed since last update.

JavaFXでFXMLと呼ばれるXMLファイルにJavaScriptを記述することができます。JavaScriptのeval()関数という式を評価する関数を使って、簡易電卓を作成しました。

画面

以下の画面です。

calc.png

使用したソフト

開発には以下のソフトを使いました。

  • Eclipse + e(fx)clipse - IDEプラグイン
  • JavaFX Scene Builder 8.2.0

手順

JavaFX Library Projectを作成します。srcフォルダにapplicationパッケージを作成し、その直下にMain.javaとapp.fxmlを作成します。

Main.javaは以下の内容にします。

Main.java
package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        BorderPane root;
        try {
            root = (BorderPane)FXMLLoader.load(getClass().getResource("app.fxml"));
            Scene scene = new Scene(root,250,320);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

app.fxmlですが、手順としては以下になります。

  • JavaFX Scene Builderでラベル、テキストフィールド、ボタンを配置。
  • テキストエディタで以下を記述します。
    • 「<?language javascript?>」を追加。
    • onActionを記述(JavaFX Scene Builder上でもできます。)
    • <fx:script>~</fx:script>を記述

細かい部分は以下にfxmlの内容を貼り付けますので、そちらで。そのままコピーして貼り付けて使えると思います。

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>
<?language javascript?>

<BorderPane xmlns="http://javafx.com/javafx/" xmlns:fx="http://javafx.com/fxml/1">
    <fx:script>
    function insert(symbol) {
        var text = textFieldFormula.text;
        text += symbol;
        textFieldFormula.text = text;
    }

    function calc() {
        var formulaText = textFieldFormula.text;

        // 空チェック
        if (formulaText === "") {
            textFieldValue.text = "未入力です。";
            return ;
        }

        // 想定外の文字が入力されているかチェック
        if (formulaText.search(/^[%()*+-/0-9]+$/)) {
            textFieldValue.text = "余計な文字があります。";
            return ;
        }

        var value = "";
        try {
            value = eval(formulaText);
        } catch(e) {
            value = "結果がありませんでした。";
        }
        textFieldValue.text = value;

    }

    function clear() {
            textFieldFormula.text = "";
            textFieldValue.text = "";
    }
    </fx:script>
   <center>
      <Pane prefHeight="334.0" prefWidth="255.0" BorderPane.alignment="CENTER">
         <children>
            <TextField fx:id="textFieldFormula" layoutX="29.0" layoutY="12.0" prefHeight="25.0" prefWidth="202.0" promptText="式を入力してください。" />
            <TextField fx:id="textFieldValue" editable="false" layoutX="29.0" layoutY="52.0" prefHeight="25.0" prefWidth="202.0" promptText="=ボタンを押すと計算結果が出ます。" />
            <Label layoutX="14.0" layoutY="16.0" text="式" />
            <Label layoutX="14.0" layoutY="56.0" text="値" />
            <Button layoutX="14.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('1');" prefHeight="30.0" prefWidth="30.0" text="1" />
            <Button layoutX="52.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('2');" prefHeight="30.0" prefWidth="30.0" text="2" />
            <Button layoutX="88.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('3');" prefHeight="30.0" prefWidth="30.0" text="3" />
            <Button layoutX="14.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('4');" prefHeight="30.0" prefWidth="30.0" text="4" />
            <Button layoutX="52.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('5');" prefHeight="30.0" prefWidth="30.0" text="5" />
            <Button layoutX="88.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('6');" prefHeight="30.0" prefWidth="30.0" text="6" />
            <Button layoutX="14.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('7');" prefHeight="30.0" prefWidth="30.0" text="7" />
            <Button layoutX="52.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('8');" prefHeight="30.0" prefWidth="30.0" text="8" />
            <Button layoutX="88.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('9');" prefHeight="30.0" prefWidth="30.0" text="9" />
            <Button layoutX="14.0" layoutY="214.0" mnemonicParsing="false" onAction="insert('0');" prefHeight="30.0" prefWidth="30.0" text="0" />
            <Button layoutX="128.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('+');" prefHeight="30.0" prefWidth="30.0" text="+" />
            <Button layoutX="128.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('-');" prefHeight="30.0" prefWidth="30.0" text="-" />
            <Button layoutX="163.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('*');" prefHeight="30.0" prefWidth="30.0" text="*" />
            <Button layoutX="163.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('/');" prefHeight="30.0" prefWidth="30.0" text="/" />
            <Button layoutX="163.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('\%');" prefHeight="30.0" prefWidth="30.0" text="\%" />
            <Button layoutX="200.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('(');" prefHeight="30.0" prefWidth="30.0" text="(" />
            <Button layoutX="200.0" layoutY="132.0" mnemonicParsing="false" onAction="insert(')');" prefHeight="30.0" prefWidth="30.0" text=")" />
            <Button layoutX="128.0" layoutY="214.0" mnemonicParsing="false" onAction="calc();" prefHeight="30.0" prefWidth="30.0" text="=" />
            <Button layoutX="163.0" layoutY="214.0" mnemonicParsing="false" onAction="clear();" prefHeight="30.0" prefWidth="30.0" text="C" />
         </children>
      </Pane>
   </center>
</BorderPane>

以上の2ファイルを用意すれば、Main.javaを右クリック->実行->Javaアプリケーションをクリックして起動できます。

修正履歴

20160806

pyominさんの指摘に対応しました。

  • calc()メソッドに入力チェックを追加。
java-beginner
ハンドルネーム「Javaを復習する初心者」です。
http://java-beginner.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした