画面の作成（顧客社リスト照会）

業務に使用されているアプリケーションの中で最も基本的な項目は、検索画面です。この章では、簡単な顧客リスト表示画面を作成しながら、グリッド(Grid)コンポーネントとデータセット(Dataset)を処理する方法を説明します。

画面構成

nexacro platformアプリケーションを作成する一般的な方法は、プロジェクトとフォームを作成し、フォーム内に必要なコンポーネントを配置するプロセスです。

プロジェクト(Project)

次のように新しいnexacro platformプロジェクトを作成します。

[Menu] File > New > Project

項目

設定値

説明

Name

CustomerList

プロジェクト名

Location

D:\XP\PJ\CustomerList

プロジェクトファイルの保存パス

フォーム(Form)

作成されたプロジェクトに顧客リストを表示するフォームを追加します。次のように新しいフォームを作成します。フォームの幅と高さは、フォームを作成した後にプロパティウィンドウで変更することができます。

[Menu] File > New > Form

項目

設定値

説明

Name

frm_list

フォーム名

Location

Base

サービスグループ(デフォルト値：Base)

Width

800

フォームの幅(デフォルト値：1024)

Height

600

フォームの高さ(デフォルト値：768)

フォームのtitletextプロパティ値を変更します。titletextプロパティ値は、Webブラウザに表示されるタイトルで適用されます。

プロパティ

値

説明

titletext

Customer List Search

フォームタイトル

データセット(Dataset)

データセットコンポーネントは、nexacro platformアプリケーション内でデータを管理する機能を提供します。ユーザーが入力するか、サーバーから取得したデータを保管し、データの変更(追加/変更/削除)状態を管理します。

データセットは、2次元テーブル形式でデータを管理します。カラム(Column)構造でロー(Row、Record)単位でデータを扱うことができます。一つのフォームに複数のデータセットを持つことができます。GlobalVariablesでデータセットを作成し、複数のフォームから共同で使用することもできます。

nexacro studioツールバーでデータセットを選択した状態で、デザイン領域任意の場所をクリックすると、データセットが追加されます。データセットは、画面に表示されるコンポーネントではなく、アプリケーション内でデータを管理するために使用されるコンポーネントであるため、Invisible Objects項目に管理されます。

プロパティウィンドウで追加したデータセットのプロパティを次のように変更します。

プロパティ

値

説明

id

dsCustomers

データセットのid

データセットコンテンツエディタ(Dataset Contents Editor)

一般的なコンポーネントは、プロパティウィンドウで関連するプロパティを変更しますが、データセットはデータを処理するための追加のツールとしてデータセットコンテンツエディタが提供されます。

データセットのコンテンツエディタは、2次元テーブル形式でデータを管理するために、カラムを設計し、データを直接追加することができる機能を提供します。データセットをダブルクリックすると、データセットのコンテンツエディタが表示されます。

データセットでデータを管理するためには、使用するカラムを追加する必要があります。Columns項目で Add a new Column をクリックしてカラムを追加します、

例で使用されるカラムは、次のとおりです。

No.

id

type

size

説明

1

id

STRING

4

一連番号

2

name

STRING

16

名前

3

email

STRING

32

メール

4

phone

STRING

16

電話番号

5

comp_name

STRING

32

会社

6

department

STRING

32

部署

7

comp_phone

STRING

16

会社連絡先

8

comp_addr

STRING

256

会社住所

Rows項目でテストのためのデータを追加することができます。データを追加する方法は、カラムを追加する方法と同じです。

追加された項目は、データセットコンテンツエディタでソースコードを通じて確認することができます。ソースコードを直接変更しても、データセットのカラムに反映されます。

コンポーネントの配置

顧客リスト検索画面は、タイトル、検索ウィンドウ、検索ボタン、グリッドで構成されます。全体的な画面の構成は、次のとおりです。

全体的なレイアウトをガイドラインを使用して指定し、ガイドラインに合わせて、必要なコンポーネントを配置します。nexacro studio画面の任意の場所のルーラー上にマウスをクリックするとガイドラインが表示され、ダブルクリックすると、削除されます。

画面の構成に使用したコンポーネントと変更したプロパティ値は次のとおりです。

コンポーネント

プロパティ

値

説明

1 Static

id

sttList

text

Customer List Search

表示する文字列

font

bold 20 Verdana

フォントプロパティ

2 Div

id

divCommand

3 Edit

id

edtSearch

4 Button

id

btnSearch

text

Search

ボタンに表示する文字列

5 Grid

id

grdCustomers

Divコンポーネントは、複数のコンポーネントを包み込んでくれる役割をします。 Divコンポーネントを最初に配置して中に入るコンポーネントを配置する必要があります。

例の中で、Divコンポーネント内に入るEdit、Buttonコンポーネントは、Divコンポーネントを先に画面に配置し、その上にコンポーネントを追加する必要があります。

グリッド

データを扱う画面を構成する場合、最もよく使用されるコンポーネントは、グリッドです。グリッドは、コンポーネント単独で使用するより、データを管理するデータセットと連結して使用します。

データバインディング

画面に配置されたグリッドにデータを表示するためには、データセットに接続する必要があります。このような接続作業を、データバインディング(Binding)と呼びます。グリッドだけでなく、データを画面に表示できるすべてのコンポーネントは、データセットと接続することができます。

グリッドにデータセットを接続すると、データを表示するだけでなく、グリッド内のデータを直接変更したり、入力することができ、変更されたデータは、データセットにすぐに反映されます。

