MapLocatorHandler ハンドラーを作成するには、以下のようにします。
- 演習 4 と同様に、MortgageUIProject/EGLSource フォルダーの handlers パッケージで、Rich UI ハンドラー・パーツを作成します。このハンドラーに以下の名前を付けてください。
MapLocatorHandler
Rich UI エディターの「設計」ビューにハンドラーが開きます。
- グリッド・レイアウトの内側をクリックし、選択したセルを右クリックして、「削除」>「行」とクリックします。
グリッド・レイアウトが 3 行になります。
- 以下のようにして、紹介テキストの行を作成します。
- パレットの「表示および入力 (Display and Input)」ドロワーから、GridLayout ウィジェットの最初のセルに TextLabel ウィジェットをドラッグし、以下の名前を付けます。
introLabel
- 「プロパティー」ビューで、以下の変更を行います。
- 以下のようにして、郵便番号入力フィールドのラベルを作成します。
- 2 行目の最初のセルに TextLabel ウィジェットをドラッグし、以下の名前を割り当てます。
zipLabel
- 「プロパティー」ビューで、「text」プロパティーを以下のように設定します。
Zip code:
- 以下のようにして、ユーザーが郵便番号を入力可能なテキスト・フィールドを作成します。
- 2 行目の 2 番目のセルに TextField ウィジェットをドラッグし、以下の名前を割り当てます。
zipField
- 「プロパティー」ビューの「位置」ページで、「width」プロパティーを 100 に設定します。
- 「イベント」ページで、onKeyDown イベントの行をクリックします。
正符号 (+) をクリックして、イベントに関数を追加します。
「新規イベント・ハンドラー」ダイアログが表示されます。
- 新規関数の名前として以下を入力します。
checkForEnter
- 「OK」をクリックします。 EGL が「ソース」ビューに切り替わり、checkForEnter 関数が表示されます。
以下に示す、他の 2 つの新しい追加点に注意してください。
- 「設計」をクリックして、「設計」ビューに戻ります。 onKeyDown イベントに隣接して、checkForEnter 関数名が表示されます。
この関数が zipField フィールドにバインド されたということになります。
この関数のコードは次の演習で追加します。
- ファイルを保存するために、Ctrl + S を押します。
- 以下のようにして、指定の郵便番号の検索を開始するボタンを追加します。
- パレットの「表示および入力 (Display and Input)」ドロワーから、2 行目の 3 番目のセルに Button (Dojo) ウィジェットをドラッグします。
以下の名前を割り当てます。
zipButton
- 「プロパティー」ビューの「イベント」ページで、onClick イベントの行をクリックします。
正符号 (+) をクリックして、イベントに関数を追加します。
- 「新規イベント・ハンドラー」ウィンドウで、この新規関数の名前として以下を入力します。
buttonClicked
- 「OK」をクリックします。 EGL が「ソース」ビューに切り替わり、buttonClicked 関数が表示されます。
- 「設計」をクリックして、「設計」ビューに戻ります。 onClick イベントに隣接して、buttonClicked 関数名が表示されます。
この関数は、zipButton ボタンにバインドされました。
この関数のコードは次の演習で追加します。
- 「一般」ページで、ボタンの「text」プロパティーを以下の名前に変更します。
Search
- ファイルを保存するために、Ctrl + S を押します。
- 住宅ローン会社のリストが入るボックスを作成します。
- パレットの「レイアウト」ドロワーから、3 行目の最初のセルに Box ウィジェットをドラッグし、以下の名前を付けます。
listingBox
- 「プロパティー」ビューの「一般」ページで、「columns」プロパティーを 1 に設定します。
- 「位置」ページで、「width」プロパティーを 150 に設定します。
- 「レイアウト」ページで、「verticalAlignment」プロパティーを TOP に、「horizontalSpan」プロパティーを 2 に設定します。
この時点で、UI の外観は以下の図のようになります。
- パレットの「サンプル」ドロワーから、listingBox ウィジェットの隣にある、3 行目の最後のセルに Google マップ・ウィジェットをドラッグし、以下の名前を付けます。
localMap
「プロジェクト・エクスプローラー」の右上ではなく、「設計」ビューの右上にある更新ボタンをクリックして、Rich UI エディターの「設計」ビューを更新します。
- ファイルを保存するために、Ctrl + S を押します。