< 上一個課程 | 下一個課程 >

第 10 課:建立地圖定位器處理程式

開始建立 Portlet,您可以在此 Portlet 中輸入郵遞區號並查看抵押公司的清單以及地圖。按一下清單中公司的名稱,這時地圖會顯示一個位置標記。
本課程仰賴兩個外部網站的功能:
如果您現在或稍後要進一步瞭解第 10 課和第 11 課中,所使用的某些技術的相關資訊,請查看下列來源:

建立介面檔的記錄

為了使用「Yahoo! 在地搜尋服務」,您將建立下列 EGL 組件:

您可以採用各種方式建立「記錄」組件,但是在本課程中,您將存取 Web 上的 REST 服務,並在網址中併入從服務擷取資料時的必要詳細資料。 「新建 EGL 記錄」精靈將建立對應於開發時所擷取之資料的「記錄」組件。

如下所示執行動作:

  1. MortgageServiceProject 專案的 EGLSource 資料夾中,用滑鼠右鍵按一下 services 套件,然後按一下新建 > 記錄
  2. 在「新建 EGL 記錄」精靈的首頁中,接受原始檔資料夾及套件的相關詳細資料,並為新的原始檔鍵入下列名稱:
    YahooRecords
  3. 下一步
  4. 在「範本」頁面中,按一下 XML 中的記錄。按下一步
  5. 在「XML 中的記錄」視窗中,按一下從 URL 建立,然後將下列 URL 貼到 URL 欄位中:
    http://local.yahooapis.com/LocalSearchService/V3/localSearch?
    appid=YahooDemo&query=pizza&zip=94306&results=2
    將這兩行結合成不含任何空格的單行 URL。
    URL 顯示在「從 URL 建立」欄位中。
  6. 下一步 精靈會顯示「摘要」頁面,此頁面可預覽該精靈將放置在新檔案中的程式碼。
    程式碼顯示在「預覽」視窗中。
    註: 「Yahoo! 在地搜尋服務」有時不傳回任何資料,在這種情況下只建立 ResultSet「記錄」組件。缺少資料的情況大部分發生在星期日。如果服務不可用或不傳回資料,請按一下取消,然後等待稍後再完成指導教學。

    與「Yahoo! 在地搜尋服務」相關的問題可以在這裡報告:本端 API - 一般問題,網址為:http://developer.yahoo.net/forum

  7. 按一下完成,這會儲存檔案。
  8. 如果在原始檔中看到錯誤,請將程式碼與第 10 課結束之後所完成之 YahooRecords.egl 的程式碼中的檔案內容進行比較。
  9. 關閉檔案。

建立本端搜尋介面

當您使用外部 Web 服務時,應該建立「介面」組件,此組件會識別將存取的服務作業。「介面」組件由要求程式碼使用,且不是服務本身的元件。

如下所示執行動作:

  1. 透過用滑鼠右鍵按一下 MortgageUIProject,並按一下新建 > 介面來建立新的「介面」組件。
  2. 在「新建 EGL 介面組件」視窗中,完成下列欄位:
    1. 套件欄位中,輸入下列名稱:
      interfaces
    2. EGL 原始檔名稱欄位中,輸入下列名稱:
      IYahooLocalService
    3. 按一下完成
  3. 將檔案的內容取代為下列程式碼:
    package interfaces;
    
    interface YahooLocalService
       function getSearchResults(appId string in, zipCode string in) returns(ResultSet)
          {@GetRest{uriTemplate = "http://local.yahooapis.com/LocalSearchService/V3/
                    localSearch?appid={appId}&query=mortgage&zip={zipcode}&results=10",
                    responseFormat = XML}};
    end
    貼上程式碼之後,請如下所示執行動作:
    1. 移除額外的行,以便 uriTemplate 值位於單一行中,且不含空格。
    2. 按 Ctrl+Shift+O 以包括解析對 ResultSet「記錄」組件的參照時所需的 import 陳述式。
    3. 儲存檔案。
    getSearchResults 函數原型確保當要求端呼叫服務時,使用要求端的 appIdzipCode 引數來代替 uriTemplate 值中括在方括弧內的元素。 EGL 執行時期程式碼使用完整的 URI 來存取服務,在此情況下,應一律滿足關於該 URI 的下列詳細資料:
    • URI 包括關鍵字「抵押」("mortgage"),此關鍵字供服務用來搜尋資料。
    • URI 指定服務最多傳回 10 個結果。
  4. 如果在原始檔中看到錯誤,請將程式碼與第 10 課結束之後所完成之 IYahooLocalService.egl 的程式碼中的檔案內容進行比較。
  5. 如果沒有錯誤,請關閉檔案。

建立 MapLocatorHandler 處理程式

