照会画面は、顧客管理システムのデータを条件別に照会する画面です。

• サービスを呼び出して、データセット(Dataset)にデータを保存するスクリプトを学びます。

• データセット(Dataset)をグリッド(Grid)にバインドして、データを画面に表示する方法を学びます。

• グリッド(Grid)のカラムをデザインして画面を作りたい形を作ります。

  (サンプルのデザインは、使うテーマによって異なる場合があります。)

プロジェクトの生成

プログラムを作成するためにプロジェクト(Project)を作り、画面(Form)を追加して、コンポーネント(Component)をデザインする工程が必要です。

手順は次の通りです。

プロジェクト作成

XPLATFORMの開発ツールUX-Studioを実行します。

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

2. “Project Wizard” ウィンドウを利用して Name,Location を指定します。

3. “Project Wizard” ウィンドウを利用して、ADL,Type Definition ファイルの生成を指定します。

4. “Project Wizard”に使ったオプションは次の通りです。

5. “Project 作成”が完了すれば UX-Studioに作られたプロジェクトが開きます。

画面(Form) 作成

1. “Form作成” メニューを選択します。(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”に使ったオプションは、次の通りです。

6. “Form作成”が完了すれば、UX-Studioに作った画面(Form)が開きます。

7. Formのtitletext属性値を “顧客リスト照会”に指定します。

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

データセット(Dataset) コンポーネントは、サーバーからデータを受信して、グリッド(Grid)にデータを送ります。
データセット(Dataset)は、データを保管するだけでなく、データが変更(追加/修正/削除)された状態を確認できます。 修正されたデータは、変更前の元データを保管します。
データセット(Dataset)は、2次元テーブル形式でデータを保管し、カラム(Column) 構造を持ち、ロー(Row,Record)単位でデータを扱います。
一つの画面(From)は、一つ以上のデータセット(Dataset)を持つことができます。
データが全体プロジェクトに共通される内容である時には、データセット(Dataset)を共通領域(Global Dataset)に作って、複数の画面(Form)から同時にバインドして使うことができます。

データセット作成 - データセット : Dataset

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

どの部分をクリックしても、データセット(Dataset)は、“Invisible Objects” タブに作られます。

データセット(Dataset)もコンポーネントの一種なので、属性とイベントは “Properties”ウィンドウで設定します。データセットのidを“dsCustomers”に設定します。

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

データセットは、2次元テーブル形式でデータを保管します。
テスト用データを入力してデザインする時に活用することができます。
データセット(Dataset)のデザインは、“Dataset Contents Editor”ウィンドウを使います。
“Dataset Contents Editor” ウィンドウは、該当データセット(Dataset)をダブルクリックすると、現われます。

上段の “Const Columns” 情報は、すべてのレコード(Record,Row)から共通に持つ値の場合定数(Const Value)に扱い、“定数カラム(Const Column)”を作ります。
中央の “Columns” 情報は、レコードの形式をデザインするところです。
下段の “Rows”は、テスト用データを設定する部分です。
詳しい使い方は、“UX-Studio 使用方法”を参照してください。

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

1. “Dataset Contents Editor” ウィンドウを開いて中間部分の “Columns”部分に(Column)を一つ作ります。カラムを追加する場合は、“Columns” ツールバーにあるボタンをクリックします。

2. 追加されたカラム情報に “ID”、”Type”、“Size”を設定します。

   “ID”は、同じ Dataset 内でユニークな値を持つように指定します。

   日本語カラムIDも許容されますが、エンコードが合わない場合には認識ができないことがあるので、日本語カラムIDは推奨しません。

   “Type”は文字列(STRING)、定数型(INT)、実数型(FLOAT/DECIMAL)、日付型(DATE/DATETIME/TIME)、大きな実数型(BIGDECIMAL)、バイナリー型(BLOB) などがあります。

   “Size”の指定は自由ですが、Typeによって許容値が違うので、Typeが許容する長さに指定することをお勧めいたします。許容値を超すデータが入って来る場合には、許容範囲のデータだけ認識され、残りは切られるか無視されます。

完成された状態では、次のようになります。

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

画面の構成(1) : タイトル、照会ボタンのデザイン

基本照会プログラムに、タイトルと照会ボタン(Button)を追加する方法を説明します。
コンポーネントは、Static,Div,Buttonを使います。

タイトル作成 - スタティック : Static

コンポーネントツールバーからを選択してスタティック(“Static”)を作ります。

スタティック(“Static”)プロパティは、次のように変更します。

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

コンポーネントツールバーからを選択して、ディビジョン(“Div”)を作ります。

ディビジョン(“Div”)属性を次のように変更します。

ボタン作成 - ボタン : Button

コンポーネントツールバーからを選択して、画面にボタン(Button)を作ります。

ボタン(Button)属性を次のように変更します。

画面構成(2) : グリッド(Grid) - カラムデザイン

グリッド(Grid) コンポーネントは、データセット(Dataset)をバインド(Bind)して、データを画面に出力します。 グリッド(Grid)をデータセットにバインドすれば、出力だけではなく、グリッド(Grid)を通じた入力も可能なので、データセットのデータを修正することができます。
すべての作業はバインドされたデータセットを中心に行われて、リアルタイムデータセットに反映されます。
データセットにレコードを追加するとグリッド(Grid)に追加されたレコードが出力されます。
グリッド(Grid)を通じてデータを修正すれば、バインドされたデータセットのデータが直接修正されます。 グリッド(Grid)は、データを出力や入力をする時、Formatを与えることができます。 ユーザがデータをより分かりやすく認識できるように “-“ 文字などを出力時に表示するように設定可能です。 日付を入力する時は、有效範囲を超えないように、日付型の入力形式を選択することができます。

カラムのデザイン

コンポーネントツールバーからを選択して画面に描きます。

作られたグリッド(Grid)にデータセット(Dataset)をバインド(Bind)しようとする場合は、該当グリッド(Grid)を選択し、コンポーネント属性を指定することができる“Properties”ウィンドウにおいて、idを“grdCustomers”に設定し、“binddataset”を探して選択項目をクリックします。 画面にデザインされたデータセットと共通データセットリストが開けば、バインドしたいデータセットを選択します。

グリッド(Grid)をデザインした時、最初の状態では、上で示したように、空間表示のみが表示されます。 バインドするデータセットをドラッグしてグリッドの上にドロップします。

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

変更したいカラムを選択し、右側に表示されるプロパティウィンドウを利用して修正します。
削除したいカラムを選択し、マウス右クリックして表示されるポップアップメニューを利用して作業します。 カラムの順序を変更しようとする場合、“Cut”、“Paste”メニューを活用してください。XPLATFORMプログラムで、データはデータセットに保管され、グリッド(Grid)はデータセットにバインドして使うので、表示しようとするカラムのみデザインします。
グリッドのカラムとデータセットのカラムをバインドします。
事前にグリッドのbinddataset値を設定した状態でのみ、作業が可能です。
バインドしたグリッドのカラムを選択します。“Grid Contents Editor”右側に選択したカラムのプロパティウィンドウが表示されます。

“Binding”グループの“text”項目から、バインドするデータセットのカラムを選択します。　例題で使うグリッドは、次のようにカラムをデザインします。

1. col5から col9までのカラムを削除します。

2. ヘッダーを 2列に作るために ROWを追加します。

3. データも 2列に作るためにROWを追加する。

4. headとbodyのROWが増えたことを確認してください。

5. idと name ヘッダーは2列のヘッダーを一つに結合させます。

6. ヘッダーのtextを入力する。

7. idと name データも 2列のROWを一つに結合させます。

8. それぞれのセルにデータをバインドさせます。

9. カラムの大きさを指定します。

すべての作業が終わったら、 “OK”ボタンをクリックして完成します。

スクリプト作成 : ボタン(Button) - Dataset load

プログラム実行の時に、サーバーに実装しておいたサービス(search.jsp)を呼び出す方法です。
サーバーサービスは、すでに完成されていると仮定して進みます。
画面にサービス呼び出しのためのボタン(Button)を作ってクリックした時、サーバーサービスを呼び出して、データセット(Dataset)にデータを受け取るようにするスクリプトを作成します。

ボタン(Button) スクリプト作成

スクリプトを作成するために、“照会”ボタンを選択して、“Properties”ウィンドウのイベントリストから“Onclick”イベントを探して、入力に関連付けする関数名 (divCommand_btnSearch_onclick) を入れて、<Enter>キーを押します。または、ブランク状態でマウスをダブルクリックすると、自動に関数名が登録されて、作業領域(Work Area) スクリプト(script)タブに移動します。この時、自動に登録される関数は“[コンポーネント名]_[ イベント名]”で作られ、すでに同じ名前の関数がある場合には、スクリプト(Script)タブの該当関数の位置に入力カーソルが移動します。

データ追加スクリプトの作成

まずサーバーサービスを呼び出さずに、直接スクリプトにデータを追加するようにします。作成するスクリプト内容は、次の通りです。

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
	var row = dsCustomers.addRow();
	dsCustomers.setColumn(row, "id", "0");
	dsCustomers.setColumn(row, "name", "James Carman");
	dsCustomers.setColumn(row, "email", "carman@live.com");
	dsCustomers.setColumn(row, "birthday", "19650925");
	dsCustomers.setColumn(row, "phone", "619-987-6543");
	dsCustomers.setColumn(row, "home_addr", "1234 Bonnie Ct. San Diego");
	dsCustomers.setColumn(row, "company", "Oracle Corporation");
	dsCustomers.setColumn(row, "jobtitle", "Consultant");
	dsCustomers.setColumn(row, "busi_phone", "+1.650.506.7000");
	dsCustomers.setColumn(row, "busi_addr", "500 Oracle Parkway Redwood Shores");
}

