< 前へ | 次へ >

演習 10: マップ・ロケーター・ハンドラーの作成

住宅ローン・コードを入力することにより、住宅ローンの位置のリストおよびマップを表示することのできるポートレットの作成を開始します。 リスト内の位置の名前をクリックすると、マップにロケーション・マーカーが表示されます。

この演習では、以下の 2 つの外部 Web サイトにある機能を使用します。
演習 10 および 11 で使用されるいくつかのテクノロジーについてより詳しい情報が必要になったときは、以下のソースを参照してください。

インターフェース・ファイルのレコードの作成

Google プレイス・サービスを使用するために、以下の EGL パーツを作成します。

レコード・パーツはさまざまな方法で作成できますが、この演習では、Web 上で REST サービスにアクセスして、Web アドレスの中に、サービスからデータを取得するために必要な詳細を組み込みます。 開発時には、「新規 EGL レコード」ウィザードにより、取得されるデータに対応したレコード・パーツが作成されます。

以下のようにします。

  1. MortgageServiceProject プロジェクトの EGLSource フォルダーで services パッケージを右クリックし、「新規作成」 > 「レコード」とクリックします。
  2. 「新規 EGL レコード」ウィザードの最初のページで、ソース・フォルダーおよびパッケージに関する詳細はそのままにし、新規ソース・ファイルとして以下の名前を入力します。
    GooglePlaceRecords
  3. 「次へ」をクリックします。
  4. 「テンプレート」ページで、「XML が元のレコード」をクリックします。 「次へ」をクリックします。
  5. 「XML が元のレコード」ウィンドウで、「URL から作成」をクリックし、「URL」フィールドに以下の URL を貼り付けます。
    https://maps.googleapis.com/maps/api/place/search/xml?location=-33.8670522,151.1957362
    &radius=1000&types=cafe&sensor=false&key=AIzaSyD_K9zveT6jhxgCApduywaOTuD5FiQFgpI&language=en
    この 2 行は、スペースを入れずに単一行の URL として結合してください。
    「URL から作成」フィールドに示された URL。
  6. 「次へ」をクリックします。 ウィザードに「要約」ページが表示され、新規ファイル内に置かれるコードのプレビューが表示されます。
    「プレビュー」ウィンドウに示されたコード。
    注: Google プレイス・サービスではデータが返されないことがあります。その場合には、ResultSet レコード・パーツのみが作成されます。データがない可能性が最も高いのは、日曜日です。 このサービスを利用できない場合、またはデータが返されなかった場合には、「キャンセル」をクリックして、しばらく待ってからこのチュートリアルを最後まで実行してください。
  7. 「終了」をクリックすると、ファイルが保存されます。
  8. ソース・ファイルにエラーがある場合は、そのコードと演習 10 終了後の GooglePlaceRecords.egl のコードのファイル内容を比較してください。
  9. ファイルを閉じます。

ローカル検索インターフェースの作成

外部 Web サービスを使用する際は、アクセスするサービス・オペレーションを指定するインターフェース・パーツを作成します。 このインターフェース・パーツは、要求側のコードが使用するものであり、サービス自体のコンポーネントではありません。

以下のようにします。

  1. 「MortgageUIProject」を右クリックし、「新規作成」 > 「インターフェース」とクリックすることでインターフェース・パーツを作成します。
  2. 「新規 EGL インターフェース・パーツ」ウィンドウで、以下のフィールドに入力を行います。
    1. 「パッケージ」フィールドに、以下の名前を入力します。
      interfaces
    2. 「EGL ソース・ファイル名」フィールドに、以下の名前を入力します。
      GooglePlaceRecords
    3. 「終了」をクリックします。
  3. ファイルの内容を以下のコードに置き換えます。
    package interfaces;
    
    // interface
    interface GooglePlacesService
    function getSearchResults( typeName string? in ) 
    returns(PlaceSearchResponse)
          {@GetRest{uriTemplate = 
    "https://maps.googleapis.com/maps/api/place/search/xml?location
    =37.47,-122.26&radius=50000&sensor=false&key=AIzaSyD_K9zveT6jhx
    gCApduywaOTuD5FiQFgpI&language=en&keyword={typeName}",                 
    							responseFormat = XML}}; end
    コードを貼り付けた後、以下のようにします。
    1. uriTemplate 値がスペースのない単一行になるように、余分な行を除去します。
    2. Ctrl + Shift + O を押して、PlaceSearchResponse レコード・パーツへの参照を解決するために必要な import ステートメントを組み込みます。
    3. ファイルを保存します。
    getSearchResults 関数プロトタイプにより、リクエスターがサービスを呼び出す際、uriTemplate 値の大括弧で囲まれた要素の代わりに、リクエスターの type 引数が使用されるようになります。 EGL ランタイム・コードでは、完全な形の URI を使用してサービスにアクセスします。 この URI では、サービスに最大で 10 件の結果を返すように指定します。
    • この URI には、サービスがデータを検索するために使用する「mortgage」というキーワードが含まれます。
    • この URI では、サービスに最大で 10 件の結果を返すように指定します。
  4. ソース・ファイルにエラーがある場合は、そのコードと演習 10 終了後の GooglePlacesService.egl のコードのファイル内容を比較してください。
  5. エラーがない場合は、ファイルを閉じます。

MapLocatorHandler ハンドラーの作成

