登録画面は名刺管理システムのデータを追加、修正、削除する画面です。

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

画面の生成

1. “画面作成”メニューを選択します。(File > New > Item > Form)

2. “Create New Form Wizard”画面でファイル名(Name)と保存位置(Location)を指定します。

3. “Create New Form Wizard”画面で継承(Inheritance)を指定します。

4. “Create New Form Wizard”画面でサイズ(Position)を指定します。

5. “Create New Form Wizard”画面でMLM機能を使用するかを指定します。

6. “Create New Form Wizard”画面でウィジェット機能を使用するかを指定します。

7. “画面の生成”が完了すると、UX-Studioに生成された画面が表示されます。

データセットカラムのデザイン

データセットコンポーネントはサーバーからデータを受信し、グリッドにデータを供給します。
データセットはデータをセーブするだけではなく、データが変更(追加/修正/削除)された状態を知らせます。修正されたデータは変更前の原本データを保持します。
データセットは2次元テーブルの型式でデータを保持するのでカラム構造を備えており、ロウ(Row, Record)単位でデータを取り扱います。
1つの画面は1つ以上のデータセットを持つことができます。
データが全てのプロジェクトに共通する内容の時にはデータセットを共通領域(Global Dataset)に生成し、いくつかの画面で同時に接続して使用することができます。

データセットの生成 - データセット:Dataset

コンポーネントツールバーでを選択します。

どの部分をクリックしてもデータセットは“Invisible Objects”タブに生じます。

データセットはコンポーネントの一種であるため、プロパティとイベントは “Properties”画面で調整します。

データセットカラムのデザイン

データセットは2次元テーブルの型式でデータを保持します。
テスト用データを直接に入力してデザインする時に活用することができます。
データセットのデザインは“Dataset Contents Editor”画面で行います。
“Dataset Contents Editor”画面は、該当のデータセットをダブルクリックして呼び出します。

上段の“Const Columns”情報は、全てのレコード(Record, Row)が共通で持つ値の場合には定数(Const Value)として取り扱い、“定数カラム(Const Column)”を生成します。
中央の“Columns”情報は、レコードの形式をデザインします。
下段の“Rows”は、テスト用データを設定する部分です。

詳しい使用方法は、“UX-Studioの使用方法”を参照してください。

データセットにカラム情報とテスト用データを追加する方法は、次の通りです。

1. “Dataset Contents Editor”画面を開き、中間の“Columns”部分にカラムを1つ生成します。カラムの追加は、“カラム”ツールバーにあるボタンをクリックします。

2. 追加されたカラム情報に“id”、”type”、“size”を設定します。

   “id”は、同一のデータセット内で重複しないように指定します。

   ハングルカラムのidも許容されますが、エンコードが合わない場合には認識に失敗することもあるためお勧めしません。

   “type”は、文字列(STRING)、整数型(INT)、実数型(FLOAT/BIGDECIMAL)、日時型(DATE/DATETIME/TIME)、バイナリ型(BLOB)などがあります。

   “size”の指定は自由ですが、typeにより許容値が異なるためtypeが許容する長さを指定してください。許容値を超えたデータが入ってくると許容範囲のデータのみ認識され、それ以外は削除されたり無視されます。

完成した画面は次の通りです。

3. テスト用データは、デザインする時にサーバーとの接続がなくても画面の出力内容を点検することができるようにします。テスト用のデータを追加するにはRows部分のボタンをクリックし、レコードを追加してからデータを直接に登録することができます。

4. 上記のような方法で、department専用のデータセット“ds_dept”を追加生成します。

グリッドの構成

グリッドコンポーネントは、データセットを接合(Bind)してデータを画面に出力します。グリッドをデータセットに接合すると出力だけでなくグリッドによる入力も可能となるため、データセットのデータを修正することができます。
全ての作業は接続されたデータセットを中心として行われ、リアルタイムなデータセットにより反映されます。
グリッドによりデータを修正すると、接合されたデータセットのデータがすぐに修正されます。グリッドは、データの入出力の際にフォーマットを表示することができます。使用者がデータを見やすいように、“-“などを出力時に表示するよう設定することができます。日時を入力する時には、有効範囲を超えないように日時型の入力型式を選択することができます。

カラムのデザイン

コンポーネントツールバーでを選択し画面を構成します。

生成されたグリッドにデータセットを接合(Bind)したい時には、該当のグリッドを選択し、コンポーネントのプロパティを指定することができる “Properties”画面で“binddataset”を探し、選択項目をクリックします。画面にデザインされたデータセットと共通のデータセットの目録が開いたら、接合(Bind)したいデータセットを選択します。

グリッドをデザインした時の最初の画面は、上記の通り空白表示のみです。接合するデータセットをドラッグしてグリッド上に配置します。

