照会画面は、名刺管理システムのデータを条件別に照会する画面です。
サービスを呼び出してデータセットでデータを保存するスクリプトについて学びます。
そして、データセットをグリッドに接合してデータを出力する方法を学びます。
グリッドのカラムをデザインして、お望みの出力型式を作成します。

画面の生成

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

カラムのデザイン

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

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

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

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

変更するカラムを選択し、右側にあるプロパティ画面で修正します。
削除するカラムを選択し、マウスの右側のボタンをクリックすると表示されるポップアップメニューで作業します。カラムの順序を変更したい時には、“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をバインドします。
このように接続して実行すると、部署カラムコードではなく部署名が表示されます。

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

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

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

ディビジョンの生成

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

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

スタティックの作成

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

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

エディットの作成

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

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

ボタンの作成

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

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

スクリプトの作成

プログラムの実行時に、サーバーにロードしたサービス(search.jsp)を呼び出す方法です。
ここで呼び出したサービスの作成方法は“照会サービス – search.jsp”で説明します。
ここでは、該当のサービスが既に完成されていると仮定します。
画面にサービスを呼び出すためのボタンを作成し、クリックした時にサーバーのサービスを呼び出し、データセットでデータを受け取るようにするスクリプトを作成します。

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

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

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

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

function btn_search_onclick(obj:Button, e:ClickEventInfo)
{
	var svcURL = "datasvc::search.jsp";
	transaction("search", svcURL, "", "dsPerson=dsPerson", "", 
		"fn_callBack");
}

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

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

transaction(strSvcID,strURL,strInDatasets,strOutDatasets,strArgument
    ,strCallbackFunc[,bAsync[,bBinary[,bCompress]]]);

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

データセットの“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("データを"+dsPerson.rowcount+"件照会しました。");
	}
}

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

条件検索イベントの作成

スクリプトを作成するためにエディットを選択し、“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メニューで実行テストをすると、次のような画面で実行されます。