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

第 4 課:建立計算機的使用者介面

先使用 EGL 精靈,然後使用「多元使用者介面」編輯器,開始建置計算機。

透過將內容拖曳至「多元使用者介面」編輯器的「設計」版面,可以將小組件新增至網頁。拖放動作以及與編輯器的後續互動,將更新正在開發的「多元使用者介面」處理程式的原始碼。

有兩個拖放內容的來源可用:
  • 小組件類型的選用區
  • 「EGL 資料」視圖,該視圖可提供資料類型定義(例如,「EGL 記錄」組件)。先從此視圖中拖曳內容,然後從小組件類型中選擇可顯示您所選資料類型的小組件類型。

依預設,小組件選用區位於編輯器右側,「資料」視圖位於工作台左下方。

建立多元使用者介面處理程式

  1. MortgageUIProject 專案中,選取 EGLSource 資料夾,然後按一下功能表列上的新建多元使用者介面處理程式按鈕。
    「新建多元使用者介面處理程式」圖示是功能表列中第二個圖示群組內的第三個圖示(共四個)。
  2. 在「新建多元使用者介面處理程式組件」視窗中,輸入下列資訊:
    1. 套件欄位中,輸入下列名稱:
      handlers
    2. EGL 原始檔名稱欄位中,輸入下列名稱:
      MortgageCalculatorHandler
    3. 按一下完成
    這時,新的處理程式會在「多元使用者介面」編輯器中的「設計」視圖內開啟。 EGL 會在 EGLSource 資料夾中為您建立 handlers 套件。
    依預設,「多元使用者介面」編輯器會在「設計」視圖中開啟,並在右側顯示小組件選用區。

建構使用者介面

