JavaFX8 画像表示

#1. 仕様

1. 実行するとウィンドウが開く．
2. 初期状態は，画像は表示されておらず，表示ボタンのみ押下できる．
3. 表示ボタンを押下すると，画像が表示され，非表示ボタンのみ押下できるようになる．
4. 非表示ボタンを押下すると，画像が非表示になり，表示ボタンのみ押下できるようになる．

#2. ファイル構造

Eclipseでプロジェクトを作成する．

imageView ・・・・・・・・・・・・・・(1)
　└ src ・・・・・・・・・・・・・・・・(2)
　　　├ test.jpg ・・・・・・・・・・・・(3)
　　　└ viewer ・・・・・・・・・・・・ (4)
　　　　　├ Main.java ・・・・・・・・・(5)
　　　　　├ MainController.java ・・・・ (6)
　　　　　└ screen.fxml ・・・・・・・・(7)

(1) 作成するプロジェクト
(2) プロジェクト作成時に勝手に作られる，ソースファイル用ディレクトリ
(3) テスト用画像
(4) 作成するパッケージ
(5) ソースファイル（次章に記述）
(6) ソースファイル（次章に記述）
(7) ソースファイル（次章に記述，SceneBuilderで作成）

#3. ソースコード
##3.1. Main.java

Main.java

package viewer;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		try {
			//FXMLからのシーングラフの読み込み
			FXMLLoader loader = new FXMLLoader(getClass().getResource("screen.fxml"));//screen.fxmlは同じパッケージ内に配置する
			Parent root = loader.load();

			//シーングラフのルートノードを設定したシーンの作成
			Scene scene = new Scene(root, 600, 400);
			//ステージへのシーンの設定
			primaryStage.setScene(scene);
			primaryStage.setTitle("Viewer");
			primaryStage.show();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public static void main(String[] args) {
		launch(args);
	}
}

##3.2. MainController.java

MainController.java

package viewer;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

public class MainController {

	@FXML
	private ResourceBundle resources;

	@FXML
	private URL location;

	@FXML
	private ImageView img;

	@FXML
	private Button imgDisplayButton;

	@FXML
	private Button imgHideButton;

	@FXML
	void initialize() {
		assert img != null : "fx:id=\"img\" was not injected: check your FXML file 'screen.fxml'.";
		assert imgDisplayButton != null : "fx:id=\"imgDisplayButton\" was not injected: check your FXML file 'screen.fxml'.";
		assert imgHideButton != null : "fx:id=\"imgHideButton\" was not injected: check your FXML file 'screen.fxml'.";

        //(1),(2)いずれか一方を有効にし，もう一方をコメントアウトすること

        //(1)URLで画像を指定する場合-----------------------------------------------
		//String url="http://example.com/sample.jpg";
		//Image image = new Image(url);
        //---------------------------------------------------------------------

        //(2)ファイルで画像を指定する場合-------------------------------------------
		Image image = new Image("test.jpg");//test.jpgはsrc直下に配置する
        //---------------------------------------------------------------------

		img.setImage(image);
		img.setVisible(false);
		imgHideButton.setDisable(true);
		imgDisplayButton.setDisable(false);
	}

	@FXML
	public void OnclickedImgDisplayButton(ActionEvent event) {
		img.setVisible(true);
		imgDisplayButton.setDisable(true);
		imgHideButton.setDisable(false);
	}

	@FXML
	public void OnclickedImgHideButton(ActionEvent event) {
		img.setVisible(false);
		imgHideButton.setDisable(true);
		imgDisplayButton.setDisable(false);
	}

}

##3.3. screen.fxml

screen.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>

<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="viewer.MainController">
   <children>
      <Button fx:id="imgHideButton" layoutX="86.0" layoutY="341.0" mnemonicParsing="false" onAction="#OnclickedImgHideButton" prefHeight="45.0" prefWidth="124.0" text="非表示">
         <font>
            <Font size="20.0" />
         </font>
      </Button>
      <Button fx:id="imgDisplayButton" layoutX="384.0" layoutY="341.0" mnemonicParsing="false" onAction="#OnclickedImgDisplayButton" prefHeight="45.0" prefWidth="124.0" text="表示">
         <font>
            <Font size="20.0" />
         </font>
      </Button>
      <ImageView fx:id="img" fitHeight="330.0" fitWidth="588.0" layoutX="5.0" layoutY="6.0" pickOnBounds="true" preserveRatio="true" />
   </children>
</Pane>

#4. 補足事項
※URLで指定した画像は，表示されない場合あり（原因はわかりません）．