< 前へ | 次へ >

演習 4: Rich UI ハンドラーの作成

EGL ウィザードを使用し、その次に Rich UI エディターを使用して、ハンドラーの作成を開始します。

Rich UI エディターの「設計」面に内容をドラッグすることで、Web ページにウィジェットを追加できます。 ドラッグ・アンド・ドロップとそれに続くエディターとの対話により、開発している Rich UI ハンドラーのソース・コードが更新されます。

内容のドラッグ・アンド・ドロップの実行元として、以下の 2 つを利用できます。
  • ウィジェット・タイプのパレット。
  • EGL レコード・パーツなどのデータ型定義を提供する「EGL データ」ビュー。 最初にこのビューから内容をドラッグし、次に、選択した型のデータを表示可能なウィジェット・タイプの中から選択します。

デフォルトでは、ウィジェット・パレットはエディターの右側にあり、「データ」ビューはワークベンチの左下にあります。

この演習では、Rich UI ハンドラーを作成し、データ・グリッドを追加してデータベースのすべての行を表示します。その後、グリッド・レイアウトを追加し、選択したレコードのフィールドを表示します。

初期レイアウトの作成

ハンドラーを作成するには、以下のステップを実行します。

  1. 「PaymentClient」プロジェクトで、「EGLSource」フォルダーを選択し、「新規作成」 > 「Rich UI ハンドラー」とクリックします。
    「新規 Rich UI ハンドラー」アイコンは、メニュー・バーの 2 番目のアイコン・グループにある 4 つのアイコンのうちの 3 番目のものです。
  2. 「新規 Rich UI ハンドラー・パーツ」ウィンドウで、以下の情報を入力します。
    1. 「EGL ソース・ファイル名」フィールドに、以下の名前を入力します。
      PaymentFileMaintenance
    2. 「パッケージ」フィールドに、以下の名前を入力します。
      ハンドラー
    3. 「終了」をクリックします。
    Rich UI エディターの「設計」ビューに新規のハンドラーが開きます。 EGL により、EGLSource フォルダーに handlers パッケージが作成されます。
    デフォルトで Rich UI エディターは「設計」ビューで開き、ウィジェットのパレットが右側に表示されます。

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

  3. レイアウトのサイズを縮小するには、レイアウトをクリックして「プロパティー」ビューに移動します。このビューはデフォルトでは、エディター・ペインの下部にある複数のタブ付きページの 1 つです。「一般」ページで、行プロパティーと列プロパティーを両方とも 2 に設定してから、「設計」面をクリックします。
    デフォルトで Rich UI エディターは「設計」ビューで開き、ウィジェットのパレットが右側に表示されます。

    後のステップで、グリッド・レイアウトの行数と列数を変更するための別の方法を説明します。

    この Rich UI ハンドラーのメイン・レイアウトでは、ハンドラーによって、最初の行に 2 セットのボタンが表示され、2 番目の行には各コンテンツ (左側にレコードのリスト、右側に 1 件のレコードの詳細を表示するためのレイアウト) が表示されます。

一連のデータベース行のコンテンツを保持するためのデータ・グリッドの作成

レコード配列変数を Rich UI エディターにドラッグして、データ・グリッドを作成します。

