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

第 11 課:將程式碼新增至地圖定位器處理程式

為您在前一節課程中建立的使用者介面完成背景程式碼。

完成 MapLocatorHandler.egl 的原始碼

  1. 請確保已在「多元使用者介面」編輯器中開啟 MapLocatorHandler.egl 檔。如果您在「設計」視圖中,請按一下程式碼標籤。
  2. start 函數之前新增一個空白行,並宣告基於您建立的「介面」組件的變數:
    lookupService YahooLocalService{@restbinding};

    @restbinding 內容指示服務存取詳細資料位於程式碼中,而不是位於 EGL 部署描述子中。決策很便利,但不可改變。 變更服務位置需要變更原始碼。第 14 課建立了 EGL 部署描述子,其中可能要放置大部分開發工作中的服務存取詳細資料。

  3. 若要解析對「介面」組件的參照,請按 Ctrl+Shift+O。 接下來的步驟將新增紅色錯誤標記,並且直到課程中的晚些時候才將移除這些錯誤標記。
  4. 請勿向 start 函數新增內容。
  5. 如下所示完成 checkForEnter 函數:
    function checkForEnter(event Event in)
       if(event.ch == 13)
          search();
       end
    end

    請考量下列背景詳細資料:EGL 執行時期程式碼會呼叫 checkForEnter 函數並傳遞事件物件,此事件物件是包含事件相關詳細資料的記憶體結構。在此情況下,導致呼叫的事件是 onKeyDown,並且事件物件包括用於代表使用者按鍵的 ASCII 字元。具體而言,數字 13 在 ASCII 表中是換行(ENTER 鍵)的十進位值,如下所註:ASCII 表和說明 (http://www.asciitable.com)

    如果文字欄位具有焦點,則只有當使用者按下某個鍵(例如 Tab 鍵或 ENTER 鍵)時,才呼叫 checkForEnter 函數。只有當鍵是 ENTER 鍵時,函數才會呼叫 search 函數。不久,您將建立 search 函數。

  6. 完成 buttonClicked() 函數:
    function buttonClicked(event Event in)
       search();
    end

    buttonClicked 函數及其與按鈕專屬 onClick 內容的關係,確保使用者按一下搜尋按鈕時會呼叫 search 函數。

  7. 若要新增 search 函數,請將下列程式碼放置在檔案中處理程式尾端並在最後一個 end 陳述式之前:
    function search()
       localMap.zoom = 13;
       
       // show an initial marker, as necessary to display the map at all
       // (the marker identifies only the zip code)
       localMap.addMarker(new MapMarker
          {address = zipField.text, description = "zipcode:  " + zipField.text});
    
       // Call the remote Yahoo! service, passing the zip code
       call lookupService.getSearchResults("YahooDemo", zipField.text)
          returning to showResults onException displayError;
    end
    請注意下列詳細資料:
    • EGL Google 地圖小組件包括縮放內容,此內容會指定地圖的比例。請不要指定用於北卡羅來納州預設地圖(其縮放值為 8)的大比例,而是將縮放值設為 13,此值所產生的地圖將顯示個別城市街道。
    • EGL Google 地圖小組件還包括 addMarker 函數,此函數接受類型為 MapMarker 的記錄,並識別輸入地址的地圖位置。

      在特定郵遞區號的這個起始顯示畫面中,您提供給 localMap.addMarker() 函數的唯一詳細資料就是郵遞區號本身。稍後,您將設定地址 內容以提供更多詳細資料,此內容用於顯示地址專屬的標記。

  8. 接下來,新增 showResults 函數,如果對 Yahoo! 服務的存取成功且沒有錯誤,則將呼叫此函數。 請將下列程式碼放置在檔案中 search 函數之後並在最後一個 end 陳述式之前:
    function showResults(retResult ResultSet in)
       linkListing HyperLink[0];
       for(i INT from 1 to retResult.result.getSize() by 1)
          newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};
          newLink.setAttribute("address", retResult.result[i].Address + ", "
             + retResult.result[i].city + ", " + retResult.result[i].state);
          newLink.setAttribute("title", retResult.result[i].Title);
          newLink.onClick ::= mapAddress;
          linkListing.appendElement(newLink);
       end
       listingBox.setChildren(linkListing);
    end	
    對該服務的呼叫會傳回抵押公司詳細資料陣列。請考量 showResults 函數的以下各個方面:
    • 每一個元素都包含「標題」(即公司名稱)和地址。
    • showResults 函數會建立超鏈結小組件陣列,並讀取整個輸入陣列。針對輸入陣列中的每一個元素,該函數會在超鏈結小組件陣列中建立一個元素。
    • 如下列宣告所示,每一個超鏈結小組件都具有可顯示的文字及填補項,並且包括位置保留元 (#),而不是網址:
      newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};

      超鏈結會導致呼叫程式碼,而不是呼叫網址。 不過,位置保留元的顯示狀態可確保超鏈結以類似方式顯示文字,即具有底線和顏色,猶如使用者按一下超鏈結可開啟網站。

    • 函數會呼叫 setAttribute 函數,以將值放置在小組件專屬之記憶體區域中的 DOM 樹狀結構內。尤其是函數將先儲存標題,然後儲存地址,以供另一個函數擷取。
    • 至於每一個超鏈結小組件,showResults 函數會透過將 mapAddress 函數指定給 onClick 事件來設定執行時期行為。
    • 完整的超鏈結小組件陣列將作為清單方框的唯一子項予以指定。
  9. showResults 函數之後放置下列函數:
    function mapAddress(e Event in)
    
       // Show the marker when the user clicks the link
       businessAddress STRING = e.widget.getAttribute("address") as STRING;
       businessName STRING = e.widget.getAttribute("title") as STRING;
       localMap.addMarker(new MapMarker { 
          address = businessAddress, 
          description = businessName} );
    end

    當使用者在執行時期按一下超鏈結時,mapAddress 函數會擷取設定於 showResults 函數中的屬性,並在顯示的地圖上設定標記。

  10. 現在,將新增異常狀況處理程式,當存取 Yahoo! 服務失敗時,此異常狀況處理程式會接收資料。請將下列程式碼放置在檔案中 mapAddress 函數之後並在最後一個 end 陳述式之前:
    function displayError(ex AnyException in)
       DojoDialogLib.showError("Yahoo Service",
                               "Cannot invoke Yahoo Local Service: " 
                               + ex.message, null);
    end

    DojoDialogLibcom.ibm.egl.rui.dojo.samples 專案中的「程式庫」組件,您已在第 2 課中將該組件新增至工作區。該程式庫中的 showError 函數會在對話框中顯示資訊。函數呼叫包括名為 message 的字串,在異常狀況記錄中,此字串是 EGL 執行時期程式碼傳遞至 displayError 函數的內容。

  11. 按 Ctrl+Shift+F 來對程式碼執行格式化,按 Ctrl+Shift+O 來解析參照,然後儲存檔案。如果在原始檔中看到錯誤,請將程式碼與第 11 課結束之後所完成之 MapLocatorHandler.egl 的程式碼中的檔案內容進行比較。

