IntelliJ IDEA 13で作るJavaFXアプリケーション

この記事は、JavaFX Advent Calendar 2013の8日目です。
昨日は@aoetkさんのListViewやTableViewのセルをカスタマイズする方法でした。
明日は@sk44_さんです。

祝！IntelliJ IDEA 13 リリース

IntelliJ IDEA 13 が 12月3日にリリースされました！めでたいですね！
たぶん説明はいらないと思うので書きませんが、Java界隈の人なら知る人ぞ知る素敵なIDEです。
IntelliJの最新版であるver.13はJavaFXもサポートされているので、今回はこれを使ってJavaFXの簡単なアプリケーションを作ってみたいと思います。
6日目の記事で@khasunumaさんが書かれた、「e(fx)clipseで作るJavaFXアプリケーション」のIntelliJ版ですね。

早速作ってみる

IntelliJを初めて起動すると以下のような画面が表示されるので、右側にある「Create New project」を選択します。

今度はプロジェクトの作成画面が表示されるので、左側からプロジェクトのタイプとして「JavaFX Application」を選択、右側の「Project name」に任意のプロジェクト名を入れます。今回は「HelloJavaFX」という名前にしました。

Finishボタンをクリックすると、プロジェクトが作られます。プロジェクトには簡単なファイルが3つ用意されていて、それぞれ以下のような内容になっています。

Mainクラスがちゃんと書かれているのでこれだけでも動きます。初めてJavaFXのアプリケーションを作る人に必要最低限のファイルとコードを示すのに十分です。これ以上のコードがあると、本来は不必要なものまで必要だと勘違いしてしまうと思います。ただControllerとFXMLは空っぽなので、このままだと枠しか表示されなくて面白くない…。
ボタンをクリックしたら文字を表示するというぐらいはやりたいので、ボタンとラベルをFXMLに追加していきます。

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">

    <Label fx:id="label" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
    <Button fx:id="button" text="OK" onAction="#click" 
            GridPane.columnIndex="0" GridPane.rowIndex="1" GridPane.halignment="CENTER"/>

</GridPane>

ちなみに、以下のような感じでちょっとだけ入力すると補完候補が出てきます。この辺はIntelliJ様々です。他のIDEもできるのかもしれないですけど。

次はControllerに動作を書いていきます。

package sample;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

public class Controller
{
    @FXML
    private Label label;

    @FXML
    private Button button;

    public void click()
    {
        label.setText("ボタンをクリックしたよ！");
    }
}

コードの左側に表示されているマークをクリックすると、 @FXMLでマッピングしたコンポーネントにジャンプできます。この辺もちょっとしたことですけど嬉しい機能です。

起動する

では、実際に起動してみます。 IntelliJでは右上に実行のアイコンが表示されているので、これをクリックします。 mainメソッドを持つクラスが自動的に認識されているので、特に設定は必要ないようです。

表示されたウィンドウの真ん中に表示されたボタンをクリックすると、文字が表示されます。

まとめ

本当はScene Builderとか使えば、レイアウトが楽だったりするのですが、 IntelliJだけでも補完機能が優れているので、何となくレイアウトできてしまったりします。実は今回試してみるまで、GridPaneのレイアウトで使うGridPane.columnIndexという属性は知らなかった…。補完で出てきてくれたので、何となくこういう意味なんだろうなというノリで作れてしまいました。

というわけで、他のIDEの事情はちょっと分からないのですが、 IntelliJを使うことで、以外と簡単にJavaFXのアプリが作れることが分かって頂けると嬉しいなぁと思ったりしています。

最後に、IntelliJのAdvent CalendarじゃなくてJavaFXのAdvent Calendarです、念のため :P

Enjoy!