データ・グリッドを作成するには、以下のステップを実行します。

  1. レコード配列変数を作成します。
    1. デフォルトではワークベンチの左下隅にある「EGL データ」ビューには、現在エディターで開いているハンドラーのすべてのプリミティブおよびレコード変数がリストされます。 PaymentFileMaintenance ファイルの項目の下にある空スペースを右クリックします。 「新規作成」 > 「EGL 変数」とクリックします。
      「EGL データ」ビュー
    2. 「新規 EGL Rich UI データ・フィールド」ウィザードで、以下のようにして、paymentRec レコードに基づいた新規レコード変数を要求します。
      • 「型の選択」「レコード」に設定されているようにします。
      • paymentRec レコードを選択します。このレコードは、リスト内で唯一のものである必要があります。
      • 「配列プロパティー」セクションで、「配列」チェック・ボックスを選択します。「サイズ」フィールドはブランクのままにしておきます。
      • 「フィールド名の入力」に、 以下の名前を入力します。
        allPayments
      • 「終了」をクリックします。
        「新規 EGL Rich UI データ・フィールド」ウィザード
    この処理では、ハンドラーのソース・コードに次のレコード宣言を作成します。
    allPayments paymentRec[0];
    これで、「EGL データ」ビューにレコード変数が作成され、この変数をエディターにドラッグできます。
    「EGL データ」ビューに inputRec 変数が表示されます。
  2. 「allPayments」レコード変数を、「EGL データ」ビューからレイアウトの左下のセルにドラッグします。
    「データ」ビューからレイアウト・ウィジェットへのレコードのドラッグ
    EGL により、「データの挿入」ウィザードの「データ・ウィジェットの構成」ページが表示されます。このページを使用して、EGL により作成されるウィジェットを構成します。ウィジェット・タイプは、「設計」面にドラッグしたレコード配列のフィールド・タイプに応じて異なります。
  3. 「データの挿入」ウィザードで、以下の変更を行います。
    1. 「以下に関するウィジェットを作成」は、デフォルト値である「読み取り専用データ」のままにします。
    2. allPayments 変数の下にあるチェック・ボックスは、表示の際に列として使用されるフィールドを示しています。 「なし」をクリックして、すべてのフィールドをクリアします。
    3. 以下のフィールドにチェック・マークを付けてください。
      • category
      • description
      • amount
    4. これらのフィールドのラベルを以下のように変更します。
      • 「category」「Type」に変更します。
      • 「description」「Description」に変更します。
      • 「amount」「Amount due」に変更します。
      ウィザードは、これらのラベルをグリッドの列見出しとして使用します。
    5. 「フォーマット設定および検証用サポートの追加 (Add support for formatting and validation)」をクリアします。 設定が完了した画面を以下に示します。
      設定が完了した「データ・ウィジェットの構成」ウィザード
    6. 「終了」をクリックします。以下のように、空のグリッドが表示されます。
      空のグリッドには、3 つの列で構成されたヘッダーがあります。
  4. 「プロパティー」ビューをクリックします。
    • 「DataGrid (allPayments_ui)」というタイトルが表示されることを確認します。表示されない場合は、データ・グリッドをクリックしてタイトルが表示されることを確認し、もう一度「プロパティー」ビューをクリックします。
    • 「一般」ページで、selectionMode プロパティーを「SINGLE」に変更します。このプロパティーは、ユーザーが一度に選択できるグリッドの行数は 1 行のみであることを示しています。
    • 「レイアウト」ページで、verticalAlignment プロパティーを「TOP」に変更します。
      DataGrid レイアウト・プロパティー・ページ
      このプロパティーにより、allPayments_ui データ・グリッドと、後で追加する詳細グリッドを一致させることができます。
  5. エディターの下部にある「ソース」タブをクリックして、作成済みのコードを表示します。この機会を利用して、データ・グリッドの 2 つの列幅を縮小してください。具体的には、category 列と amount 列について DataGridColumn 宣言を検討し、幅プロパティーをデフォルトの 120 ピクセルから 90 ピクセルに変更してください。 変更後のデータ・グリッド宣言を以下に示します。
    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};
  6. プロトタイプ・データを start 関数に追加します。この関数は、ハンドラーの onConstructionFunction プロパティーで参照され、ユーザーが最初に Web ページにアクセスする前に実行されます。具体的には、以下のように、レコード配列をデータ・グリッドの data プロパティーに割り当てます。
    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	
  7. ファイルをフォーマットするには、Ctrl-Shift-F をクリックします。
  8. 「プレビュー」タブをクリックします。
    プロトタイプ・データが表示された Web ページ
  9. ファイルを保存します。

最初のボタン・セットの追加

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

  1. 「設計」タブをクリックします。
  2. 「パレット」ビューで、「レイアウト」ドロワーに移動し、 GridLayout ウィジェット・タイプを見つけます。新規グリッド・レイアウトを、メイン・レイアウトの左上隅にドラッグします。次の名前を新規ウィジェットに割り当てます。
    buttonLayout
    ハンドラー内の新規グリッド・レイアウト
  3. 新規レイアウトをクリックし、セルを右クリックします。このメニューを使用すると、コンテンツを挿入または削除できます。
  4. 「削除」 > 「行」とクリックします。
  5. 再び新規レイアウトをクリックし、セルを右クリックして、「削除」 > 「行」をクリックします。 3 つの列から構成される単一行が残ります。
  6. 以下のようにして、「追加」ボタンを作成します。
    1. 「パレット」ビューで、「表示および入力 (Display and Input)」ドロワーに移動し、 さらに「ボタン (Dojo) (Button (Dojo))」に移動します。Dojo ボタン・ウィジェットを buttonLayout の左端のセルにドラッグします。
      新規 GridLayout ウィジェットへのボタンのドラッグ
    2. 次の名前をボタンに割り当てます。
      addButton
    3. 以下のようにして、「プロパティー」ビューに移動します。
      • 「一般」ページで、text プロパティーを Add に変更します。
      • 「イベント」ページで、「onClick」イベントの行を選択します。正符号 (+) が、行の右端に表示されます。この正符号をクリックし、ユーザーが「追加」ボタンをクリックしたときに呼び出される関数に対して、以下の名前を指定します。
        addRow
    「ソース」ビューが開き、addRow 関数が表示されます。 ここでこの関数を完成させるのではなく、Web ページのこのセクションのレイアウトを完了させます。「設計」タブをクリックして「設計」面に戻ります。
  7. 以下のようにして、「削除」ボタンを作成します。
    1. 「パレット」ビューで、「表示および入力 (Display and Input)」ドロワーに移動し、 さらに「ボタン (Dojo) (Button (Dojo))」に移動します。Dojo ボタン・ウィジェットを buttonLayout の中央のセルにドラッグします。
    2. 次の名前をボタンに割り当てます。
      deleteButton
    3. ボタンの「プロパティー」ビューに移動します。
      • 「一般」ページで、text プロパティーを Delete に変更します。
      • 「イベント」ページで、「onClick」イベントに次の関数名を割り当てます。
        deleteRow
    4. deleteRow 関数が表示されたら、「設計」タブをクリックします。
  8. 前のステップと同じプロセスを使用して、Dojo ボタンを buttonLayout の右端のセルに作成します。このボタンに sampleButton という名前を付け、text プロパティーを Sample に変更し、onClick 関数に対して sampleData という名前を使用します。 sampleData 関数が表示されます。
  9. 各ボタン用に作成したコードに注意して、ソース・コードを検査します。
  10. 「プレビュー」タブをクリックします。
    ボタンおよびプロトタイプ・データが表示された Web ページ
  11. ファイルを保存します。