測試新的 Portlet

由於此 Portlet 獨立工作,所以您可以單獨對其進行測試。

  1. 請確保儲存檔案,然後按一下預覽 這時,EGL 會顯示具有預設北卡羅來納州地圖的項目表單。
  2. 輸入下列郵遞區號:
    10001
    此郵遞區號指的是曼哈頓市中心區。
  3. 按 Enter 鍵,或按一下搜尋按鈕。 這時,抵押公司清單會顯示在畫面左下端。右側是紐約市地圖。
    曼哈頓市中心區地圖。
    註: 「Yahoo! 在地搜尋服務」有時不傳回任何資料,在這種情況下會因「空值異常狀況」而顯示錯誤訊息。缺少資料的情況大部分發生在星期日。如果服務不可用或不傳回資料,請按一下取消,然後等待稍後再完成指導教學。

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

  4. 按一下左側直欄中的任何名稱。 地圖會顯示標記,此標記用於顯示公司位置。如果將游標移至標記上方,則會顯示公司的名稱。
  5. 重做相同的搜尋,或搜尋鄰近的郵遞區號,例如 10009。您放置在地圖上的標記將保持不動。另請注意,Yahoo! 會在與您指定的郵遞區號相鄰的郵遞區號中搜尋擷取的地址。
  6. 如果要在執行每一次搜尋之前移除所有標記,請按一下程式碼標籤,並在 showResults 函數頂端新增下列行:
    localMap.removeAllMarkers();  
  7. 預覽標籤中測試您的工作。
  8. 關閉檔案。

課程檢查點

您瞭解了如何完成下列作業:
  • 建立和使用基於「本端搜尋服務」的變數。
  • 對使用者按鍵做出回應。
  • 使用 DOM 樹狀結構將值從一個函數傳遞至另一個函數。
  • 開始使用地圖小組件。

在下一節課程中,您將在應用程式中內含新的處理程式。

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

意見