JavaによるGUI作成

• AWT (Abstract Window Toolkit)
• Swing
• JavaFX

ウィンドウの起動

下記のDrawShapesImp.javaをコピーし，動作を確認してみましょう．

DrawShapesImp.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

package jp.ac.utsunomiya_u.is;   import javafx.application.Application; import javafx.stage.Stage;   public class DrawShapesImp extends Application {     /**      * startメソッドのオーバーライド      *      * @param primaryStage Stageのインスタンス      * @throws Exception      */     @Override     public void start(Stage primaryStage) throws Exception {         // primaryStageを表示         primaryStage.show();     }       public static void main(String[] args) {         // JavaFXの起動のために必須         launch(args);     } }

6行目

Applicationクラスを継承しています．

15行目

抽象メソッドであるstart()メソッドをオーバーライドしています．

17行目

ステージを表示しています．

22行目

mainメソッド内で，JavaFXアプリケーションを起動しています．

出力

1. 指定されたApplicationクラスを継承したクラスのインスタンスを生成
2. init()メソッドの呼び出し
3. start(java.fx.stage.Stage)メソッドの呼び出し
4. 次のいずれかの処理が行われるまで待機
   • Platform.exit()メソッドの呼び出し
   • ウィンドウが閉じられ，かつPlatformのimplicitExit属性がtrue
5. stop()メソッドの呼び出し

図形の描画

DrawShapesImp.javaに下記を追加し，動作を確認してみましょう．

DrawShapesImp.javaへの追加

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

package jp.ac.utsunomiya_u.is;   import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.shape.Line; import javafx.stage.Stage;   public class DrawShapesImp extends Application {       /**      * startメソッドのオーバーライド      *      * @param primaryStage Stageのインスタンス      * @throws Exception      */     @Override     public void start(Stage primaryStage) throws Exception {         // primaryStageタイトル設定         primaryStage.setTitle("DrawShapesImp");         // Groupのインスタンスrootを生成         Group root = new Group();         // Sceneのインスタンスsceneを生成         Scene scene = new Scene(root, 400, 400);           // Lineのインスタンスline1を生成         Line line1 = new Line();         // 始点設定         line1.setStartX(0);         line1.setStartY(0);         // 終点設定         line1.setEndX(100);         line1.setEndY(100);         // rootの子のリストにline1を追加         root.getChildren().add(line1);           // primaryStageにsceneを登録         primaryStage.setScene(scene);         // primaryStageを表示         primaryStage.show();     }       public static void main(String[] args) {         // JavaFXの起動のために必須         launch(args);     } }

22行目

ルートノードをGroupのインスタンスで生成しています．

24行目

400*400pxのシーンを生成しています．

27-33行目

線のインスタンスを生成，始点と終点を設定しています．

35行目

ルートノードに線を追加しています．

38行目

ステージにシーンを貼り付けています．

出力

DrawShapesImp.javaに下記を追加し，動作を確認してみましょう．

DrawShapesImp.javaへの追加

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

package jp.ac.utsunomiya_u.is;   import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.shape.Line; import javafx.scene.shape.Rectangle; import javafx.stage.Stage;   public class DrawShapesImp extends Application {       private Rectangle rectangle = null;       /**      * startメソッドのオーバーライド      *      * @param primaryStage Stageのインスタンス      * @throws Exception      */     @Override     public void start(Stage primaryStage) throws Exception {         // primaryStageタイトル設定         primaryStage.setTitle("DrawShapesImp");         // Groupのインスタンスrootを生成         Group root = new Group();         // Sceneのインスタンスsceneを生成         Scene scene = new Scene(root, 400, 400);           // Lineのインスタンスline1を生成         Line line1 = new Line();         // 始点設定         line1.setStartX(0);         line1.setStartY(0);         // 終点設定         line1.setEndX(100);         line1.setEndY(100);         // rootの子のリストにline1を追加         root.getChildren().add(line1);           // Lineのインスタンスline2を生成（始点，終点設定）         Line line2 = new Line(10, 10, 110, 10);         // line2の色を青に設定         line2.setStroke(Color.BLUE);         // line2の幅を5pxに設定         line2.setStrokeWidth(5);         // Circleのインスタンスcircleを生成（中心点，半径）         Circle circle = new Circle(100, 100, 20);         // circleを赤で塗りつぶす         circle.setFill(Color.RED);         // rootの子のリストにline2とcircleを追加         root.getChildren().addAll(line2, circle);           // Rectangleのインスタンスrectangleを生成（左上座標と幅，高さ指定）         rectangle = new Rectangle(200, 200, 50, 30);         // rootの子のリストにrectangleを追加         root.getChildren().add(rectangle);           // primaryStageにsceneを登録         primaryStage.setScene(scene);         // primaryStageを表示         primaryStage.show();     }       public static void main(String[] args) {         // JavaFXの起動のために必須         launch(args);     } }

43行目

Lineクラスのインスタンス生成時に始点，終点を指定する事もできます．

45-47行目

線の色や太さを設定することも出来ます．

49-51行目

Circleクラスのインスタンスを中心座標と半径を指定して生成し，色を赤く塗りつぶしています．

53行目

複数のノードをまとめてルートノードに登録することもできます．

56-58行目

Rectangleクラスのインスタンスを左上座標と幅，高さを指定して生成し，登録しています．

出力

• java.lang.Object
  • javafx.application.Application：JavaFXアプリケーションのエントリ・ポイント
  • javafx.scene.Node
    • javafx.scene.Camera：シーンをレンダリングするために使用されるカメラのベースクラス
    • javafx.scene.canvas.Canvas：GraphicsContextに用意されている一連のグラフィック・コマンドを使用して描画できるイメージ
    • javafx.scene.image.ImageView：画像の描画
    • javafx.scene.LightBase：光源の形式を表すオブジェクトの共通プロパティの定義
    • javafx.scene.media.MediaView：ビデオ再生処理
    • javafx.scene.Parent：シーングラフ内で子を持つ全てのノードのベースクラス
      • javafx.scene.Group
      • javafx.scene.layout.Region
      • javafx.scene.web.WebView
    • javafx.scene.shape.Shape
      • javafx.scene.shape.Arc：円弧クラス（中心点，開始角，角の大きさ）
      • javafx.scene.shape.Circle：円クラス（中心点，半径）
      • javafx.scene.shape.CubicCurve：3次ベジェ・パラメトリック曲線クラス（(controlX1, controlY1)と(controlX2, controlY2)をベジェ制御点とし，(startX, startY)と(endX, enfY)を通る曲線）
      • javafx.scene.shape.Ellipse：楕円クラス（楕円中心点，楕円幅，楕円高）
      • javafx.scene.shape.Line：線クラス（始点，終点）
      • javafx.scene.shape.Path：パスクラス
      • javafx.scene.shape.Polygon：ポリゴンクラス（複数点）
      • javafx.scene.shape.Polyline：ポリラインクラス（複数点）
      • javafx.scene.shape.QuadCurve：2次ベジェ・パラメトリック曲線クラス（(controlX, controlY)をベジェ制御点とし，(startX, startY)と(endX, enfY)を通る曲線）
      • javafx.scene.shape.Rectangle：矩形クラス（左上点，幅，高さ，（角に丸みを付ける場合，弧の垂直経，水平経））
      • javafx.scene.shape.SVGPath：SVGパスクラス
      • javafx.scene.text.Text：テキストクラス（文字列，始点座標，フォントなど）
    • javafx.scene.shape.Shape3D：3D描画
    • javafx.scene.SubScene：シーングラフの内容のコンテナ
    • javafx.embed.swing.SwingNode：JavaFXにSwingコンテンツを含めるために使用
  • javafx.scene.Scene：シーン・グラフの全ての内容のコンテナ
  • javafx.stage.Window：シーンがホストされ，ユーザが対話する最上位のウィンドウ
    • javafx.stage.PopupWindow：様々なポップアップ・ベース・ウィンドウの親クラス
    • javafx.stage.Stage：最上位のJavaFXコンテナ

マウスイベント処理

• イベントハンドラやイベントリスナを本体に実装
• 匿名クラスを用いて実装
• 内部クラスを用いて実装
• 外部クラスを用いて実装

キーイベント処理

DrawShapesAno.javaを修正し，動作を確認してみましょう．

DrawShapesAno.javaの修正

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

package jp.ac.utsunomiya_u.is;   import javafx.application.Application; import javafx.event.EventHandler; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.input.KeyEvent; import javafx.scene.input.MouseEvent; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.shape.Line; import javafx.scene.shape.Rectangle; import javafx.scene.text.Font; import javafx.scene.text.Text; import javafx.stage.Stage;   public class DrawShapesAno extends Application {       private Rectangle rectangle = null;       /**      * startメソッドのオーバーライド      *      * @param primaryStage Stageのインスタンス      * @throws Exception      */     @Override     public void start(Stage primaryStage) throws Exception {         // Stageタイトル設定         primaryStage.setTitle("DrawShapesAno");         // Groupのインスタンスrootを生成         Group root = new Group();         // Sceneのインスタンスsceneを生成         Scene scene = new Scene(root, 400, 400);           // Lineのインスタンスline1を生成         Line line1 = new Line();         // 始点設定         line1.setStartX(0);         line1.setStartY(0);         // 終点設定         line1.setEndX(100);         line1.setEndY(100);         // rootの子のリストにline1を追加         root.getChildren().add(line1);           // Lineのインスタンスline2を生成（始点，終点設定）         Line line2 = new Line(10, 10, 110, 10);         // line2の色を青に設定         line2.setStroke(Color.BLUE);         // line2の幅を5pxに設定         line2.setStrokeWidth(5);         // Circleのインスタンスcircleを生成（中心点，半径）         Circle circle = new Circle(100, 100, 20);         // circleを赤で塗りつぶす         circle.setFill(Color.RED);         // rootの子のリストにline2とcircleを追加         root.getChildren().addAll(line2, circle);           // Rectangleのインスタンスrectangleを生成（左上座標と幅，高さ指定）         rectangle = new Rectangle(200, 200, 50, 30);           // rootの子のリストにrectangleを追加         root.getChildren().add(rectangle);         // rectangleがドラッグされた時のイベント処理を設定         rectangle.setOnMouseDragged(new EventHandler<MouseEvent>() {             @Override             public void handle(MouseEvent event) {                 // rectangleの左上座標をドラッグ時のカーソルの座標に設定                 rectangle.setX(event.getX());                 rectangle.setY(event.getY());             }         });           // Textのインスタンスtextを生成（位置，文字列）         Text text = new Text(100, 100, "Hello Java FX!");         // rootの子のリストにtextを追加         root.getChildren().add(text);         // sceneにKeyPressedイベントを登録         scene.setOnKeyPressed(new EventHandler<KeyEvent>() {             @Override             public void handle(KeyEvent event) {                                if (event.getText().equals("b")) { // 押下されたキーが"b"と等しければ                     text.setFont(new Font(text.getFont().getSize() + 1)); // フォントサイズを現在のフォントサイズに1足したものに変更                 } else if (event.getText().equals("s")) { // 押下されたキーが"s"と等しければ                     text.setFont(new Font(text.getFont().getSize() - 1)); // フォントサイズを現在のフォントサイズから1引いたものに変更                 }             }         });           // primaryStageにsceneを登録         primaryStage.setScene(scene);         // primaryStageを表示         primaryStage.show();     }       public static void main(String[] args) {         // JavaFXの起動のために必須         launch(args);     } }

出力

マウスイベント・キーイベント処理の詳細

• setOnMouseClicked：Node内でクリック（押下して解放）時
• setOnMouseDragEntered：押下，ドラッグ，解放いずれかのジェスチャーがNodeに入る時
• setOnMouseDragExited：押下，ドラッグ，解放いずれかのジェスチャーがNodeから出る時
• setOnMouseDragged：Node内で押下してドラッグ時
• setOnMouseDragOver：押下，ドラッグ，解放のジェスチャーがNode内で発生した時
• setOnMouseDragReleased：押下，ドラッグ，解放のジェスチャーがNode内で終了した時
• setOnMouseEntered：カーソルがNode内に入る時
• setOnMouseExited：カーソルがNode内から出る時
• setOnMouseMoved：カーソルがNode内で移動するが，ボタンは押されない時
• setOnMousePressed：Node内で押下された時
• setOnMouseReleased：Node内で解放された時
• setOnKeyPressed：Nodeにフォーカスがある状態でキーが押下された時
• setOnKeyReleased：Nodeにフォーカスがある状態でキーが解放された時
• setOnKeyTyped：Nodeにフォーカスがある状態でキーが押下され解放された時

• javafx.scene.input.InputEvent：ユーザ入力イベント
  • javafx.scene.input.ContextMenuEvent：コンテキスト・メニューリクエスト時に発生
  • javafx.scene.input.DragEvent：ドラッグ・アンド・ドロップジェスチャー時に発生
  • javafx.scene.input.GestureEvent：ジェスチャ入力時に発生
  • javafx.scene.input.InputMethodEvent：テキスト変更時に発生
  • javafx.scene.input.KeyEvent：キー・ストローク時に発生
  • javafx.scene.input.MouseEvent：マウス・イベント時に発生
  • javafx.scene.input.TouchEvent：タッチ・イベント時に発生

javafx.scene.controlパッケージとjavafx.scene.layoutパッケージ

以下のLayoutTest.javaをコピーし，動作を確認してみましょう．

LayoutTest.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

package jp.ac.utsunomiya_u.is;   import javafx.application.Application; import javafx.event.ActionEvent; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.TextArea; import javafx.scene.control.TextField; import javafx.scene.layout.BorderPane; import javafx.stage.Stage;   public class LayoutTest extends Application {       @Override     public void start(Stage primaryStage) throws Exception {         // primaryStageのタイトルを設定         primaryStage.setTitle(getClass().getName());         // BorderPaneのインスタンスrootを生成         BorderPane root = new BorderPane();         // Sceneのインスタンスsceneを生成         Scene scene = new Scene(root);         // primaryStageにscenceを登録         primaryStage.setScene(scene);           // TextAreaのインスタンスtextAreaを生成         TextArea textArea = new TextArea();         // textAreaを編集不可に設定         textArea.setEditable(false);         // TextFieldのインスタンスtextFieldを生成         TextField textField = new TextField();         // Buttonのインスタンスbuttonを生成（表示文字を引数で指定）         Button button = new Button("submit");         // buttonが押下された時のイベントを設定         button.setOnAction((ActionEvent event) -> {             // textFieldに入力された文字をgetTextで取得し，appendTextでtextAreaに追記             textArea.appendText(textField.getText() + "\n");             // textFieldをクリア             textField.clear();         });           // textAreaをTopに貼付け         root.setTop(textArea);         // textFieldをCenterに貼付け         root.setCenter(textField);         // buttonをRightに貼付け         root.setRight(button);           // primaryStageを表示         primaryStage.show();     }       public static void main(String[] args) {         launch(args);     } }

19行目

BorderPaneクラスのインスタンスを作成しています．

21行目

BorderPaneクラスはParentクラスのサブクラスなのでルート・ノードになる事ができます．

出力

javafx.concurrentパッケージ

以下のConcurrentTest.javaをコピーし，動作を確認してみましょう．

ConcurrentTest.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123

package jp.ac.utsunomiya_u.is;   import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import javafx.application.Application; import javafx.concurrent.Service; import javafx.concurrent.Task; import javafx.event.ActionEvent; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.ProgressBar; import javafx.scene.control.ProgressIndicator; import javafx.scene.layout.VBox; import javafx.stage.Stage; import javafx.stage.WindowEvent;   public class ConcurrentTest extends Application {       @Override     public void start(Stage primaryStage) throws Exception {         // primaryStageのタイトル設定         primaryStage.setTitle(getClass().getName());         // Groupのインスタンスrootを生成         VBox root = new VBox();         // Sceneのインスタンスsceneを生成         Scene scene = new Scene(root);         // primaryStageにscenceを登録         primaryStage.setScene(scene);           // Buttonのインスタンスbuttonを生成         Button button = new Button("start");         // Labelのインスタンスlabelを生成         Label label = new Label();         // ProgressBarのインスタンスprogressBarを生成         ProgressBar progressBar = new ProgressBar(0);         // buttonとlabelとprogressBarをrootに貼付け         root.getChildren().addAll(button, label, progressBar);           // buttonにイベント処理規定         button.setOnAction((ActionEvent event) -> {             // Taskのインスタンスtask生成             Task<Void> task = getTask();               // labelのtextプロパティにtaskのmessageプロパティをバインド             label.textProperty().bind(task.messageProperty());             // pregressBarのprogressプロパティにtaskのprogressプロパティをバインド             progressBar.progressProperty().bind(task.progressProperty());               // スレッドプールをnewSingleThreadExecutorで生成             ExecutorService executorService = Executors.newSingleThreadExecutor();             // taskの実行             executorService.submit(task);             // スレッドプールの終了             executorService.shutdown();               primaryStage.setOnCloseRequest((WindowEvent event1) -> { // ウィンドウが閉じられたなら                 // taskをキャンセル                 task.cancel();             });         });           // Buttonのインスタンスbutton2を生成         Button button2 = new Button("start");         // Labelのインスタンスlabel2を生成         Label label2 = new Label();         // ProgressIndicatorのインスタンスprogressIndicatorを生成         ProgressIndicator progressIndicator = new ProgressIndicator(0);         // buttonとlabelとprogressIndicatorをrootに貼付け         root.getChildren().addAll(button2, label2, progressIndicator);           // button2にイベント処理規定         button2.setOnAction((ActionEvent event) -> {             // Serviceのインスタンスserviceを生成             Service<Void> service = new Service<Void>() {                 // 抽象メソッドcreateTaskをオーバーライド                 @Override                 protected Task<Void> createTask() {                     // Taskのインスタンスを返す                     return getTask();                 }             };             // serviceを開始             service.start();             // label2のtextプロパティにserviceのmessageプロパティをバインド             label2.textProperty().bind(service.messageProperty());             // pregressIndicatorのprogressプロパティにserviceのprogressプロパティをバインド             progressIndicator.progressProperty().bind(service.progressProperty());         });           // primaryStageを表示         primaryStage.show();     }       /**      * Taskのインスタンス生成      *      * @return Taskのインスタンス      */     private Task<Void> getTask() {         return new Task<Void>() {             // 抽象メソッドcallをオーバーライド             @Override             protected Void call() throws Exception {                 for (double i = 0; i <= 1.01; i += 0.01) {                     // messageプロパティを更新                     updateMessage(String.format("%2d%%", (int) (i * 100)));                     // progressプロパティを更新                     updateProgress(i, 1.0);                     // 100[ms]一時停止                     Thread.sleep(100);                 }                 // messageプロパティを更新                 updateMessage("finish");                 return null;             }         };     }       public static void main(String[] args) {         launch(args);     } }

出力