若要建立 MapLocatorHandler 處理程式,請執行下列動作:

  1. MortgageUIProject/EGLSource 資料夾的 handlers 套件中,依照第 4 課中的動作建立「多元使用者介面」處理程式組件。為該處理程式指定下列名稱:
    MapLocatorHandler
    這時,處理程式會在「多元使用者介面」編輯器的「設計」視圖中開啟。
  2. 按一下格線佈置內部,用滑鼠右鍵按一下您選取的資料格,然後按一下刪除 > 列。格線佈置包含三列。
  3. 建立一行介紹文字:
    1. 從選用區的顯示和輸入抽屜中,將 TextLabel 小組件拖曳至 GridLayout 小組件的第一個資料格,並為其指定下列名稱:
      introLabel
    2. 在「內容」視圖中,進行下列變更:
      • 在「一般」頁面上,將文字內容變更為下列片語:
        Search for local mortgage businesses
      • 在「佈置」頁面上,將水平跨距內容設為 3
      • 若要儲存檔案,請按 Ctrl+S。
  4. 為郵遞區號輸入欄位建立標籤:
    1. 將 TextLabel 小組件拖曳至第二列的第一個資料格,並指定下列名稱:
      zipLabel
    2. 在「內容」視圖中,將文字內容設為下列內容:
      Zip code:
  5. 建立一個文字欄位,使用者可在該文字欄位中輸入郵遞區號:
    1. 將 TextField 小組件拖曳至第二列的第二個資料格,並指定下列名稱:
      zipField
    2. 在「內容」視圖中的「位置」頁面上,將寬度內容設為 100
    3. 在「事件」頁面上,按一下 onKeyDown 事件所在的列。按一下加號 (+) 來為該事件新增函數。這時會顯示「新建事件處理程式」對話框。
    4. 為新函數輸入下列名稱:
      checkForEnter
    5. 按一下確定 這時,EGL 會切換至「程式碼」視圖並顯示 checkForEnter 函數。 請注意另外兩個新增項目:
      • 在 zipField 小組件的宣告中,onKeyDown 內容已設為 checkForEnter
      • 下列 import 陳述式會解析對 TextField 小組件類型的參照:
        import com.ibm.egl.rui.widgets.TextField;
    6. 按一下設計以回到「設計」視圖。 現在,checkForEnter 函數名稱顯示在 onKeyDown 事件旁邊。該函數已連結至 zipField 欄位。您將在下一節課程中新增此函數的程式碼。
    7. 若要儲存檔案,請按 Ctrl+S。
  6. 新增一個按鈕,以起始搜尋指定的郵遞區號:
    1. 將 Button (Dojo) 小組件從選用區的顯示和輸入抽屜拖曳至第二列的第三個資料格。為該小組件指定下列名稱:
      zipButton
    2. 在「內容」視圖的「事件」頁面上,按一下 onClick 事件所在的列。按一下加號 (+) 來為該事件新增函數。
    3. 在「新建事件處理程式」視窗中,為新函數輸入下列名稱:
      buttonClicked
    4. 按一下確定 這時,EGL 會切換至「程式碼」視圖並顯示 buttonClicked 函數。
    5. 按一下設計以回到「設計」視圖。 現在,buttonClicked 函數名稱顯示在 onClick 事件旁邊。該函數已連結至 zipButton 按鈕。您將在下一節課程中新增此函數的程式碼。
    6. 在「一般」頁面上,將該按鈕的文字內容變更為下列名稱:
      Search
    7. 若要儲存檔案,請按 Ctrl+S。
  7. 建立一個方框,以包含抵押公司清單。
    1. 從選用區的佈置抽屜中,將 Box 小組件拖曳至第三列的第一個資料格,並為其指定下列名稱:
      listingBox
    2. 在「內容」視圖中的「一般」頁面上,將直欄數內容設為 1
    3. 在「位置」頁面上,將寬度內容設為 150
    4. 在「佈置」頁面上,將垂直對齊內容設為 TOP,並將水平跨距內容設為 2
    此時,使用者介面與下列圖片相似:
    包含一個輸入欄位(適用於郵遞區號)、一個按鈕和一個空白方框的 3x3 格線
  8. 從選用區的範例抽屜中,將 Google Map 小組件拖曳至第三列的最後一個資料格(listingBox 小組件旁邊),並為其指定下列名稱:
    localMap
    透過按一下「設計」視圖右上方(不是「專案瀏覽器」右上方)的「重新整理」按鈕,重新整理「多元使用者介面」編輯器的「設計」視圖。「重新整理」按鈕顯示兩個指向相反方向的黃色箭頭。
    「設計」版面如下所示:
    畫面顯示一個介紹行、一個用來提交郵遞區號的欄位、一個用於搜尋結果的方框以及一個預設地圖。
  9. 若要儲存檔案,請按 Ctrl+S。
這時,您已完成了「設計」視圖中的工作。

如果按一下程式碼標籤,則可以查看「EGL 多元使用者介面」編輯器建立的程式碼。此程式碼也在第 10 課結束之後所完成之 MapLocatorHandler.egl 的程式碼中有提供。

課程檢查點

您瞭解了如何完成下列作業:
  • 根據從服務擷取的資料建立「記錄」定義。
  • 使用容許服務存取的詳細資料配置「介面」組件。
  • 建立包括 Google 地圖的使用者介面。

在下一節課程中,您將新增原始碼,以完成 MapLocatorHandler 處理程式。

< 上一個課程 | 下一個課程 >

意見