< 前へ | 次へ >

演習 7: メイン Rich UI ハンドラーの作成

メインページでは、EGL ポータル・ウィジェットを使用して、各種ハンドラー間の通信を管理します。

以前の演習で指摘したとおり、Rich UI は、長年使われている Model/View/Controller (MVC) という考え方に新しい意味を付け加えます。特に、ブラウザーで実行されるロジックに関して再定義が行われます。 同様に、Rich UI は、ポータル およびポートレット という語に新しい意味を付け加えます。

通常、ポータルとは、ポートレットと呼ばれる独立した UI コンポーネントを制御する Web ページのことです。 これらの用語の従来の用法では、ポータルはサーバー・サイド・コードです。 ポータルによって組み込まれるポートレットは Web ページのスニペットであり、それぞれのスニペットは別々のリモート・ロケーションに保管されている場合があります。 この Web ページはポータル・コードが存在するサーバー上で作成され、完成した Web ページはサーバーからブラウザーに転送されます。

一方、Rich UI ポータルは、ブラウザーで実行されるウィジェットであり、それぞれが Rich UI ハンドラーを参照する一連のポートレット・ウィジェットを参照します。 以降のセクションでは、Rich UI でポータルおよびポートレットをコーディングする方法について説明します。

MainHandler ハンドラーの作成

  1. 前回の演習と同様に、MortgageUIProject プロジェクトの handlers パッケージで新しい Rich UI ハンドラーを作成します。 ここでのハンドラー名は、MainHandler です。 Rich UI エディターの「設計」ビューにハンドラーが開きます。
  2. 「パレット」ビューに「サンプル」ドロワーが表示されていない場合は、「パレット」ビューの左側にある「パレットの更新」ボタンをクリックします。
    「パレットの更新」ボタン
  3. このハンドラーに作成された初期 GridLayout ウィジェットを選択します。 ウィジェット全体が点線で囲まれていることを確認してください。
    選択された初期 GridLayout ウィジェット。
  4. 「削除」キーを押して、このウィジェットを除去します。
  5. パレットの「サンプル」ドロワーからエディターにポータル・ウィジェットをドラッグし、以下の名前を付けます。
    mortgagePortal
  6. エディターの下部にある「ソース」タブをクリックします。
  7. mortgagePortal 宣言で、columns の数値を 2 に変更し、columnWidths を 350 および 650 に設定します。 このファイルの内容は、以下のようになります。
  8. mortgagePortal 宣言の後に 1 行空けて、以下の宣言を追加します。
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    これらのステートメントにより、2 つの変数が宣言されます。それぞれの変数は 1 つのハンドラー・パーツを基にしており、この場合は、このチュートリアルで作成されるハンドラー・パーツです。
  9. 1 行空けて、以下のコードを追加します。
    calculatorPortlet Portlet{children = [calculatorHandler.ui],
       title = "Calculator"};
    resultsPortlet Portlet{children = [resultsHandler.ui],
       title = "Results", canMove = TRUE, canMinimize = TRUE};
    各新規ポートレット変数が、組み込まれたハンドラーの初期 UI への参照を使用して宣言されます。
  10. エラー・マークを取り除くために、Ctrl + Shift + O を押します。
  11. start 関数を以下のとおりにコーディングします。
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Subscribe to calculation events 
       InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);
    
       // Initial state is minimized
       resultsPortlet.minimize();
    end	
    このコードは、以下のように動作します。
    • これまでに宣言されたポートレット (計算器を表示するものと円グラフを表示するもの) をポータルに追加します。
    • メイン・ハンドラーを確実に CalculationResultsHandler と同じイベントにサブスクライブさせるようにし、この場合は、リモート・サービスが住宅ローン計算を返す際に restorePortlets 関数が実行されるようにします。
    • 実行時に最初は円グラフが表示されないように、2 つ目のポートレットを最小化します。
  12. start 関数の後に、サービスが計算を返す際に呼び出される関数を追加します。
    function restorePortlets(eventName STRING in, dataObject ANY in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    ポートレット固有の restore 関数により、円グラフが表示されます。
  13. エラー・マークを取り除くために、Ctrl + Shift + O を押して、ファイルを保存します。 ソース・ファイルにエラーがある場合は、そのコードと演習 7 終了後の MainHandler.egl のコードのファイル内容を比較してください。

ポータルのテスト

メイン・ポータルをテストして、結果ポートレットが計算ポートレットから変更を受け取るかを確認します。
  1. エディターの下部にある「プレビュー」をクリックします。 EGL により、ポータルが宣言されているメイン・ハンドラーが表示されます。 ハンドラーにより、2 つの従属ポートレットが表示されます。
    デフォルト値が示された計算器ポートレットおよび最小化された結果ポートレット。
  2. 「Calculate」をクリックします。 アニメーション表示のイメージにより、処理が進行中であることが示されます。 計算が終了すると、円グラフが表示されます。
    元の大きさに戻った結果ポートレット内に示された円グラフ。
  3. 円グラフのいずれかのセクションの上にカーソルを移動すると、拡大表示されます。
  4. いずれかの計算値を変更し、再度「Calculate」をクリックします。 元金と利子の比率の変化が円グラフに反映されます。
  5. ファイルを閉じます。

演習のチェックポイント

以下のタスクの実行方法を学習しました。
  • ポータル・ウィジェットを作成する。
  • ポータルにポートレットを追加し、それによって、以前の演習で作成したハンドラーを使用できるようにする。

次の演習では、住宅ローン計算をリストするポートレットを追加します。

< 前へ | 次へ >

フィードバック