グリッドをダブルクリックすると、データセットの全てのカラムがグリッドにデザインされたことを確認することができます。

変更したいカラムを選択し、右側にあるプロパティ画面で修正します。
削除したいカラムを選択し、マウスの右側のボタンをクリックすると表示されるポップアップメニューで作業します。カラムの順序を変更したい時には、 “Cut”と“Paste”メニューを活用してください。位置変更するカラムを選択してから“Cut”し、変更する位置のカラムを選択して“Paste"するとポップアップにより" Append /insert”が表示されます。AppendはCutしたカラムを一番後ろに、insertは選択した位置のすぐ後に移動させます。
XPLATFORMプログラムでは、データはデータセットに保持され、グリッドはデータセットを接合して使用するため、表示したいカラムのみをデザインします。
グリッドのカラムとデータセットのカラムを接合する場合は、事前にグリッドのbinddataset値を設定した状態でのみ作業ができます。
接合したグリッドのカラムを選択すると、“Grid Contents Editor”の右側に選択したカラムの属性画面が表示されます。“Binding”グループの“text”項目で、接合するデータセットのカラムを選択します。例題で使用するグリッドは、次のようなカラムをデザインします。

追加するカラムの情報は次の通りです。

全ての作業が終了したら“OK”ボタンをクリックします。

グリッドに特定のデータセットを接続

グリッドから特定カラムのみ異なるデータセット情報を呼び出したい時には、グリッドエディタにより接合することができます。
グリッドエディタを開き、departmentカラムを選択してから、右側でAction領域のdisplaytypeとedittypeをcomboで設定します。
GridCombo領域でcombodatasetに事前に生成したds_deptをバインドしてから、 combocodecolにcodecolumnを、combodatacolにdatacolumnをバインドします。
このように接続して実行すると、部署カラムコードではなく部署名が表示されます。

実際にデータがある場合には、次のように画面にグリッドが表示されます。

照会・作業領域(ディビジョン、ボタン、エディット、スタティック)の構成

基本登録プログラムに条件照会機能及び追加、保存機能を追加します。
コンポーネントはディビジョン、ボタン、エディット、スタティックを使用します。

ディビジョンの生成

コンポーネントツールバーでを選択し、ディビジョンを生成します。

ディビジョンのプロパティを次のように変更します。

スタティックの生成

コンポーネントツールバーでを選択しスタティックを生成します。

スタティックのプロパティを次のように変更します。

エディットの生成

コンポーネントツールバーでを選択し画面にエディットを生成します。

エディットのプロパティを次のように変更します。

ボタンの生成

コンポーネントツールバーでを選択し画面にボタンを生成します。

ボタンのプロパティを次のように変更します。

入力領域(ディビジョン、エディット、コンボ、スタティック)の生成

コンポーネントツールバーでそれぞれのコンポーネントを選択し、画面に配置させます。
それぞれのボタンのプロパティを次のように変更します。

コンボの生成

ds_deptをinnderdatasetにバインドしてから、codecolumnにcodecolumnを、datacolumnにdatacolumnをバインドします。
このように接続して実行すると、部署カラムコードではなく部署名が表示されます。

入力領域のコンポーネント別データセットの接合

ディビジョンの上に描いたコンポーネントは、idの前にディビジョン名が付いて区別されます。
データセットをドラッグして接合するコンポーネントに移すと、“Bind Item”画面が表示されます。

“Property”と“Column ID”のカラム値を選択します。

“Bind Item”画面は、“Project Explorer”画面で作業する画面名を探し、マウスの右側のボタンをクリックすると表示されるポップアップメニューでも確認できます。

スクリプトの作成

データを照会してから、必要なデータを追加、変更及び削除する機能を生成します。

サービス照会イベントの生成

スクリプトを作成するために“Search”ボタンを選択し、“Properties”画面のイベント目録で“onclick”イベントを探し、入力に接続する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[イベント名]_[コンポーネント名]”で生成され、既に同じ名前の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。もしも同じ名前の関数がない時には、スクリプトに関数を作り該当位置に移動します。

サービス呼び出しスクリプトの作成

サービスを呼び出す機能は、データセットの“load”を使用しました。
作成するスクリプトの内容は次の通りです。

function btn_search_onclick(obj:Button, e:ClickEventInfo)
{
	dsPerson.url = "datasvc::search.jsp"
	dsPerson.load();
}

データセットイベントのスクリプトの作成

データセットの“load”メソッドによりサーバーサービスを呼び出す場合には、呼び出しが正常/非正常かに関係なく、呼び出した全てのデータセットの “onload”イベントを発生させます。スクリプトを実行するために、データセットの“onload”イベントを探して、適切な関数名を登録します。関数名を登録する方法は、"サービス照会イベントの作成"を参照してください。

