EGL ウィザードおよび Rich UI エディターを使用して、計算器の作成を開始します。
Rich UI エディターの「設計」面に内容をドラッグすることで、Web ページにウィジェットを追加できます。 ドラッグ・アンド・ドロップとそれに続くエディターとの対話により、開発している Rich UI ハンドラーのソース・コードが更新されます。
デフォルトでは、ウィジェット・パレットはエディターの右側にあり、「データ」ビューはワークベンチの左下にあります。
ハンドラー
MortgageCalculatorHandler

計算器の UI を作成するには、以下のようにします。
inputRec

inputRec MortgageCalculationResult;



作成している書式の最初の各データ入力フィールド用のプロンプトをカスタマイズしたことになります。



100
この値は、ローン金額用に使用した DojoCurrencyTextBox ウィジェットのデフォルトの幅と同じです。
5
10
15
30
「values」ウィンドウは、以下のイメージのようになるはずです。

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
「設計」面をクリックすると、「Term:」行の下に新しい行が表示されます。


buttonLayout



calculationButton
Calculate
次に、inputRec 変数をエディターにドラッグした際に作成された関数に、このボタンをバインドする必要があります。
processImage
tools/spinner.gif
このイメージは、com.ibm.egl.rui.dojo.samples/WebContent フォルダーにあります。 この開発環境では、ワークスペース内にあるすべてのプロジェクトの WebContent フォルダーを、単一の仮想フォルダーとして取り扱います。
paymentLabel
ここでラベル・ウィジェットを使用するのは、ユーザーがこのフィールドを変更することはないためです。
アプリケーションが計算を実行し、内容を更新します。$0.00

errorLabel

次の演習では、ここで作成したインターフェースをサポートするコードを追加します。