JavaFXについてのまとめ④

* JavaFX Scene Builderを使ってFXMlをデザイン編集する

JavaFXについてのまとめ①で.fxmlをダブルクリックすると
JavaFX Scene Builderが起動されるように設定しました。
なので、View.fxmlをダブルクリックしてみましょう。

このようにSceneBuilderが起動します。

左下のContllorClassにプロジェクト名.コントローラークラス名で
コントローラークラスと関連付けます。

このようにStageの中に、Sceneの中に、Paneの中に、と入れていきます。

StageとSceneはメインクラスで、記述していますので

    primaryStage.setScene(new Scene(view, 800, 600));

このメインクラスに記述した幅800、高さ600の中に
Paneを配置して、ボタンとビューブラウザを表示させます。

左下のHierarchyを開くと、今の要素が表示されます。
すでにAnchorPaneが配置されていますのでこれにPaneを入れます。

AnchoPaneをクリックして選択、上のContainersを開き
FlowPaneをドラッグして、中央の白い領域ドロップ。
左上に配置するように合わせて、サイズも角にマウスを合わせれば
調節出来るようになっています。

FlowPaneを選択、上のControlsを開き
Buttonを２つFlowPaneの上にドラッグ&ドロップで配置します。

次にAnchoPaneを選択、上のControlsの
WebViewをFlowPane領域の下に配置します

こんな感じになったら後は、設定です。

** 各要素にコントロール設定をする

左のボタンを選択して、右のPropertiesを開き
Text のButtonをGoogleに書き直す。
右のボタンを選択して、Text のButtonをYahooに書き直す。

左のGoogleボタンを選択して、右のCodeを開き
onActionにコントロールクラスで作った処理メソッド名を書きます。

    @FXML protected void onGoogle(ActionEvent event) {
        WebEngine engine = WebViewArea.getEngine();
        engine.load("https://www.google.co.jp/");
    }

onGoogleというメソッド名なのでonGoogleと書きます。

同様にYahooボタンもonYahooと書きます。

左下のWebViewをクリックして選択
右のCodeを開き、fx:idをWebViewAreaと書きます。
これでこのWebViewはWebViewAreaという要素名になりました。
このWebViewAreaはコントローラークラスで宣言しています。

    @FXML private WebView WebViewArea= new WebView();

この宣言で関連づけています。

これで完成となります。

SceneBilderの保存方法は
左上のFile　＞　Save　で保存するか
Ctrl + Sキー　で保存出来ます。

保存が終わったらNetBeansに戻り実行してみましょう。
上のように、YahooとGoogleボタンを押してページが変われば成功です。

JavaFXについてのまとめ①

http://jocoroo.hatenablog.com/entry/2014/11/20/204906

JavaFXについてのまとめ②

http://jocoroo.hatenablog.com/entry/2014/12/07/183013

JavaFXについてのまとめ③

http://jocoroo.hatenablog.com/entry/2014/12/08/020258

JavaFXについてのまとめ④[ココ]
http://jocoroo.hatenablog.com/entry/2014/12/08/032056