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

第 8 課:建立計算歷程處理程式

建立表格,您可以在該表格中按一下某一列,以顯示先前的計算。

在本課程中,您將使用 DataGrid 小組件來建立表格。DataGrid 小組件具有互動和視覺化呈現的進階功能,使其比 GridLayout 小組件更適合於顯示記錄陣列。

在第 4 課中,您已將記錄變數拖曳至編輯器,以建立 GridLayout 小組件。 在本課程中,您會將記錄陣列拖曳至編輯器,依預設,這會建立 DataGrid 小組件。

建立處理程式

  1. handlers 套件中,建立名為 CalculationHistoryHandler 的「多元使用者介面」處理程式。 這時,處理程式會在「多元使用者介面」編輯器的「設計」視圖中開啟。
  2. 刪除預設 GridLayout 小組件。
  3. 建立一個變數,以存放 MortgageCalculationResult 記錄陣列。
    1. 用滑鼠右鍵按一下「EGL 資料」視圖的背景,然後按一下新建 > EGL 變數
    2. 在「建立新的 EGL 資料變數」精靈的建立類型區段中,選取 MortgageCalculationResult 記錄,這與您在第 4 課中所執行的動作相同。
    3. 針對輸入欄位的名稱,輸入下列名稱:
      historyResults
    4. 陣列內容下面,選取陣列勾選框。請勿指定大小。
      已設定精靈,以建立記錄陣列。
    5. 按一下完成
  4. 將新變數拖曳至「多元使用者介面」編輯器中的「顯示」版面。 這時,EGL 會顯示「插入資料」精靈。此精靈與您在第 4 課中看到的精靈相同,只是由於您拖曳至編輯器的變數是一個動態陣列,而導致具有不同的預設值。
  5. 在「插入資料」精靈中進行下列變更:
    1. 建立適用於以下內容的小組件下面,保留唯讀資料的預設值。
    2. 取消勾選 interest 欄位的勾選框。
    3. 如下所示變更剩餘欄位的標籤:
      • loanAmount 變更為本金
      • interestRate 變更為利率
      • term 變更為年數
      • monthlyPayment 變更為付款金額
      精靈會將這些標籤用作格線的直欄標頭。
    4. 取消勾選新增對格式化和驗證的支援勾選框。 這時,已完成的精靈應該與下圖相似:
      精靈頁面顯示您選取要在格線中顯示的資料。
    5. 按一下完成。網頁的外觀如下所示。
      空白格線具有包含四個直欄的標頭。
    您將在「程式碼」視圖中對剩餘的計算歷程處理程式進行編碼。
  6. 在編輯器的底端,按一下程式碼標籤。
  7. 在 historyResults_ui DataGrid 小組件的宣告中,於 columns 內容之前新增下列內容:
    selectionMode = DataGridLib.SINGLE_SELECTION,
    指定的值會確保使用者只能選取格線的一列,而不能選取多列。
  8. 在設定 selectionMode 之後的行中,鍵入下列程式碼:
    selectionListeners ::= cellClicked,

    您剛剛更新了接聽器內容,此內容會以陣列元素順序來執行函數的陣列。尤其是當您已將函數附加至與 selectionListeners 內容相關聯的函數陣列時。 稍後,您將在本課程中對新函數進行編碼。

    接聽器函數在回應使用者動作時執行,例如按一下動作或在某些情況下,回應用於選取/取消選取列或更新勾選框的函數呼叫時。

  9. 變更直欄的預設寬度,以使它們適合於較小的 Portlet 視窗:
    • 將「本金」直欄的寬度設為 80
    • 將「利率」直欄的寬度設為 80
    • 將「年數」直欄的寬度設為 50
    • 將「付款金額」直欄的寬度設為 70
  10. 在剛指定的每一個寬度值之後,在相同的設定值區塊(具有大括弧的區域)中,設定 alignment 內容,以將每一直欄中的數字向右對齊:
    , alignment = DataGridLib.ALIGN_RIGHT
    例如,「本金」直欄的宣告現在與下列程式碼相似:
    new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. formatter 內容新增至其中三個直欄宣告,如下所示:
    1. 針對「本金」直欄,參照自訂 formatDollars 函數,您將在本課程中稍後撰寫此函數:
      , formatters = [ formatDollars ]
      現在,整個宣告與下列程式碼相似:
      new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. 針對「利率」直欄,新增下列程式碼:
      , formatters = [ DataGridFormatters.percentage ]
    3. 不需要對「年數」直欄執行特殊格式化。
    4. 針對「付款金額」直欄,新增下列程式碼:
      , formatters = [ formatDollars ]
      現在,此程式碼將具有下列內容:
      historyResults_ui 程式碼的 Snapshot

      一般而言,formatters 內容會採用函數名稱陣列。可以預先定義這些函數,也可以撰寫自訂函數。例如,percentage 函數在隨附於 com.ibm.egl.rui.widgets 專案的 DataGridFormatters 程式庫中予以提供。

  12. 將下列程式碼新增至 start 函數:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
    如先前所述,當服務傳回新的計算時,使用 Infobus 來呼叫函數。
  13. start() 函數之後新增 addResultRecord 函數:
    // Update the grid to include the latest mortgage calculation
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    這裡,會將送入的值強制轉型為 MortgageCalculationResult 記錄。然後,將新結果附加至結果陣列,並更新資料內容。該更新會導致小組件進行重新整理。
  14. 新增下列接聽器函數:
    // Publish an event to the InfoBus whenever the user selects an old calculation
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
    end
    該函數會擷取使用者選取的資料網格列,並將該列提供給 Infobus。Infobus 會呼叫已訂閱 "mortgageApplication.mortgageResultSelected" 事件的任何處理程式中的函數。
  15. 新增下列函數,以對貨幣金額執行格式化:
    function formatDollars(class string, value string, rowData any in)
       value = mortgageLib.formatMoney(value);
    end
    因為參數修飾元依預設是 InOut,所以第二個參數的值可用於 EGL 執行時期程式碼。

    請注意,您正在重複使用 mortgageLib 程式庫中的 formatMoney 函數。

  16. 透過按 Ctrl+Shift+F 對檔案執行重新格式化。然後,透過按 Ctrl+Shift+O 來移除錯誤標記,並儲存檔案。如果在原始檔中看到錯誤,請將程式碼與第 8 課結束之後所完成之 CalculationHistoryHandler.egl 的程式碼中的檔案內容進行比較。
  17. 關閉檔案。

課程檢查點

您瞭解了如何完成下列作業:
  • 拖放記錄陣列,以建立資料網格。
  • 在按一下資料網格的某個資料格時,觸發事件。
  • 對資料網格中的直欄執行格式化。

在下一節課程中,您會將此處理程式與應用程式的其餘組件整合。

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

意見