前回は、SceneBuilderで土台になる画面を作成しました。
今回は、この土台の細かい調整を行います。
Canvasを表示する
まずは、この画面のメイン部分になる「Canvas」を表示させて全体の雰囲気を見ます。
Canvasはプログラムで描画した画像を表示するためにしようする領域(コンテナ)になります。
まずは、このプログラムの問題点を修正します。
上のリンク先にはプログラムコードのGithubを参照しています。ちなみにこのプログラムの問題点は、以下の部分です。
OpenCvController controller = loader.getController();
この「OpenCvController」クラスは、今回作成したFXMLで登録していないクラスなので下のようにNullPointerExceptionで落ちます。
Exception in thread "JavaFX Application Thread" java.lang.NullPointerException at zenryokuservice.opencv.fx.Main$1.handle(Main.java:59) at zenryokuservice.opencv.fx.Main$1.handle(Main.java:1) at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:86) at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238) at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191) at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59) at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58) at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114) at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74) at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54) at javafx.event.Event.fireEvent(Event.java:198) at com.sun.javafx.stage.WindowPeerListener.closing(WindowPeerListener.java:88) at com.sun.javafx.tk.quantum.GlassWindowEventHandler.run(GlassWindowEventHandler.java:122) at com.sun.javafx.tk.quantum.GlassWindowEventHandler.run(GlassWindowEventHandler.java:40) at java.security.AccessController.doPrivileged(Native Method) at com.sun.javafx.tk.quantum.GlassWindowEventHandler.lambda$handleWindowEvent$423(GlassWindowEventHandler.java:151) at com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:389) at com.sun.javafx.tk.quantum.GlassWindowEventHandler.handleWindowEvent(GlassWindowEventHandler.java:149) at com.sun.glass.ui.Window.handleWindowEvent(Window.java:1266) at com.sun.glass.ui.Window.notifyClose(Window.java:1174)
コントローラーを登録する
コントローラーというのは、作成したFXMLには大まかに画面の表示部分とコントロール部分に分かれます。
上にあるのが画面の表示部分です。
前回作成したFXMLで出力されるのが、「表示部分」のみです。
出力されたもの(コード)は下のようになっています。
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.canvas.*?> <?import javafx.scene.control.*?> <?import java.lang.*?> <?import javafx.scene.layout.*?> <BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> <top> <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER"> <children> <Label text="Input app no" /> <TextField promptText="App No" /> <Button mnemonicParsing="false" text="Execute" /> </children> </HBox> </top> <center> <Canvas height="200.0" width="200.0" BorderPane.alignment="CENTER" /> </center> <bottom> <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER"> <children> <Button mnemonicParsing="false" text="Clear" /> </children> </HBox> </bottom> </BorderPane>
このルートになるコンテナクラス(=BorderPane)にコントローラークラスを追加します。
fx:controller="zenryokuservice.opencv.fx.controller.TestingCvController"
具体的には下のようになります。
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.canvas.*?> <?import javafx.scene.control.*?> <?import java.lang.*?> <?import javafx.scene.layout.*?> <BorderPane fx:controller="zenryokuservice.opencv.fx.controller.TestingCvController" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> <top> <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER"> <children> <Label text="Input app no" /> <TextField promptText="App No" /> <Button mnemonicParsing="false" text="Execute" onAction="#clickExecute"/> </children> </HBox> </top> <center> <Canvas height="200.0" width="200.0" BorderPane.alignment="CENTER" /> </center> <bottom> <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER"> <children> <Button mnemonicParsing="false" text="Clear" /> </children> </HBox> </bottom> </BorderPane>
コントローラー追加
次回は、以下のサイトを参考にFXMLの書き方を見て行きます。
このFXMLのチュートリアルとプロパティのリファレンス(alignmentなど)があるので参考にして見て行きます。
でわでわ。。。