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