HTML5のQuickViewメニューを利用して実行テストすると、次のような画面が実行されます。

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

サーバーのCGIと連動してデータをやり取りするスクリプトです。
サービスの呼び出し機能は、transaction メソッドを使いました。

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

以前に作成されたスクリプトを消して、サービス呼び出しスクリプトを再び作成します。
作成するスクリプト内容は次の通りです。

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

• ソースコード作成の時 URLが “http://127.0.0.1:8080/xplatform9-ajax/search.jsp”であることに気を付けてください。 Transactionの呼び出しIPはUX-StudioのHTML5 環境設定の時に、入力したコンパイル要請IPと一致しなければなりません。

  現在HTML5のDataset連動は、同一サーバーのリソースのみ許容しています。

transactionのコールバック(callback) 関数作成

transaction メソッドでサーバーサービスを呼び出す場合、呼び出しが正常または非正常的な状況すべて指定されたコールバック(callback) 関数を実行させます。 スクリプトを実装するために適当な関数名でスクリプトを作成して、transaction メソッド呼び出しを行なう際、引数でコールバック(callback) 関数名を渡します。

作成するスクリプト内容は次の通りです。

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

スクリプト作成の後、実行されるボタンは HTML5 ツールバーでです。
実行は、順次行なってください。
HTML5のQuickViewメニューを利用してプログラムを実行し、照会ボタンを押すと次のように動作します。

