登録画面は顧客管理システムのデータを追加、修正または削除する画面です。
(サンプルのデザインは、使うテーマによって異なることがあります。)

• 実習目的

  XPLATFORMが提供する様々なコンポーネントを使って、詳細内容を出力する画面を構成します。 コンポーネントの基本的な特性を理解して、データセット(Dataset)とバインドする方法を学びます。 データセット(Dataset)に入っているデータをサーバーに保存するスクリプトを学びます。

  データセットとグリッド生成は、"サンプルプロジェクト(照会画面作り-list.xfdl)"を参照してください。

• 実現機能

  次のように画面を構成して、コンポーネントを生成してデータセット(Dataset)とバインドします。

  • 画面構成 : データセット(Dataset)バインド - Edit,Combo,Calendar

  • スクリプト作成 : ボタン(Button)― 追加/修正/保存作成

画面構成: データセット(Dataset) バインド-Edit,Combo,Calendar

コンポーネント別のデータセット(Dataset) バインドについて学びます。

画面(Form) 作成

“6.1 プロジェクトの生成”を参照してFormを作ります。

1. ツールバーからNewアイコンを開いてFormを選択します。

2. “Create New Form Wizard”に使ったオプションは次の通りです。

Formの titletext 属性値を “顧客詳細照会”に指定します。

照会、追加、削除、保存ボタン作り - ボタン : Button

図のように、Static,Div,Buttonを生成して画面(Form)に配置します。
類似するコンポーネントを一列に配置する場合には、コピー/貼り付け機能と矢印ボタンの移動を利用すれば、簡単に配置できます。

ボタン領域に配置されるコンポーネントは次の通りです。

データセットのコピー

コンポーネントはもちろん、データセットについても、Form間のコピーは可能です。
照会画面(list.xfdl)からデータセットをコピーして、登録画面(entry.xfdl)に貼り付けをします。

カラムのデザイン

グリッドを追加して、"画面構成(2) : グリッド(Grid) - カラムデザイン"を参照して、追加されたグリッドのカラムをデザインします。

グリッドカラムの“職責” カラムは、"グリッドのコンボ作成"を参照して、“displaytype”をコンボ形式に指定します。

ディビジョン作成 - ディビジョン : Div

ディビジョン(Div)は、一つの画面に複数の部分画面を構成する時に使うコンポーネントです。 このように、複数のコンポーネントを内部に含めることができるコンポーネントを、コンテナと言います。
このようなコンテナには、Div以外に、GroupBox、Tabpage、PopupDiv などがあります。
また、ディビジョン(Div)の“url”プロパティを利用して、他の画面(Form)を貼り付けて表示することもできます。
ディビジョン(Div) の上で、バインド(Binding) 機能を確認します。
コンポーネントツールバーからを選択して、画面の上にディビジョン(Div)を作ります。

タイトルと入力領域作り

コンポーネントツールバーからを選択して、ディビジョン(Div) 上にスタティック(Static)を作り、を選択して追加されたスタティック(Static)の横にディビジョン(Div)を作ります。
スタティック(Static)を座標(0,0)に配置させて、border属性値を“1px solid #808080ff”に設定します。そして、すぐ隣にディビジョン(Div)を配置させます。

スタティック(Static)とディビジョン(Div)を同時に選択した後、コピーと貼り付けを繰り返します。

詳細領域のスタティック(Static)とディビジョン(Div)のID、Textプロパティを設定します。
詳細領域に配置されるコンポーネントは次の通りです。

エディット作成 - エディット : Edit

[図]のように、エディット(Edit)を追加します。

エディット(Edit) プロパティを変更します。

カレンダー作成 – カレンダー : Calendar

図のように、カレンダー(Calendar)を追加します。

コンボ作成 - コンボ : Combo

複数の例示値が表示される選択リストの形式には、コンボ(Combo)を使います。 コンポーネントツールバーからを選択して、画面にコンボ(Combo)を作ります。
コンボ(Combo)属性を次のように変更します。

データセットとコンボの innerdatasetをバインドさせるために、バインドするデータセットをドラッグして、コンボ上にドロップします。

コンポーネント別のデータセットバインド

