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

EGL により、初期 UI としてグリッド・レイアウトが自動的に作成されました。デフォルトでは、このウィジェットには 4 つの行と 3 つの列があります。このレイアウトと、演習 1 で作成したスケッチを比較してください。スケッチで使用したのは、4 つのセルのみです。

後のステップで、グリッド・レイアウトの行数と列数を変更するための別の方法を説明します。
この Rich UI ハンドラーのメイン・レイアウトでは、ハンドラーによって、最初の行に 2 セットのボタンが表示され、2 番目の行には各コンテンツ (左側にレコードのリスト、右側に 1 件のレコードの詳細を表示するためのレイアウト) が表示されます。データ・グリッドを作成するには、以下のステップを実行します。

allPayments

allPayments paymentRec[0];





allPayments_ui DataGrid {
layoutData = new GridLayoutData
{row = 2, column = 1
verticalAlignment = GridLayoutLib.VALIGN_TOP},
columns =[
new DataGridColumn{name = "category",
displayName = "Type",
width = 90},
new DataGridColumn{name = "description",
displayName = "Description",
width = 120},
new DataGridColumn{name = "amount",
displayName = "Amount due",
width = 90}
],
data = allPayments as any[],
selectionMode = DataGridLib.SINGLE_SELECTION};
function start()
allPayments_ui.data =
[
new paymentRec{category = 1, description = "test01", amount = 100.00},
new paymentRec{category = 2, description = "test02", amount = 200.00},
new paymentRec{category = 3, description = "test03", amount = 300.00}
]; end

「設計」面に「追加」、「削除」、および 「サンプル」の各ボタンを作成するには、以下のステップを実行します。
buttonLayout


addButton
addRow
deleteButton
deleteRow

変数を作成するには、以下のようにします。
selectedPayment

selectedPayment paymentRec;
グリッド・レイアウトを作成するには、以下のステップを実行します。

editPane
「OK」をクリックします。

| デフォルト名 | 変更名 |
|---|---|
| paymentID | Key: |
| category | Category: |
| description | Description: |
| amount | Amount: |
| fixedPayment | Fixed pmt: |
| dueDate | Due date: |
| payeeName | Payee: |
| payeeAddress1 | Address 1: |
| payeeAddress2 | Address 2: |
設定した画面を以下に示します。





「クリア」および「保存」ボタンを追加するには、以下のステップを実行します。
detailButtonLayout


次の演習では、データベースにアクセスするサービスを作成します。