グリッドのコンボ作成

グリッドセルを多様なコンポーネントで表示したり、編集ができます。
その中の一つがコンボ(Combo)です。いくつかの例示値が示される選択リストの形式にはコンボ(Combo)を使います。すべてのコンポーネントを確認しようとすれば “ヘルプ(Help)”を参照してください。

1. グリッドのコンボに入る Datasetを追加します。

2. 画面からグリッドを選択、ダブルクリックして“Grid Contents Editor” ウィンドウを開きます。

3. “Grid Contents Editor”ウィンドウを利用して、“職責”カラムのプロパティを修正します。

   先に displaytypeを“combo”に選択してcombodatasetを“dsJobTitle”に選択すれば combocodecolとcobodatacolからバインドする カラムが現われます。

HTML5の QuickView メニューを利用して実行テストをすれば、画面は次のような形で実行されます。

照会条件作成 : Staic,Edit

基本照会のプログラムに、条件照会の機能を追加してみます。
画面に条件部分を追加します。
コンポーネントは、Static,Editを使います。

タイトル作成 - スタティック : Static

コンポーネントツールバーからを選択して、スタティック(“Static”)を作ります。
スタティック(“Static”)のプロパティを、次のように変更します。

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

コンポーネントツールバーからを選択して、画面にエディット(“Edit”)を作ります。
エディット(“Edit”)のプロパティを、次のように変更します。

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