グリッドにデータセットを接続する方法は、binddatasetプロパティ値にデータセットのid値を指定するか、nexacro studioの画面上でデータセットコンポーネントをマウスでクリックして、グリッド·コンポーネント上にドラッグして移動させます。

データセットをドラッグして、Gridコンポーネント上にドロップすると、binddatasetプロパティの値は、該当データセットidで指定され、formatsプロパティにデータセットのカラムに基づいて値が作成されます。そして、画面上でも、データセットカラムに基づいてグリッドの形が変わったことを確認することができます。

グリッドコンテンツエディタ(Grid Contents Editor)

グリッドとデータセットを接続し、自動的にformatsプロパティの値が作成されましたが、他の型でデータを表記することをご希望する場合は、グリッドコンテンツエディタで、ご希望する型を作成することができます。グリッドをダブルクリックするか、プロパティウィンドウformatsプロパティと連携されているボタンをクリックすると、グリッドコンテンツエディタが実行されます。

グリッドコンテンツエディタは、グリッドにデータをどのように表示するかを編集できる空間です。データを表示する型のみ扱っており、実際のデータセットには影響しません。

新しい型を編集するために既存の設定された内容を削除します。グリッドコンテンツエディタでheadとbodyを選択し、コンテキストメニューでDelete項目を選択して指定した型を削除します。

新たに編集されるカラムは、次のような構造で作成します。4つのカラムがカラムにより2つの見出し(Head)行と本文(Body)行に構成されます。

まず、見出し行を追加します。グリッドコンテンツエディタで右クリックして表示されるコンテキストメニューからAdd Head Row項目を選択します。

そして、4つのカラムを追加します。見出し行を追加したら、基本的に1つのカラムが作成され、Add Column項目が有効になります。Add Column項目を選択して3つのカラムを追加します。

col2とcol3カラムに2種類のデータを表記するために、見出し行と本文行を2つずつ追加します。本文行は、Add Body Row項目を選択して追加することができます。

col0とcol1カラムは一つのデータのみ接続してくれるので、セルを合わせる必要があります。col0の見出し行のセルを選択し、コンテキストメニューからMerge Cells項目を選択します。複数のセルを選択する場合は、単一のセルを選択した後でマウスをドラッグするか、Shiftキーを押しながら別のセルを選択します。

セル結合をしようとすると、既存のセルのプロパティをそのまま維持するかどうかを選択する必要があります。ここでは、subcellプロパティを使用しないので、"No"を選択します。

col0、col1の本文行のセルも一つに結合します。

Ctrlキーを押しながら複数のセルを選択すると、コンテキストメニューからMerge Cells項目が無効になります。

以下のように各カラムに該当する値を指定します。該当するセルを選択し、右側に表示されているプロパティウィンドウで値を入力することができます。

カラム

Head Cell: text

Body Cell: text

Column: size

col0

ID

bind:id

80

col1

Name

bind:name

150

col2

Email

bind:email

200

Phone

bind:phone

col3

Company

bind:comp_name

320

Department

bind:department

値を入力してOKボタンをクリックすると、ウィンドウが閉じて、グリッドに変更されたカラムの形式が反映されます。

データテスト

サービス運用段階では、データベース内のデータを取得して画面に表示しますが、テスト段階では、機能を実装するかどうかだけを確認する場合もあります。簡単なスクリプトでデータをデータセットに追加し、接続されたグリッドにデータを表示します。

ボタンクリックイベント

btnSearchボタンにクリックイベントを追加し、データを処理するスクリプトを作成します。btnSearchボタンコンポーネントを選択し、プロパティウィンドウで、onclickイベントを追加します。イベントプロパティ値を追加し、プロパティウィンドウをダブルクリックするか、Enterキーを入力すると、該当イベント関数を新たに作成するかを選択することになります。

プロパティ

値

説明

onclick

divCommand_btnSearch_onclick

ボタンクリックイベント

イベントスクリプトは次のとおりです。データセットに1件のデータ行を追加し、値を指定します。

this.divCommand_btnSearch_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
     var row = this.dsCustomers.addRow();
     this.dsCustomers.setColumn(row, "id", "TC-001");
     this.dsCustomers.setColumn(row, "name", "Dustin Kim");
     this.dsCustomers.setColumn(row, "email", "ceo@tobesoft.com");
     this.dsCustomers.setColumn(row, "phone", "6987-6543");
     this.dsCustomers.setColumn(row, "comp_name", "TOBESOFT");
     this.dsCustomers.setColumn(row, "department", "0");
     this.dsCustomers.setColumn(row, "comp_phone", "6506-7000");
     this.dsCustomers.setColumn(row, "comp_addr", "Seoul");
}

Generate

これで、作成されたアプリケーションをWebブラウザで実行します。最初に作成したコードをJavaScriptのファイルに変換します。Outputウィンドウで、定期的にJavaScriptのファイルが作成されていることを確認することができます。

[Menu] Build > Generate Application

Quick View

Webサーバーを実行し、nexacro studioでQuick View を実行します。WebブラウザでQuick Viewを実行するには、ビルドツールバーを有効にし、ブラウザのオプションを変更する必要があります。Webブラウザのオプションでは、PCにインストールされたWebブラウザを選択することができます。

最初WebブラウザでQuick Viewを実行するとQuickView.htmlファイルがあるパスを入力する必要があります。 Generateパスとは異なる可能性があるため、別々に項目が管理されます。

指定されたWebブラウザが実行されながら、実行されたnexacro platformアプリケーションを確認することができます。 Searchボタンをクリックすると、スクリプトで追加したデータがグリッドに表示されます。