JavaFX + ND4J 〜グラフ作成の準備〜

イントロダクション

前回は、ベクトル(配列)の生成を行いました。そして、ベクトルの基本的な扱いに関してはだいたい理解できたので次のステップ「グラフの作成」に入りたいと思います。

グラフをたくさん作るには?

Javaでのプログラムソースの量産はとても簡単にできます。正直に言うとちゃんと考えないと余計なプログラムソースで埋もれてしまいます。

どーするか?

ちょいとした仕組みを作ります。初めは土台から作成しようかと思ったのですが、やってみないとわからないこと(どんなグラフをどのように作るか?など)が多いため、ちょっとずつ作成して行こうと言う結論に至りました。

  1. JavaFXの画面をロードする(Main処理)部分の部品を作る(MarthKitクラス)
  2. グラフを表示する部分(コンテンツ部分)を作る部品を作る(LineChartViewクラス)
  3. グラフを表示する部分を切り替えるセレクタを作る ※次回以降に実装します

大雑把にこんな感じで作成します。

ポイント

「2」の部分でグラフを表示する部分を量産したいので、ここを少し工夫します。

<工夫の内容>

グラフをたくさん作るためには上記の「1」「3」の部分を固定(1つの処理に)して「2」の部分を動的にする必要があります。

具体的には以下のような部品を用意します。

<用意する部品>

  • 表示するグラフ(クラス)を登録するためのコンテナ(Mapクラス)
  • グラフを描画するためのクラスをロードするためのプロパティファイル
  • 描画するグラフ(クラス) を1つのクラスのように扱うためのインターフェース

上記の3つを用意します。

具体的にどうやるか?

ここまで、読んでくれた方は「?マーク」が浮いていると思います。もし浮いていなかったら、あなたは間違いなく自分よりも頭がいいです。

余談はさテオ気にして、文字が並びすぎて「早い話がなんののよ?」ってのがわからなくなってきましたのでまとめると

クラス図を描けばわかりやすいじゃん?

と言うわけで、UMLでクラス図を描きました。

ちなみに「StartUML」と言うアプリ(無料)を使用しました。自分はこのサイトに気がつかず、英語版でやってますが。。。

こんな感じでUML(クラス図)を作成しました。クラス図

こんな風に、クラスの連携を組み上げるのが図にするとわかりやすいと言うわけです。

実際に作成した、プロジェクトはこちらに(Git)アップしてあります。

でわでわ。。。

Stepup Programing〜 Java Fxで四則計算3〜

イントロダクション

前回は「四則計算」と称して足し算を行いました

話が途中で「不思議な設定」が適用されているのですが、まぁ、お付き合いください(笑) そんなわけでその続きがあります。「その他の掛け算などに関しては以下の情報が入っております。※事の発端は下を参照

「村人A」

『中ボスを倒すために、こちらでも色々と用意がありますすけぇ、下のアイテムを持って行っておくんなせぇ』

アイテム(API部品)

ChoiceBox(Gitにソースあり)

武器(文法)

Javaでの計算するときの書き方です。

int num1 = 1;
int num2 = 2;
int anser = 0;
// 足し算
answer = num1 + num2;
// 引き算
answer = num1 - num2;
// 掛け算
answer = num1 * num2;
// 割り算
answer = num1 / num2;

基本的に「=」は右の処理結果を左の変数にセットするという意味があります。簡単なコードを示すと下のようなものがあります。

int answer = 1 + 1; // 2がセットされる

右側の「1 + 1」という処理の結果(2)が「int型の変数answer」にセットされます。
もう少し複雑なものだと下のようになります。

/** メインメソッド */
public static void main(String[] args) {
   int answer = tashizan(1, 1);
   System.out.println("答えは「" + answer + "」");
}
/** 足し算を行う */
public static int tashizan(int left, int right) {
   return left + right;
}

上記の処理内容を説明すると、以下のようになります。

  1. メインメソッドが動きます。
  2. 「tashizan()」メソッドの第一引数に「1」、第二引数「1」を渡します。
    3.tashizan()メソッドの処理、第一引数「left」と第二引数「right」を加算して返却します。
  3. tashizan()メソッドの返り値(=返却された値(2))が「int型の変数answer」にセットされます。
  4. 答えは「2」

    と表示されます。
    細かい部分に関してはこちらに記載しています。

http://zenryokuservice.com/wp/2018/07/24/java-basic-level2-%E3%80%9Carithmetic-calculate%E3%80%9C/

「村人A」『ほんじゃ〜よろしくおねげぇします、気をつけておくんなせぇ』

そんなわけで。。。

後の戦いは見守ることにしましょう。しかし、ステップアッププログラミングは続きます。「不思議な設定」で言うなら