若要建構計算機的使用者介面,請執行下列動作:

  1. 建立記錄變數。
    1. 依預設,「EGL 資料」視圖位於工作台左下角,列出目前在編輯器中開啟之處理程式的所有基本變數和記錄變數。用滑鼠右鍵按一下 MortgageCalculatorHandler 處理程式項目下面的空白空間。 按一下新建 > EGL 變數
    2. 在「建立新的 EGL 資料變數」精靈中,要求基於 MortgageCalculationResult「記錄」組件的新記錄變數:
      • 確保將選取類型設為記錄
      • 選取 MortgageCalculationResult 記錄。此記錄類型應該是清單中的第一個類型。
      • 陣列內容區段中,保持清除陣列
      • 輸入欄位的名稱欄位中,輸入下列文字:
        inputRec
      • 按一下完成
    「建立新的 EGL 資料變數」精靈。
    此過程會在處理程式的原始碼中建立下列記錄宣告:
    inputRec MortgageCalculationResult;
    此過程還會在「EGL 資料」視圖中顯示新的記錄變數,讓您可以將該變數拖曳至編輯器。
    「EGL 資料」視圖會顯示 inputRec 變數。
  2. EGL 自動為您建立了 GridLayout 小組件,以作為起始使用者介面。依預設,此小組件具有四個列和三個直欄。 您可以使用不同的機制來改變列數和直欄數,如下所示:
    1. 用滑鼠右鍵按一下 GridLayout 小組件,以強調顯示某個資料格。
    2. 按一下刪除 > 列
    3. 再次用滑鼠右鍵按一下 GridLayout 小組件,以強調顯示某個資料格。
    4. 按一下刪除 > 直欄
    5. 現在,跳至「內容」視圖,此視圖依預設是編輯器窗格下面的其中一個標籤頁。
    6. 在「一般」頁面上,將列數內容設為 1,並將直欄數內容設為 1
      「內容」視圖。
    已修改的 GridLayout 小組件會保留網頁的起始使用者介面,但是現在,該小組件具有單一資料格,您可以將其他內容新增至該資料格。
  3. 按一下「EGL 資料」視圖中的 inputRec 變數,並將該變數從「EGL 資料」視圖拖曳至編輯器中 GridLayout 小組件的一個資料格。
    將記錄從「資料」視圖拖曳至 GridLayout 小組件。
    這時,EGL 會顯示「插入資料」精靈的配置資料小組件頁面。請利用這個頁面來配置 EGL 根據您拖曳至編輯器的記錄中的欄位建立的小組件。
  4. 配置資料小組件頁面上,進行下列變更:
    1. 建立適用於以下內容的小組件區段中,按一下可編輯的資料。此選項會決定 EGL 顯示在精靈中的預設小組件,所有小組件都沒有唯讀限制。
    2. loanAmount 欄位的「小組件類型」直欄中,按一下「小組件類型」直欄中的現行值,再按下移鍵,然後選取 DojoCurrencyTextBox 此小組件提供了適用於金額的格式化和驗證。
    3. 保留 interestRate 小組件的預設 DojoTextField 小組件。
    4. term 欄位的「小組件類型」直欄中,按一下「小組件類型」直欄中的現行值,再按下移鍵,然後選取 DojoComboBox
    5. 取消勾選 monthlyPaymentinterest 欄位的勾選框。 稍後,您將為 monthlyPayment 欄位新增小組件;interest 欄位不是此使用者介面的組件。
    6. 如下所示變更「標籤」直欄中的值(包括冒號):
      • 將 "loanAmount" 變更為「貸款金額:」
      • 將 "interestRate" 變更為「利率:」
      • 將 "term" 變更為「期限:」

      這樣,您就自訂了正在建置的表單上第一個資料輸入欄位中每一個欄位的提示。

    7. 請確保選取了新增對格式化和驗證的支援。此選項會為每一個小組件新增一個標籤和控制器,以及套用至新格線佈置中所有內容的表單管理程式和相關函數。請勿選取使用錯誤標籤以支援錯誤訊息。此選項會為任何控制器專屬的錯誤訊息提供一個錯誤標籤,但是本指導教學使用其他機制來指示已發生錯誤。
    8. 檢視下圖。當您的頁面基本相同時,請按一下完成
    包含所有已更正之欄位的「配置資料小組件」頁面。
    這時會顯示「設計」視圖,其中包括新的內部格線佈置,此格線佈置位於原始的格線佈置內並包含新內容。
    一個格線佈置顯示在另一個格線佈置內。
  5. 若要儲存工作,請按 Ctrl+S。
  6. 調整第二個和第三個輸入欄位的大小,以使外觀更加一致:
    1. 強調顯示利率的輸入欄位。 點虛線應該僅含括該欄位。
      只會強調顯示「利率」標籤後面的方框。
    2. 在「內容」視圖中的「位置」頁面上,為寬度內容輸入下列值:
      100
      此值與用於貸款金額的 DojoCurrencyTextBox 小組件的預設寬度相同。
    3. 針對期限欄位,請重複步驟 a 和步驟 b。 按一下「顯示」版面以查看變更。
  7. 設定 Dojo 組合框的有效值和預設值:
    1. 強調顯示期限欄位時,按一下「內容」視圖的「一般」頁面。
    2. 內容旁邊,按一下省略號 (...),以顯示「」視窗。
      「值」視窗。
    3. 從清單中新增或移除字串欄位中輸入下列數字:
      5
    4. 按一下新增
    5. 在每一次新增之後按一下新增,以輸入下列每一個數字:
      101530
      「值」視窗應該如下圖所示:
      「值」視窗中的每一個數字都顯示在一個新行中。
    6. 按一下確定
  8. 若要確保組合框的起始顯示畫面包括值 30,請如下所示執行動作:
    1. 按一下「多元使用者介面」編輯器的程式碼標籤。
    2. 設定期限的預設值。跳至在其中宣告 inputRec 記錄的行,並將設定值區塊新增至宣告,如下所示:
      inputRec MortgageCalculationResult {term = 30};
      您將預設值內含在宣告中,這樣是最簡單的方式。 不過,您可以如下所示更新 start() 函數,效果相同:
      function start()
         inputRec.term = 30;
      end
  9. 查看原始碼時,請檢閱下列控制器宣告,此控制器宣告會建立 inputRec.term 變數與 Dojo 組合框之間的關聯:
    inputRec_term_controller Controller 
       { @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
    控制器宣告會確保將使用您指定給 inputRec.term 變數的值來起始設定組合框。
  10. 若要儲存工作,請按 Ctrl+S。
  11. 按一下「多元使用者介面」編輯器的預覽標籤。 這時,網頁會顯示執行時期顯示畫面,並且應該如下圖所示:
    顯示這些欄位,且組合框具有起始設定值。
    如果需要重新整理顯示畫面,請按一下「多元使用者介面」工具列上最右側的圖示,此工具列位於「預覽」頁面的右上方且如下所示:
    「多元使用者介面」工具列
  12. 將新內容新增至內部 GridLayout 小組件,此小組件用於存放記錄詳細資料:
    1. 按一下「多元使用者介面」編輯器的設計標籤。
    2. 用滑鼠右鍵按一下名為 inputRec_ui 的內部 GridLayout 小組件。 該名稱會顯示在「內容」視圖的頂端。
    3. 在「內容」視圖的「一般」頁面上,將列數內容變更為下列值:
      6
      按一下「設計」版面之後,新列會顯示在「期限」列下面。
      現在,內部 GridLayout 小組件具有六列。
  13. 新增第二個內部 GridLayout 小組件,以存放提交按鈕。
    1. 從選用區的佈置抽屜中,將 GridLayout 小組件拖曳至第一個空白列中的第一個資料格。
      捨棄格線佈置。
      您將使用 GridLayout 小組件來放置提交按鈕和動態處理影像。為小組件指定下列名稱:
      buttonLayout
    2. 用滑鼠右鍵按一下新的小組件,以顯示以下所示的功能表。
      刪除列。
    3. 選取刪除,然後按一下 現在,「內容」視圖的「一般」頁面指示格線佈置具有 2 列。
    4. 使用「內容」視圖或剛剛使用的功能表來修改 buttonLayout,以包含一個直欄。 如果執行了錯誤動作並要回復至較早的顯示畫面,請按 Ctrl+Z。
    5. buttonLayout 處於作用中時,跳至「內容」視圖的「佈置」頁面。如下所示執行動作,以便佈置在另一個空白列中置中:
      • 水平對齊內容變更為 CENTER
      • 水平跨距內容變更為 2
      新的 GridLayout 小組件在空白列中置中。
  14. 若要儲存工作,請按 Ctrl+S。
  15. 建立一個提交按鈕,並將其連結至片段函數:
    1. 從選用區的顯示和輸入抽屜中,將「Dojo 按鈕」拖曳至 buttonLayout 的上面那個資料格。
      將按鈕拖曳至兩個資料格中的第一個資料格。
    2. 為按鈕指定下列名稱:
      calculationButton
    3. 在「內容」視圖的「一般」頁面上,將文字內容變更為下列標籤:
      計算
      接下來,必須將此按鈕連結至為您建立的函數,此函數是在您將 inputRec 變數拖曳至編輯器時建立的。
    4. 事件標籤上,選取具有 onClick 事件的列。按一下「函數」直欄中的空白空間,以顯示方向鈕。按一下方向鈕並選取 inputRec_form_Submit。 您將在下一節課程中完成此函數的程式碼。
      功能表顯示兩個可用的函數。
      請注意該列最後一個直欄中的加號。您可能已按一下此按鈕來建立新函數,以連結至計算按鈕。 工作台將轉至「程式碼」視圖並自動建立片段函數,此函數不含程式碼但已備妥供您輸入。
  16. 新增動態影像,用於指示抵押計算正在進行。
    1. 從選用區的顯示和輸入抽屜中,將「影像」小組件拖曳至計算按鈕下面的空白資料格。
    2. 在「新建變數」視窗中,為影像指定下列名稱:
      processImage
    3. 在「內容」視圖的「一般」頁面上,在原始檔欄位中為影像指定原始檔:
      tools/spinner.gif

      此影像位於 com.ibm.egl.rui.dojo.samples/WebContent 資料夾中。 開發環境會將您工作區中所有專案的 WebContent 資料夾視為單個虛擬資料夾。

    4. 也是在「內容」視圖的「外觀」頁面上,取消勾選可見的勾選框。 此影像將保持隱藏,直到按一下計算按鈕為止。
    5. 也是在「內容」視圖的「佈置」頁面上,將水平對齊內容設為 CENTER
  17. 若要儲存工作,請按 Ctrl+S。
  18. 新增小組件,以顯示計算結果。
    1. 將 TextLabel 小組件從選用區的顯示和輸入抽屜,拖曳至第五列的第一個資料格,此資料格位於新圖形的下面。為小組件指定下列名稱:
      paymentLabel
      因為使用者不會變更此欄位,所以應該在這裡使用標籤小組件。應用程式將計算並更新內容。
    2. 在「內容」視圖的「一般」頁面上,為文字內容輸入下列值(包括錢幣符號):
      $0.00
    3. 在相同頁面上,將字型大小內容設為 18
    4. 也是在「內容」視圖的「佈置」頁面上,設定下列內容:
      • 水平對齊設為 CENTER
      • 水平跨距設為 2
      按一下「設計」版面時,該網頁現在與下圖相似:
      每月付款金額欄位採用大字型顯示。
  19. 新增適用於一般錯誤(例如,連接服務時所發生的問題)的錯誤欄位。
    1. 將 TextLabel 小組件從選用區的顯示和輸入抽屜,拖曳至最後一個空白列的第一個資料格,並指定下列名稱:
      errorLabel
    2. 變更 TextLabel 小組件的下列內容:
      • 在「一般」頁面上,刪除文字內容的預設值,即 "TextLabel"。
      • 也是在「一般」頁面上,按一下顏色內容欄位旁邊的空白按鈕,然後按一下名稱格式並向下捲動清單,然後選取紅色。按一下確定。這會設定顯示在標籤中的任何訊息的字型顏色。
      • 在「位置」頁面上,將寬度內容設為 250
      • 在「佈置」頁面上,將水平跨距內容變更為 2
    3. 按一下「設計」區域中的任意位置,然後按 Ctrl+S 以儲存處理程式。
已完成的介面應該與下圖相似:
已完成的介面包括三個輸入欄位、「計算」按鈕和「付款金額」欄位。
若要檢閱原始碼,請按一下編輯器窗格底端的程式碼標籤。程式碼應該與第 4 課結束之後所完成之 MortgageCalculatorHandler.egl 的程式碼中的檔案內容相符。

課程檢查點

您瞭解了如何執行下列作業:
  • 建立「多元使用者介面」處理程式。
  • 在「EGL 資料」視圖中建立變數。
  • 透過將記錄變數拖曳至「多元使用者介面」編輯器來更新使用者介面。
  • 使用「EGL 多元使用者介面」編輯器來變更介面。
  • 使用「內容」視圖來格式化介面。

在下一節課程中,您將新增程式碼,以支援您剛剛建立的介面。

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

意見