ディビジョン(Div) 上のコンポーネントは、idの前にディビジョン(Div)の名前が付いて識別されます。
データセット(Dataset)をドラッグしてバインドするコンポーネントに入れると、“Bind Item”ウィンドウが開きます。

バインドされるコンポーネントの Propertyとデータセットをバインドドするカラム IDを指定します。

“Bind Item”ウィンドウは、“Project Explorer”ウィンドウから作業する画面名を探してマウスを右クリックすると開くポップアップメニューからも確認可能です。

スクリプト作成 - 追加/修正/保存の作成

データを照会した後に必要なデータを追加したり、変更、削除する機能を作ります。

照会、追加、保存ボタンのスクリプト作成

照会ボタンをクリックすると、データセット(Dataset)に新しいデータを生成するようにスクリプトを作成します。先に照会ボタンをクリックして、“Properties”ウィンドウイベント(Event) 項目の中で“onclick”を選択します。関連付けする関数を登録します。

実装が必要なスクリプトの内容は、次の通りです。
<照会ボタン>の “onclick”に登録される“divCommand_btnSearch_onclick” 関数内容

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
	var id = "search";
	var url = "http://127.0.0.1:8080/xplatform9-ajax/search.jsp?keyword="
		+divCommand.edtSearch.text;
	var reqDs = "";
	var respDs = "dsCustomers=customers";
	var args = "";
	var callback = "received";
	transaction(id, url, reqDs, respDs, args, callback);
}

function received(id, code, message)
{
	if (code == 0) {
		alert(dsCustomers.rowcount + "件のデータが照会されました。");
	}else{
		alert("Error["+code+"]:"+message);
	}
}

<追加ボタン>の “onclick”に登録される“divCommand_btnInsert_onclick” 関数内容

function divCommand_btnInsert_onclick(obj:Button, e:ClickEventInfo)
{
	var row = dsCustomers.addRow();
	divDetail.divCommand.edtSearch.setFocus();
}

<削除ボタン>の “onclick”に登録される“divCommand_btnDelete_onclick”　関数内容

function divCommand_btnDelete_onclick(obj:Button, e:ClickEventInfo)
{
	var row = dsCustomers.rowposition;

	if (row >= 0) {
		var id = dsCustomers.getColumn(row, "id");

		if (id == undefined) {
			id = "";
		}

		if (confirm("顧客 ID " + id + "のデータを削除しますか ?")) {
			dsCustomers.deleteRow(row);
		}
	}
}

<保存ボタン>の “onclick”に登録される“divCommand_btnSave_onclick”　関数内容

function divCommand_btnSave_onclick(obj:Button, e:ClickEventInfo)
{
	var id = "save";
	var url = "http://localhost:8080/xplatform9-ajax/save.jsp";
	var reqDs = "customers=dsCustomers:A";
	var respDs = "";
	var args = "";
	var callback = "received";
	transaction(id, url, reqDs, respDs, args, callback);
}

function received(id, code, message)
{
	if (id == "search") {
		if (code == 0) {
			alert(dsCustomers.rowcount + "件のデータが照会されました.");
		} else{
			alert("Error["+code+"]:"+message);
		}
	} else if (id == "save") {
		if (code == 0) {
			alert("正常にデータが保存されました.");
		} else{
			alert("Error["+code+"]:"+message);
		}
	}
}

コンパイル及び実行

HTML5メニューの中で、Compile File及びQuickViewメニューをクリックしてテストします。

データを照会すると、グリッド(Grid)に表示されるデータが詳細に表示されて、グリッドを利用してRowを移動すれば、詳細内訳のデータも現在RowPositionにあたるデータに表示されます。

追加ボタンをクリックして、新しいデータを追加します。グリッドに Rowが追加され、詳細にデータを入力することができます。

削除しようとするデータをグリッド(Grid)から選択すれば、詳細内訳にデータが表示されます。“Delete”ボタンをクリックしてデータを画面から消します。

追加で追加されたデータと削除処理されたデータは、保存ボタンをクリックしてサービスを呼び出すと、作業内容がサーバーに反映されます。
しかし、現在save.jspが作成されていないので、transactionエラーが発生されます。
保存ボタンをクリックしてサービスを呼び出すと、次のようなエラーメッセージを確認します。