「基本装備」を揃えてもらいます。

武器その1(IF文)

条件分岐での処理です。イベント処理の実装部分にて使用しています。
「文字列.equals(文字列)」は「文字列と文字列が等しいときはTRUE,そうでなければFALSE」を返すメソッドです。
下の場合だと「input1」という文字列と「node.getId()」で取得した文字列が等しい時。。。という意味になります。

if ("input1".equals(node.getId())) {
    TextField t1 = (TextField) node;
    String input = t1.getText();
    numbers.add(new Integer(input));
} else if("input2".equals(node.getId())) {
    TextField t2 = (TextField) node;
    String input = t2.getText();
    numbers.add(new Integer(input));
} else if("answer".equals(node.getId())) {
    Label anser = (Label) node;
    Integer in1 = numbers.get(0);
    Integer in2 = numbers.get(1);
    int kotae = in1 + in2;
    anser.setText(String.valueOf(kotae));
}

上記の処理をまとめると、「node」のIdが"???"だったら〜と言う処理です。

if ("test".equals("tess")) {
   System.out.println("例文1");
} else if ("tess".equals("test") {
  System.out.println("IF文のサンプル");
} else {
  System.out.println("タイガーマスク");
}

「もし、"test"と"tess"がイコールの場合、『例文1』」

と言うのが頭の部分の処理をを日本語にしてみたものです。

雑魚キャラAとBが現れた!

「雑魚キャラA」『へへへ。。。IF文が使えないと俺は倒せねぇぞ?』

「雑魚キャラB」『アヘアヘ。。。もし、変数numが1だったら"ピンクレンジャー"と表示するプログラムを作ってミロォ、アヘアヘアヘ。。。』

それじゃ、退治の方はよろしくお願いします。

でわでわ。。。

<<< 前回 次回 >>>

クイズの答え「Java StepUpPrograming〜JavaFX で四則計算〜」

クイズの問題

前回、JavaFXを使用して下のような画面を作りました。

目的は「四則計算を行うための画面を作るです。

しかし、このままだと計算できません。何故ならば「=」が付いていないからです。。。

ここで問題です、「=」から先の部分を作成して計算を行える入力部分を作成してください。という事です。「問題」自体がクイズみたくなってしまいましたね(笑)

余談ですが、開発の現場にいてもよくある事です、相手(クライアント) の要求は「〜を作って欲しい」とか、とにかくプログラム的にはざっくり過ぎて細かい部分でクライアントの求めているものが見えてきません。(半分ほど言い訳です。。。)

JavaFX で四則計算の答え

もともとものコードをコピって作るような感じです。「=」の後にラベルで答えを表示する部分を作成しました。が現状は何も見えない状態にしておきます。

作成したコードはこちら(Git)

https://www.youtube.com/watch?v=EAVUvrEya_Y&feature=youtu.be

[rakuten ids="sh-midoriya:12267844"]

関連ページ一覧

  1. Java 初めてでも大丈夫〜ステップアッププログラミングのススメ〜
  2. ステップアッププログラミング〜Java FxでHelloWorld解説〜
  3. Java StepUpPrograming〜JavaFX で四則計算〜
  4. Java StepUpPrograming〜JavaFXで画面切り替えを作る1〜
  5. Java StepUpPrograming〜JavaFXで画面切り替え2ボタン作成〜
  6. Java StepUpPrograming〜JavaFXで画面切り替え3アクション〜
  7. Java StepUpPrograming〜JavaFXで画面切り替え4Pane切り替え〜
  8. Java StepUpPrograming〜JavaFXで画面切り替え5WebEngine〜

Java Basic

  1. Java Basic Level 1 Hello Java
  2. Java Basic Level2 Arithmetic Calculate
  3. Java Basic Level3 About String class
  4. Java Basic Level 4Boolean
  5. Java Basic Level 5If Statement
  6. Java Basic Summary from Level1 to 5
  7. Java Basic Level 6 Traning of If statement
  8. Java Basic Level8 How to use for statement
  9. Java Basic Level 8.5 Array
  10. Java Basic Level 9Training of for statement
  11. Java Basic Level 10 While statement 
  12. Java Basic Swing〜オブジェクト指向〜
  13. Java Basic Swing Level 2〜オブジェクト指向2
  14. サンプル実装〜コンソールゲーム〜
  15. Java Basic インターフェース・抽象クラスの作り方
  16. Java Basic クラスとは〜Step2_1
  17. Java Basic JUnit 〜テストスイートの作り方〜

 

 
 





Java StepUpPrograming〜JavaFXで画面切り替え3アクション〜

イントロダクション

前回は、画面切り替え用のボタンを作成しました。

実行結果はこんな感じ。。。

現状(2019/01/27)としては、ボタンを押下しても何も動きません。なのでこの動き「イベント処理」を実装するというのが今回の趣旨です。

イベントの実装方法

イベント処理の実装方法としては、細かい話をすると結構な量になるので「やり方」から入ろうと思います。今後、その細かいところも記載いたします。

[参考サイト]

Oracleのチュートリアル

イベント(アクション)実装

ズバリこんな風に作りました。説明が足りませんで。。。

  1. 画面上に、ボタンを作成します。これが「viewChangeBtn」変数にセットされています。
  2. このボタンに「キーが推されたときの処理をセットする」メソッド「setOnKeyPressed」をしようしてその処理を書きます。
  3. 「XXXされたとき」のような処理のことを「イベント処理」といい、EventHandlerインターフェースを実装します。
  4. EventHandlerインターフェースは、処理の内容が実装されていないのでそれを実装する必要があります。この時に実装しなくてはいけないのがインターフェースに定義されているメソッドです。
  5. インタフェースは処理内容が定義されていませんが。implements(実装)するときに定義されているメソッドをオーバーライドしてやる必要があります。「@Override」がついているメソッドがオーバーライドしているメソッドになります。
  6. そして、作成したボタンをPrimaryステージクラスに追加してやれば表示できます。
Button viewChangeBtn = new Button("画面切り替え");
viewChangeBtn.setOnKeyPressed(new EventHandler() {
    @Override
    public void handle(KeyEvent event) {
                // テスト用のコード
        System.out.println(event.getText());
    }
});

そして実行

ボタンを押下すると「ボタンの文字」がコンソールに出力されるはずなのですが、なにもでない。。。

ちょっと画面をいじってみると「ボタンを選択してからPCのキーボードを叩くと」コンソールに文字が出力されました。

KeyEventではなく、ActionEventの方を使うのが正しい実装でした。

<ソースの修正>

Button viewChangeBtn = new Button("画面切り替え");
viewChangeBtn.setOnAction(event -> {
    System.out.println(event.getEventType());
});

KeyEventと ActionEventで少し実装方法が違います。そして動かしてみる!

こんな感じでコンソールに出力されました。これでボタンに対するイベント(アクション)処理は実装できました。次回は、ボタン押下時に画面を切り替える方向に実装部分を修正します。

Java StepUpPrograming〜JavaFXで画面切り替え2ボタン作成〜

イントロダクション

前回は、リファクタリングを行いました。これで追加の実装を行う準備ができた状態です。

ちなみに、このページは以下の順序で進んできています。

  1. Java 初めてでも大丈夫〜ステップアッププログラミングのススメ〜
  2. ステップアッププログラミング〜Java FxでHelloWorld解説〜
  3. Java StepUpPrograming〜JavaFX で四則計算〜
  4. Java StepUpPrograming〜JavaFXで画面切り替えを作る1〜

※「四則計算」の部分で基本的なプログラムに関する記載を止めています。2019/01/26現在(クイズの答えを2019/02/01に出すのでそれまでストップします)

そして、前回は「リファクタリング」を行いました。大したことはしていませんが、小さくてもプロジェクト的に自分のアプリケーションを作るならちょくちょくと「リファクタリング」をやったほうが、スキルアップできます。

画面にボタンを追加する

前回、整理をしたので機能追加などが、しやすくなっています。

Gitで差分を比較して見ることができます。やり方はこちら

ボタンの追加方法

単純にボタンを追加すればOKです。

// ボタンの作成
Button viewChangeBtn = new Button("画面切り替え");
Button closeBtn = new Button("閉じる");

そして、ペイン(レイアウト)に追加

hBox.getChildren().add(ctlBtn);

これを、自分なりにまとめて追加すると以下のように表示されました。

現状ではボタンを押下しても何も起きません。イベント処理を実装する必要があります。

「イベント処理」というのは

  • 「ボタンが押下された」
  • 「マウスが乗っかった」

などのイベントがあった時に動く処理を実装するための「イベントリスナー」のことを言っています。

具体的には次回、記載しますが「クリック」「ダブルクリック」「マウスオーバー」「キーダウン」などこれらのイベントを受け取る仕組み(フレームワーク)が実装済みです(JavaFXで実装)ので、各イベントに対する処理はイベントリスナーを実装してやれば良いのです。

「実装する」とは

単純に処理(コード)を書くことです。が上での意味は「インターフェースを実装する」という意味です。

細かいことは次回にします。でわでわ。。。

  1. Java Basic インターフェース・抽象クラスの作り方
  2. Java Basic クラスとは〜Step2_1