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

第 7 課:建立主多元使用者介面處理程式

主頁面使用 EGL 入口網站小組件來管理不同處理程式之間的通訊。
如先前課程中的附註所述,「多元使用者介面」賦予「模型視圖控制器 (MVC)」的常設記號新的意義,此 MVC 專為執行於瀏覽器中的邏輯進行重新定義。同樣地,「多元使用者介面」也賦予入口網站Portlet 等字組新的意義。

一般而言,入口網站是用於控制獨立使用者介面元件(稱為 Portlet)的網頁。在這些術語的傳統使用中,入口網站是伺服器端程式碼。由入口網站內嵌的 Portlet 是網頁 Snippet,每一個 Snippet 都可能儲存在不同的遠端位置。 網頁是在入口網站程式碼所在的伺服器上進行建構的,已完成的網頁會從伺服器傳送至瀏覽器。

相反,「多元使用者介面」入口網站是在瀏覽器中執行的小組件,並參照一組 Portlet 小組件,其中每一個 Portlet 小組件都會參照「多元使用者介面」處理程式。下面的區段將示範如何對「多元使用者介面」中的入口網站和 Portlet 進行編碼。

建立 MainHandler 處理程式

  1. 在 MortgageUIProject 專案的 handlers 套件中建立新的「多元使用者介面」處理程式,這與您在前一節課程中執行的動作相同。 在此情況下,處理程式名稱為 MainHandler。 這時,處理程式會在「多元使用者介面」編輯器的「設計」視圖中開啟。
  2. 如果在「選用區」視圖中看不到範例抽屜,請按一下「選用區」視圖左側的重新整理選用區按鈕。
    「重新整理選用區」按鈕
  3. 選取為處理程式建立的起始 GridLayout 小組件。請確保整個小組件都包括在點虛線內。
    已選取起始 GridLayout 小組件。
  4. 按 Delete 鍵以移除小組件。
  5. 從選用區的範例抽屜中,將入口網站小組件拖曳至編輯器,並為其指定下列名稱:
    mortgagePortal
  6. 在編輯器的底端,按一下程式碼標籤。
  7. 在 mortgagePortal 宣告中,將欄數變更為 2,並將欄寬設為 350 和 650。 檔案內容如下所示:
  8. 在 mortgagePortal 宣告之後,跳過一行並新增下列宣告:
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    這些陳述式會宣告兩個變數,其中每一個變數都基於「處理程式」組件;在此情況下,就是在本指導教學中開發的「處理程式」組件。
  9. 跳過一行並新增下列程式碼:
    calculatorPortlet Portlet{children = [calculatorHandler.ui],
       title = "Calculator"};
    resultsPortlet Portlet{children = [resultsHandler.ui],
       title = "Results", canMove = TRUE, canMinimize = TRUE};
    每一個新的 Portlet 變數都宣告為參照內嵌處理程式中的起始使用者介面。
  10. 若要移除錯誤標記,請按 Ctrl+Shift+O。
  11. start 函數進行編碼,如下所示:
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Subscribe to calculation events 
       InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);
    
       // Initial state is minimized
       resultsPortlet.minimize();
    end	
    此程式碼將執行下列動作:
    • 將先前宣告的 Portlet 新增至入口網站:其中一個用於顯示計算機,另一個用於顯示圓餅圖。
    • 請確保主處理程式與 CalculationResultsHandler 訂閱相同事件,在本案例中是為了確保當遠端服務傳回抵押計算時,restorePortlets 函數會執行。
    • 最小化第二個 Portlet,以便在執行時期,一開始看不到圓餅圖。
  12. start 函數之後,新增將在服務傳回計算時進行呼叫的函數:
    function restorePortlets(eventName STRING in, dataObject ANY in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    Portlet 專屬的 restore 函數會導致顯示圓餅圖。
  13. 若要移除錯誤標記,請按 Ctrl+Shift+O,然後儲存檔案。如果在原始檔中看到錯誤,請將程式碼與第 7 課結束之後所完成之 MainHandler.egl 的程式碼中的檔案內容進行比較。

測試入口網站

測試主入口網站,以確保結果 Portlet 會從計算 Portlet 接收變更。
  1. 在編輯器的底端,按一下預覽 這時,EGL 會顯示在其中宣告入口網站的主處理程式。 此處理程式會顯示兩個子層 Portlet。
    計算機 Portlet 顯示預設值,結果 Portlet 已最小化。
  2. 按一下計算 這時,動態影像會指示處理程序正在進行。當計算完成時,會顯示圓餅圖。
    還原的結果 Portlet 會顯示圓餅圖。
  3. 將游標移至其中一個圓餅圖區段上方,以顯示擴充視圖。
  4. 變更任何計算值,然後再次按一下計算 圓餅圖會反映本金與利息之間的比率變更。
  5. 關閉檔案。

課程檢查點

您瞭解了如何完成下列作業:
  • 建立入口網站小組件。
  • 將 Portlet 新增至入口網站,並透過此方式,使您在先前課程中建立的處理程式可用。

在下一節課程中,您將新增 Portlet,以列出抵押計算。

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

意見