reveal.js

Java GUIアプリケーション

・GUIデスクトップアプリ作成したい人

・Javaを理解したい人

・JavaFxフレームワークを理解したい人

本講座のゴール

・GUIアプリケーションについて理解します。

・Javaの基本について理解します。

・JavaFxフレームワークについて理解します。

自己紹介

氏名：梅本　利春：株式会社One for all

出身：北海道紋別郡湧別町

経歴：WEBアプリ（主にバックエンド）、Androidアプリ、GUIアプリなど

使用言語：Go/Java/Android/C#/Ruby/Python/Javascript

使用DB：Oracle/Postgresql/MySQL/SQLite

プログラミング言語シェア

プログラミング言語求人数

ハンズオンの流れ

１．JavaFxとは

２．

３．4環境構築

４．環境構築

５．画面アプリ作成

１．JavaFxとは

JavaでGUIアプリケーションを作る時に便利なフレームワークです。

2008年から開始。

Java仮想マシン上で動作するリッチインターネットアプリケーション (RIA) のGUIライブラリ

Swingとは異なり、FXMLと呼ばれるXMLとCSSを併用してデザインを記述

※Swing：JavaのGUIを提供するAPI。AWTを拡張したもの。SwingはJavaFXにより置き換えられる方針。

※AWT　：JavaのGUIを提供するAPI。OSに依存したウィンドウになる。

■JavaFXとSwingの違い

　Swing　：[JFrame]に部品(コンポーネント)を貼り付け

　JavaFX ：[Stage]をベースに部品(コントロール)を貼り付け

ボタンやラベルなどの単純な部品は、プロパティも含めほぼ一緒

■JavaFXとSwingの違い：レイアウト

　Swing　：コンテナ + レイアウトマネージャの組み合わせでレイアウトを設定

　JavaFX ：Pane を定義

　Swing


JPanel bodyPane = new JPanel();
bodyPane.setPreferredSize(new Dimension(300, 100));
bodyPane.setLayout(new BoxLayout(bodyPane, BoxLayout.Y_AXIS));
bodyPane.setAlignmentX(JComponent.LEFT_ALIGNMENT);

　JavaFX


FlowPane flowPane = new FlowPane();
flowPane.setPrefSize(300, 100);
flowPane.setOrientation(Orientation.VERTICAL);

■JavaFXとSwingの違い：ダイアログ

　Swing　：ダイアログ用のユーティリティクラスを使用

　JavaFX ：ダイアログ用の部品は存在しない。親画面と同じ Stage を使いダイアログの作成する。

　Swing


private void dispModalDialog (JFrame parentWindow, String title, String... msg) {
    dialog = new JDialog(parentWindow, title, true);
    dialog.getContentPane().setLayout(new FlowLayout(FlowLayout.CENTER));
    dialog.setBounds(x, y, 200, 160);
    ～略～
    dialog.getContentPane().add(panel);
    dialog.setVisible(true);
}

　JavaFX


// 少し手間はかかるが、自由度が高くなり色々な事ができる
private void dispModalDialog (Window parentWindow, String title, String... msg) {
    Stage dialog = new Stage();
    dialog.setTitle(title);
    dialog.initModality(Modality.WINDOW_MODAL);
    if (parentWindow != null) dialog.initOwner(parentWindow);
    ～略～
    dialog.setScene(new Scene(pane));
    dialog.showAndWait();
}

■JavaFXとSwingの違い：イベント

　Swing　：イベントリスナーを使用してコンポーネント毎にアクションイベントのIDの設定と、イベント処理内容を別々のメソッドに記述

　JavaFX ：イベントリスナーがなく、各コントロールに直接アクションイベントの設定を行えます。

　Swing


/** メイン画面 */
public void start() throws Exception{
～略～
    /** アクションイベント設定 */
    menuItem1.setActionCommand(ACT_MENUBAR01);
    menuItem1.addActionListener(mainFrame);
    menuItem2.setActionCommand(ACT_MENUBAR02);
    menuItem2.addActionListener(mainFrame);
    btnDisp.setActionCommand(ACT_BTN01);
～略～
}
 
/** アクションイベント */
public void actionPerformed(ActionEvent ae) {
    if(ae.getActionCommand().equals(ACT_MENUBAR01)) {
        dispose();
    } else if (ae.getActionCommand().equals(ACT_MENUBAR02)) {
        dispModalDialog(this, "作成情報", "Version:1.0.0", "Date:2015-07-01");
    } else if (ae.getActionCommand().equals(ACT_BTN01)) {
        dispModalDialog(mainFrame, "Text", textField.getText());
    } else if (ae.getActionCommand().equals(ACT_BTN02)) {
        this.dialog.setVisible(false);;
    }
}

　JavaFX


// アクションイベントをキャッチするメソッドを作る必要がないので、クラス変数を多用せずに実装可能。
// ラムダ式を使う事で非常にすっきりしたコードになる。
/** メイン画面 */
public void start(Stage primaryStage) {
～略～
    /** アクションイベント設定 */
    menuItem1.setOnAction( e -> System.exit(0) );
    menuItem2.setOnAction( e -> dispModalDialog(primaryStage, "作成情報", "Version:1.0.0", "Date:2015-07-01"));
    btnDisp.setOnAction( e -> dispModalDialog(primaryStage, "Text", textField.getText()));
～略～
}

２．セットアップ

（64bit Windows 10 Pro)

Windows環境構築(64bit Windows 10 Pro)

１．JDKダウンロード

２．JDK11のインストール

３．JavaFX SDKのダウンロード

４．JavaFX SDKのインストール

５．システム環境変数設定

１．JDK11のダウンロード

　URL：http://jdk.java.net/archive/

　ファイル名：openjdk-11.0.2_windows-x64_bin.zip

　バージョン：11.0.2 (build 11.0.2+9)