業務に使用されるアプリケーションは、特別な場合を除いて、データを個々のPCで管理しません。データを管理するサーバーで検索されたデータをアプリケーションで編集し、その結果を再びデータサーバーで管理するようにします。
この章では、nexacro platformアプリケーションでコードデータをどのように扱って、サーバー上のデータをどのように取得するか、そしてWebブラウザでログを確認する方法まで説明します。
グリッドコンボ
データベースに管理されている項目の中で国、部署、役職などのデータは、複数回繰り返して使用される項目です。このようなデータを文字列そのまま入力すると、入力したユーザーごとに異なって入力したり、データベースで無駄な領域占有が発生することがあります。それで、このようなデータは別のコードテーブルを作成して管理します。
例でも、Department項目は、部門名ではなくコードのみをデータベースで管理しています。ただし、ユーザーに表示する場合は部署名を示す必要があります。グリッドコンポーネントには、データ型によってdisplaytypeプロパティを選択することができます。
データセット(Dataset)
まず、データセットを新規作成し、プロパティとカラムの値を次のように入力します。
プロパティ | 値 | 説明 |
---|---|---|
id | dsDepartment | データセットid |
No. | id | type | size | 説明 |
---|---|---|---|---|
1 | code | STRING | 32 | 部署コード |
2 | value | STRING | 32 | 部署名 |
グリッド(Grid)
グリッドをダブルクリックして、グリッドコンテンツエディタを実行します。 Department項目のデータセルを選択し、プロパティウィンドウで次の項目を変更します。combodataset項目は直接入力するか、リストから選択することができ、combodataset項目が入力されるとcombocodecol、colbodatacol項目も直接入力するか、リストから選択することができます。
プロパティ | 値 | 説明 |
---|---|---|
displaytype | combo | 該当セルのデータ表示形式 |
combodataset | dsDepartment | displaytypeやedittypeがcomboの場合にコンボコンポーネントと接続されるデータセット |
combocodecol | code | コードカラム |
combodatacol | value | データカラム |
Generate
ADL以外のフォームを変更した場合には、変更されたフォームに該当するファイルのみ再作成します。メニューからGenerate ApplicationではなくGenerate Fileを選択します。
[Menu] Build > Generate File
Quick Viewで再実行すると、Department項目がコードの代わりに部門名で表記されていることを確認することができます。
トランザクション
今回は、transactionメソッドを使用して実際のサーバーからデータを取得します。 nexacro platformアプリケーションで使用するデータ型によって作成されたXMLファイルをインポートする方法でテストを実行します
単純なデータ検索のためのテストデータを作成したことであり、実際のアプリケーションの運用環境では、データストアに保存されているデータをインポートする形式で開発する必要があります。
sample.xml
例で使用するXMLファイルは、次のとおりです。4つのレコードを持っており、検索に成功したことを前提で作成しました。
<?xml version="1.0" encoding="utf-8"?> <Root xmlns="http://www.nexacroplatform.com/platform/dataset" ver="5000" > <Parameters> <Parameter id="ErrorCode" type="int">0</Parameter> <Parameter id="ErrorMsg" type="string">SUCC</Parameter> </Parameters> <Dataset id="customers"> <ColumnInfo> <Column id="id" type="STRING" size="4"/> <Column id="name" type="STRING" size="16"/> <Column id="email" type="STRING" size="32"/> <Column id="phone" type="STRING" size="16"/> <Column id="comp_name" type="STRING" size="32"/> <Column id="department" type="STRING" size="32"/> <Column id="comp_phone" type="STRING" size="16"/> <Column id="comp_addr" type="STRING" size="256"/> </ColumnInfo> <Rows> <Row> <Col id="id">TC-001</Col> <Col id="name">Dustin Kim</Col> <Col id="email">ceo@tobesoft.com</Col> <Col id="phone">6987-6543</Col> <Col id="comp_name">TOBESOFT</Col> <Col id="department">0</Col> <Col id="comp_phone">6506-7000</Col> <Col id="comp_addr">Seoul</Col> </Row> <Row> <Col id="id">TC-002</Col> <Col id="name">Sean Oneal</Col> <Col id="email">ibero.Donec.consectetuer@ac.ca</Col> <Col id="phone">7357-3715</Col> <Col id="comp_name">AC</Col> <Col id="department">0</Col> <Col id="comp_phone">7357-7000</Col> <Col id="comp_addr">Lansing</Col> </Row> <Row> <Col id="id">TC-003</Col> <Col id="name">ieter Valenzuela</Col> <Col id="email">ornare@Maecenasmifelis.com</Col> <Col id="phone">9025-0645</Col> <Col id="comp_name">Maecenasmifelis</Col> <Col id="department">0</Col> <Col id="comp_phone">9025-7000</Col> <Col id="comp_addr">Coral Springs</Col> </Row> <Row> <Col id="id">TC-004</Col> <Col id="name">Mark Contreras</Col> <Col id="email">vitae.posuere@consectetueripsumnunc.ca</Col> <Col id="phone">7026-3815</Col> <Col id="comp_name">consectetueripsumnunc</Col> <Col id="department">0</Col> <Col id="comp_phone">7026-7000</Col> <Col id="comp_addr">Elmira</Col> </Row> </Rows> </Dataset> </Root>
ボタンクリックイベント
以前に作成したボタンのクリックイベント(divCommand_btnSearch_onclick)に手作業でデータを追加するコードの代わりにsample.xmlファイルにアクセスしてデータを取得するコードを追加します。
修正されたコードは次の通りです。transactionメソッドに必要なパラメータを指定してメソッドを呼び出します。transactionメソッドは、特定のデータセットの値を更新するためのサービス(またはファイル)にアクセスしてデータをダウンロードし、作業が完了すると、コールバック(CallBack)関数を呼び出すメソッドです。
this.divCommand_btnSearch_onclick = function(obj:Button, e:nexacro.ClickEventInfo) { var id = "search"; var url = "http://localhost:8080/CustomerList/sample.xml"; var reqDs = ""; var respDs = "dsCustomers=customers"; var args = ""; var callback = "received"; this.transaction(id, url, reqDs, respDs, args, callback); }
例で、transactionメソッドに使用したパラメータは次のとおりです
パラメータ | タイプ | 説明 |
---|---|---|
id | String | トランザクションを区分するID |
url | String | トランザクションを要求するサービス、またはファイルのURL |
reqDs | String | アプリケーションに使用されたデータセットのデータが変更されたときに変更されたデータセットを指定する値です。 (サービスまたはファイルに指定されたデータセット) = (アプリケーションで変更されたデータセット)の形式で送信して、1つ以上の値を空白で区切って指定することができます。 |
respDs | String | トランザクション処理結果を受信するときに指定する値です。 (アプリケーションで変更されたデータセット) = (サービスまたはファイルに指定されたデータセット)の形式で送信して、1つ以上の値を空白で区切って指定することができます。 |
args | String | トランザクション要求時に送信されるパラメータを指定する値です。 parameter_name= valueの形式で送信し、1つ以上の値を空白で区切って指定することができます。 |
callback | String | トランザクションの結果を処理するコールバック関数を指定する値です。 |
transactionメソッドは、非同期通信、バイナリ通信、圧縮通信を指定する3つのパラメータがあり、該当パラメータは省略すると、デフォルト値が適用されます。
コールバック関数
transactionメソッドにサービスやファイルにアクセスした後で指定されたコールバック関数を実行します。コールバック関数は次のように作成します。
this.received = function(id, code, message) { if (code == 0) { this.alert(this.dsCustomers.rowcount + " numbers of data have been found."); trace(this.dsCustomers.rowcount + " numbers of data have been found."); } else { this.alert("Error["+code+"]:"+message); trace("Error["+code+"]:"+message); } }
例で使用されたxmlファイルは常に成功メッセージのみ送信されるため、次のようなメッセージが表示され、グリッドにデータを表示します。
トランザクションurlがnexacro platformアプリケーションと同じサーバー上にない場合、Access-Control-Allow-Originエラーが発生することがあります。
ログ
nexacro platformアプリケーションで発生するエラーメッセージやtraceメソッドで処理されるメッセージは、ランタイムとWebブラウザによって少しずつ異なります。フォームデザインやGenerate過程で発生するエラーメッセージは、nexacro studio Outputウィンドウで確認することができます。
ただし、アプリケーションの実行中に発生するエラーメッセージは、ランタイムの場合には、nexacro studio Outputウィンドウで確認することができ、HTML5バージョンで実行する場合、各Webブラウザの設定によって確認方法が異なります。
次の内容は、特定の時点のバージョンのWebブラウザで確認した内容です。使用しているバージョンによって、一部内容が変更されることがあります。
- Google Chrome 34.x
- Firefox(ファイアフォックス) 20.x
- Internet Explorer(インターネットエクスプローラ) 10.x
Google Chrome
下記のメニューからJavaScriptコンソールを表示できます。
[Menu] Tools > JavaScript Console
Firefox(ファイアフォックス)
下記のメニューからJavaScriptコンソールを表示できます。Google Chromeよりも多くの機能と情報を提供しています。
[Menu] Web Developer > Web Console
Internet Explorer(インターネットエクスプローラ)
下記のメニューからJavaScriptコンソールを表示できます。Internet Explorerは、メニューを使用せずに設定アイコンをクリックしてもすぐにdeveloper tools項目にアクセスすることができます。
[Menu] Tools > developer tools > Console