>> Visual Web Pack のほかのドキュメント
行セットの挿入、更新、削除
| 2007 年 5 月 [Revision number: V5.5.1-1] |
|
|
このチュートリアルでは、NetBeans Visual Web Pack を使用して、データベース行を作成、取得、更新、および削除する Web アプリケーションを構築する手順を示します。このアプリケーションには、マスターデータのドロップダウンリストと、同期された詳細データの表があります。アプリケーションのユーザーは、詳細データの表の中や、関連付けられているデータベースから、レコードの追加、更新、および削除を行うことができます。
このチュートリアルでは、ほかの基礎的なチュートリアルで紹介している概念を使用します。IDE とそのデザインコンポーネントの基礎知識がない場合は、「NetBeans Visual Web Pack について」、「データバウンドコンポーネント」などの基礎的なチュートリアルを先にお読みになることをお勧めします。 |
このチュートリアルでは、次のテクノロジとリソースを使用します。
JavaServer Faces コンポーネント / Java EE プラットフォーム |
Java EE 5* の場合、1.2 J2EE 1.4 の場合、1.1
|
| Travel データベース |
必須 |
| BluePrints AJAX コンポーネントライブラリ |
任意 |
* このチュートリアルの公開時点で Java EE 5 をサポートしていたのは Sun Java System Application Server だけです。
このチュートリアルは、Sun Java System Application Server PE 9.0 Update Release 1 以降と Tomcat 5.5.17 を使用することを想定しています。別のサーバーを使用している場合は、「リリースノート」と「FAQ」(または「日本語 FAQ」) で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。
プロジェクトの作成
このチュートリアルでは、1 ページの Web アプリケーションを作成します。次の図に示すように、まず、人の名前とその人に対応する旅行を表示するページをレイアウトします。
図 1:最初のページレイアウト |
ページのデザイン
- 新しい Visual Web アプリケーションを「
InsertUpdateDelete」という名前で作成します。
- 「パレット」の「基本」セクションから「ドロップダウンリスト」コンポーネントをページの左上にドラッグします。「プロパティー」ウィンドウで、「
id」プロパティーを「personDD」に変更します。
-
「パレット」の「基本」セクションから、「メッセージグループ」コンポーネントをそのドロップダウンリストの右側に配置します。
「メッセージグループ」コンポーネントには、妥当性検査エラーと変換エラーに加え、info メソッドと error メソッドによって JavaServer Faces のコンテキストに書き込まれるメッセージが表示されます。これらのメッセージは、プロジェクトをデバッグするときに便利です。
- 「表」コンポーネントをほかの 2 つのコンポーネントの下に配置します。
ドロップダウンリストの設定
-
「実行時」ウィンドウを開き、「データベース」ノードを展開して、Travel データベースが接続されているかどうかを確認します。
Travel データベースのバッジの jdbc ノードが壊れていて
ノードを展開できない場合、IDE は、このデータベースに接続されていません。Travel データベースに接続するには、Travel の jdbc ノードを右クリックし、ポップアップメニューから「接続」を選択します。「接続」ダイアログが表示された場合は、「パスワード」に「travel」と入力し、「セッション中はパスワードを保存」を選択して、「了解」をクリックします。Travel データベースの jdbc ノードが表示されない場合は、「NetBeans Visual Web Pack 5.5 インストール」を参照して、Travel データベースを IDE で使用できるようにする手順に従います。
注: Apache Tomcat を使用している場合は、データベースに接続する前に、derbyClient.jar ファイルを <Tomcat のインストールディレクトリ>/common/lib ディレクトリにコピーします。
Travel データベースの jdbc ノードを展開して、「表」ノードを展開します。
注: このチュートリアルでは、Travel データベースの jdbc ノードを、これ以降「Travel」ノードと呼びます。
-
「PERSON」ノードをビジュアルデザイナーのドロップダウンリストの上にドラッグします。
「アウトライン」ウィンドウの「Page1」セクションに「personDataProvider」ノードが表示され、「SessionBean1」セクションに「personRowSet」ノードが表示されます。
-
ドロップダウンリストを右クリックし、ポップアップメニューから「変更時に自動送信」を選択します。
この設定によって、リストから新しい値が選択されるたびに、ページがサーバーに送信されます。
-
ドロップダウンリストを右クリックし、ポップアップメニューから「仮想フォームを構成」を選択します。
表示されるダイアログで、ダイアログの左上に「personDD」と表示されます。これは、ドロップダウンリストが選択されていることを示します。
-
「新規」をクリックして「名前」列に「person」と入力します。次の図に示すように、「所属」列の下のフィールドをダブルクリックして「はい」に設定し、そのあと「送信」列も同様に「はい」に設定します。
図 2:仮想フォームの構成 |
仮想フォームを使用することで、アプリケーションで表内のデータの妥当性検査が不必要に行われるのを回避します。
- 「了解」をクリックします。
-
図 3 に示すように、ビジュアルデザイナーのツールバーにある「仮想フォームを表示」ボタンをクリックします。
仮想フォームを表示すると、ビジュアルデザイナーに表示されているコンポーネントと、構成した仮想フォームとの関係を確認できます。
図 3:仮想フォームの表示 |
表の設定
- 「実行時」ウィンドウから「Travel」>「表」>「TRIP」ノードをドラッグし、デザインビューの「表」コンポーネントの上にドロップします。「ターゲットを選択」ダイアログが表示されたら、「table1」が選択されていることを確認し、「了解」をクリックします。
-
「表」を右クリックし、ポップアップメニューから「表レイアウト」を選択します。
このダイアログには、作成した tripDataProvider で使用できるフィールドが表示され、表に表示するフィールドを制御できます。
-
次の図に示すように、「<」ボタンを使って、右側の「選択」リストから「TRIP.TRIPID」、「TRIP.PERSONID」、および「TRIP.LASTUPDATED」を削除します。
図 4:データプロバイダへの表のバインド |
- 「オプション」タブをクリックし、タイトルを「旅行の概要
」に変更します。
-
「了解」をクリックします。
ビジュアルデザイナー内の「表」コンポーネントは、次の図のようになります。列が図の順序とは異なる場合は、「表レイアウト」ダイアログを開き、「列」タブをクリックし、「上へ」ボタンと「下へ」ボタンを使用して、順序を入れ替えることができます。
図 5:Page1 の表レイアウト |
-
「アウトライン」ウィンドウで、「SessionBean1」の下の「tripRowSet」を右クリックして、ポップアップメニューから「SQL 文を編集」を選択します。
SQL クエリーエディタが開きます。
-
次の図に示すように、エディタ中央のグリッド区画で、PERSONID 行を右クリックし、「クエリー条件を追加」を選択します。
図 6:クエリー条件を追加 |
-
ダイアログの「比較」ドロップダウンリストを「=等しい」に設定し、「パラメータ」ラジオボタンを選択して、「了解」をクリックします。
図 7:「クエリー条件を追加」ダイアログ |
PERSONID の「条件」セルに「=?」という文字が表示され、エディタ下部の SQL 区画で、SQL 文の末尾に「WHERE TRAVEL.TRIP.PERSONID=?」という条件が表示されます。
- tripRowSet の SQL クエリーエディタを閉じます。
列コンポーネントの変更
新しい旅行をデータベースに挿入する機能を追加するための準備として、列の内容を編集可能なフィールドに変更します。このとき、「表」コンポーネントの複合コンポーネントとしての性質を利用して、「表」コンポーネントの中にほかのコンポーネントを入れ子にします。
-
「表」コンポーネントを右クリックし、「表レイアウト」を選択します。
「表レイアウト」ダイアログが表示されます。
-
「列」タブで、右側の「選択」リストから「TRIP.DEPDATE」を選択します。次の図に示すように、ダイアログ下部の「列の詳細」領域で、「コンポーネントの種類」の値を「静的テキスト」から「テキストフィールド」に変更します。
図 8:列の表示の変更 |
- 「TRIP.DEPCITY」および「TRIP.DESTCITY」にも同様の操作を行います。
- 「選択」リストから「TRIP.TRIPTYPEID」を選択し、「コンポーネントの種類」の値を「静的テキスト」から「ドロップダウンリスト」に変更します。
-
「了解」をクリックします。
注: 上記の手順を実行したあとで表の列の幅が広すぎる場合は、各列の最初のコンポーネントを選択し、選択ハンドルをドラッグすることで、サイズを変更できます。
-
「Travel」>「表」>「TRIPTYPE」ノードを「表」コンポーネントのドロップダウンリストの上にドラッグします。「ターゲットを選択」ダイアログが開いたら、「dropDown1」が選択されていることを確認し、「了解」をクリックします。
この操作によって、triptypeDataProvider が作成されます。
表の仮想フォームの構成
次に、表内の入力コンポーネントの仮想フォームを作成します。仮想フォームでは、personDD ドロップダウンリストの変更によってページが送信される場合、入力コンポーネントの妥当性検査と変換を行わないようにします。ユーザーがドロップダウンリストから新しい人を選択したとき、常に正しい情報が表に表示されます。
- ビジュアルデザイナーで、表内で Ctrl キーを押しながら、テキストフィールドを含む 3 列にある、3 つのテキストフィールドコンポーネントと TRIPTYPEID 列のドロップダウンリストコンポーネントを選択します。
- 選択したコンポーネントのいずれかを右クリックし、ポップアップメニューから「仮想フォームを構成」を選択します。
- 「仮想フォームを構成」ダイアログで、ダイアログの左上に 3 つのテキストフィールドと 1 つのドロップダウンリストが表示されていることを確認します。次の図に示すようにすべての要素が表示されない場合は、ダイアログを閉じ、ユーザーインタフェース要素を選択し直してから、もう一度ダイアログを開きます。正しく表示された場合は、「新規」をクリックします。
-
次の図に示すように、新しい仮想フォームの名前を「save」に、「所属」の値を「はい」に変更し、「了解」をクリックします。
図 9:表要素の仮想フォームの構成 |
イベントコードと初期化コードの追加
ここで、personDD ドロップダウンリストを「表」コンポーネントに関連付け、次の動作を有効にします。ユーザーがリストから人を選択したときに、その人の旅行が表に表示されるようになります。
- personDD ドロップダウンリストをダブルクリックして値変更イベントメソッドを作成し、そのメソッドを Java エディタで開きます。
-
値変更イベントメソッドには、「// TODO: 適切なコードに置き換えます」というコメント行があります。この行をコード例 1 の太字のテキストに置き換え、Ctrl-Shift-F キーを押して、コードを再フォーマットします。
| コード例 1:ドロップダウンリストイベントハンドラ |
public void personDD_processValueChange(ValueChangeEvent event) {
Object selectedPersonId = personDD.getSelected();
try {
personDataProvider.setCursorRow(
personDataProvider.findFirst("PERSON.PERSONID",
selectedPersonId));
getSessionBean1().getTripRowSet().setObject(1, selectedPersonId);
tripDataProvider.refresh();
form1.discardSubmittedValues("save");
} catch (Exception e) {
error("Cannot switch to person " + selectedPersonId);
log("Cannot switch to person " + selectedPersonId, e);
}
}
|
try 句の末尾にある form1.discardSubmittedValues("save") 文によって、ユーザーがドロップダウンリストから新しい人を選択すると、表に示されている現在の旅行情報が、選択された人に関連する新しい情報に置き換えられます。旅行情報を表示する、表内のユーザーインタフェース要素は、すべて save という名前の仮想フォームに含まれます。このイベントハンドラでは例外をスローしません。その代わりに、例外は server.log ファイルに記録されます。また、イベントハンドラは、エラーが発生した場合に、「メッセージグループ」コンポーネントにメッセージを表示する error メソッドの呼び出しも行います。
-
Java ソースで prerender() メソッドまでスクロールします。または、Ctrl-F キーを押して「検索」ダイアログを開き、prerender を検索します。メソッドに次の太字のコードを追加します。
| コード例 2:prerender メソッド |
public void prerender() {
if ( personDD.getSelected() == null ) {
Object firstPersonId = null;
try {
personDataProvider.cursorFirst();
firstPersonId = personDataProvider.getValue("PERSON.PERSONID");
personDD.setSelected(firstPersonId);
getSessionBean1().getTripRowSet().setObject(
1, firstPersonId);
tripDataProvider.refresh();
} catch (Exception e) {
error("Cannot switch to person " +
firstPersonId);
log("Cannot switch to person " +
firstPersonId, e);
}
}
}
|
- Java エディタ内を右クリックし、「コードを再フォーマット」を選択してコードの体裁を整えます。
アプリケーションのテスト - 第 1 部
メインツールバーの「主プロジェクトを実行」ボタン
をクリックして、プロジェクトを構築、配備、および実行します。ページが Web ブラウザに読み込まれると、ドロップダウンリストに名前が表示され、表にデータが挿入されます。リストから別の名前を選択すると、その名前に関連付けられている旅行が表に表示されます。
図 10:配備されたアプリケーション (テスト 1) |
挿入機能の追加
この節では、データベースに行セットを挿入して、表に旅行を追加できるようにする機能を追加します。最初に、表のテキストフィールド用の「メッセージ」コンポーネントを用意します。これらのコンポーネントによって、ユーザーが間違った情報を入力するとエラーが表示されます。そのあと、ユーザーがデータバッファに新しい行を追加できるボタンをページに追加します。
- 「デザイン」ボタンをクリックして、ビジュアルデザイナーで Page1 を表示します。
- 「パレット」の「基本」セクションから、表の最初の 3 列の、各一番上のテキストフィールドの上に「メッセージ」コンポーネントをドラッグします。
- 最初の「メッセージ」コンポーネントを選択します。「プロパティー」ウィンドウで、「
for」プロパティーまでスクロールし、ドロップダウンリストから「textField1」を選択します。メッセージがテキストフィールドに正しく関連付けられると、図 11 に示すように、メッセージのテキストが変化して関連を示します。
-
2 番目の「メッセージ」コンポーネントの「
for」プロパティーを「textField2」に設定します。
-
3 番目の「メッセージ」コンポーネントの「for」プロパティーを「textField3」に設定します。
図 11:テキストフィールドへの「メッセージ」コンポーネントの関連付け |
- 「パレット」の「基本」セクションから Page1 に「ボタン」コンポーネントをドラッグし、図 12 に示すように、「表」コンポーネントの 2 列目の真上付近に配置します。
- テキストを「ボタン」から「旅行を追加」に変更します。
- 「プロパティー」ウィンドウで、ボタンの「
id」プロパティーを「add」に変更します。
- ビジュアルデザイナーで、ボタンをダブルクリックして、そのボタンの
add_action イベントハンドラメソッドに挿入ポイントを持つ Java エディタを開きます。
ボタンのイベントハンドラメソッドに次の太字のコードを追加します。
| コード例 3:旅行を追加アクションのコード |
public String add_action() {
try {
RowKey rk = tripDataProvider.appendRow();
tripDataProvider.setCursorRow(rk);
tripDataProvider.setValue("TRIP.TRIPID", new Integer(0));
tripDataProvider.setValue("TRIP.PERSONID", personDD.getSelected());
tripDataProvider.setValue("TRIP.TRIPTYPEID", new Integer(1));
} catch (Exception ex) {
log("Error Description", ex);
error(ex.getMessage());
}
return null;
}
|
-
Java エディタ内を右クリックし、「インポートを修正」を選択して RowKey が見つからないエラーを解決します。
IDE により、Page1.java のインポート文のブロックに次のパッケージが追加されます。
import com.sun.data.provider.RowKey;
アプリケーションのテスト - 第 2 部
「主プロジェクトを実行」ボタンをクリックして、プロジェクトを構築、配備、および実行します。次の図に示すように、ページが Web ブラウザに読み込まれ、「旅行を追加」ボタンが表示されます。ボタンをクリックすると、新しい空行が表の末尾に追加されます。行の情報は編集できますが、行セットを保存するメカニズムをまだ用意していないので、ドロップダウンリストから別の名前を選択すると、変更内容は失われます。
図 12:配備されたアプリケーション (テスト 2) |
行セットを保存するためのページの変更
この節では、プロジェクトに 2 つ目の行セットを追加します。この行セットを使って、使用された最大旅行 ID を計算します。
- エディタウィンドウで「デザイン」をクリックして、ビジュアルデザイナーの Page1 に戻ります。
-
「実行時」ウィンドウで、「データベース」>「Travel」>「表」>「TRIP」表を選択し、「アウトライン」ウィンドウの「SessionBean1」ノードの上にドラッグします。
図 13:SessionBean1 への TRIP 表のドラッグ |
この操作によって、「表 TRIP の行セットを使用して新規データプロバイダを追加」ダイアログが表示されます。
-
「作成 SessionBean1/tripRowSet1」ラジオボタンをクリックし、データプロバイダ名を「maxTripRowSet」に変更して、「了解」をクリックします。
注: 同じ行セットがダイアログに 2 回表示されます。これは既知の問題なので、無視してください。このチュートリアルのアプリケーションに影響はありません。
図 14:SessionBean1 への新規データプロバイダの追加 |
この操作によって、SessionBean1 に maxTripDataProvider と maxTripRowSet が作成されます。
- 「アウトライン」ウィンドウで、「SessionBean1」>「maxTripRowSet」をダブルクリックしてクエリーエディタを開きます。SQL 区画 (上から 3 番目) 内をクリックします。既存の SQL クエリーを削除し、次のクエリーを入力します。
SELECT MAX(TRAVEL.TRIP.TRIPID)+1 AS MAXTRIPID FROM TRAVEL.TRIP
MAXTRIPID の値は、次に追加する「保存」ボタンのアクションハンドラで使用します。
クエリーエディタを閉じます。
注: このクエリーは、クエリーエディタのグラフィカルエディタではサポートされません。字句解析エラー (Lexical error) を示す「解析エラー」ダイアログが表示された場合は、「続行」をクリックしてダイアログを閉じます。
ユーザーの変更内容をデータベースに保存する
- 表の 1 列目の真上近くにある表コンポーネントに「ボタン」コンポーネントをドロップします。配置については、図 15 の「変更を保存」ボタンを参照してください。
- ボタンのテキストを「ボタン」から「変更を保存」に変更します。
- 「プロパティー」ウィンドウで、「
id」プロパティーを「save」に変更します。
- 「変更を保存」ボタンを右クリックし、ポップアップメニューから「仮想フォームを構成」を選択します。
- 「仮想フォームを構成」ダイアログで、このダイアログで行なった変更が「変更を保存」ボタンに適用されるように、左上のリストに「
save」と表示されていることを確認します。次に、save 仮想フォームを選択し、「送信」の値を「はい」に変更して、「了解」をクリックします。
- ビジュアルデザイナーで、「変更を保存」ボタンをダブルクリックして Java エディタを開きます。Java エディタで、ボタンの
save_action イベントハンドラに挿入ポイントが置かれます。
-
ボタンのイベントハンドラメソッドに次の太字のコードを追加します。
| コード例 4:変更を保存アクションのコード |
public String save_action() {
try {
// Get the next key, using result of query on MaxTrip data provider
CachedRowSetDataProvider maxTrip =
getSessionBean1().getMaxTripDataProvider();
maxTrip.refresh();
maxTrip.cursorFirst();
int newTripId = ((Integer) maxTrip.getValue("MAXTRIPID")).intValue();
// Navigate through rows with data provider
if (tripDataProvider.getRowCount() > 0) {
tripDataProvider.cursorFirst();
do {
if (tripDataProvider.getValue("TRIP.TRIPID").equals
(new Integer(0))) {
tripDataProvider.setValue("TRIP.TRIPID",
new Integer(newTripId));
newTripId++;
}
} while (tripDataProvider.cursorNext());
};
tripDataProvider.commitChanges();
} catch (Exception ex) {
log("Error Description", ex);
error("Error :"+ex.getMessage());
}
return null;
}
|
アプリケーションのテスト - 第 3 部
「主プロジェクトを実行」ボタンをクリックして、プロジェクトを構築、配備、および実行します。アプリケーションは次のように動作します。
- 旅行を追加し、保存できます。旅行が表に表示され、保持されます。ほかの人を選択してから元の人に戻ると、追加した旅行が表示されています。
- 既存の旅行情報を編集し、変更内容を保存できます。
- 「DEPDATE」フィールドに日付以外の値を入力した場合は、エラーメッセージが表示されます。
- 保存する前に「旅行を追加」ボタンは何回でもクリックできるので、複数の行を一度に追加できます。変更を保存するときに空のままの行は、空の行として保存されます。
- 「変更を保存」をクリックする前にほかの人に切り替えた場合、更新した情報はすべて失われます。
- 表で値を変更したあとに、列でソートするためにいずれかの列ヘッダーをクリックしても、保留中の変更は記憶され、あとで保存できます。
削除機能の追加
この節では、表に削除機能を追加します。この機能を使用すると、ユーザーがデータベースから行を削除して旅行を削除できます。このチュートリアルで実装するように、「削除」ボタンのアクションはすぐに実行されるので、データベースから行を削除するための「変更を保存」ボタンは必要ありません。「削除」ボタンのイベントハンドラでは commitChanges メソッドを使用するので、「変更を保存」ボタンをクリックしたときと同じように保留中の変更もすべて保存されます。
各行への削除ボタンの追加
-
エディタウィンドウで「デザイン」をクリックして、ビジュアルデザイナーの Page1 に戻り、「旅行の概要」表を右クリックしてポップアップメニューから「表レイアウト」を選択します。
「表レイアウト」ダイアログが表示されます。
- 必要に応じて、「列」タブをクリックし、「新規」をクリックして表に新しい列を追加します。
-
「選択」リストで追加された列の名前を選択し、「列の詳細」領域で次の変更を行います。
- ヘッダーテキストとフッターテキスト:「ヘッダーテキスト」フィールドからデフォルトのテキストを削除して、空にします。「フッターテキスト」フィールドは、空のままにします。
- コンポーネントの種類:
ボタン
- 値式:
削除
- 幅:空のままにします。
- 水平位置揃え:
中央
- 垂直位置揃え:
中央
- 「了解」をクリックします。
- 表の一番上の「削除」ボタンを選択し、「プロパティー」ウィンドウで「
id」プロパティーを「delete」に設定します。
イベントコードの追加
- 「削除」列の最初のボタンをダブルクリックして、
delete_action イベントハンドラメソッドを Java エディタで開きます。
-
ボタンのイベントハンドラメソッドに次の太字のコードを追加します。
| コード例 5:削除アクションのコード |
public String delete_action() {
form1.discardSubmittedValues("save");
try {
RowKey rk = tableRowGroup1.getRowKey();
if (rk != null) {
tripDataProvider.removeRow(rk);
tripDataProvider.commitChanges();
tripDataProvider.refresh();}
} catch (Exception ex) {
log("ErrorDescription", ex);
error(ex.getMessage());
}
return null;
}
|
アプリケーションのテスト - 第 4 部
「主プロジェクトを実行」ボタンをクリックして、プロジェクトを構築、配備、および実行します。次の図に実行中のアプリケーションを示します。
プロジェクトを配備すると、行を表から削除することで、データベースからも削除できます。削除アクションによって、保留中の変更もすべてデータベースにコミットされます。
図 15:アプリケーションのテスト (テスト 4) |
元に戻す機能の追加
ページに、元に戻す機能を追加します。この機能を使用すると、ユーザーは編集内容を破棄して、データを最後に保存したときの状態に戻すことができます。元に戻す機能を使用しても、保存した行や削除した行は元に戻りません。「変更を保存」ボタンと「削除」ボタンをクリックすると、変更内容がデータベースにコミットされます。
「変更を元に戻す」ボタンの追加
- エディタウィンドウで「デザイン」をクリックして、ビジュアルデザイナーの Page1 に戻り、「パレット」から Page1 に「ボタン」コンポーネントをドラッグします。新しいボタンを「旅行を追加」ボタンの右側に配置します。
- ボタンのラベルを「変更を元に戻す」に変更します。
- 「プロパティー」ウィンドウで、ボタンコンポーネントの「
id」プロパティーを「revert」に変更します。
- 「変更を元に戻す」ボタンをダブルクリックして、
revert_action メソッドを Java エディタで開きます。
-
revert_action メソッドに、次のコード例の太字のコードを追加します。
| コード例 6:変更を元に戻すアクションのコード |
public String revert_action() {
form1.discardSubmittedValues("save");
try {
tripDataProvider.refresh();
} catch (Exception ex) {
log("Error Description", ex);
error(ex.getMessage());
}
return null;
}
|
仮想フォームの構成
現在の構成では、アプリケーションが望ましくない動作を示すことがあります。たとえば、ユーザーが既存の行の最初の列に無効な日付を入力し、「旅行を追加」ボタンをクリックすると、その操作は失敗します。これは、日付の変換エラーによってフォームの送信が拒否されるためです。望ましい動作は、ユーザーが「追加」ボタンをクリックすると、表の入力フィールドの処理が行われず、既存の行に対する保留中の編集に関係なく新しい行が追加できることです。
同様に、ユーザーが「変更を元に戻す」ボタンをクリックすると、すべての編集内容は意図的に破棄されます。したがって、このような場合も編集は無視されるべきです。ただし、ユーザーが「削除」ボタンをクリックすると、行を削除するだけではなく、最初に入力フィールドの処理が要求されているために保留中の変更も送信されるので、妥当性検査が必要と思うことがあります。
ユーザーが「旅行を追加」、または「変更を元に戻す」の各ボタンをクリックしたときに、ページ上の入力フィールドが妥当性検査などの処理を行わないようにするためには、仮想フォームを送信するボタンを作成します。この場合、両方のボタンが同じ仮想フォームを送信できるようにします。これは、それらのボタンは要素を持たない仮想フォームを送信する必要があるからです。
-
ビジュアルデザイナーで、Ctrl キーを押しながら、「旅行を追加」、および「変更を元に戻す」のボタンを選択して右クリックし、ポップアップメニューから「仮想フォームを構成」を選択します。
「仮想フォームを構成」ウィンドウで、左上に「add」、および「revert」と表示されます。これは、これらのボタンが選択されていることを示します。
-
「新規」をクリックし、新しい仮想フォームに「add/revert」という名前を付け、「送信」の値を「はい」に設定します。「了解」をクリックします。
図 16:「旅行を追加」、「変更を元に戻す」、「削除」ボタンの仮想フォームの構成 |
アプリケーションのテスト - 第 5 部
「主プロジェクトを実行」ボタンをクリックして、プロジェクトを構築、配備、および実行します。次の図 17 に実行中のアプリケーションを示します。
プロジェクトを配備すると、次の機能を実行できます。
図 17:アプリケーションのテスト (テスト 5) |
まとめ
このチュートリアルでは、「表」コンポーネント、「テキストフィールド」コンポーネント、および「ドロップダウンリスト」コンポーネントを、データベース内の情報に関連付けました。コンポーネントのプロパティーを設定し、データベースのデータの挿入、更新、および削除を行なって、フォームに入力された変更内容を元に戻すために prerender とイベントコードを追加しました。また、アプリケーションで 1 ページを使用し、行を追加したり変更を元に戻したりするときに、送信されるデータの妥当性検査を省略する仮想フォームを使用しました。
関連項目:
更新日: 2007 年 5 月 24 日