< 前へ | 次へ >

演習 1: 住宅ローン・アプリケーションの計画

コーディングを開始する前に、用紙の上でアプリケーションを設計します。

アプリケーションの計画を立てるには、以下のようにします。
  • このチュートリアルで前に行ったように、目標をリストします。
  • インターフェースのスケッチを描きます。
  • アプリケーションの構造を明らかにします。

インターフェースのスケッチ

以下のスケッチをインターフェースのコンポーネントを作成する際のガイドとして利用します。
このスケッチの画面の左側には、計算器、円グラフ、およびヒストリーの 3 つのセクションが示されています。
右側には、道路マップを含んだセクションがあります。

アプリケーションの構造の明確化

複雑な Rich UI アプリケーションを作成する場合、複数の Rich UI ハンドラーでコードを作成します。各ハンドラーは、Web ページ、または Web ページのセクションに対応します。 前述したように、ハンドラーはサービスにアクセスできます。サービスの一部は、EGL サービス・パーツを使用して作成する場合があります。

可能な限り、既存のリソースを使用してください。1 つの例として、今回の Rich UI アプリケーションでは、Yahoo! がホストするサービスにアクセスして、指定の郵便番号から住宅ローン会社のリストを取得します。 もう 1 つの例として、今回は、製品に用意されている以下の EGL プロジェクトを使用します。
com.ibm.egl.rui.dojo.samples
以下を始めとするコードを提供します。
  • 柔軟な開発を行えるようにインターフェースを複数のセクションに分割するウィジェット。
  • 無効なデータを入力したユーザーに通知を行うダイアログ・ボックスを作成するロジック。
  • Google マップ・ウィジェット。
com.ibm.egl.rui.dojo.widgets
このチュートリアルに必要な以下のウィジェット・タイプを提供します。
  • DojoButton
  • DojoComboBox
  • DojoCurrencyTextBox
  • DojoPieChart
  • DojoTextField
  • PieChartData

これらのすべてのウィジェット・タイプは、使用可能な他の多くのウィジェットと同様に、Dojo を基にしています。 このテクノロジーの背景について詳しくは、Dojo toolkit (http://dojotoolkit.org) を参照してください。

com.ibm.egl.rui
インターフェースに寄与する Rich UI ハンドラー間の通信を可能にする EGL InfoBus を提供します。 このプロジェクトでは、このチュートリアルに必要な以下のウィジェット・タイプも提供します。
  • Box
  • DataGrid
  • GridLayout
  • HyperLink
  • Image
  • TextField
  • TextLabel
以下のロジックを作成します。
MortgageCalculationService
毎月の支払金額を計算する専用サービス。
MortgageLib
複数のハンドラーに対してコードを提供するライブラリー。
MainHandler
他のハンドラーを宣言するハンドラー。それぞれのハンドラーは、Web ページの 1 セクションを制御したり、バックグラウンドで他の処理を実行したりします。
MortgageCalculatorHandler
毎月の支払金額を計算するハンドラー。
CalculationHistoryHandler
以前の支払金額計算のインタラクティブ・リストを表示するハンドラー。
CalculationResultsHandler
利子支払金額と元金の円グラフを表示するハンドラー。
MapLocatorHandler
住宅ローン会社の所在地を表示するハンドラー。

演習のチェックポイント

この演習では、以下のタスクを実行しました。
  • アプリケーション・インターフェースのスケッチを描きました。
  • アプリケーションの構造を明らかにしました。

次の演習では、Dojo サンプル・プロジェクトをインポートして、コードを保持する 2 つの EGL プロジェクトを作成します。

< 前へ | 次へ >

フィードバック