JavaFXComposerREST2BindingTutorialJa

(Difference between revisions)
(Created page with '== JavaFX Composer Data Binding Tutorial - part 2 == === Goal === This tutorial shows how to use advanced properties of Data Sources in JavaFX Composer and how to bind them to …')
Line 1: Line 1:
-
== JavaFX Composer Data Binding Tutorial - part 2 ==
+
== JavaFX Composer データバインディングチュートリアル-パート2 ==
-
=== Goal ===
+
=== 目標 ===
-
This tutorial shows how to use advanced properties of Data Sources in JavaFX Composer and how to bind them to your JavaFX UI.
+
このチュートリアルではJavaFX Composerでのデータソースプロパティの高度な設定の仕方と、作成するJavaFX UIにそれらのデータをバインドする方法を学びます。
-
'''Note:''' This tutorial continues from where the part 1 ended so if you have not finished the [[JavaFXComposerRESTBindingTutorial|first part]], you should read it before proceeding.
+
'''注意:''' このチュートリアルはパート1からの続きとなっています。[[JavaFXComposerRESTBindingTutorialJa|パート1]]が終わっていない場合は先にそちらを読んでください。
-
=== Adding more components ===
+
=== コンポーネントの追加 ===
-
In the previous tuorial you created a simple view of the first 10 kenai.com projects which is nice but not that useful. Let's add three more components to the UI, namely '''two buttons and a progress indicator''' as shown below. Just drag and drop them from the palette and label them Previous and Next.
+
この前のチュートリアルでは、kenai.com projectsから最初の10個のプロジェクト名を表示するプログラムを作成しました。これでも良いのですが、あまり便利ではありません。そこで、UIに3つのコンポーネントを追加してみましょう。デザインウィンドウを開き、下に示すようにパレットウィンドウからドラッグ&ドロップし、2つのボタンと1つの進行状況インジケータを配置します。ボタンのラベルを編集し、PreviousとNextとそれぞれ入力します。
[[File:javafxcomposer-tutorial-REST2-s1.png]]
[[File:javafxcomposer-tutorial-REST2-s1.png]]
-
Kenai.com returns list of projects in pages of size 10. The Next button will fetch the next page and the Previous button will fetch the previous page. Buttons will be disabled when there are no more projects or when the first page is shown, respectively.
+
kenai.comは1ページにつき10個のprojectsリストを値として返します。Nextボタンは次のページをフェッチし、Previousボタンは前のページをフェッチします。Nextボタンは表示できるprojectsが無くなった時点で無効になり、Previousページは最初のページで無効になります。
-
=== Customizing the Previous and Next buttons ===
+
=== PreviousボタンとNextボタンの編集 ===
-
You will customize Disable and Action properties of both Previous and Next buttons. Tutorial only covers the Previous button, just repeat following steps for both and replace "prev" with "next" as apporpriate.
+
PreviousボタンとNextボタンの両方について、無効(Disable)と動作(Action)プロパティを編集します。このチュートリアルではPreviousボタンのみについて記述します。Nextボタンに関してはこのチュートリアル中で"prev"と記述されている部分を"next"とし、Previousボタンでの手順を繰り返します。
-
Select the Previous button and open the property customizer for the Disable property, then click on the Bind button.
+
Previousボタンを選択し、無効(Disable)項目のプロパティカスタマイザーを開きます。そして、バインドボタンをクリックします。
[[File:javafxcomposer-tutorial-REST2-s2.png]]
[[File:javafxcomposer-tutorial-REST2-s2.png]]
[[File:javafxcomposer-tutorial-REST2-s3.png]]
[[File:javafxcomposer-tutorial-REST2-s3.png]]
-
In the property customizer dialog select the "httpDataSource" and "Current Record String Field" as shown on the screenshot. Also make sure the Bind text box contains the text shown. What this does is that it binds the Disable property of the button to the result of the expression in the red box. Simply put, the data source contains a Record named "prev" which is either null or contains URL of the previous page of projects. You want to disable the button if there is no previous page. Click the Close button.
+
スクリーンショットに示すように、プロパティカスタマイザー内の"httpDataSource" "Current Record String Field"  
 +
を選択します。スクリーンショットにあるバインドテキストボックス内に書かれている文を確認し、入力して下さい。この赤い四角で囲まれた表現によって無効(Disable)プロパティをバインドしています。簡単に言うと、データソースに含まれる"prev"という項目には、前のページのURLが格納されており、最初のページでは前のページが無いのでnullが格納されています。赤い四角の条件式は"prev"がnullなら無効(Disable)にするという意味ですので、すなわち最初のページであればPreviousボタンは無効になります。閉じるボタンを押してプロパティカスタマイザーを閉じて下さい。
[[File:javafxcomposer-tutorial-REST2-s4.png]]
[[File:javafxcomposer-tutorial-REST2-s4.png]]
-
Now define action for the Previous button. Select the Previous button and in the Property sheet click on the pen icon next to the Action property. A popup menu appears, select the "Generate: Empty function" item.
+
次に、Previousボタンの動作(action)を定義します。Previousボタンを選択し、動作(Action)項目の隣にあるペンのアイコンをクリックして下さい。ポップアップメニューが現れますので、その中から"Generate: Empty function"を選択して下さい。
[[File:javafxcomposer-tutorial-REST2-s8.png]]
[[File:javafxcomposer-tutorial-REST2-s8.png]]
-
Source editor opens as JavaFX Composer generates an empty function that will handle click events on the button. Type the following code into the function body:
+
ソースエディタが開かれ、JavaFX Composerは空のfanctionを作成します。ここには、ボタンが押されたときの処理を記述します。次のコードをfunctionのbodyに記述して下さい。
[[File:javafxcomposer-tutorial-REST2-s9.png]]
[[File:javafxcomposer-tutorial-REST2-s9.png]]
-
Make sure you did customize both buttons before proceeding to the next section.
+
次のセクションに行く前に両方のボタンについて編集できたか確認して下さい。
-
=== Binding Progress Indicator ===
+
=== 進行状況インジケータのバインド ===
-
Select the Progress indicator component and open the property customizer for its Visible property.
+
進行状況インジケータコンポーネントと選択し、可視(Visible)項目のプロパティカスタマイザーを開いて下さい。
[[File:javafxcomposer-tutorial-REST2-s6.png]]
[[File:javafxcomposer-tutorial-REST2-s6.png]]
-
Click on the Bind button and in the customizer select "httpDataSource" in the Components list box and "fetchingData" in the following list box. Click on close.
+
バインドボタンを押して、コンポーネントリストボックスから"httpDataSource"を、次のリストボックスから "fetchingData"を選択し、閉じるをクリックします。
[[File:javafxcomposer-tutorial-REST2-s7.png]]
[[File:javafxcomposer-tutorial-REST2-s7.png]]
-
Now the progress indicator will only be visible if tha data source is fetching data from the web service.
+
これにより、進行状況インジケータはウェブサービスからデータソースがデータをフェッチしているときだけ表示されます。
-
 
+
作成した機能を確認するため、プロジェクトを実行して下さい。
-
You can run the application now to test the functionality of navigation buttons and progress indicator.
+
おめでとうございます! あなたはRESTサービスチュートリアルのパート2を終えました。
-
 
+
-
Congratulations, you have finished the second part of REST services tutorial.
+

Revision as of 05:15, 6 January 2010

Contents

JavaFX Composer データバインディングチュートリアル-パート2

目標

このチュートリアルではJavaFX Composerでのデータソースプロパティの高度な設定の仕方と、作成するJavaFX UIにそれらのデータをバインドする方法を学びます。

注意: このチュートリアルはパート1からの続きとなっています。パート1が終わっていない場合は先にそちらを読んでください。

コンポーネントの追加

この前のチュートリアルでは、kenai.com projectsから最初の10個のプロジェクト名を表示するプログラムを作成しました。これでも良いのですが、あまり便利ではありません。そこで、UIに3つのコンポーネントを追加してみましょう。デザインウィンドウを開き、下に示すようにパレットウィンドウからドラッグ&ドロップし、2つのボタンと1つの進行状況インジケータを配置します。ボタンのラベルを編集し、PreviousとNextとそれぞれ入力します。

File:javafxcomposer-tutorial-REST2-s1.png

kenai.comは1ページにつき10個のprojectsリストを値として返します。Nextボタンは次のページをフェッチし、Previousボタンは前のページをフェッチします。Nextボタンは表示できるprojectsが無くなった時点で無効になり、Previousページは最初のページで無効になります。

PreviousボタンとNextボタンの編集

PreviousボタンとNextボタンの両方について、無効(Disable)と動作(Action)プロパティを編集します。このチュートリアルではPreviousボタンのみについて記述します。Nextボタンに関してはこのチュートリアル中で"prev"と記述されている部分を"next"とし、Previousボタンでの手順を繰り返します。

Previousボタンを選択し、無効(Disable)項目のプロパティカスタマイザーを開きます。そして、バインドボタンをクリックします。

File:javafxcomposer-tutorial-REST2-s2.png File:javafxcomposer-tutorial-REST2-s3.png

スクリーンショットに示すように、プロパティカスタマイザー内の"httpDataSource" と "Current Record String Field" を選択します。スクリーンショットにあるバインドテキストボックス内に書かれている文を確認し、入力して下さい。この赤い四角で囲まれた表現によって無効(Disable)プロパティをバインドしています。簡単に言うと、データソースに含まれる"prev"という項目には、前のページのURLが格納されており、最初のページでは前のページが無いのでnullが格納されています。赤い四角の条件式は"prev"がnullなら無効(Disable)にするという意味ですので、すなわち最初のページであればPreviousボタンは無効になります。閉じるボタンを押してプロパティカスタマイザーを閉じて下さい。

File:javafxcomposer-tutorial-REST2-s4.png

次に、Previousボタンの動作(action)を定義します。Previousボタンを選択し、動作(Action)項目の隣にあるペンのアイコンをクリックして下さい。ポップアップメニューが現れますので、その中から"Generate: Empty function"を選択して下さい。

File:javafxcomposer-tutorial-REST2-s8.png

ソースエディタが開かれ、JavaFX Composerは空のfanctionを作成します。ここには、ボタンが押されたときの処理を記述します。次のコードをfunctionのbodyに記述して下さい。

File:javafxcomposer-tutorial-REST2-s9.png

次のセクションに行く前に両方のボタンについて編集できたか確認して下さい。

進行状況インジケータのバインド

進行状況インジケータコンポーネントと選択し、可視(Visible)項目のプロパティカスタマイザーを開いて下さい。

File:javafxcomposer-tutorial-REST2-s6.png

バインドボタンを押して、コンポーネントリストボックスから"httpDataSource"を、次のリストボックスから "fetchingData"を選択し、閉じるをクリックします。

File:javafxcomposer-tutorial-REST2-s7.png

これにより、進行状況インジケータはウェブサービスからデータソースがデータをフェッチしているときだけ表示されます。 作成した機能を確認するため、プロジェクトを実行して下さい。 おめでとうございます! あなたはRESTサービスチュートリアルのパート2を終えました。

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo