イントロダクション

前回は、JavaFXで四則計算の入力部分を作成しました。しかし、答えは2019/02/01に公開する予定なのでJavaFXでのJava基本編は一時停止になります。

駄菓子菓子、時間は待ってくれないので方向を分けて画面を切り替えられるように追加修正します。

画面切り替え？

そう！画面切り替えです。以前のブログで今回のプログラム概要図を作成しました。

JavaFXのフレームワーク上にシーンを複数作成して切り替えるイメージです。

そこで使用するのが「コンテナ」です。Webアプリケーションでよく「アプリケーションコンテナ」などと呼ばれています。このコンテナにはシーンを登録していつでも呼び出せるようにしようと思います。さしずめ「シーンコンテナ」ですね(笑)

ソースを改造(リファクタリング)する

色々と追加してくるとソースが汚くなります。部屋と一緒で整理整頓する必要があるので、そのようにします。ちなみにソースの整理整頓は「リファクタリング」と呼び、綺麗に、みやすく、改修しやすく。。。と理想を追いかけるとキリがないような感じですが、やっておくと今後「あ！」と思ったときに役に立ちますし、仕事でも喜ばれます。「リーダブルコード」は、自分的に、とてもわかりやすいものでしたし、気がつくこともたくさんありました。例え話が面白かったです。

ちなみにツイッターで「リーダブルコード」を聖典としてよみ、その布教に努めております（笑）

#Java #php #javascript #python #プログラミング勉強中 #プログラミング初学者
今日の言葉
「変数のスコープを縮める」
聖典 リーダブルコードより

「グローバル変数はなるべく避ける」それは、どこでどのように使われているか追跡が難しいから。
逆に変数スコープを縮めれば見やすいコードになる。

— たくのじ (@java_takunoji) April 25, 2023

＜元のソース：ソースを株分けしました＞

※初めのクラス名は「RootFxMain」「２」がついていません。。。

package jp.zenryoku.fx;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

/**
 * JavaFXでのハローワールド〜OpenCVなどの
 * 作成したアプリをテストするための、スタンドアロンアプリ。
 * 
 * @author takunoji
 * 2019/01/23
 */
