jacksparrow

前回は、 JavaFX で表示する Window の中に、テキストラベル、テキストボックス、ボタンを実装するプログラムを作成しました。

今回はその、実装したボタンがクリックされた時の、ボタンアクションを実装して行きたいと思います。簡単に、ボタンクリックによって、テキストボックスに入力された文字と、表示されているテキストラベルの文字とを、置き換えるプログラムを作ります。

テキストラベルを動的に変えて行く為に、まず最初に、 content に宣言された Text を、変数化する必要があります。変数は、 Scene のネストの外側で宣言する必要がありますが、ここで注意が必要です。画面に表示させるエレメントを変数化する時は、必ず Scene を宣言するよりも前で、宣言する必要があります。経験豊富な GUI アプリケーション開発者の方であれば、このころは、すぐにピンと来るでしょうが、初心者の方が陥り易い落とし穴と言ったところでしょうか｢(ﾟ～ﾟo) ? 画面表示の初期化を行う際、宣言された順序どおりに処理を行っていくので、 Scene よりも後に宣言してしまうと、画面に表示されなくなります。

それではまず、 Text の変数化、変数化したコードは以下の通りです。 :
var text: Text = Text {
　　font: Font {
　　　　size: 24
　　}
　　x: 10,
　　y: 30
　　content: "Application content"
}変数宣言は "var" で始まり、変数名は "text" と言う名前を割り付けています。そして ": Text" の部分は、型宣言で、 "=" の後ろは、インスタンスの初期化パラメータを定義しています。Java のような書き方で、それで居て、 Java っぽくないですね。そして、ここで宣言した変数 "text" を、 Scene のエレメントとして認識させるため、 "Text" の記述を置き換えます。置き換えたコードは以下のとおり :
scene: Scene
　　content: [
　　　　text,
　　　　SwingTextField {これと同じようにして、 "SwingTextField" についても変数化しておきます。変数化したコードは、以下のとおり :
var textField: SwingTextField = SwingTextField {
　　columns: 10
　　editable: true
　　translateX: 10
　　translateY: 70
}そして "Text" と同じように、宣言した変数を、 "Scene" にネストされた "SwingTextField" と置き換えます。 :
scene: Scene {
　　content: [
　　　　text,
　　　　textField,
　　　　SwingButton {ここまで出来たら、一旦実行してみましょう。前回作成した時と、同じ様に画面表示できたことが確認できます。



ここまでで、ボタンアクションへの機能実装の準備が整いました。では早速、今回の、テキストフィールドの値を、画面表示しているテキストへ置き換えると言う機能を実装しましょう。と言っても、たいそうなことをやる訳ではないのですが・・・σ(^_^;)ｱｾ

ボタンアクションの機能を実装する場合は、 SwingButton エレメントにネストされている、 action: function() の {} 内に、ネストする形で記述して行きます。今回の要件を実装したコードは以下の通りになります。 :
SwingButton {
　　text: "Button"
　　translateX: 150
　　translateY: 70
　　action: function() {
　　　　text.content = textField.text
　　}
}"text.content = textField.text" と記述した部分が、今回の要件になる訳ですが、ここでお気づき頂けた方が少なくないのではないかと思います。それぞれの変数が、値を格納しているエレメントの名称に，相違があると言うこと、 JavaScript では、値を格納しているエレメントは "value" で統一されてますね？　しかし JavaFX では、それぞれのコンポーネントで定義されている、プロパティ名に依存しているので、ここは注意が必要ですね。これで全ての実装は完了しました。早速動かしてみましょう。



テキストボックスに、何か文字を入力します。因に今回 "JavaFX の世界へようこそ！" と入力しました。



入力が終わったら、早速ボタンをクリック！



初期表示されていた文字列が、入力された文字列に置き換えることができました。今回は、ボタンアクションに、どうやって機能を実装して行くかについて学びましたね。業務アプリケーションを作成する際には、これに、更に入力値の属性チェックなども、実装して行くことになるわけですが、 "action: function{}" からは、 Java の Class を呼び出したりすることも出来るので、http や Web Service での C/L システム開発なども、可能になって来るのではないかと私は考察しています。

是非皆さんもお試しください。

さて次回は、せっかく豊富な機能をバンドルしているので、その機能をひとつづつ、検証していった結果について執筆して行きたく思います。まだまだ続きますので、どうぞお付き合いください。 M(_ _)m