単一行を処理するための変数およびレイアウトの追加

これまでのステップで、データベース行を保持するための配列を作成しました。 ここでは、単一行の変数を宣言してから、その変数を「設計」面にドラッグし、その行を表示するためのレイアウトを作成します。

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

  1. 「設計」タブをクリックして「設計」面を表示します。
  2. 多くの場合ワークベンチの左下にある「EGL データ」ビューの背景を右クリックします。「新規作成」 > 「変数」をクリックします。
  3. 「新規 EGL データ変数を作成します」ウィザードで、以下のようにして、paymentRec レコードに基づいた新規レコード変数を要求します。
    1. 「型の選択」「レコード」に設定されていることを確認します。
    2. paymentRec レコードを選択します。
    3. 「配列プロパティー」セクションで、「配列」チェック・ボックスがクリアされていることを確認します。
    4. 「フィールド名の入力」に、以下の名前を入力します。
      selectedPayment
      「新規変数」ウィザード
    5. 「終了」をクリックします。
    表示されているページの「プレビュー」セクションに記述されているように、以下のレコード宣言がハンドラーのソース・コードに作成されます。
    selectedPayment paymentRec;

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

  1. 「パレット」ビューで、「レイアウト」ドロワーに移動し、 TitlePane (Dojo) ウィジェット・タイプを見つけます。新規タイトル・ペインを、allPayments_ui グリッドを保持しているセルの横にある、メイン・グリッド・レイアウトの右下のセルにドラッグします。
    TitlePane ウィジェットが最後のセルにドロップインします。
  2. 次の名前をタイトル・ペインに割り当てます。
    editPane
    「OK」をクリックします。
  3. editPane ウィジェットのプロパティーに、以下の変更を行います。
    • 「一般」ページで、title プロパティーを「Payment record」に変更します。
    • 「位置」ページで、width プロパティーを 350 に変更します。この値により、エラー・メッセージ用の余白が確保されます。
    • 「レイアウト」ページで、verticalAlignment プロパティーを「TOP」に変更します。
    Web ページは、以下のイメージのようになります。
    「Payment
