透過將內容拖曳至「多元使用者介面」編輯器的「設計」版面,可以將小組件新增至網頁。拖放動作以及與編輯器的後續互動,將更新正在開發的「多元使用者介面」處理程式的原始碼。
依預設,小組件選用區位於編輯器右側,「資料」視圖位於工作台左下方。
handlers
MortgageCalculatorHandler

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

inputRec MortgageCalculationResult;



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



100此值與用於貸款金額的 DojoCurrencyTextBox 小組件的預設寬度相同。

5
101530「值」視窗應該如下圖所示:

inputRec MortgageCalculationResult {term = 30};
function start() inputRec.term = 30; end
inputRec_term_controller Controller
{ @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
控制器宣告會確保將使用您指定給 inputRec.term 變數的值來起始設定組合框。

6按一下「設計」版面之後,新列會顯示在「期限」列下面。


buttonLayout



calculationButton
計算接下來,必須將此按鈕連結至為您建立的函數,此函數是在您將 inputRec 變數拖曳至編輯器時建立的。

processImage
tools/spinner.gif
此影像位於 com.ibm.egl.rui.dojo.samples/WebContent 資料夾中。 開發環境會將您工作區中所有專案的 WebContent 資料夾視為單個虛擬資料夾。
paymentLabel因為使用者不會變更此欄位,所以應該在這裡使用標籤小組件。應用程式將計算並更新內容。
$0.00

errorLabel

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