UIにそれらのデータをバインドする方法を学びます。このチュートリアルはパート1からの続きとなっています。[[JavaFXComposerRESTBindingTutorialJa|パート1]]が終わっていない場合は先にそちらを読んでください。projectsから最初の10個のプロジェクト名を表示するプログラムを作成しました。これでも良いのですが、あまり便利ではありません。そこで、UIに3つのコンポーネントを追加してみましょう。デザインウィンドウを開き、下に示すようにパレットウィンドウからドラッグ&ドロップし、2つのボタンと1つの進行状況インジケータを配置します。ボタンのラベルを編集し、PreviousとNextとそれぞれ入力します。respectively.+kenai.comは1ページにつき10個のprojectsリストを値として返します。Nextボタンは次のページをフェッチし、Previousボタンは前のページをフェッチします。Nextボタンは表示できるprojectsが無くなった時点で無効になり、Previousページは最初のページで無効になります。apporpriate.+PreviousボタンとNextボタンの両方について、無効(Disable)と動作(Action)プロパティを編集します。このチュートリアルではPreviousボタンのみについて記述します。Nextボタンに関してはこのチュートリアル中で"prev"と記述されている部分を"next"とし、Previousボタンでの手順を繰り返します。button.+Previousボタンを選択し、無効(Disable)項目のプロパティカスタマイザーを開きます。バインドボタンをクリックします。Field"+を選択します。スクリーンショットにあるバインドテキストボックス内に書かれている文を確認し、入力して下さい。この赤い四角で囲まれた表現によって無効(Disable)プロパティをバインドしています。簡単に言うと、データソースに含まれる"prev"という項目には、前のページのURLが格納されており、最初のページでは前のページが無いのでnullが格納されています。赤い四角の条件式は"prev"がnullなら無効(Disable)にするという意味ですので、すなわち最初のページであればPreviousボタンは無効になります。閉じるボタンを押してプロパティカスタマイザーを閉じて下さい。item.+次に、Previousボタンの動作(action)を定義します。Previousボタンを選択し、動作(Action)項目の隣にあるペンのアイコンをクリックして下さい。function"を選択して下さい。Composerは空のfanctionを作成します。ここには、ボタンが押されたときの処理を記述します。次のコードをfunctionのbodyに記述して下さい。section.+次のセクションに行く前に両方のボタンについて編集できたか確認して下さい。property.+進行状況インジケータコンポーネントと選択し、可視(Visible)項目のプロパティカスタマイザーを開いて下さい。"fetchingData"を選択し、閉じるをクリックします。service.+これにより、進行状況インジケータはウェブサービスからデータソースがデータをフェッチしているときだけ表示されます。-+作成した機能を確認するため、プロジェクトを実行して下さい。あなたはRESTサービスチュートリアルのパート2を終えました。UIにそれらのデータをバインドする方法を学びます。このチュートリアルはパート1からの続きとなっています。パート1が終わっていない場合は先にそちらを読んでください。projectsから最初の10個のプロジェクト名を表示するプログラムを作成しました。これでも良いのですが、あまり便利ではありません。そこで、UIに3つのコンポーネントを追加してみましょう。デザインウィンドウを開き、下に示すようにパレットウィンドウからドラッグ&ドロップし、2つのボタンと1つの進行状況インジケータを配置します。ボタンのラベルを編集し、PreviousとNextとそれぞれ入力します。kenai.comは1ページにつき10個のprojectsリストを値として返します。Nextボタンは次のページをフェッチし、Previousボタンは前のページをフェッチします。Nextボタンは表示できるprojectsが無くなった時点で無効になり、Previousページは最初のページで無効になります。PreviousボタンとNextボタンの編集PreviousボタンとNextボタンの両方について、無効(Disable)と動作(Action)プロパティを編集します。このチュートリアルではPreviousボタンのみについて記述します。Nextボタンに関してはこのチュートリアル中で"prev"と記述されている部分を"next"とし、Previousボタンでの手順を繰り返します。Previousボタンを選択し、無効(Disable)項目のプロパティカスタマイザーを開きます。バインドボタンをクリックします。スクリーンショットにあるバインドテキストボックス内に書かれている文を確認し、入力して下さい。この赤い四角で囲まれた表現によって無効(Disable)プロパティをバインドしています。簡単に言うと、データソースに含まれる"prev"という項目には、前のページのURLが格納されており、最初のページでは前のページが無いのでnullが格納されています。赤い四角の条件式は"prev"がnullなら無効(Disable)にするという意味ですので、すなわち最初のページであればPreviousボタンは無効になります。閉じるボタンを押してプロパティカスタマイザーを閉じて下さい。次に、Previousボタンの動作(action)を定義します。Previousボタンを選択し、動作(Action)項目の隣にあるペンのアイコンをクリックして下さい。function"を選択して下さい。Composerは空のfanctionを作成します。ここには、ボタンが押されたときの処理を記述します。次のコードをfunctionのbodyに記述して下さい。次のセクションに行く前に両方のボタンについて編集できたか確認して下さい。進行状況インジケータのバインド進行状況インジケータコンポーネントと選択し、可視(Visible)項目のプロパティカスタマイザーを開いて下さい。"fetchingData"を選択し、閉じるをクリックします。これにより、進行状況インジケータはウェブサービスからデータソースがデータをフェッチしているときだけ表示されます。作成した機能を確認するため、プロジェクトを実行して下さい。あなたはRESTサービスチュートリアルのパート2を終えました。