record」ペインが表示された Web ページ
  4. ファイルを保存します。
  5. 「EGL データ」ビューから、selectedPayment 変数を、「Payment record」ペイン内の大括弧で囲まれた領域にドラッグします。
    ペイン内の大括弧で囲まれた領域
    「データ・ウィジェットの構成」ウィザードが表示されます。
  6. 以下の変更を行います。
    1. 「以下に関するウィジェットを作成」で、「編集可能データ」を選択します。
    2. selectedPayment レコードのウィジェット・タイプが GridLayout であることを確認します。
    3. 以下の表に示されているように、「ラベル」フィールドを変更します。これらのラベルは、表示されるフィールドを識別するために使用されます。
      表 1. selectedPayment フィールドの変更された名前
      デフォルト名 変更名
      paymentID Key:
      category Category:
      description Description:
      amount Amount:
      fixedPayment Fixed pmt:
      dueDate Due date:
      payeeName Payee:
      payeeAddress1 Address 1:
      payeeAddress2 Address 2:
      コロンは、ラベルに自動的に追加されないので、明示的に指定する必要があります。
    4. category フィールドの「ウィジェット・タイプ」列で、「DojoTextField」をクリックします。下矢印が表示されます。この矢印をクリックしてから、「DojoComboBox」をクリックします。
    5. amount フィールドの「ウィジェット・タイプ」列で、「DojoTextField」をクリックします。下矢印が表示されます。この矢印をクリックしてから、「DojoCurrencyTextBox」をクリックします。 このウィジェットは、通貨の基本的なフォーマットを提供します。
    6. 「フォーマット設定および検証用サポートの追加 (Add support for formatting and validation)」にチェック・マークが付いていることを確認します。 この選択により、書式マネージャーが作成されます。書式マネージャーは、 EGL Rich UI モデル・ビュー・コントローラー (MVC) フレームワークを使用して、Rich UI 検査およびフォーマットを管理します。

      設定した画面を以下に示します。

      正しい値が表示された「データ・ウィジェットの構成」ウィザード
    7. 「終了」をクリックします。
    新規グリッド・レイアウトには、書式が含まれています。
    新規 selectedPayment グリッドには、レコード内の各フィールドに 1 つの行が備わっています。
    注: この変更内容を表示するには、Rich UI エディターの右上隅にある「更新」ボタンをクリックしなければならないことがあります。
    「更新」ボタンは 2 本の黄色い矢印で表示されます。
  7. 以下のようにして、「Key」フィールドを読み取り専用にします。
    1. 「Key」ラベルの横にある Dojo テキスト・フィールドを繰り返しクリックして、このフィールドだけが点線で囲まれるようにします。
      「Category」フィールドが強調表示されます。
    2. 「プロパティー」ビューの「一般」ページで、「readOnly」チェック・ボックスを選択します。
      「readOnly」チェック・ボックス
  8. より一貫した外観にするには、以下の操作を実行します。
    1. 「Amount」について DojoCurrencyTextBox ウィジェットをクリックし、このウィジェットのみが点線で囲まれるようにします。
    2. 「プロパティー」ビューの「位置」ページで、width プロパティーを 166 に設定します。

2 番目のボタン・セットの追加

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

  1. 「パレット」ビューで、「レイアウト」ドロワーに移動し、 GridLayout ウィジェット・タイプを見つけます。新規グリッド・レイアウトを、メイン・レイアウトの右上隅にドラッグして、以下の名前を割り当てます。
    detailButtonLayout
    Web ページの右上隅へのグリッド・レイアウトのドラッグ
  2. 新規レイアウトを選択した状態で、行数と列数を更新します。「プロパティー」ビューを使用する方法、行と列を削除する方法、またはソース・コードを変更する方法など、どのような方法で更新してもかまいません。 いずれの場合でも、1 つの行と 2 つの列から構成されるレイアウトにしてください。
  3. 「設計」面で、以下のようにして「クリア」ボタンを作成します。
    1. 「パレット」ビューで、「表示および入力 (Display and Input)」ドロワーに移動し、 さらに「ボタン (Dojo) (Button (Dojo))」に移動します。「Dojo」ボタンを新規レイアウトの最初のセルにドラッグします。
    2. 前のステップと同じプロセスを使用して、このボタンに clearButton という名前を付け、text プロパティーを Clear に変更し、onClick 関数に対して clearAllFields という名前を使用します。 clearAllFields 関数が表示されます。
  4. 以下のようにして、「保存」ボタンを作成します。
    1. 「設計」タブをクリックします。
    2. 「パレット」ビューで、「表示および入力 (Display and Input)」ドロワーに移動し、 さらに「ボタン (Dojo) (Button (Dojo))」に移動します。「Dojo」ボタンを新規レイアウトの 2 番目のセルにドラッグします。
    3. このボタンに saveButton という名前を付け、text プロパティーを Save に変更します。
    4. 「イベント」ページで、「onClick」イベントを選択し、2 番目の 列で下矢印をクリックして、使用可能な関数名を表示します。「selectedPayment_form_Submit」をクリックします。これは、selectedPayment レコード変数をユーザー・インターフェースにドラッグしたときに EGL が自動的に作成した関数です。
    5. 「プレビュー」タブをクリックします。
      5 つのボタン、プロトタイプ・データ、および書式が表示された Web ページ
    6. ファイルを保存します。ファイルの内容は、演習 4 終了後の PaymentFileMaintenance.egl のコード に記載されている完成したコードに一致します。

演習のチェックポイント

この演習では、以下のタスクを実行しました。
  • Rich UI ハンドラーを作成しました。
  • 「EGL データ」ビューで変数を作成しました。
  • レコード配列変数をエディターにドラッグしてデータ・グリッドを作成しました。
  • 「プロパティー」ビューおよびメニューを使用してウィジェットを調整しました。
  • Rich UI エディターにある 3 つのすべてのタブで作業し、ソースを更新し、Web ページをプレビューしました。

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

< 前へ | 次へ >

フィードバック