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

画面構成

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

プロジェクト(Project)

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

[Menu] File > New > Project

フォーム(Form)

プロジェクトの生成時に、フレームセットの設定として作られたForm_Workフォームを使用します。フォームの幅と高さは、フォームを作成した後にプロパティウィンドウで変更することができます。

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

データセット(Dataset)

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

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

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

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

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

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

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

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

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

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

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

<ColumnInfo>
  <Column id="id" type="STRING" size="4" description="id"/>
  <Column id="name" type="STRING" size="16" description="名前"/>
  <Column id="email" type="STRING" size="32" description="メール"/>
  <Column id="phone" type="STRING" size="16" description="電話番号"/>
  <Column id="comp_name" type="STRING" size="32" description="会社"/>
  <Column id="department" type="STRING" size="32" description="部署"/>
  <Column id="comp_phone" type="STRING" size="16" description="会社連絡先"/>
  <Column id="comp_addr" type="STRING" size="256" description="会社住所"/>
</ColumnInfo>

コンポーネントの配置

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

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

グリッド

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

データバインディング

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

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

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

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

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

グリッドとデータセットを紐づける作業によって、自動的にformatsプロパティの値が作成されましたが、他のフォーマットでデータを表記したい場合は、グリッド・コンテンツ・エディタでフォーマットを作成することができます。グリッドをダブルクリックするか、プロパティウィンドウformatsプロパティと連携されているボタンをクリックすると、グリッド・コンテンツ・エディタが実行されます。

グリッド・コンテンツ・エディタは、グリッドにデータをどのように表示するかを編集できる画面です。データの見た目のみ編集するため、実際のデータセットには影響しません。

新しい型を編集するために既存の設定された内容を削除します。グリッド・コンテンツ・エディタでrow0項目を選択して、キーボードのShiftキーもしくはCtrlキーを押しながらrow1項目を選択して、エディタ上部のツールバーでDeleteを選択して、自動生成されたフォーマットを削除します。

8つのカラムを2つの行で表示するように変更します。変更されたフォーマットは、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キーを押しながら別のセルを選択します。

[Merge Cells]の項目は、2つのオプションがあります。[Merge Cells(A big cell)]は、各セルのプロパティをすべて削除して、1つのセルとして結合することであり、[Merge Cells(Having child cells)]は、個々のセルのプロパティをそのまま維持した状態で、1つのセルのように見えるように結合することです。今回の例では、各セルのプロパティを維持する必要がないので、 [Merge Cells(A big cell)]項目を選択します。

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

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

GridコンポーネントとバインドされたDatasetがある場合、Datasetに設定された列のリストをエディタで確認することができます。textプロパティに直接「bind:id」という値を入力するか、リストから「id」項目を選択することができます。

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

データテスト

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

ボタンクリックイベント

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

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

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

Generate

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

[Menu] Generate > Application

Quick View

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

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