MapLocatorHandler ハンドラーを作成するには、以下のようにします。

  1. 演習 4 と同様に、MortgageUIProject/EGLSource フォルダーの handlers パッケージで、Rich UI ハンドラー・パーツを作成します。このハンドラーに以下の名前を付けてください。
    MapLocatorHandler
    Rich UI エディターの「設計」ビューにハンドラーが開きます。
  2. グリッド・レイアウトの内側をクリックし、選択したセルを右クリックして、「削除」>「行」とクリックします。 グリッド・レイアウトが 3 行になります。
  3. 以下のようにして、紹介テキストの行を作成します。
    1. パレットの「表示および入力 (Display and Input)」ドロワーから、GridLayout ウィジェットの最初のセルに TextLabel ウィジェットをドラッグし、以下の名前を付けます。
      introLabel
    2. 「プロパティー」ビューで、以下の変更を行います。
      • 「一般」ページで、「text」 プロパティーを以下の句に変更します。
        Search for places in San Francisco:
      • 「レイアウト」ページで、「horizontalSpan」プロパティーを 3 に設定します。
      • ファイルを保存するために、Ctrl + S を押します。
  4. 以下のようにして、タイプ・コード入力フィールドのラベルを作成します。
    1. 2 行目の最初のセルに TextLabel ウィジェットをドラッグし、以下の名前を割り当てます。
      typeLabel
    2. 「プロパティー」ビューで、「text」プロパティーを以下のように設定します。
      Type:
  5. 以下のようにして、ユーザーがタイプ・コードを入力可能なテキスト・フィールドを作成します。
    1. 2 行目の 2 番目のセルに DojoCombolBox ウィジェットをドラッグし、以下の名前を割り当てます。
      typeComboBox
    2. 「プロパティー」ビューの「位置」ページで、「width」プロパティーを 100 に設定します。
    3. 「イベント」ページで、onChange イベントの行をクリックします。正符号 (+) をクリックして、イベントに関数を追加します。 「新規イベント・ハンドラー」ダイアログが表示されます。
    4. 「プロパティー」ページで値の横にある「...」ボタンをクリックし、表示されたポップアップ・ダイアログで、その値に次のオプションを割り当てます。 ["bar", "food", "restaurant", "cafe", "movie_theater", "mortgage", "bank", "atm"]
    5. 新規関数の名前として以下を入力します。
      checkForEnter
    6. 「OK」をクリックします。 EGL が「ソース」ビューに切り替わり、checkForEnter 関数が表示されます。 以下に示す、他の 2 つの新しい追加点に注意してください。
      • typeComboBox ウィジェットの宣言で、onChange プロパティーが checkForEnter に設定されます。
      • 以下の import ステートメントにより、DojoComboBox ウィジェット・タイプへの参照が解決されます。
        import dojo.widgets.DojoComboBox;
    7. 「設計」をクリックして、「設計」ビューに戻ります。 onChange イベントに隣接して、checkForEnter 関数名が表示されます。この関数が typeField フィールドにバインド されたということになります。この関数のコードは次の演習で追加します。
    8. ファイルを保存するために、Ctrl + S を押します。
  6. 以下のようにして、指定のタイプ・コードの検索を開始するボタンを追加します。
    1. パレットの「表示および入力 (Display and Input)」ドロワーから、2 行目の 3 番目のセルに Button (Dojo) ウィジェットをドラッグします。 以下の名前を割り当てます。
      typeButton
    2. 「プロパティー」ビューの「イベント」ページで、onClick イベントの行をクリックします。 正符号 (+) をクリックして、イベントに関数を追加します。
    3. 「新規イベント・ハンドラー」ウィンドウで、この新規関数の名前として以下を入力します。
      buttonClicked
    4. 「OK」をクリックします。 EGL が「ソース」ビューに切り替わり、buttonClicked 関数が表示されます。
    5. 「設計」をクリックして、「設計」ビューに戻ります。 onClick イベントに隣接して、buttonClicked 関数名が表示されます。 この関数は、typeButton ボタンにバインドされました。この関数のコードは次の演習で追加します。
    6. 「一般」ページで、ボタンの「text」プロパティーを以下の名前に変更します。
      Search
    7. ファイルを保存するために、Ctrl + S を押します。
  7. 住宅ローン会社のリストが入るボックスを作成します。
    1. パレットの「レイアウト」ドロワーから、3 行目の最初のセルに Box ウィジェットをドラッグし、以下の名前を付けます。
      listingBox
    2. 「プロパティー」ビューの「一般」ページで、「columns」プロパティーを 1 に設定します。
    3. 「位置」ページで、「width」プロパティーを 150 に設定します。
    4. 「レイアウト」ページで、「verticalAlignment」プロパティーを TOP に、「horizontalSpan」プロパティーを 2 に設定します。
    この時点で、UI の外観は以下の図のようになります。
    タイプ・コードの入力フィールド、ボタン、および空のボックスが含まれた 3 x 3 のグリッド。
  8. パレットの「サンプル」ドロワーから、listingBox ウィジェットの隣にある、3 行目の最後のセルに Google マップ・ウィジェットをドラッグし、以下の名前を付けます。
    localMap
    「プロジェクト・エクスプローラー」の右上ではなく、「設計」ビューの右上にある更新ボタンをクリックして、Rich UI エディターの「設計」ビューを更新します。反対の方向を指す 2 つの黄色い矢印が示された更新ボタン。
    「設計」面の外観は、以下のようになります。
    紹介行、タイプ・コード入力フィールド、検索結果ボックス、およびデフォルト・マップが示された画面。
  9. ファイルを保存するために、Ctrl + S を押します。
「設計」ビューでの作業が終了しました。

「ソース」タブをクリックすると、EGL Rich UI エディターで作成されたコードを確認できます。

演習のチェックポイント

以下のタスクの実行方法を学習しました。
  • サービスから取得したデータからレコード定義を作成する。
  • サービス・アクセスを可能にする詳細を使用してインターフェース・パーツを構成する。
  • Google マップが組み込まれたユーザー・インターフェースを作成する。

次の演習では、ソース・コードを追加して、MapLocatorHandler ハンドラーを完成させます。

< 前へ | 次へ >

フィードバック