条件照会のスクリプトを追加します。以前のスクリプトと変更された部分は “url”で、残りは同じです。作成するスクリプト内容は、次の通りです。

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
	var id = "search";
	var url = "http://localhost: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);
}

コンパイル及び実行

2012年2月のアップデートからCompileのスピード改善のためにServer Compile方式からLocal Compile方式に変更されました。つまり、従来には Serverでコンパイルしましたが、2012年2月のアップデートからはClient(PC)でコンパイルします。従来 Server Compile方式ではUX-StudioでCompileする *.xadl, *.xfdlなどをServerに転送し、Server Compileモジュールが転送されたファイルをコンパイルして *.jsファイルをServerにせいせいしました。但し、変更されたLocal Compile方式ではUX-Studioで Local CompileモジュールであるXHTML5Compiler.exeを呼び出して、このモジュールが *.xadl, *.xfdlなどをコンパイルして *.jsファイルをClientに生成します。Local Compileされたファイル名は、従来のServer Compile方式のファイル名と同じです。

プロジェクト全体コンパイル

プロジェクトの関連情報がまだコンパイルされていない状態のため、開発した画面を実行する前にプロジェクトを先にコンパイルする必要があります。
UX-Studio > HTML5メニュー > Compile Applicationメニューをクリックすると、プロジェクト全体がコンパイルされます。

Compileされたファイルが位置するフォルダは、UX-Studio > Tools > Options > HTML5 > Compiled Pathから設定します。Compiled Pathは、“<Tomcat Home>/webapps/xplatform9-ajax/projects”に設定します。この例から、プロジェクト名は“demo”なので、実際のプロジェクトが保存される位置は、“<Tomcat Home>/webapps/xplatform9-ajax/projects/demo/…”です。

コンパイル対象ファイルとコンパイル済みファイルは次の表のようです。

QuickView実行

開発した list.xfdlの一画面を実行する方法です。

1. list.xfdl画面をコンパイルします。UX-Studio > HTML5メニュー > Compile Fileメニューをクリックします。この例でプロジェクト名は“demo”、サービスグループ名は“Base”であるので、実際にコンパイルされた画面が保存される位置は“<Tomcat Home>/webapps/xplatform9-ajax/projects/demo/Base/list.xfdl.js”です。また、Debugのために上と同じパスに list.xfdl.debug.jsも生成されます。

1. UX-Studio > HTML5メニュー > QuickViewメニューを実行します。Debugモードで実行するためには QuickVeiw Debugメニューを実行します。

QuickViewダイアログにQuickView.jspの実行パスである “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp”を設定し、OKボタンをクリックします。QuciView Debugメニューの実行時にも上記のパスと同じように設定します。

2. WebBrowserが実行され、“http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp?formname=Base::list.xfdl”が実行されます。

   QuickView Debugメニューを実行するとhttp://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp?formname=Base::list.xfdl&debugmode=trueが実行されます。

Execute Application

一画面だけを実行する時には、QuickViewを使用しますが、プロジェクト全体を実行する時にはExecute Applicationメニューを使用します。次はプロジェクト全体実行方法に関する説明です。

1. プロジェクト全体をコンパイルします。上記の 1)で説明した内容と同じなので省略します。

2. UX-Studio > HTML5メニュー > Execute Applicationメニューを実行します。

LaunchProjectダイアログに LaunchProject.jsp実行パスである“http://127.0.0.1:8080/xplatform9-ajax/projects/demo/LaunchProject.jsp”を設定し、OKボタンをクリックします。

3. WebBrowserが実行され、“http://127.0.0.1:8080/xplatform9-ajax/projects/demo/LaunchProject.jsp”が実行されます。