Help us understand the problem. What is going on with this article?

JavaFX アプリケーションに隠し Control を搭載する

More than 3 years have passed since last update.

この記事は JavaFX Advent Calendar 2015 の 11日目の記事です。
昨日の10日目は kokuzawa さんの JavaFXのUIをJUnit形式でテストする です。明日の12日目は skrb さんです。

概要

この記事では、 JavaFX に隠し Control を搭載する方法を紹介します(予告からタイトル変えました)。

スクリーンショット

まず、どういうことをやるのかを画像でお見せします。

app_widget1.png

アプリケーションを起動すると、こんな感じで TextField を持つ App Widgetが表示されます。キーワードの入力を受け付け、Web 検索の結果を WebView で表示する、という簡単なアプリケーションです。起動直後は WebView を隠してあります。

app_widget2.png

では何か適当なキーワードを入れて検索してみましょう。

app_widget3.png

すると、App Widget のサイズが拡張され、 Yahoo!Japan の検索結果が WebView で表示されます。

app_widget4.png

WebView なのでリンクをクリックすれば別のページに移動できます。

app_widget5.png

下の列に配置されている「hide」という Buttonを押してみると

app_widget6.png

WebView が隠されて、元のサイズに戻ります。

実装する

FXML に隠し Component を用意する

FXML 全体

まず、隠しておきたい Control を Container でラップし、Container に「managed="false"」の属性を追加します。

<HBox fx:id="browserArea" alignment="CENTER" managed="false" prefHeight="559.0" prefWidth="900.0" spacing="5.0">
     <children>
        <WebView fx:id="webView" nodeOrientation="INHERIT" prefHeight="400.0" prefWidth="600.0" />
     </children>
</HBox>

FXML 側の準備はこれだけです。

Controller クラスに表示/非表示のメソッドを実装

続いて、Controller クラスに Container の状態を操作するメソッドを用意します。setManaged メソッドを使って表示/非表示の切り替えが可能です。

表示メソッド
@FXML
protected void showBrowser() {
    browserArea.visibleProperty().setValue(true);
    browserArea.setManaged(true);
}
非表示メソッド
@FXML
protected void hideBrowser() {
    browserArea.visibleProperty().setValue(false);
    browserArea.setManaged(false);
}

実際のコードでは Stage のサイズも併せて変更しています。

何ができるか?

Dialog で表示するのではなく、同じ Stage 上で見せたい、けど通常は非表示にしておきたい Control (コンソール、スクリプト入力等)をアプリケーションに搭載したい時に使えるかと考えました。

改良点

  1. デザイン調整
  2. アニメーション追加

参考

  1. JavaFXとアナログ時計……StageStyle.TRANSPARENT 時のドラッグ移動の方法を使わせていただきました。

GitHub repository

search_app_widget

toastkidjp
Web 系企業の Android アプリ開発者です。
https://github.com/toastkidjp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away