public class RootFxMain2 extends Application {
    /** 画面の縦幅 */
    private double VIEW_HEIGHT;
    /** 画面の横幅 */
    private double VIEW_WIDTH;
    /**
     * 親クラスのメソッドをオーバーライドする。
     * 画面を作成したり、シーンを作成したり、色々。。。
     * 
     * @see javafx.application.Application#start(javafx.stage.Stage)
     */
    @Override
    public void start(Stage primaryStage) throws Exception {
        // Stageの設定
        primaryStage.setHeight(VIEW_HEIGHT);
        primaryStage.setWidth(VIEW_WIDTH);
        // レイアウトたて
        VBox vBox = new VBox(5);
        // レイアウト横
        HBox hBox = new HBox(8);
        // ラベルの設定
        Label label = new Label();
        // ハローワールドを出力する
        label.setText(myFirstProgram());
        label.setFont(new Font("RobotRegular", 24));
        vBox.getChildren().add(label);

        // １個目の数値、テキストフィールド
        TextField text1 = new TextField();
        text1.setPrefColumnCount(3);
        text1.setAlignment(Pos.BASELINE_CENTER);
        hBox.getChildren().add(text1);
        // 計算式のラベル
        Label ope = new Label("+");
        hBox.getChildren().add(ope);

        // ２個目の数値、テキストフィールド
        TextField text2 = new TextField();
        text1.setPrefColumnCount(3);
        text1.setAlignment(Pos.BASELINE_CENTER);
        hBox.getChildren().add(text2);

        // 縦のレイアウトに追加する
        vBox.getChildren().add(hBox);
        // ペインの作成
        Group root = new Group();
        root.getChildren().add(vBox);

        // シーンの作成
        Scene scene = new Scene(root, VIEW_WIDTH, VIEW_HEIGHT);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * メインメソッド
     * @param args プログラム引数
     */
    public static void main(String[] args) {
        // 親クラスのメソッドを呼び出す、これは上のstart()を呼び出す。
        launch();
    }

    /**
     * JavaFX版のハローワールド実装用のメソッドになります。
     * @return 画面に出力する文字列
     */
    public String myFirstProgram() {
        // この「hyoji = ""」を「"hyoji = "Hello World"」と修正してください。
        String hyoji = "Hello World";
        long num = 12345678901L;
        float shosu = 123.09876543f;
        return hyoji;
    }
}

ちなみに「リーダブルコード」では変数、メソッド名のネーミングにも言及しています。が、今回は仕事でもないし、プログラムも一人で作れるレベルの規模なので細かいところは勘弁していただきたく。。。

そして、修正するポイントは上のソースの緑字の部分をメソッドに切り分けます。元ソースの「startメソッド」を整理しました。

＜リファクタリング１＞

/**
 * 親クラスのメソッドをオーバーライドする。
 * 画面を作成したり、シーンを作成したり、色々。。。
 * 
 * @see javafx.application.Application#start(javafx.stage.Stage)
 */
@Override
public void start(Stage primaryStage) throws Exception {
    // Stageの設定
    primaryStage.setHeight(VIEW_HEIGHT);
    primaryStage.setWidth(VIEW_WIDTH);
    primaryStage.setScene(createJavaBasicScene());
    primaryStage.show();
}

/**
 * シーンの作成部分を切り出ししました。
 * このシーンはJavaの基本を実行する時用にします。
 * 
 * @see http://zenryokuservice.com/wp/2019/01/25/java-stepupprogr…avafxで画面切り替えを作る〜/
 * @return JavaBasic用のシーン
 */
private Scene createJavaBasicScene() {
    // レイアウトたて
    VBox vBox = new VBox(5);
    // レイアウト横
    HBox hBox = new HBox(8);
    // ラベルの設定
    Label label = new Label();
    // ハローワールドを出力する
    label.setText(myFirstProgram());
    label.setFont(new Font("RobotRegular", 24));
    vBox.getChildren().add(label);

    // １個目の数値、テキストフィールド
    TextField text1 = new TextField();
    text1.setPrefColumnCount(3);
    text1.setAlignment(Pos.BASELINE_CENTER);
    hBox.getChildren().add(text1);
    // 計算式のラベル
    Label ope = new Label("+");
    hBox.getChildren().add(ope);

    // ２個目の数値、テキストフィールド
    TextField text2 = new TextField();
    text1.setPrefColumnCount(3);
    text1.setAlignment(Pos.BASELINE_CENTER);
    hBox.getChildren().add(text2);

    // 縦のレイアウトに追加する
    vBox.getChildren().add(hBox);
    // ペインの作成
    Group root = new Group();
    root.getChildren().add(vBox);

    // シーンの作成
    return new Scene(root, VIEW_WIDTH, VIEW_HEIGHT);
}

リファクタリングしたら即テストを行い、実行内容が変わっていないことを確認します。作成したコードはこちらです(GIT)

ふー。。。リファクタリング成功のようです。

ここでクイズです。

上の画像にあるテキストフィールドには「問題」があります。それはなんでしょうか？

＜ヒント＞

アプリケーションとして、他の人が使用するときにこのままの入力(テキストフィールド)では足りない機能がたくさんあります。

ちょっと長くなったので続きは次回。。。

でわでわ。。。

＜＜＜　前へ 次へ　＞＞＞

イントロダクション

前回はJavaFXでのハローワールドのプログラムを眺めてみました。くどいようですが、以下の手順を繰り返していきます。

1. とりあえずコードを書く
2. 自分で動かしてみる
3. 書いた内容を適度に理解

そして、作成したプログラムをカスタムしながらプログラムをどんどん成長(?)させていきます。

四則計算をする

四則計算＝「足し算、引き算、掛け算、割り算」をやります。修正する部分は「myFirstProgram」メソッドです。修正前のソースを下に示します。

＜修正前＞

/**
 * JavaFX版のハローワールド実装用のメソッドになります。
 * @return 画面に出力する文字列
 */
public String myFirstProgram() {
    // この「hyoji = ""」を「"hyoji = "Hello World"」と修正してください。
    String hyoji = "Hello World";
    return hyoji;
}

とりあえず、四則計算を行うためには「文字」では計算できません。

ここでJavaのルール

// 文字列の書き方
String moji = "ab12@$#";
// 数値(整数)の書き方
int suji = 123;
// 数値(小数点)
double shosu = 12.3;
// 大きい数値
long ookii = 12345678901L;

ルールというよりも「データ型」と呼ぶのが一般的です。わかりやすいだろうと思いこのように記載しました。ちなみに「int」型で「12345678901」を代入するとビルドエラーになります。

int型の値が取れる大きさを超えてしまうためです。この部分は２進数を勉強することになるので後日。。。

計算するための入力部を作る

JavaFXでの実装なので計算するための入力する場所が必要です。ここでは「テキストフィールド」を使用して計算用入力コンポーンネントを作成します。
＜出来上がりのイメージ＞

＜テキストフィールドの作り方＞

とりあえずコードを書く

public void start(Stage primaryStage) throws Exception {
    // Stageの設定
    primaryStage.setHeight(VIEW_HEIGHT);
    primaryStage.setWidth(VIEW_WIDTH);
    // ラベルの設定
    Label label = new Label();

    // ハローワールドを出力する
    label.setText(myFirstProgram());
    label.setFont(new Font("RobotRegular", 24));

    // ペインの作成
    Group root = new Group();
    root.getChildren().add(label);

    // １個目の数値、テキストフィールド
    TextField text1 = new TextField();
    text1.setPrefColumnCount(3);
    text1.setAlignment(Pos.BASELINE_CENTER);

    // 計算式のラベル
    Label ope = new Label("+");

    // ２個目の数値、テキストフィールド
    TextField text2 = new TextField();
    text1.setPrefColumnCount(3);
    text1.setAlignment(Pos.BASELINE_CENTER);

    root.getChildren().add(text1);
    root.getChildren().add(ope);
    root.getChildren().add(text2);

    // シーンの作成
    Scene scene = new Scene(root, VIEW_WIDTH, VIEW_HEIGHT);
    primaryStage.setScene(scene);
    primaryStage.show();
}

これで表示してみます。

テキストフィールドが１こあるだけです。これは、想定していた結果と違います。
なので、どこかしらに不適切な処理があるということです。

デバックのポイント

1. 予想→仮説を立てる
2. その仮説を検証・実証する

何やら難しい言葉を使いましたが、早い話が「多分こーなってるから、こーすればなおるんぢゃね？」と試してみることです。

うまくいかない原因を考える

＜ポイント＞

1. コードからコンポーネント(ラベルなど)が追加されてはいるようだ。。。
2. 表示した結果、ちょっと重なっているのかも？と予想する。

＜仮説＞

コンポーネントが重なって表示されているので１つしかないように見える。なのでコンポーネントの位置をずらして表示してみる。

ちょっと調べてみると、こんなサイトにたどり着きました。

ここをみるとコンポーネントを並べるのに「HBox」クラスを使用しているので真似してみます。細かい使い方はJavaDoc(HBox)をみます。JavaDocはリリースされている全てのクラスの説明があるので読めるようになると「Javaは使えるようになった」と言って過言ではありません。

ちなみに、HBoxは横にレイアウトするクラスのようです。なので「縦のクラス」もあるだろうと思い、探してみました。こんなサイトがあり、そこに

「VBoxクラス」というものがあるようです。じゃ使ってみようと思います。

＜レイアウトのイメージ＞

HBox

VBox

実行結果は下のような感じになりました。

• VBoxで縦に、「Hello World」と「テキストフィールドの塊」を並べた。
• HBoxで横に「テキストフィールド」と「＋」「テキストフィールド」を並べた。

＜ソース＞

public void start(Stage primaryStage) throws Exception {
    // Stageの設定
    primaryStage.setHeight(VIEW_HEIGHT);
    primaryStage.setWidth(VIEW_WIDTH);
    // レイアウトたて
    VBox vBox = new VBox(5);
    // レイアウト横
    HBox hBox = new HBox(8);
    // ラベルの設定
    Label label = new Label();
    // ハローワールドを出力する
    label.setText(myFirstProgram());
    label.setFont(new Font("RobotRegular", 24));
    vBox.getChildren().add(label);

    // １個目の数値、テキストフィールド
    TextField text1 = new TextField();
    text1.setPrefColumnCount(3);
    text1.setAlignment(Pos.BASELINE_CENTER);
    hBox.getChildren().add(text1);
    // 計算式のラベル
    Label ope = new Label("+");
    hBox.getChildren().add(ope);

    // ２個目の数値、テキストフィールド
    TextField text2 = new TextField();
    text1.setPrefColumnCount(3);
    text1.setAlignment(Pos.BASELINE_CENTER);
    hBox.getChildren().add(text2);

    // 縦のレイアウトに追加する
    vBox.getChildren().add(hBox);
    // ペインの作成
    Group root = new Group();
    root.getChildren().add(vBox);

    // シーンの作成
    Scene scene = new Scene(root, VIEW_WIDTH, VIEW_HEIGHT);
    primaryStage.setScene(scene);
    primaryStage.show();
}

あ、「＝」つけてない。。。じゃ、ここは。。。

クイズです。

上のものに「＝」と答えを表示する領域を追加して「入力１」＋「入力２」の計算結果を表示するプログラムを書いてください。

＜ヒント＞

ここまでのソースをGITにアップしておきます。

クイズの答え

同じページに書くのもアレなんでこちらにあります。

でわでわ。。。

前へ＜＜＜　＞＞＞次へ

イントロダクション

前回は、Java Fxでハローワールドをやりました。初めてのプログラムなので、写経しただけで終わりました。一応ですが、ハローワールドからOpenCVのビデオキャプチャ・プログラム(チュートリアル版)を完成させるまでをやります。

大切なのは、以下の工程です。

1. とりあえずコードを書く
2. 自分で動かしてみる
3. 書いた内容を適度に理解

この工程を繰り返してやる事で自然とプログラムがわかるようになりました。(自分の場合)

なので、このやり方をサンプルに自分なりの理解の仕方を、後々で良いので見つけて下さい。

コード内容

とりあえず、仕組みの概要を図にしました。

前回のコードでは「自作のメソッド」にプログラムを書き込みました。ほとんどの部分をフレームワークが処理している状態です。

コード解説

https://www.youtube.com/watch?v=8aHXPA0J9rY&t=12s

＜メインメソッド＞

/**
 * メインメソッド
 * @param args プログラム引数
 */
public static void main(String[] args) {
    // 親クラスのメソッドを呼び出す、これは上のstart()を呼び出す。
    launch();
}

Javaでのプログラムは必ずMainメソッドから始まります。サーバーアプリはMainメソッドがないとか言いますが、サーバーを起動するときにMainメソッドが動いていますので安心してください。(C言語でサーバーを動かしてもMainメソッドはあります。)

ここでは、単純に親クラスの「launch」メソッドを起動します、このメソッドは「start」メソッドを起動するので次に「startメソッド」をオーバーライドしてやり親クラスから自分が実装したメソッドを起動できるようにしてやります。

ちょっとわかりずらいので、コード紹介と解説をします。

オーバーライドについて

下のようなクラスがあったとします。このクラスは親クラスです。

public Parent {

 public void launch() {
    int i = 10 + 8;
    System.out.println(i);
    hello();
    System.out.println("プログラム終了");
 }

 public void hello() {
   System.out.println("Hello World");
 }
}

次に子クラスです。下のように、子クラスにメインメソッドがあり、親クラス「hello()」メソッドをおオーバーライドしています。
個状態でプログラムを起動すると、次のような表示結果が出ます。

public ChildCls extends Parent {
  @Override
  public void hello() {
    System.out.println("Good morning!");
  }
  public static void main(String[] args) {
    launch();
  }
}

＜表示結果＞

Good morning!
プログラム終了

プログラムの実行順序は、次の通りです。※「クラス名#メソッド名」の形で書きます。

1. ChildCls#main()が起動し、Parent#launch()を呼び出します。
2. Parent#hello()を呼び出しますが、ChildClsでオーバーライドしているので、ChildCls#hello()を呼び出します。

このような感じで、Application#start()をオーバーライドしているので、JavaFXでのGUI作成は画面の作成を中心にコーディングができます。

サンプルコード(GIT)

＜startメソッド＞

/**
 * 親クラスのメソッドをオーバーライドする。
 * 画面を作成したり、シーンを作成したり、色々。。。
 * 
 * @see javafx.application.Application#start(javafx.stage.Stage)
 */
@Override
public void start(Stage primaryStage) throws Exception {
    // Stageの設定
    primaryStage.setHeight(VIEW_HEIGHT);
    primaryStage.setWidth(VIEW_WIDTH);
    // ラベルの設定
    Label label = new Label();

    // ハローワールドを出力する
    label.setText(myFirstProgram());
    label.setFont(new Font("RobotRegular", 24));

    // ペインの作成
    Group root = new Group();
    root.getChildren().add(label);

    // シーンの作成
    Scene scene = new Scene(root, VIEW_WIDTH, VIEW_HEIGHT);
    primaryStage.setScene(scene);
    primaryStage.show();
}

このメソッドの引数「primaryStage」に以下の処理を行います。

1. 画面サイズを指定(縦、横)
2. 文字列などを表示するため「ラベル」を作成
3. ラベルに文字列を設定(テキスト)
4. ペインに乗せたラベルをシーンに登録
5. ステージにシーンを登録
6. ステージの表示

「myFirstProgram」メソッドは自分んで文字列を返却するようにコーディングしてください。サンプルのコードはGITにアップしてあります。

全体として

このような形で「JavaFX」を使用します。とりあえずは「JavaFXはフレームワークなんだな」と理解しておいてください。

 

はじめの一歩として

JavaFX版のハローワールドプログラムですので、作成したコードを色々といじってみるのも一興です。参考にJavaFXではない、普通のJava版のハローワールドが下のリンク先にあります。

1. Java Basic Level 1 〜Hello Java〜

＜＜＜　前へ 次へ　＞＞＞