< 前へ | 次へ >

演習 1: アプリケーションの計画

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

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

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

以下のスケッチをインターフェースのコンポーネントを作成する際のガイドとして利用します。
2 つのセクション (すべてのレコードを示すセクションと、選択したレコードのすべてのフィールドを示すセクション) から構成されるスケッチ

左側には 3 つのボタン (「追加」「削除」、 および「サンプル」) とデータ・グリッドがあり、右側には 2 つのボタン (「クリア」および「保存」) と単一レコード・レイアウトがあります。

アプリケーション・フローの検討

実行時に、ユーザーは以下の処理を実行できます。
  • 「サンプル」ボタンをクリックすることで、データベース表からすべての行を削除し、サンプル行を追加して、データ・グリッドにサンプル行を表示する。
  • 「追加」ボタンをクリックすることで、ほぼ空の行をデータベースに追加して、そのデータを表示する。
  • 「削除」ボタンをクリックすることで、データ・グリッドの現在選択されている行に表示されているデータをデータベースから削除する。
  • 「クリア」ボタンをクリックすることで、単一レコード・レイアウトの内容を削除する。
  • データ・グリッドの行をクリックすることで、その行の詳細を単一レコード・レイアウトにコピーする。
  • 単一レコード・レイアウトの詳細を変更し、「保存」ボタンをクリックすることで、関連するデータベースの行を更新する。

読者の方は、このイベント・フローに賛同しないかもしれません。例えば、単一レコード・レイアウトをクリアし、このレイアウトにデータを入力して、「追加」ボタンをクリックすることで、最初から有用なデータが含まれるデータベース行を作成する方法はどうでしょうか。このような変更方法は、数多くあるオプションのうちの 1 つです。優れた学習方法は、このチュートリアルのステップに従い、実稼働レベルのアプリケーション用に学んだ演習を活用することです。

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

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

可能な限り、既存のリソースを使用してください。作成する Rich UI アプリケーションでは、製品に付属している以下の EGL プロジェクトを使用します。
com.ibm.egl.rui.dojo.widgets
このチュートリアルに必要な以下のウィジェット・タイプを提供します。
  • DojoButton
  • DojoCheckbox
  • DojoComboBox
  • DojoCurrencyTextBox
  • DojoDateTextBox
  • DojoTitlePane

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

com.ibm.egl.rui
このチュートリアルに必要な以下のウィジェット・タイプを提供します。
  • DataGrid
  • GridLayout
  • TextField
  • TextLabel
以下のロジックを作成します。
SQLService
データベース表と対話する専用サービス。
PaymentLib
複数のハンドラーにコードを提供できるライブラリー。
PaymentFileMaintenanceHandler
Web アプリケーションを定義するハンドラー。

演習のチェックポイント

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

次の演習では、DERBY データベースと表を作成します。

< 前へ | 次へ >

フィードバック