FXMLでアクションイベントを実装する (2/5)

では、実際に<fx:script>タグを使ったアクションイベントの処理を作ってみましょう。前回使ったプロジェクトをそのまま書き換えて試してみることにします。

FXMLのファイル（app.fxml）を開き、下に掲載したようにソースコードを書き換えて下さい。その他のもの（Javaのソースコードなど）は、一切変更する必要はありません。これで実行してみましょう。

この例では、Buttonをクリックすると、TextFieldに記入されたテキストを取り出してLabelに簡単なメッセージを表示しています。ごくシンプルなものですが、アクション実装の基本はわかるでしょう。

ここでは、いくつかのポイントがあります。順に整理していきましょう。

<?language javascript?>

冒頭に、このようなタグが追加されていますね。これは、<fx:script>で記述するコードがJavaScriptであることを指定するためのものです。「ってことは、他の言語も使えるの？」と思った人。もちろん、使えます。

GroovyやClojureなど、Java仮想マシン上で動作するスクリプト言語として実装されたものがあれば、それらを指定することもできます。が、Java8に標準で組み込まれているのはJavaScriptだけですので、まずはこれを使うことを考えましょう。

<fx:script>

<BorderPane>タグの中に、<fx:script>タグが用意されています。FXMLでは、Paneのタグがルートタグとして記述されますから、<fx:script>タグは必ずその中に組み込まれている必要があります。この<fx:script>タグ内には、ごく普通にJavaScriptのスクリプトが書かれます。

注目して欲しいのは、ここで使っているオブジェクトです。「label1」「text1」といったオブジェクトが利用されていますが、これらはいずれもその後に記述された<Label>や<TextField>の「fx:id」名であることがわかるでしょう。

<fx:script>に用意するスクリプト内では、コントロール類はfx:idで指定された名前の変数としてアクセスできるようになっているのです。ですから、使用するコントロールには必ずfx:idをつけておく必要があります。この点さえ守れば、スクリプト内から自由にコントロールを利用することができます。

・「getText」と「setText」
スクリプト内では、getTextでテキストを取得し、setTextで設定していますね。これって、既に見覚えのあるメソッドです。そう、Javaのソースコード内からコントロールのインスタンスを利用するときに使いました。

スクリプトで使われるコントロールのオブジェクトも、Javaのインスタンスと全く同じメソッドをもっており、同じ感覚でそれらを呼び出すことができます。新たに覚え直す必要は全くありません。


●スクリプトの外部ファイル化について
ここでは<fx:script>タグ内にスクリプトを記述しましたが、スクリプトが長くなると別ファイルにスクリプトを切り分けたほうがよいでしょう。こうした場合は、「source」という属性を指定します。例えば、

<fx:script source="script.js" />

こんな形で記述すると、FXMLファイルと同じ場所にある「script.js」をロードして利用できるようになります。実行するスクリプトが長くなってきたら、sourceを使って別ファイルに切り分けましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

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

<?language javascript?>
<?import java.lang.*?>
<?import java.net.URL ?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane xmlns="http://javafx.com/javafx" 
        xmlns:fx="http://javafx.com/fxml">
    <fx:script>
    function doAction(event){
        var str = field1.getText();
        str = "あなたは「" + str + "」と書いた。";
        label1.setText(str);
    }
    </fx:script>
    <stylesheets>
        <URL value="@app.css" />
    </stylesheets>
    <top>
        <Label fx:id="label1" text="This is FXML!" />
    </top>
    <center>
        <TextField fx:id="field1" />
    </center>
    <bottom>
        <Button onAction="doAction(event);" text="Click" />
    </bottom>
</BorderPane>