< 前へ | 次へ >

演習 4: 計算器のユーザー・インターフェースの作成

EGL ウィザードおよび Rich UI エディターを使用して、計算器の作成を開始します。

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

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

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

Rich UI ハンドラーの作成

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

ユーザー・インターフェースの作成

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

  1. レコード変数を作成します。
    1. デフォルトではワークベンチの左下隅にある「EGL データ」ビューに、エディターで現在開かれているハンドラーのすべてのプリミティブ変数およびレコード変数がリストされます。 MortgageCalculatorHandler ハンドラーの項目の下にある空のスペースを右クリックします。 「新規作成」 > 「EGL 変数」とクリックします。
    2. 「新規 EGL データ変数の作成」ウィザードで、MortgageCalculationResult レコード・パーツを基にした新規レコード変数を以下のようにして要求します。
      • 「型の選択」「レコード」に設定されているようにします。
      • MortgageCalculationResult レコードを選択します。 これはリスト内の最初のタイプになっているはずです。
      • 「配列プロパティー」セクションの「配列」は、クリアされたままにします。
      • 「フィールド名の入力」フィールドに、以下のテキストを入力します。
        inputRec
      • 「終了」をクリックします。
    「新規 EGL データ変数の作成」ウィザード。
    このプロセスにより、ハンドラーのソース・コードに以下のレコード宣言が作成されます。
    inputRec MortgageCalculationResult;
    また、このプロセスにより、「EGL データ」ビューに新規のレコード変数が表示され、その変数をエディターにドラッグできるようになります。
    inputRec 変数が表示された「EGL データ」ビュー。
  2. EGL により、初期 UI として GridLayout ウィジェットが自動的に作成されています。 デフォルトでは、このウィジェットに 4 つの行および 3 つの列があります。 以下に示すように、別のメカニズムを使用して、行および列の数を変更することができます。
    1. GridLayout ウィジェットを右クリックして、セルを強調表示します。
    2. 「削除」>「行」とクリックします。
    3. 再度、GridLayout ウィジェットを右クリックして、セルを強調表示します。
    4. 「削除」>「列」とクリックします。
    5. 「プロパティー」ビューに移動します。このビューは、デフォルトでは、エディター・ペインの下にあるタブ付きページの 1 つです。
    6. 「一般」ページで、「rows」プロパティーを 1 に、「columns」プロパティーを 1 に設定します。
      「プロパティー」ビュー。
    変更された GridLayout ウィジェットは Web ページの初期 UI として残りますが、他の内容を追加するセルは単一になっています。
  3. 「EGL データ」ビュー内の inputRec 変数をクリックし、その変数を「EGL データ」ビューから、エディター内の GridLayout ウィジェットの 1 つのセルにドラッグします。
    「データ」ビューから GridLayout ウィジェットへのレコードのドラッグ。
    EGL により、「データの挿入」ウィザードの「データ・ウィジェットの構成」ページが表示されます。 このページを使用して、エディター上にドラッグしたレコードのフィールドに基づいて EGL が作成するウィジェットを構成します。
  4. 「データ・ウィジェットの構成」ページで、以下の変更を行います。
    1. 「以下に関するウィジェットを作成」セクションで、「編集可能データ」をクリックします。 このオプションにより、EGL がウィザードに表示するデフォルトのウィジェットが決定されます。これらのどのウィジェットにも読み取り専用の制約事項はありません。
    2. 「loanAmount」フィールドの「ウィジェット・タイプ」列で、「ウィジェット・タイプ」列の現行値をクリックし、下矢印をクリックして、「DojoCurrencyTextBox」を選択します。 このウィジェットでは、金額のフォーマット設定および検証を行います。
    3. interestRate ウィジェットについては、デフォルトの「DojoTextField」のままにしておきます。
    4. 「term」フィールドの「ウィジェット・タイプ」列で、「ウィジェット・タイプ」列の現行値をクリックし、下矢印をクリックして、「DojoComboBox」を選択します。
    5. 「monthlyPayment」フィールドおよび「interest」フィールドのチェック・ボックスはクリアします。 monthlyPayment フィールド用のウィジェットは、後で追加します。interest フィールドは、このユーザー・インターフェースの一部ではありません。
    6. 「ラベル」列の値を、コロンを含めて以下のとおりに変更します。
      • 「loanAmount」を「Loan amount:」に変更します。
      • 「interestRate」を「Interest rate:」に変更します。
      • 「term」を「Term:」に変更します。

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

    7. 「フォーマット設定および検証用サポートの追加 (Add support for formatting and validation)」が選択されているようにします。 このオプションにより、各ウィジェットのラベルおよびコントローラーと共に、新しいグリッド・レイアウト内のすべての内容に適用される書式マネージャーおよび関連機能が追加されます。 「エラー・ラベルを使用してエラー・メッセージをサポートする (Use error label to support error message)」は選択しないでください。 このオプションは、コントローラー固有エラー・メッセージのエラー・ラベルを提供しますが、このチュートリアルでは、他のメカニズムを使用してエラーの発生を示します。
    8. 以下のイメージを参照してください。 作業中のページが原則的に同じである場合には、「終了」をクリックします。
    すべてのフィールドが修正された「データ・ウィジェットの構成」ページ。
    元のグリッド・レイアウト内に新規の内容が含まれた新規の内部グリッド・レイアウトを持つ「設計」ビューが表示されます。
    他のグリッド・レイアウト内に表示された 1 つのグリッド・レイアウト。
  5. 作業を保存するため、Ctrl + S を押します。
  6. 外観に統一感を与えるため、2 番目と 3 番目の入力フィールドのサイズを以下のようにして調整します。
    1. 利率 (interest rate) の入力フィールドを強調表示します。 そのフィールドのみが点線で囲まれるはずです。
      「Interest rate:」というラベルに続く四角形のみが強調表示されます。
    2. 「プロパティー」ビューの「位置」ページで、「width」プロパティーに以下の値を入力します。
      100
      この値は、ローン金額用に使用した DojoCurrencyTextBox ウィジェットのデフォルトの幅と同じです。
    3. 「Term:」フィールドでステップ a および b を繰り返します。 表示面をクリックして変更を確認します。
  7. 以下のようにして、Dojo コンボ・ボックスに有効な値およびデフォルト値を設定します。
    1. 「Term:」フィールドを強調表示した状態で、「プロパティー」ビューの「一般」ページをクリックします。
    2. 「values」プロパティーに隣接して置かれた省略符号 (...) をクリックして、「values」ウィンドウを表示します。
      「values」ウィンドウ。
    3. 「リストに対して文字列を追加または削除」フィールドに以下の数値を入力します。
      5
    4. 「追加」をクリックします。
    5. 以下の数値を 1 つずつ入力します。数値を入力するたびに「追加」をクリックしてください。
      10
      15
      30
      「values」ウィンドウは、以下のイメージのようになるはずです。
      各数値が改行されて表示された「values」ウィンドウ。
    6. 「OK」をクリックします。
  8. 以下のようにして、コンボ・ボックスの初期表示に値 30 が含まれるようにします。
    1. Rich UI エディターの「ソース」タブをクリックします。
    2. 期間 (term) のデフォルト値を設定します。 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. Rich UI エディターの「プレビュー」タブをクリックします。 Web ページに実行時の画面が表示されます。以下のイメージのようになっているはずです。
    各フィールドが表示され、コンボ・ボックスには初期設定値があります。
    表示を更新する必要がある場合は、「プレビュー」ページの右上にある Rich UI ツールバー (下図) の右端にあるアイコンをクリックします。
    Rich UI ツールバー
  12. 以下のようにして、レコードの詳細を保持する内部 GridLayout ウィジェットに新しい内容を追加します。
    1. Rich UI エディターの「設計」タブをクリックします。
    2. inputRec_ui という名前の内部 GridLayout ウィジェットを右クリックします。 その名前が「プロパティー」ビューの上部に表示されます。
    3. 「プロパティー」ビューの「一般」ページで、「rows」プロパティーを以下の値に変更します。
      6
      「設計」面をクリックすると、「Term:」行の下に新しい行が表示されます。
      6 行に増えた内部 GridLayout ウィジェット。
  13. 実行ボタンを保持する 2 つ目の内部 GridLayout ウィジェットを追加します。
    1. パレットの「レイアウト」ドロワーから、GridLayout ウィジェットを最初のブランク行の最初のセルにドラッグします。
      グリッド・レイアウトのドロップ。
      GridLayout ウィジェットを使用して、実行ボタンおよびアニメーション表示の処理イメージを配置します。 このウィジェットに以下の名前を付けます。
      buttonLayout
    2. この新規ウィジェットを右クリックして、以下に示すメニューを表示します。
      行の削除。
    3. 「削除」を選択してから、「行」をクリックします。 「プロパティー」ビューの「一般」ページのグリッド・レイアウト表示が 2 行になります。
    4. 「プロパティー」ビューまたは今使用したメニューのいずれかを使用して、buttonLayout が 1 列になるように変更します。 操作を間違えた際に前の表示に戻すには、Ctrl + Z を押します。
    5. buttonLayout をアクティブにして、「プロパティー」ビューの「レイアウト」ページに移動します。 以下のようにして、このレイアウトがブランク行内の中央に配置されるようにします。
      • 「horizontalAlignment」プロパティーを CENTER に変更します。
      • 「horizontalSpan」プロパティーを 2 に変更します。
      ブランク行の中央に配置された新しい GridLayout ウィジェット。
  14. 作業を保存するため、Ctrl + S を押します。
  15. 以下のようにして、実行ボタンを作成し、それをスタブ関数にバインドします。
    1. パレットの「表示および入力 (Display and Input)」ドロワーから、buttonLayout の上段セルに Dojo ボタンをドラッグします。
      2 つのセルの最初のセルへのボタンのドラッグ。
    2. このボタンに以下の名前を付けます。
      calculationButton
    3. 「プロパティー」ビューの「一般」ページで、「text」プロパティーを以下のラベルに変更します。
      Calculate
      次に、inputRec 変数をエディターにドラッグした際に作成された関数に、このボタンをバインドする必要があります。
    4. 「イベント」タブで、onClick イベントの行を選択します。 「関数」列のブランク・スペースをクリックして、矢印ボタンを表示します。 矢印ボタンをクリックして、「inputRec_form_Submit」を選択します。 この関数のコードは次の演習で完成させます。
      選択可能な 2 つの関数が表示されたメニュー。
      行の最後の列にある正符号に注意してください。 このボタンをクリックすると、「Calculate」ボタンにバインドする新規関数を作成できます。 ワークベンチに「ソース」ビューが表示され、コードはないが入力は可能な関数であるスタブ関数 が自動的に作成されます。
  16. 住宅ローンの計算を処理中であることを示すアニメーション表示のイメージを追加します。
    1. パレットの「表示および入力 (Display and Input)」ドロワーから、「Calculate」ボタンの下にある空のセルにイメージ・ウィジェットをドラッグします。
    2. 「新規変数」ウィンドウで、このイメージに以下の名前を付けます。
      processImage
    3. 「プロパティー」ビューの「一般」ページにある「src」フィールドで、このイメージのソースに以下を割り当てます。
      tools/spinner.gif

      このイメージは、com.ibm.egl.rui.dojo.samples/WebContent フォルダーにあります。 この開発環境では、ワークスペース内にあるすべてのプロジェクトの WebContent フォルダーを、単一の仮想フォルダーとして取り扱います。

    4. 同じく「プロパティー」ビューの「外観」ページで、「可視 (visible)」チェック・ボックスをクリアします。 「Calculate」ボタンがクリックされるまで、このイメージは表示されません。
    5. 同じく「プロパティー」ビューの「レイアウト」ページで、「horizontalAlignment」プロパティーを CENTER に設定します。
  17. 作業を保存するため、Ctrl + S を押します。
  18. 計算結果を表示するウィジェットを追加します。
    1. パレットの「表示および入力 (Display and Input)」ドロワーから、この新規グラフィックの下にある 5 番目の行の最初のセルに TextLabel ウィジェットをドラッグします。 このウィジェットに以下の名前を割り当てます。
      paymentLabel
      ここでラベル・ウィジェットを使用するのは、ユーザーがこのフィールドを変更することはないためです。 アプリケーションが計算を実行し、内容を更新します。
    2. 「プロパティー」ビューの「一般」ページにある「text」プロパティーに、以下の値を入力します (ドル記号も含みます)。
      $0.00
    3. 同じページで、「fontSize」プロパティーを 18 に設定します。
    4. 同じく「プロパティー」ビューの「レイアウト」ページで、以下のプロパティーを設定します。
      • 「horizontalAlignment」CENTER に設定します。
      • 「horizontalSpan」2 に設定します。
      「設計」面をクリックすると、Web ページの外観が以下のイメージのようになります。
      大きなフォントで表示された毎月の支払金額フィールド。
  19. サービスへの接続に関する問題など、一般的なエラーのためのエラー・フィールドを追加します。
    1. パレットの「表示および入力 (Display and Input)」ドロワーから、最後の空の行の最初のセルに TextLabel ウィジェットをドラッグし、以下の名前を割り当てます。
      errorLabel
    2. この TextLabel ウィジェットの以下のプロパティーを変更します。
      • 「一般」ページで、「text」プロパティーのデフォルト値である「TextLabel」を削除します。
      • 同じく「一般」ページで、「color」プロパティー・フィールドの横にあるブランク・ボタンをクリックします。次に、「名前フォーマット」をクリックしてリストをスクロールダウンし、「赤」を選択します。 「OK」をクリックします。 これにより、このラベルに表示されるすべてのメッセージのフォントの色が設定されます。
      • 「位置」ページで、「width」プロパティーを 250 に設定します。
      • 「レイアウト」ページで、「horizontalSpan」プロパティーを 2 に変更します。
    3. 「設計」域の任意の場所をクリックし、Ctrl + S を押してハンドラーを保存します。
完成したインターフェースの外観は、以下のイメージのようになるはずです。
3 つの入力フィールド、「Calculate」ボタン、および支払金額フィールドが含まれた完成後のインターフェース。
ソース・コードを確認するには、エディター・ペインの下部にある「ソース」タブをクリックしてください。 このコードは、演習 4 終了後の MortgageCalculatorHandler.egl のコードにあるファイル内容と一致している必要があります。

演習のチェックポイント

次の作業を実行する方法を学習しました。
  • Rich UI ハンドラーを作成する。
  • 「EGL データ」ビューで変数を作成する。
  • レコード変数を Rich UI エディターにドラッグして、ユーザー・インターフェースを更新する。
  • EGL Rich UI エディターを使用して、インターフェースを変更する。
  • 「プロパティー」ビューを使用して、インターフェースのフォーマットを設定する。

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

< 前へ | 次へ >

フィードバック