正常・異常な状況に対するスクリプトの実行は次の通りです。

function dsPerson_onload(obj:Dataset, e:DSLoadEventInfo)
{
	if (e.errorcode < 0) {
		alert(e.errorcode + ":" + e.errormsg);
		return;
	}
	if (e.reason == 0){
		trace("data searched : count ("+dsPerson.rowcount+")");
	}
}

Quick Viewメニューで実行テストをすると、次のような画面で実行されます。

追加イベントの作成

スクリプトを作成するために“Insert”ボタンを選択し、“Properties”画面のイベント目録で“onclick”イベントを探し、入力に接続する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[コンポーネント名]_[イベント名]”で、既に同一名の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。同一名の関数がない時にはスクリプトに関数を作り、該当の位置に移動します。

追加スクリプトの作成

追加機能はデータセットの“addRow”を使用しました。
作成するスクリプトの内容は次の通りです。

function div_top_btn_insert_onclick(obj:Button, e:ClickEventInfo)
{
	dsPerson.addRow();
	grd_PersonList.setCellPos(0);
	div_input.ed_name.setFocus();
}

削除イベントの生成

スクリプトを作成するために“Delete”ボタンを選択し、“Properties”画面のイベント目録で“onclick”イベントを探し、入力に対応する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[イベント名]_[コンポーネント名]”で、既に同一名の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。同一名の関数がない時にはスクリプトに関数を作り、該当の位置に移動します。

削除スクリプトの作成

削除機能はデータセットの“deleteRow”を使用しました。
作成するスクリプトの内容は次の通りです。

function div_top_btn_delete_onclick(obj:Button, e:ClickEventInfo)
{
	if (confirm("do you want to delete data ?")) {
		dsPerson.deleteRow(dsPerson.rowposition);
	}
}

保存イベントの作成

スクリプトを作成するために“Save”ボタンを選択し、“Properties”画面のイベント目録で“onclick”イベントを探し、入力に対応する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[コンポーネント名]_[イベント名]”で、既に同一名の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。同一名の関数がない時にはスクリプトに関数を作り、該当の位置に移動します。

保存スクリプトの作成

保存機能はアプリケーションの“transaction”を使用しました。
作成するスクリプトの内容は次の通りです。

function div_top_btn_save_onclick(obj:Button, e:ClickEventInfo)
{
	var svcURL = "datasvc::save_list.jsp";
	var inDS = "dsPerson=dsPerson";

	transaction("save", svcURL, inDS, " ", "", "fn_callBack");
}

“8.4章”でsave_list.jspについて説明します。
アプリケーションの“transaction”は、結果に対する処理のためにコールバック関数をあわせて使用します。
作成するスクリプトの内容は次の通りです。
この時、関数名(fn_callBack)はトランザクション引数のひとつであるコールバック引数と同一でなければなりません。

function fn_callBack(svcid,strErrCode,strErrMsg) 
{
	if (strErrCode != 0) {
		alert(strErrCode + " : " + strErrMsg);
		return;
	}
	if (svcid == "save"){
		alert("data has been saved");
		return;
	}
}

条件検索イベントの作成

スクリプトを作成するためにエディットを選択し、“Properties”画面のイベント目録で“ontextchanged”イベントを探し、入力に対応する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[コンポーネント名]_[イベント名]”で生成され、既に同じ名前の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。もしも同じ名前の関数がない時には、スクリプトに関数を作り該当位置に移動します。

条件検索スクリプトの作成

検索機能はデータセットの“filter”を使用しました。
作成するスクリプトの内容は次の通りです。

function ed_search_ontextchanged(obj:Edit, e:TextChangedEventInfo)
{
	if (div_top.ed_search.value)
	{
		var kkk = "person_name == '"+div_top.ed_search.value+"'";
		dsPerson.filter(kkk);
	}
	else
	{
		dsPerson.filter("");
	}
}

Quick Viewメニューで実行テストをすると、次のような画面で実行されます。

登録実行テスト

Quick Viewメニューをクリックしてテストします。
データを照会するとグリッドに表示されるデータが詳細内訳に表示され、グリッドを利用してRowを移動すると、詳細内訳のデータも現在のRowPositionに該当するデータに変更されて表示されます。“Insert”ボタンをクリックして新しいデータを追加します。グリッドにRowが追加されると、詳細内訳にデータを入力することができます。

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

“Insert”で追加されたデータと“Delete”処理されたデータは、“Save”ボタンをクリックしてサービスを呼び出すと作業内容がサーバーに反映されます。
“Save”ボタンをクリックしてサービスを呼び出し、サービスが正常に実行されたのかどうかエラーメッセージを確認します。