Easy UI Coreの機能として提供されるModel、Viewテンプレート、Actionを作成し、これらを用いて情報の照会や更新を行うUI機能を作成することができます。

データ（Model）とコードの自動生成テンプレート（Viewテンプレート）を基にコンポーネントを配置したりDatasetオブジェクトを構成したコードを生成することで画面を構成します。その画面と実行スクリプト（Action）を繋いで、ユーザの入力や特定の条件でイベントが発生するようにします。

本章では、機能を説明するための例題として、簡単な画面を作成します。 画面の上部に検索UIを、中央にGridコンポーネントの結果リストを、そして下部にはGridコンポーネントをクリックすると表示される詳細情報を配置します。ここでは事前に作成したModel、Viewテンプレート、Actionを用いて作成する方法を説明します。

また、画面構成で使用したModel、Viewテンプレート、Actionの作成方法は別途説明します。

Easy UI Tutorial Wizard

Easy UI Tutorial WizardはEasy UIを使って画面を構成する方法を簡単に調べ、必要な開発環境を設定してサンプルファイルをインストールします。

Easy UI Tutorial Wizardを実行

プロジェクト作成時に[Use 'Easy UI' > Start Tutorial]を選択したか、プロジェクトを開いた状態でメニュー[Easy UI > Let's Try Easy UI]を選択した場合、Easy UI Tutorial Wizardを実行します。

プロジェクト生成ウィザードの実行でUse 'Easy UI'を選択

Easy UIの段階で[Use 'Easy UI' > Start Tutorial]項目を選択し、「Finish」ボタンをクリックすると、Easy UI Tutorial Wizardを実行します。

Easy UI Tutorial Wizardの実行中に「Cancel」ボタンをクリックすると、Easy UIの設定なしでプロジェクトを生成します。

メニューからLet's Try Easy UI項目を選択

メニュー[Easy UI > Let's Try Easy UI]を選択すると、Easy UI Tutorial Wizardを実行します。現在開いているプロジェクトに開発環境を設定し、サンプルファイルをインストールします。

Easy UI Tutorial Wizardの実行画面

Easy UI Tutorial Wizardは設定値を入力する画面はなく、Easy UI機能の概要を紹介する画面になっています。 「Next」、「Prev」ボタンをクリックすることで、次の画面に進めたり、前の画面に戻ることができます。

Easy UI Tutorial Wizardの実行結果

Easy UI Tutorial Wizardを実行し、「Finish」ボタンをクリックすると、プロジェクトに下記のような結果が反映されます。

• Viewコンポーネントが使用できるよう設定し、ツールバーに表示します。

• modelタイプのサービスを登録し、3種類のモデルサンプルを登録します。

• 3種類のView Templateを登録します。

• 2種類のActionオブジェクトをインストールして登録します。

• 4種類のViewset Templateを登録します。

• そして、sample_SingleDetail Viewset TemplateとしてEasyUITutorialForm.xfdlファイルを生成します。

EasyUITutorialForm.xfdl

Easy UI Tutorial Wizardの実行結果として生成されるファイルです。QuickViewで実行して「Search」ボタンをクリックすると、データを照会できます。

全画面モードは2つのViewで構成されています。Easy Design Modeを有効にして、それぞれのViewの右下にある「i」ボタンをクリックすると、View情報を確認できます。

Model、Viewテンプレート、Actionによる画面構成

Model、ViewSetテンプレート、Viewテンプレート、Actionは既に用意されているものをを用いて画面を構成する方法を説明します。

開発環境の設定

ここでは、Model、ViewSetテンプレート、Viewテンプレート、Actionは既に用意されているものを使用します。既存のプロジェクトに追加する場合には、新しいプロジェクトから開始ステップはスキップして、ViewSetテンプレートファイルの取得ステップから進めます。

新しいプロジェクトにxpackageファイルをインポートして開始

xpackageファイルを使用すると、下記の作業をまとめて処理することができます。

• サービスを追加してフォルダを作成（SvcModelSample, Sample）

• モデルのインポート（SvcModelSample.xmodel）

• Viewテンプレートのインポート（viewSampleForm.xviewgen、viewSampleGrid.xviewgen）

• ViewSetテンプレートのインポート（vieTemplateSample.xtemplate）

• sample XMLファイルの作成（sample.xml）

下記の作業については、個別で設定してください。

• TypeDefinitionでnexacro.Viewコンポーネントの追加

• Actionモジュールインストール

• Easy UIパネルの表示

既存の項目と同じファイルである場合には、Overwriteが表示されます。Preview画面の上部にあるオプションを選択して、名前を変更してから追加することができます。

モジュールをインストールすると、プロジェクトを更新します。

新しいプロジェクトから開始

モジュールをインストールすると、プロジェクトを更新します。

ViewSetテンプレートファイルの取得

ViewSetテンプレートファイルが保存されるデフォルトフォルダは、メニューの[Tools > Options > Easy UI]に設定されているForm Templateパス配下のviewsetフォルダです。

viewsetフォルダの下にカテゴリーフォルダ（sample）とViewSetテンプレートフォルダ（viewTemplateSample）を生成し、xtemplateファイルをコピーする必要があります。

Viewテンプレートファイルの取得

新しいFormの作成

ModelとViewテンプレートで画面UIの生成

Modelを選択してViewコンポーネントへドラッグ＆ドロップすると、Viewテンプレートと追加プロパティを選択します。選択した項目に従って画面UIを生成します。

検索UIの生成

ModelをマウスでドラッグしてViewコンポーネントの上に移動すると、黒色でViewコンポーネントの領域が表示されます。

デザイン画面上にある[Easy Design Mode]ボタンをクリックすると、Easy Design Modeが有効化されます。Viewコンポネントの右下にある「i」ボタンをクリックすると、紐づいているModel情報とView Template情報などが表示されます。

Grid UIの生成

詳細情報UIの生成

sourceviewのプロパティ値を変更すると、Gridコンポーネントと同じDatasetにバインドした状態に変更されて、Gridコンポーネントで選択した値が3番目のViewコンポーネントに表示されます。

Actionを使用してデータ照会機能の追加

Buttonコンポーネントをクリックすると、Actionが動作するように機能を追加します。サーバーに接続せずにデータ照会機能を実現するために、XMLファイルを作成してデータを照会します。

Actionに接続

samplefilenameは、情報を照会するXMLファイル名を入力します。例題では、「sample.xml」ファイルを作成しました。データ照会後に処理するActionに伝えるalerttypeプロパティは、デフォルト値（false）をそのまま維持します。

Triggerはイベントを追加するのと似た作業です。例題では、Buttonのクリック時にActionが動作するようにするために、typeプロパティ値は「Click」、viewは検索UIがある「View00」、objectはButtonコンポーネントである「btn_Trigger」を選択しました。type、view、objectの順に選択すると、次の入力項目に該当するリストのみ表示され、リストの中でプロパティ値を選択します。

conditionプロパティはActionが動作する条件ですが、ここでは使いません。

Invisible Object領域にActionが追加されたのを確認できます。

Easy UI Designモードで最初のViewコンポーネントを選択すると、Controller情報が追加されたのを確認できます。

sample XMLファイルの生成

ローカルで簡単にテストできるようにXMLファイルを配置します。

<?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="ds_viewdataset">
          <ColumnInfo>
               <Column id="name" type="STRING" size="80"/>
               <Column id="company" type="STRING" size="80"/>
          </ColumnInfo>
          <Rows>
               <Row>
                    <Col id="name">john</Col>
                    <Col id="company">1dollar</Col>
               </Row>
               <Row>
                    <Col id="name">donald</Col>
                    <Col id="company">EBOT</Col>
               </Row>
          </Rows>
     </Dataset>
</Root>

画面の実行

Gridコンポーネントで選択したRowを変更すると、3番目のViewコンポーネントに表示される情報も変更されるか確認します。

データ照会Actionの成功時に処理されるActionの追加

特定のActionで必要な機能が成功もしくは失敗した場合に連結して処理する必要があるActionを指定できます。前の段階でデータ照会に成功した場合、アラートメッセージを表示するActionを追加します。

Actionに接続

messageはalertメソッドの実行時に伝達するパラメータ値です。

Triggerはイベントを追加するのと似た作業です。例題では、指定したActionでonsucessイベントが発生したときにActionが動作するようにするためにtypeプロパティ値を「ActionSuccess」に指定します。viewプロパティ値は、ViewコンポーネントではなくFormオブジェクトを選択します。Formオブジェクトを選択すると、object項目にはActionリストのみ表示されます。

conditionプロパティはActionが動作する条件でありますが、データ照会Actionでalerttypeプロパティ値が「true」である場合のみ動作するように条件を設定します。

condition: triggerobj.alerttype == 'true'

Invisible Object領域にActionが追加されたのを確認できます。

データ照会Actionのプロパティ値を変更

画面の実行

データが照会され、アラートダイアログが表示されるのを確認します。

Actionにトリガーのみ追加

上記で、ボタンをクリックしてデータを照会する機能を追加しましたが、ボタンのクリックだけでなくFormがロードされる時点でデータを照会する機能を追加します。

Action設定

Actionを使用してデータ照会機能の追加ではController Wizardがすぐに実行されましたが、既にActionオブジェクトを追加済みであるので、新しいActionオブジェクトを作成するか、トリガーのみ追加するかを選択します。

Controller Wizardの代わりにTrigger Item Editorが実行されます。

Trigger Item Editorはメニューの「Easy UI > Design > Trigger Editor」から確認・修正できます。

画面実行

Form onloadイベントが発生してトリガーが動作し、データを照会します。ボタンをクリックしなくても、データが照会されることを確認できます。

ここからはModel、Viewテンプレート、Actionの作り方を説明します。

Model作成

Modelは画面で扱うデータを設定します。Modelフィールド値に基づいてコンポーネントを配置することができ、Datasetオブジェクトのカラムとして登録してGridコンポーネントとバインドしてデータを表現することができます。Modelは単独ではなく、Viewテンプレートと接続して使用します。ViewコンポーネントにModelを接続する際にはViewテンプレートを選択し、Viewテンプレートで作成したロジックに基づいてコンテンツを生成します。

Modelサービスの登録

Easy UIパネルを表示

新しいModelを作成するためには、Easy UIパネルを有効にする必要があります。

Model WizardでModelの作成

Easy UIパネルからModelタブを選択し、Model Wizardを実行します。Easy UIパネルを表示させずにメニューの[File > New > Model]項目の選択によりModel Wizardを実行することもできます。

Location項目は、前に生成したモデルサービス項目に設定されます。Model Nameに値を入力すると、Service IDにはModel Nameと同じ値が入力されます。外部サービスにアクセスしてデータを受信する場合は、Service URLを設定できます。

「+」ボタンのクリックにより直接プロパティを追加・設定することができますが、「Add User Attribute」機能により設定することもできます。 例題では「Add User Attribute」機能を使用します。

例題では「uselabel」といったプロパティを選択し、追加します。 「Target List」項目の「Predefined」を選択し、[Attribute List」項目より「uselabel」をチェックして「User Attribute List」の方に項目を追加します。

項目を追加した後にField Type値を修正できます。Field Type値は、それ自体で機能を持つのではなく、Viewテンプレートの画面構成時に該当するフィールド値に、どのようなコンポーネントや機能を適用するのか参照する値です。

View TemplateよりUser Attribute一覧の取得

fn_GetFieldUserAttributeList関数が作成されているView Template一覧のみ表示されます。

User Attribute項目の右側のボタンをクリックすると、詳細情報が表示されます。

Model情報の編集

Model項目をダブルクリックするか、コンテキストメニューから[Edit]を選択すると、編集画面が表示されます。

編集画面で[Edit Attribute]ボタンをクリックすると、[Edit Field Attribute]画面が表示されます。

id、serviceid、serviceurlプロパティはプロパティリストより編集することができます。

Viewテンプレートの作成

View Template WizardでViewテンプレートの作成

プロジェクトを生成すると、下図のように2つのサンプルViewテンプレートがViewテンプレートフォルダにコピーされます。Viewテンプレート項目をダブルクリックすると、スクリプトを確認できます。例題では、サンプルViewテンプレートを使用せずに、新しいViewテンプレートを作成します。

基本的に提供されるタイプは「FreeForm」、「GridView」の2種類であり、異なる値を直接入力して追加することができます。直接追加したView Typeの値は、View Template Wizard実行時にリストに表示されます。サンプルと区別できるようにView Typeの項目値を「ViewSample」と入力します。

Viewテンプレートスクリプトの編集

View Template WizardでViewテンプレートを作るか、Easy UIパネルでViewテンプレート項目をダブルクリックすると、「ファイル名」.xviewgenというファイルが編集ウィンドウで開きます。該当するスクリプトを編集して、希望する機能を実現することができます。

基本的なインタフェース関数が作成されており、必要な情報をコメントで提供します。

Viewテンプレートでは2つの関数を作らなければなりません。 fn_GetViewAttributeList関数は、Modelの情報に関係なく、追加でサポートする機能を処理するかどうかを確認するための用途に使用します。例題では、ユーザがボタンを生成するかどうかを選択して、ボタンUIを生成します。fn_GetViewGenerationResult関数は、nexacro studioでユーザが選択したModelを含む3つの情報に対する画面UIを構成する情報を返します。

これから、fn_GetViewAttributeList関数とfn_GetViewGenerationResult 関数で受けるパラメータはどんな形で、返すべき値はどんな形なのか見てみましょう。

fn_GetViewGenerationResult

パラメータ（fieldarray、contents、generationattr）に基づいて生成されたView contentsオブジェクトを返す関数です。 fn_GetViewGenerationResult関数で使用するパラメータと戻り値は、JSON形式のオブジェクトを使用します。

Syntax

fn_GetViewGenerationResult(fieldarray, contents, generationattr)

Parameters

Return

fieldarrayパラメータJSON形式

選択したModel情報です。基本的な値はModel生成時のフィールド値であり、「uselabel」のようなAttributeを追加した場合に一緒に渡されます。

• modelinfo

  • serviceid - Model name (Service ID)

  • serviceurl - Service URL

• fieldcount - fields count

• fields

  • id - Model Field ID

  • labeltext - Model Field Label

  • fieldtype - Model Field Field Type

  • datatype - Model Field Data Type

  • datasize - Model Field Data Size

  • uselabel - Added Attribute

{
	"modelinfo": {
		"serviceid": "mdlSample",
		"serviceurl": ""
	},
	"fieldcount": "2",
	"fields": [
		{
			"id": "name",
			"label": "Name",
			"fieldtype": "FreeText",
			"datatype": "STRING",
			"datasize": "80",
			"uselabel" : "true"
		},
		{
			"id": "company",
			"label": "Company",
			"fieldtype": "FreeText",
			"datatype": "STRING",
			"datasize": "80",
			"uselabel" : "true"
		}
	]
}

contentsパラメータJSON形式

Modelに接続しようとするViewコンポーネントの情報です。ViewコンポーネントのBorder領域を除いてコンポーネントを配置できる実際の幅と高さ（referenceinfo）を基準にコンポーネントを配置できます。実際のサイズと各コンポーネントの間隔、フォントサイズなどを考慮してコンポーネントを配置します。

Viewコンポーネントにすでに接続されているModel情報があるか、他のコンポーネントがある場合はModel情報が追加され、Datasetオブジェクトが含まれている場合はObjects情報が追加されます。その他、Viewコンポーネントに関する情報も一緒に渡されます。

• View

  • tag - タグ名（View）

  • referenceinfo

    • realwidth - Border領域を除くViewコンポーネントの実際の幅

    • realheight - Border領域を除くViewコンポーネントの実際の高さ

  • attribute - Viewコンポーネントに設定されたプロパティ

    • id

    • taborder

    • text

    • viewdataset

    • left

    • top

    • width

    • height

  • Model

  • Objects

  • Bind

  • InitValue

  • Script

{
	"View": {
		"tag": "View",
		"referenceinfo": {
			"realwidth": "490",
			"realheight": "90"
		},
		"attribute": {
			"id": "View00",
			"taborder": "0",
			"text": "View00",
			"viewdataset": "viewdataset",
			"left": "0",
			"top": "0",
			"width": "500",
			"height": "100",
			"border":"5px solid darkkhaki"
		},
		"Model": [],
		"Objects": [
			{}
		],
		"Bind": [
			{}
		],
		"InitValue": [
			{}
		],
		"Script": {}
	}
}

generationattrパラメータJSON形式

ViewAttributeの設定情報です。各項目は、fn_GetViewAttributeList関数で返された値であり、項目値はModel接続時にView Template Attributes段階で設定した値です。

• attributes

  • [attribute name] - ViewAttribute設定値

{
	"attributes": {
		"use_triggerbutton": "true"
	}
}

戻り値JSON形式

Viewテンプレートのパラメータ（fieldarray、contents、generationattr）値に基づいて生成されたView contents値です。

• View

  • tag - タグ名（View）

  • attribute - Viewコンポーネントに設定されたプロパティ（修正しなかった場合はContentsパラメータ値)

  • Model - field別コンポーネントリストを配列で設定

    • fieldid - Gridコンポーネントのように複数のフィールドを参照する場合、コンマ（,）で区切って入力し、フィールド情報がないコンポーネントは空値で入力します。

    • Components

  • InitValue

  • Objects

  • Bind

  • Script

{
	"View": {
		"tag": "View",
		"attribute": {
			"id": "View00",
			"taborder": "0",
			"text": "View00",
			"viewdataset": "viewdataset",
			"left": "85",
			"top": "43",
			"width": "437",
			"height": "110"
		},
		"Model": [
			{
				"fieldid": "name",
				"Components": [
					{
						"tag": "Static",
						"attribute": {
							"id": "Static0",
							"text": "Name",
							"left": 0,
							"top": 0,
							"width": 60,
							"height": 20,
							"font": "normal bold 15pt/normal"
						}
					},
					{
						"tag": "Edit",
						"attribute": {
							"id": "Edit0",
							"left": "Static0:5",
							"top": 0,
							"width": 100,
							"height": 20,
							"font": "normal bold 15pt/normal"
						}
					}
				]
			},
			{
				"fieldid": "company",
				"Components": [
					{
						"tag": "Static",
						"attribute": {
							"id": "Static1",
							"text": "Company",
							"left": 0,
							"top": 30,
							"width": 60,
							"height": 20,
							"font": "normal bold 15pt/normal"
						}
					},
					{
						"tag": "Edit",
						"attribute": {
							"id": "Edit1",
							"left": "Static1:5",
							"top": 30,
							"width": 100,
							"height": 20,
							"font": "normal bold 15pt/normal"
						}
					}
				]
			},
			{
				"fieldid": "",
				"Components": [
					{
						"tag": "Button",
						"attribute": {
							"id": "btn_Trigger",
							"right": 0,
							"top": 0,
							"width": 70,
							"height": 20,
							"text": "Search"
						}
					}
				]
			}
		],
		"Objects": [
			{
				"tag": "Objects",
				"Objects": [
					{
						"tag": "Dataset",
						"attribute": {
							"id": "viewdataset"
						},
						"Dataset": [
							{
								"tag": "ColumnInfo",
								"ColumnInfo": [
									{
										"tag": "Column",
										"attribute": {
											"id": "name",
											"type": "STRING",
											"size": "80"
										}
									},
									{
										"tag": "Column",
										"attribute": {
											"id": "company",
											"type": "STRING",
											"size": "80"
										}
									}
								]
							},
							{
								"tag": "Rows",
								"Rows": [
									{
										"tag": "Row"
									}
								]
							}
						]
					}
				]
			}
		],
		"Bind": [
			{
				"tag": "Bind",
				"Bind": [
					{
						"tag": "BindItem",
						"attribute": {
							"id": "item0",
							"compid": "Edit0",
							"propid": "value",
							"datasetid": "viewdataset",
							"columnid": "name"
						}
					},
					{
						"tag": "BindItem",
						"attribute": {
							"id": "item1",
							"compid": "Edit1",
							"propid": "value",
							"datasetid": "viewdataset",
							"columnid": "company"
						}
					}
				]
			}
		]
	}
}

fn_GetViewAttributeList

Viewの生成に必要なプロパティ情報を返す関数です。

Syntax

fn_GetViewAttributeList()

Return

戻り値JSON形式

• attributecount - attributesの数

• attributes

  • id - VIew Generation WizardでView Template Attributesに表示される値

  • edittype - Boolean/String/Number/Enum/ViewObjList/Layout

  • defaultvalue - edittypeがEnumである場合のデフォルト値

  • enumlist - edittypeがEnumである場合の値の配列

  • userproperties - edittypeがLayoutである場合のカスタムプロパティの設定

  • description - VIew Generation Wizardで項目選択時に表示される説明

{
	"attributecount": 1,
	"attributes": [
		{
			"id": "use_triggerbutton",
			"edittype": "Boolean",
			"defaultvalue": "true",
			"description": "Create a button for data inquiry (true/false)"
		}
	]
}

edittype値が「Enum」である場合には、下記のように処理できます。

{
    "attributecount": "1",
    "attributes": [
        {
            "id": "gridtype",
            "edittype": "Enum",
            "defaultvalue": "Single Line",
            "enumlist": [
                "Single Line",
                "Multi Line"
            ],
            "description": "Specifies the generation type of grid."
        }
    ]

edittypeの値が「Layout」である場合は、下記のように処理できます。

{
    "attributecount": "1",
    "attributes": [
        {
            "id": "view_layout",
            "edittype": "Layout",
			"userproperties": {
				"propertycount": "1",
				"properties": [
					{
						"id": "gap",
						"edittype": "Number",
						"defaultvalue": 5
					}
				]
			}
        }
    ]

fn_GetFieldUserAttributeList

fn_GetFieldUserAttributeList関数は、2つの機能をサポートします。

• Model生成時、Modelフィールドに追加するUser Attributes情報を返します。

• Model適用時、User Attributes情報をModelフィールドに追加します。

Model生成時のUser Attributes処理

Model作成時、「Add User Attribute」設定でfn_GetFieldUserAttributeList関数を持つView TemplateリストをTarget Listに表示し、View Templateを選択すると、追加できるUser Attributes情報を表示します。

Model適用時、User Attributes処理

ViewコンポーネントにModel適用時、選択したView Templateにfn_Get FieldUserAttributeList関数がある場合、User Attributes情報をModelフィールドに追加します。

Syntax

fn_GetFieldUserAttributeList()

Return

戻り値のJSON形式

• attributecount - attributesの個数

• attributes

  • id - User Attributes項目として表示される値

  • edittype - Boolean/String/Number/Enum/ViewObjList

  • description - Model Field項目の選択時に表示される説明

{
	"attributecount": 1,
	"attributes": [
		{
			"id": "editable",
			"edittype": "Boolean",
			"defaultvalue": "true",
			"description": "Sets whether the field data can be edited."
		}
	]
}

Viewテンプレートの例

例題では、2つのViewテンプレートを生成します。viewSampleFormは、Model情報に基づいて照会条件UIを生成するか、Gridコンポーネントで選択した項目の詳細情報を表現するUIを生成します。viewSampleGridは、Model情報に基づいてGridコンポーネントを表現します。

下記のサンプルでは、JSON戻り値の形式を作るためにObject、Arrayを使いましたが、下記のように文字列のみでコードを作成できます。

...
var strDataset1 = "{";
strDataset1 += "\"tag\": \"Dataset\",";
strDataset1 += "\"attribute\": {\"id\": \"viewdataset\"},";
strDataset1 += "\"Dataset\": [";
strDataset1 += "{\"tag\": \"ColumnInfo\",";
strDataset1 += "\"ColumnInfo\": [";
...

viewSampleForm

フィールド情報に基づいてEditコンポーネントを生成し、uselabel追加プロパティが「true」である場合には、StaticコンポーネントをEditコンポーネントの前に配置します。fn_GetViewAttributeList関数では、use_triggerbuttonという項目を返してButtonを生成するかどうかを判断します。

viewdatasetというidでDatasetオブジェクトを生成し、Editコンポーネントのvalueプロパティにバインドします。

fn_GetViewGenerationResult = function (fieldarray, contents, generationattr) {
    var vResult = "";
	var json_contents = JSON.parse(contents);
	var json_fieldarray = JSON.parse(fieldarray);
	var json_generationattr = JSON.parse(generationattr);
	
	var View = new Object(); // JSON Object	
	var tempInfo;
	var tempPostion;
	
	var ModelArray = new Array();
	var ModelInfo;
	
	var ComponentArray;
	var ObjectsArray = new Array();
	var ObjectArray = new Array();
	var DatasetArray = new Array();
	var ColumnArray = new Array();
	var BindsArray = new Array();
	var BindArray = new Array();

	for (var i in json_fieldarray.fields) {
		ModelInfo = new Object();
		ComponentArray = new Array();
		ModelInfo.fieldid = json_fieldarray.fields[i].id;
		
		tempInfo = new Object();
		tempInfo.tag = "Column";
		tempInfo.attribute = new Object();
		tempInfo.attribute.id = json_fieldarray.fields[i].id;
		tempInfo.attribute.type = json_fieldarray.fields[i].datatype;
		tempInfo.attribute.size = json_fieldarray.fields[i].datasize;
		ColumnArray.push(tempInfo);
		
		if(json_fieldarray.fields[i].uselabel == "true") {
			tempInfo = new Object();
			tempInfo.tag = "Static";
			tempInfo.attribute = new Object();
			tempInfo.attribute.id = "Static"+i;
			tempInfo.attribute.text = json_fieldarray.fields[i].label;
			tempInfo.attribute.left = 0;
			tempInfo.attribute.top = i*30;
			tempInfo.attribute.width = 60;
			tempInfo.attribute.height = 20;
			tempInfo.attribute.font = "normal bold 15pt/normal";
			ComponentArray.push(tempInfo);
		}
		
		tempInfo = new Object();
		tempInfo.tag = "Edit";
		tempInfo.attribute = new Object();
		tempInfo.attribute.id = "Edit"+i;
		tempInfo.attribute.left = "Static"+i+":5";
		tempInfo.attribute.top = i*30;
		tempInfo.attribute.width = 100;
		tempInfo.attribute.height = 20;
		tempInfo.attribute.font = "normal bold 15pt/normal";
		ComponentArray.push(tempInfo);
		
		tempInfo = new Object();
		tempInfo.tag = "BindItem";
		tempInfo.attribute = new Object();
		tempInfo.attribute.id = "item"+i;
		tempInfo.attribute.compid = "Edit"+i;
		tempInfo.attribute.propid = "value";
		tempInfo.attribute.datasetid = "viewdataset";
		tempInfo.attribute.columnid = json_fieldarray.fields[i].id;
		BindArray.push(tempInfo);	
		
		ModelInfo.Components = ComponentArray;
		ModelArray.push(ModelInfo);		
	}
	tempInfo = new Object();
	tempInfo.tag = "ColumnInfo";
	tempInfo.ColumnInfo = ColumnArray;
	DatasetArray.push(tempInfo);
	
	tempInfo = new Object();
	tempInfo.tag = "Rows";
	tempInfo.Rows = new Array();

	var RowInfo = new Object();
	RowInfo.tag = "Row";
	tempInfo.Rows.push(RowInfo);
	DatasetArray.push(tempInfo);

	tempInfo = new Object();
	tempInfo.tag = "Dataset";
	tempInfo.attribute = new Object();
	tempInfo.attribute.id = "viewdataset";
	tempInfo.Dataset = DatasetArray;
	ObjectArray.push(tempInfo);
	
	tempInfo = new Object();	
	tempInfo.tag = "Objects";	
	tempInfo.Objects = ObjectArray;
	ObjectsArray.push(tempInfo);
	
	tempInfo = new Object();
	tempInfo.tag = "Bind";
	tempInfo.Bind = BindArray;
	BindsArray.push(tempInfo);
	
	if(json_generationattr.attributes.use_triggerbutton == "true") {
		ModelInfo = new Object();
		ComponentArray = new Array();
		ModelInfo.fieldid = "";
		
		tempInfo = new Object();
		tempInfo.tag = "Button";
		
		var buttonwidth = 70;
		tempInfo.attribute = new Object();
		tempInfo.attribute.id = "btn_Trigger";
		tempInfo.attribute.right = 0;
		tempInfo.attribute.top = 0;
		tempInfo.attribute.width = buttonwidth;
		tempInfo.attribute.height = 20;
		tempInfo.attribute.text = "Search"
		ComponentArray.push(tempInfo);
		ModelInfo.Components = ComponentArray;
		ModelArray.push(ModelInfo);
	}	

	tempInfo = new Object();
	tempInfo.tag = "View";
	tempInfo.attribute = json_contents.View.attribute;
	tempInfo.Model = ModelArray;
	tempInfo.Objects = ObjectsArray;
	tempInfo.Bind = BindsArray;

	View.View = tempInfo;
	var vResult = JSON.stringify(View);
    return vResult;
};

fn_GetViewAttributeList = function () {
	var attrArray = new Array();
	var attrObj = new Object();
	attrObj.id = "use_triggerbutton";
	attrObj.edittype = "Boolean";
	attrObj.defaultvalue = "true";
	attrObj.description = "Create a button for data inquiry (true/false)";
	attrArray.push(attrObj);
	
	var attr = new Object();
	attr.attributecount = attrArray.length;
	attr.attributes = attrArray;
	
	var strJson = JSON.stringify(attr);
	trace("RE : "+strJson);	
	return strJson;
};

viewSampleGrid

フィールド情報に基づいてGridコンポーネントとDatasetオブジェクトを生成し、DatasetオブジェクトはGridコンポーネントとバインドします。 fn_GetViewAttributeList関数は使用しません。

fn_GetViewGenerationResult = function (fieldarray, contents, generationattr) {
    var vResult = "";
	var json_contents = JSON.parse(contents);
	var json_fieldarray = JSON.parse(fieldarray);
	//var json_generationattr = JSON.parse(generationattr);
	
	var View = new Object(); // JSON Object	
	var tempInfo;
	
	var ModelArray = new Array();
	var ModelInfo = new Object();
	ModelInfo.fieldid = "";

	var ComponentArray = new Array();
	var ObjectsArray = new Array();
	var ObjectArray = new Array();
	var DatasetArray = new Array();
	var ColumnArray = new Array();
	
	var GridColumnsArray = new Array();
	var GridRowsArray = new Array();
	var GridBandHeadArray = new Array();
	var GridBandBodyArray = new Array();


	for (var i in json_fieldarray.fields) {
		if(ModelInfo.fieldid != "") {
			ModelInfo.fieldid += ",";
		}
		ModelInfo.fieldid += json_fieldarray.fields[i].id;
		
		tempInfo = new Object();
		tempInfo.tag = "Column";
		tempInfo.attribute = new Object();
		tempInfo.attribute.id = json_fieldarray.fields[i].id;
		tempInfo.attribute.type = json_fieldarray.fields[i].datatype;
		tempInfo.attribute.size = json_fieldarray.fields[i].datasize;
		ColumnArray.push(tempInfo);
		
		tempInfo = new Object();
		tempInfo.tag = "Column";
		tempInfo.attribute = new Object();
		tempInfo.attribute.size = "80";
		GridColumnsArray.push(tempInfo);

		tempInfo = new Object();
		tempInfo.tag = "Cell";
		tempInfo.attribute = new Object();
		tempInfo.attribute.col = i;
		tempInfo.attribute.text = json_fieldarray.fields[i].label;
		GridBandHeadArray.push(tempInfo);		
		
		tempInfo = new Object();
		tempInfo.tag = "Cell";
		tempInfo.attribute = new Object();
		tempInfo.attribute.col = i;
		tempInfo.attribute.text = "bind:"+json_fieldarray.fields[i].id;
		tempInfo.attribute.edittype = "text";
		GridBandBodyArray.push(tempInfo);
	}
	var GridInfo = new Object();
	GridInfo.tag = "Formats";
	GridInfo.Formats = new Array();
	var formatInfo = new Object();
	formatInfo.tag = "Format";
	formatInfo.attribute = new Object();
	formatInfo.attribute.id = "default";
	formatInfo.Format = new Array();
	
	tempInfo = new Object();
	tempInfo.tag = "Columns";
	tempInfo.Columns = GridColumnsArray;
	formatInfo.Format.push(tempInfo);
	
	tempInfo = new Object();
	tempInfo.tag = "Row";
	tempInfo.attribute = new Object();
	tempInfo.attribute.band = "head";
	tempInfo.attribute.size = "24";
	GridRowsArray.push(tempInfo);
	tempInfo = new Object();
	tempInfo.tag = "Row";
	tempInfo.attribute = new Object();
	tempInfo.attribute.size = "24";
	GridRowsArray.push(tempInfo);	

	tempInfo = new Object();
	tempInfo.tag = "Rows";
	tempInfo.Columns = GridRowsArray;
	formatInfo.Format.push(tempInfo);
	
	tempInfo = new Object();
	tempInfo.tag = "Band";
	tempInfo.attribute = new Object();
	tempInfo.attribute.id = "head";
	tempInfo.Columns = GridBandHeadArray;
	formatInfo.Format.push(tempInfo);	
	
	tempInfo = new Object();
	tempInfo.tag = "Band";
	tempInfo.attribute = new Object();
	tempInfo.attribute.id = "body";	
	tempInfo.Columns = GridBandBodyArray;
	formatInfo.Format.push(tempInfo);	
	GridInfo.Formats.push(formatInfo);
	
	tempInfo = new Object();
	tempInfo.tag = "Grid";
	tempInfo.attribute = new Object();
	tempInfo.attribute.id = "Grid"+i;
	tempInfo.attribute.left = 0;
	tempInfo.attribute.top = 0;
	tempInfo.attribute.right = 0;
	tempInfo.attribute.bottom = 0;
	tempInfo.attribute.binddataset = "viewdataset";
	tempInfo.Grid = new Array();
	tempInfo.Grid.push(GridInfo);
	ComponentArray.push(tempInfo);		
		
	tempInfo = new Object();
	tempInfo.tag = "ColumnInfo";
	tempInfo.ColumnInfo = ColumnArray;
	DatasetArray.push(tempInfo);
	
	tempInfo = new Object();
	tempInfo.tag = "Rows";
	tempInfo.Rows = new Array();

	var RowInfo = new Object();
	RowInfo.tag = "Row";
	tempInfo.Rows.push(RowInfo);
	DatasetArray.push(tempInfo);

	tempInfo = new Object();
	tempInfo.tag = "Dataset";
	tempInfo.attribute = new Object();
	tempInfo.attribute.id = "viewdataset";
	tempInfo.Dataset = DatasetArray;
	ObjectArray.push(tempInfo);
	
	tempInfo = new Object();	
	tempInfo.tag = "Objects";	
	tempInfo.Objects = ObjectArray;
	ObjectsArray.push(tempInfo);
	
	ModelInfo.Components = ComponentArray;
	ModelArray.push(ModelInfo);

	tempInfo = new Object();
	tempInfo.tag = "View";
	tempInfo.attribute = json_contents.View.attribute;
	tempInfo.Model = ModelArray;
	tempInfo.Objects = ObjectsArray;

	View.View = tempInfo;
	var vResult = JSON.stringify(View);
    return vResult;
};

fn_GetViewAttributeList = function () {
	return null;
};

Action作成

ModelとViewテンプレートを使用して作った画面で、実際に動作する機能を設定する段階です。Triggerで指定したオブジェクトに特定のイベントが発生する場合、指定した動作を処理します。例題では、検索ウィンドウでボタンをクリックすると、Gridコンポーネントにデータが表示されます。データ照会のためのActionプロパティ値に基づいてデータ照会が成功した時に、特定のプロパティ値であれば、警告ダイアログボックスを表示します。

Actionモジュールプロジェクトの生成

例題では、「TestQueryAction」といったObject IDを使用します。ClassNameはObject IDを入力すると自動設定されます。

プロジェクトが生成されます。詳細オプションは、例題では設定しません。オブジェクトの詳細設定はあとから設定することができます。

Actionオブジェクト追加

プロジェクト生成時には、基本オブジェクトが１つ生成され、同じモジュールとして配布するオブジェクトを別途追加する必要があります。

例題では、"TestAlertAction"といったActionオブジェクト名を使用します。

Actionオブジェクトのプロパティ編集

subgroup: Action
registration: allow
contents: true

Actionオブジェクトのスクリプト編集

Actionスクリプトはnexacro.Actionを継承して実現します。基本的な構造は下記の通りで、イベント発生時にrun関数が実行されます。run関数内で必要な情報を収集·処理することになります。

(function(nexacro) {
    "use strict";

	if (!nexacro)
		return;
	if (nexacro.TestQueryAction)
		return nexacro.TestQueryAction;

	var TestQueryAction = function(id, parent)
	{
        nexacro.Action.call(this, id, parent);
	};	
		
	var _pTestQueryAction = nexacro._createPrototype(nexacro.Action, TestQueryAction);		
	TestQueryAction.prototype = _pTestQueryAction;
	_pTestQueryAction._type_name = "TestQueryAction";
	_pTestQueryAction.uservalue = null;	
	
	_pTestQueryAction.destroy = function ()
	{
		nexacro.Action.prototype.destroy.call(this);
		this.uservalue = null;
    };

	_pTestQueryAction.set_uservalue = function (v)
	{
		if (v && this.uservalue!== v)
		{		
			this.uservalue= v;
		}
	};

	_pTestQueryAction.run = function ()
	{
	};

    nexacro.TestQueryAction = TestQueryAction;
    return TestQueryAction;
}) (nexacro);

TestQueryAction, TestAlertActionで使用するスクリプトは下記の通りです。

TestQueryActionスクリプト

trigger発生時（ボタンクリック時）にrun関数を呼び出します。_getArgumentList関数を呼び出して引数として渡されたContents情報とviewdatasetオブジェクトに保存されているカラム値を取得します。samplefilenameとして入力された値に応じてデータローディングのためのXMLファイルを確認した後、transactionメソッドを実行します。例題ではXMLファイルを呼び出すため、引数として渡れた値はtraceメソッドで出力のみ行います。

$r_title(TestQueryAction.js)
(function(nexacro) {
    "use strict";

	if (!nexacro)
		return;
	if (nexacro.TestQueryAction)
		return nexacro.TestQueryAction;

	var TestQueryAction = function(id, parent)
	{
        nexacro.Action.call(this, id, parent);
	};	
		
	var _pTestQueryAction = nexacro._createPrototype(nexacro.Action, TestQueryAction);		
	TestQueryAction.prototype = _pTestQueryAction;
	_pTestQueryAction._type_name = "TestQueryAction";		
	
	_pTestQueryAction.samplefilename = ""; // XML file name	
	_pTestQueryAction.alerttype = false; // TestAlertAction condition
	_pTestQueryAction.targetobj = null;

	_pTestQueryAction.destroy = function ()
	{
		nexacro.Action.prototype.destroy.call(this);
        this.samplefilename = null;
		this.alerttype = null;
        this.targetobj = null;		
    };
    
	_pTestQueryAction.set_samplefilename = function (v)
	{
		if (v && this.samplefilename !== v)
		{		
			this.samplefilename = v;			
		}
	};
	
	_pTestQueryAction.set_alerttype = function (v)
	{
		if (v && this.alerttype !== v)
		{		
			this.alerttype = v;			
		}
	};	
	
    _pTestQueryAction.set_targetobj = function (v)
	{
		if (v && this.targetobj !== v)
		{
			this.targetobj = v;	
		}
    };	


	_pTestQueryAction._getArgumentList = function (strType)
	{
		var argumentlist = this.getContents(strType);
		if (!argumentlist) {
			return;
		}
		if(strType == "model")
		{
			for (var i = 0; i < argumentlist.length; i++)
			{
				var tempDataset = this.parent.lookup(argumentlist[i].viewid).getViewDataset();
				argumentlist[i].value = tempDataset.getColumn(tempDataset.rowposition, argumentlist[i].fieldid);
			}
		}
		return argumentlist;
	};

	_pTestQueryAction.run = function ()
	{
		var targetview = this.getTargetView();
		var viewdataset = targetview.viewdataset;
		var argumentlist = "";

		var modellist = this._getArgumentList ("model");
		var extralist = this._getArgumentList ("extra");
		var outdataset = viewdataset + "=ds_" + viewdataset;

        var callbackfn = "fn_callback";

        if (modellist)
        {
            for (var i = 0; modellist.length > i; i++)
            {
                if (modellist[i].value)
                {
                    argumentlist += modellist[i].name + "=" + modellist[i].value;
                    argumentlist += " ";
                }
            }
        }
		
        if (extralist)
        {
            for (var i = 0; extralist.length > i; i++)
            {
                if (extralist[i].value)
                {
                    argumentlist += extralist[i].name + "=" + extralist[i].value;
                    argumentlist += " ";
                }
            }
        }		
		
		// transaction callback function (onsuccess, onerror event)
		var targetaction = this;
		targetview.form[callbackfn] = function (strSvcID, nErrorCode, strErrorMag)
		{
			if (nErrorCode >= 0)
			{
				targetaction.error = "callback-success";
				targetaction.on_fire_onsuccess();
			}
			else
			{
				targetaction.error = "callback-error";
				targetaction.on_fire_onerror();
			}	
		}

		argumentlist += "dsname=" + viewdataset + " ";
		argumentlist.trim();
		var serviceurl = "Sample::"+this.samplefilename+".xml";
		trace("argumentlist: "+argumentlist);
		trace("outdataset: "+outdataset);
		trace("serviceurl: "+serviceurl);

		targetview.form.transaction("TEST", serviceurl, "", outdataset, argumentlist, callbackfn);
    };		
    
    nexacro.TestQueryAction = TestQueryAction;

    return TestQueryAction;
    
}) (nexacro);

TestAlertActionスクリプト

TestAlertActionスクリプトでは、run関数の実行時にmessageプロパティ値をalertメソッドのパラメータに指定して実行するのみです。

$r_title(TestAlertAction.js)
(function(nexacro) {
	"use strict";

	if (!nexacro)
		return;
	if (nexacro.TestAlertAction)
		return nexacro.TestAlertAction;
		
	var TestAlertAction = function(id, parent)
	{
		nexacro.Action.call(this, id, parent);
	};
		
	var _pTestAlertAction = nexacro._createPrototype(nexacro.Action, TestAlertAction);		
	TestAlertAction.prototype = _pTestAlertAction;
    _pTestAlertAction._type_name = "TestAlertAction";		
        
    _pTestAlertAction.message = "";

	_pTestAlertAction.destroy = function ()
	{
		nexacro.Action.prototype.destroy.call(this);
        
        this.message = null;
    };

    _pTestAlertAction.set_message = function (v)
	{
		this.message = v;			
	};

    _pTestAlertAction.run = function ()
	{
        alert(this.message);
	};		
	
	nexacro.TestAlertAction = TestAlertAction;

	return TestAlertAction;

}) (nexacro);

Actionオブジェクトのmetainfoの編集

Actionをモジュールで配布して使用するためには、metainfoファイルを生成する必要があります。

parent、targetviewプロパティはnexacro.Actionの基本プロパティであり、Actionオブジェクトの生成時にmetainfoでデフォルト値として表示されます。targetviewプロパティを選択し、プロパティリストより情報を設定します。

Group: Action
Edit Type: ViewObjList

TestQueryActionオブジェクトには、下記の通りに３つのプロパティを追加します。

Name: targetobj
Group: Action
Edit Type: ViewChildObjList

Name: samplefilename
Group: Misc.
Edit Type: String

Name: alerttype
Group: Misc.
Edit Type: Boolean
Default Value: false

TestAlertActionオブジェクトには下記の通りに１つのプロパティを追加します。

Name: message
Group: Misc. 
Edit Type: String

TestAlertActionオブジェクトではtargetviewプロパティを使用しません。該当のプロパティを選択した後にUnused項目を「true」に変更します。

metainfoファイルで設定した内容はActionの紐づけの際にController Wizardで下記の通りに処理されます。

group

Controller Wizardで表示されるグループ名を指定できます。 ユーザーが簡単にプロパティを認識できるよう補助的に提供する情報です。

edittype

ObjectInfoタグでは、edittypeを「action」に設定します。

<ObjectInfo ... edittype="action" ...

各プロパティを設定する際にedittypeを指定すると、ユーザー入力値の形式を設定できます。テキストで値を入力せずにリストから選択できるような機能もサポートします。Actionで使用可能なedittypeは下記の通りです。

ActionオブジェクトのmetainfoでRefreshInfoの追加および適用

2つのプロパティが互いに関連していて、一つのプロパティの変更時にもう一つのプロパティも変更する必要があった場合には、RefreshInfo情報として登録して管理することができます。例題では、targetviewプロパティの変更時にtargetobj一覧に反映されるように設定します。

Refresh ItemはActionオブジェクトのプロパティの中から選択することができます。

追加した項目は、TestQueryActionのmetainfoの編集画面の右側の編集アイコンをクリックすると表示されるEdit Common Information画面のRefreshタブより確認することができます。

Actionモジュールファイルの生成

Versionなどの情報は必要に応じて入力します。

参考

Actionオブジェクトのプロパティ、メソッド、イベント

プロパティ

メソッド

イベント

Trigger typeに使用できる項目情報

例題では、ボタンをクリックすると、triggerが動作するように「click」項目を選択しました。「click」項目を選択するのは、Buttonコンポーネントのonclickイベント関数を作成することと似ています。下記のリストは使用可能なtriggerのタイプを表示します。

Trigger condition予約語とサンプル

Action接続の際にTrigger発生条件を設定できます。使用可能な予約語は、下記のとおりです。

下記の方法で適用できます。

triggerview.name=='view_search' && triggerobj.name == 'btn_Trigger00_00' && form.name == 'sample_MasterDetail_V'

triggerobjの特定プロパティを条件で適用できます。例えば、Typeが「Action Success」の場合には、triggerobjがActionです。当該Actionが処理されるとき、プロパティ値によって次のActionを処理するかどうかを判断できます。

triggerobj.alerttype == 'true'

fn_GetViewGenerationResultの戻り値のJSON形式

fn_GetViewGenerationResult関数の呼び出し時に渡されるcontentsパラメータや関数の呼び出し後に返される値は、下記のようなJSON形式で処理されます。contentsパラメータは、現在の画面のXMLコードをJSONに変換して渡し、関数の呼び出し後に返されるJSONコードはnexacro studioでXMLコードに変換して画面に反映されます。

contentsパラメータはnexacro studioの内部で自動的に変換されますが、戻り値のJSONコードはfn_GetViewGenerationResult関数内で決まった形式に従って作成する必要があります。

基本形式

返されるJSONコードは、Viewコンポーネント内の画面を構成し、Datasetオブジェクトやバインドアイテム情報、スクリプトなどを設定します。基本形式は下記の通りです。

<View>
    <Layouts>
        <Layout/>
    </Layouts>
    <InitValue/>
    <Objects/>
    <Bind/>
    <Script/>
</View>

{
    "View": {
        "Model": [
            {
                "fieldid": "",
                "Components": [
                    {}
                ]
            }
        ],
        "InitValue": [
            {}
        ],
        "Objects": [
            {}
        ],
        "Bind": [
            {}
        ],
        "Script": {
        }
    }
}

使用しない項目は除外することができます。例えば、Datasetオブジェクトを1つのみ持つ構造であれば、JSONコードでは下記のように処理することができます。

{
	"View": {
		"Objects":[
			{}
		]
	}
}

変換ルール

fn_GetViewGenerationResultの戻り値のJSONコードにより生成されるものは、nexacro studioで使用するXMLタグです。下記のようなルールに従って、各タグと接続されるJSONコードを作成します。

• 最上位のViewコンポーネントに配置されるコンポーネントのModelプロパティの下に構成されます。

• 1つのタグは、1つのJSONオブジェクトで構成されます。

• 下位タグは、上位タグのタグ名と同じJSON配列に構成されます。

最上位のViewコンポーネントに配置されるコンポーネントのModelプロパティの下に構成します。

Viewコンポーネントに配置されるコンポーネントは、接続されたfieldid情報を持っています。従って、Modelプロパティの下にfieldidプロパティとComponentsプロパティを持ち、実際のコンポーネントはComponentsプロパティの下に構成します。

コンポーネントと接続されたfieldidがない場合、Modelプロパティは1つのJSONオブジェクトのみ持ってComponentsプロパティの下にコンポーネントを並べます。接続されたFieldidが2つ以上である場合は、下記のようにfieldid数だけJSONオブジェクトを持ってXML作成時にModelInfoの下に関連情報を作成します。

<View>
    <Layouts>
        <Layout>
            <Button id="Btn01"/>
            <Button id="Btn02"/>
    </Layouts>
    <ModelInfo>
        <Components>
            <Component id="Btn01" fieldid="ID"/>
            <Component id="Btn02" fieldid="DATA"/>
        </Components>
    </ModelInfo>
</View>

{
    "View": {
        "Model": [
            {
                "fieldid": "ID",
                "Components": [
                    {
                        "tag": "Button",
                        "attribute": {
                            "id": "Btn01"
                        }
                    }
                ]
            },
            {
                "fieldid": "DATA",
                "Components": [

                    {
                        "tag": "Button",
                        "attribute": {
                            "id": "Btn02"
                        }

                    }                ]
            }        ]
    }
}

1つのタグは、1つのJSONオブジェクトで構成されます。

タグ名はJSONオブジェクトのtagプロパティで、タグプロパティはattributeプロパティで処理します。

<タグ名 プロパティ1="プロパティ1の値" プロパティ2="プロパティ2の値" プロパティ3="プロパティ3の値"/>

{
  "tag": "タグ名",
  "attribute": {
    "プロパティ1": "プロパティ1の値",
    "プロパティ2": "プロパティ2の値",
    "プロパティ3": "プロパティ3の値"
  }
}

下記のように、コンポーネントやオブジェクトに関係なく、1つのタグは1つのJSONオブジェクトで処理されます。

<Dataset id="Dataset00"/>

{
    "tag":"Dataset",
    "attribute":{
        "id":"Dataset00"
    }
}

<Button id="Button00" 
    taborder="0"
    text="Button00" 
    left="209" 
    top="12" 
    width="90" 
    height="30" 
    onclick="View00_Button00_onclick"/>

{
    "tag": "Button",
    "attribute": {
        "id": "Button00",
        "taborder": "0",
        "text": "Button00",
        "left": "209",
        "top": "12",
        "width": "90",
        "height": "30",
        "onclick": "View00_Button00_onclick"
    }
}

<BindItem id="item0" 
    compid="Button00" 
    propid="text" 
    datasetid="Dataset00" 
    columnid="Column0"/>

{
    "tag": "BindItem",
    "attribute": {
        "id": "item0",
        "compid": "Button00",
        "propid": "text",
        "datasetid": "Dataset00",
        "columnid": "Column0"
    }
}

下位タグは、上位タグのタグ名と同じJSON配列に構成されます。

下位コンポーネントを持っているコンテナコンポーネントの場合は、tag、attributeプロパティと同じレベルのコンポーネント名と同じ名前のプロパティを持ち、プロパティ値はJSON配列で処理されます。

コンテナコンポーネントでなくても、Gridコンポーネントのように下位タグ構造の場合は、同じ方式で処理します。

<上位タグ名>
	<下位タグ名 プロパティ1="プロパティ1の値" プロパティ2="プロパティ2の値" プロパティ3="プロパティ3の値"/>
</上位タグ名>

{
	"tag": "上位タグ名",
	"attribute": {
	},
	"上位タグ名": [
		{
			"tag": "下位タグ名",
			"attribute": {
				"プロパティ1": "プロパティ1の値",
				"プロパティ2": "プロパティ2の値",
				"プロパティ3": "プロパティ3の値"
			}
		}
}

下記の例では、分かりやすくするためにコンポーネントの一部プロパティを省略しています。

<Div id="Div00" text="Div00">
    <Layouts>
        <Layout>
            <Button id="Button00" text="Button00"/>
        </Layout>
    </Layouts>
</Div>

{
    "tag": "Div",
    "attribute": {
        "id": "Div00"
    },
    "Div": [
        {
            "Components": [
                {
                    "tag": "Button",
                    "attribute": {
                        "id": "Button00",
                        "text": "Button00"
                    }
                }
            ]
        }
    ]
}

<Bind>
    <BindItem id="item0" compid="Button00" propid="text" datasetid="Dataset00" columnid="Column0"/>
    <BindItem id="item1" compid="Button01" propid="text" datasetid="Dataset00" columnid="Column0"/>
</Bind>

{
    "tag": "Bind",
    "Bind": [
        {
            "tag": "BindItem",
            "attribute": {
                "id": "item0",
                "compid": "Button00",
                "propid": "text",
                "datasetid": "Dataset00",
                "columnid": "Column0"
            }
        },
        {
            "tag": "BindItem",
            "attribute": {
                "id": "item1",
                "compid": "Button01",
                "propid": "text",
                "datasetid": "Dataset00",
                "columnid": "Column0"
            }
        }
    ]
}

<Dataset id="Dataset00">
    <ColumnInfo>
        <Column id="Column0" type="STRING" size="256"/>
    </ColumnInfo>
    <Rows>
        <Row/>
    </Rows>
</Dataset>

{
    "tag": "Dataset",
    "attribute": {
        "id": "Dataset00"
    },
    "Dataset": [
        {
            "tag": "ColumnInfo",
            "ColumnInfo": [
                {
                    "tag": "Column",
                    "attribute": {
                        "id": "Column0",
                        "type": "STRING",
                        "size": "256"
                    }
                }
            ]
        },
        {
            "tag": "Rows",
            "Rows": [
                {
                    "tag": "Row"
                }
            ]
        }
    ]
}

Gridコンポーネントの場合は、画面に表示する形式を指定するために、入れ子状の下位タグを持っています。

<Grid id="Grid00" binddataset="Dataset00">
    <Formats>
        <Format id="default">
            <Columns>
                <Column size="80"/>
            </Columns>
            <Rows>
                <Row size="24" band="head"/>
                <Row size="24"/>
            </Rows>
            <Band id="head">
                <Cell text="Column0"/>
            </Band>
            <Band id="body">
                <Cell text="bind:Column0"/>
            </Band>
        </Format>
    </Formats>
</Grid>

{
    "tag": "Grid",
    "attribute": {
        "id": "Grid00",
        "binddataset": "Dataset01"
    },
    "Grid": [
        {
            "tag": "Formats",
            "Formats": [
                {
                    "tag": "Format",
                    "attribute": {
                        "id": "default"
                    },
                    "Format": [
                        {
                            "tag": "Columns",
                            "Columns": [
                                {
                                    "tag": "Column",
                                    "attribute": {
                                        "size": "80"
                                    }
                                }
                            ]
                        },
                        {
                            "tag": "Rows",
                            "Rows": [
                                {
                                    "tag": "Row",
                                    "attribute": {
                                        "size": "24",
                                        "band": "head"
                                    }
                                },
                                {
                                    "tag": "Row",
                                    "attribute": {
                                        "size": "24"
                                    }
                                }
                            ]
                        },
                        {
                            "tag": "Band",
                            "attribute": {
                                "id": "head"
                            },
                            "Band": [
                                {
                                    "tag": "Cell",
                                    "attribute": {
                                        "text": "Column0"
                                    }
                                }
                            ]
                        },
                        {
                            "tag": "Band",
                            "attribute": {
                                "id": "body"
                            },
                            "Band": [
                                {
                                    "tag": "Cell",
                                    "attribute": {
                                        "text": "bind:Column0"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Gridコンポーネントは入れ子状の下位タグで構成されているため、JSONコードが複雑に見えますが、変換規則は同じです。上記の表にあるGridコンポーネントをタグ別に分解した結果は下記の通りです。

<Grid id="Grid00" binddataset="Dataset00">
    <Formats>
    </Formats>
</Grid>

{
    "tag": "Grid",
    "attribute": {
        "id": "Grid00",
        "binddataset": "Dataset01"
    },
    "Grid": [
        {
            "tag": "Formats"
        }
    ]
}

<Formats>
    <Format id="default">
    </Format>
</Formats>

{
    "tag": "Formats",
    "Formats": [
        {
            "tag": "Format"
        }
    ]
}

<Format id="default">
    <Columns>
    </Columns>
    <Rows>
    </Rows>
    <Band id="head">
    </Band>
</Format>

{
    "tag": "Format",
    "attribute": {
        "id": "default"
    },
    "Format": [
        {
            "tag": "Columns"
        },
        {
            "tag": "Rows"
        },
        {
            "tag": "Band",
            "attribute": {
                "id": "head"
            }
        }
    ]
}

<Columns>
    <Column size="80"/>
</Columns>

{
    "tag": "Columns",
    "Columns": [
        {
            "tag": "Column",
            "attribute": {
                "size": "80"
            }
        }
    ]
}

下記のように、各タグ単位でJSONオブジェクト、もしくはJSONオブジェクトの配列を作成する関数を作成して使用することもできます。GridやDatasetオブジェクトのようにフィールド情報に基づいて処理する必要がある領域は、別途関数でフィールド情報を送信して処理すると、ソースコードの可読性が高くなります。

{
	"tag": "Dataset",
	"attribute": { "id": "viewdataset" },
	"Dataset": [
		{
			"tag": "ColumnInfo",
			"ColumnInfo": fn_GetDsColumns(oFieldArray)
		},
		{
			"tag": "Rows",
			"Rows": fn_GetDsRows(oFieldArray)
		}
	]
}

変換規則の例外（コンテナコンポーネント）

View TemplateはDefaultレイアウトのみサポートします。従って、コンテナコンポーネントはLayouts、Layoutタグの代わりにComponentsという一つのプロパティで対応できるようにサポートします。

<Div id="Div00" text="Div00">
    <Layouts>
        <Layout>
            <Button id="Button00" text="Button00"/>
        </Layout>
    </Layouts>
</Div>

{
    "tag": "Div",
    "attribute": {
        "id": "Div00"
    },
    "Div": [
        {
            "Components": [
                {
                    "tag": "Button",
                    "attribute": {
                        "id": "Button00",
                        "text": "Button00"
                    }
                }
            ]
        }
    ]
}

下記のように、1つのタグを1つのJSONオブジェクトで構成する基本変換規則に従うこともできます。Componentsプロパティの代わりにLayouts、Layoutプロパティを使用します。

<Div id="Div00" text="Div00">
    <Layouts>
        <Layout>
            <Button id="Button00" text="Button00"/>
        </Layout>
    </Layouts>
</Div>

{
    "tag": "Div",
    "attribute": {
        "id": "Div00"
    },
    "Div": [
        {
            "tag": "Layouts",
            "Layouts": [
                {
                    "tag": "Layout",
                    "Layout": [
                        {
                            "tag": "Button",
                            "attribute": {
                                "id": "Button00",
                                "text": "Button00"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

イベント処理

イベントはActionを通じて処理することもできますが、戻り値にScriptタグを追加して処理することもできます。このような場合には、Viewコンポーネントの内に含まれているスクリプトを呼び出すように設定する必要があります。

nexacro studioでイベント処理時にFormスクリプトに登録されるのとは異なり、Viewコンポーネントのinnerformスクリプトとして処理されるため、onclickイベントの作成時に該当するViewコンポーネントのIDでアクセスする必要があります。

"イベント名": {ViewコンポーネントのID}.form.{イベント関数名}
"onclick": "View00.form.btnAdd_onclick"

{
	"View":{
		"tag":"View",
		"attribute":{
			"id": "View00"
		},
		"Model": [
			{
				"fieldid": "",
				"Components": [
					{
						"tag": "Button",
						"attribute": {
							"id": "Button00",
							"text": "Button00",
							"onclick": "View00.form.btnAdd_onclick"
						}
					}
				]
			}
		],
		"Script": {
			"tag": "Script",
			"attribute": {
				"type": "xscript5.1"
			},
		"value": "this.btnAdd_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo) {}"
}

View Layout Editor

Viewテンプレートのfn_GetViewAttributeList関数内のedittypeが「Layout」である項目を設定した場合、View Generation WizardでView Attributes項目を設定する際にView Layout Editorを使用してレイアウト情報を設定することができます。

設定した値は、fn_GetViewGenerationResult関数にgenerationattrパラメータとして渡されて、View画面の構成で使用することができます。

fn_GetViewAttributeList関数で返すJSON値が下記のような場合を例題として説明します。

{
	"attributecount": 2,
	"attributes": [
		{
			"id": "use_triggerbutton",
			"edittype": "Boolean",
			"defaultvalue": "true"
		},
		{
			"id": "view_layout",
			"edittype": "Layout",
			"userproperties": {
				"propertycount": "1",
				"properties": [
					{
						"id": "gap",
						"edittype": "Number",
						"defaultvalue": 5
					}
				]
			}
		}			
	]
}

FormデザインウィンドウでViewコンポーネントにModelを接続します。View Generation WizardでView Templateを選択して、View Attributes項目設定ウィンドウで「Layout」としてedittypeを設定した項目（view_layout）の横に表示されるボタンをクリックすると、View Layout Editorを実行できます。

View Layout Editorの実行後、最初に表示される「Create Table」ボタンをクリックして、レイアウトの基本ColumnとRowを設定します。Columnの10個、Rowの8つの組み合わせまでは、碁盤柄のウィンドウでマウス操作で選択でき、それ以上の値は、「Custom」項目を選択してから、直接Column、Row数字を入力できます。

Column、RowのサイズはViewコンポーネントの全体を埋めるように自動生成されます。各Column、Rowのサイズはプロパティウィンドウより変更することができます。赤い点線で表示された枠線はViewコンポーネントのサイズを表示します。

基本テーブルを作成した後には「Edit Column」、「Edit Row」ボタンもしくはコンテキストメニューからColumn、Rowを追加・挿入・削除することができます。

レイアウトの設定後 [OK]ボタンをクリックすると、「Layout」にedittypeを設定した項目の値が設定されます。

セルのプロパティの設定

View Layout Editorでセルを選択し、セルのプロパティを設定することができます。

基本的に設定できるプロパティは下記の通りです。

• halign (left | center | right)：セルに表示するModelフィールドの横方向の配置指定のプロパティ

• valign (top | middle | bottom)：セルに表示するModelフィールドの縦方向の配置指定のプロパティ

• direction (horizontal | vertical)：セルに表示するModelフィールドの方向指定のプロパティ

Modelの設定時に選択したフィールド値を選択している場合、セルに適用するフィールド値を設定することができます。

• fieldlist: 選択したModelフィールド値

fn_GetViewAttributeList関数からuserproperties値を返した場合、User Propertiesプロパティを追加で設定することができます。

• User Properties：userpropertiesとして設定したプロパティ情報

例えば、２つのModelフィールド値（name、company）を選択し、１つのuserproperties値（gap）を返した場合、設定できるセルのプロパティは下記の通りです。

セルの結合／解除

Grid Editorと同じようにセルの結合／解除機能をサポートします。結合する場合は2つ以上のセルを選択し、コンテキストメニューから「Merget Cells」項目を選択します。解除する場合は結合されたセルを選択し、コンテキストメニューから「Split Cell」項目を選択します。

セルの結合時にColumn、Rowインデックス情報は小さい値の方で設定されます。

valueの戻り値のJSON形式

valueの戻り値のJSON形式は下記の通りです。戻り値はfn_GetViewGenerationResult関数に generationattrパラメータとして渡され、View画面構成で使用することができます。

• columnsize - Columnサイズの配列

• rowsize - Rowサイズの配列

• celllist - セルのプロパティの配列

  • col - Columnインデックス

  • row - Rowインデックス

  • halign

  • valign

  • direction

  • User Properties

  • colspan - 横方向でセルを結合した場合

  • rowspan - 縦方向でセルを結合した場合

  • fieldlist - 設定したフィールド値の配列

{
	"columnsize":[101,101,101],
	"rowsize":[66,66],
	"celllist":[
		{
			"col":"0",
			"row":"0",
			"halign":"left",
			"valign":"top",
			"direction":"horizontal",
			"gap":"5",
			"fieldlist":["name"]
		},
		{
			"col":"0",
			"row":"1",
			"halign":"center",
			"valign":"middle",
			"direction":"vertical",
			"gap":"5",
			"colspan":"2",
			"fieldlist":["name","company"]
		}
	]
}

XML ⇔ JSON Converter

XMLコードをJSONコードに変換したり、JSONコードをXMLコードに変換することができる機能をサポートします。

Viewコンポーネントの情報がViewテンプレートのfn_GetViewGenerationResult関数にcontentsの引数として渡される結果を予め確認したり、fn_GetViewGenerationResult関数から返すJSONデータを作成する用途などに活用できます。

機能提供メニュー

XML ⇔ JSON Converter機能は下記のメニューや画面からアクセスできます。

• nexacro studioのメニュー [EasyUI > XML<->JSON Converter]

• コンテキストメニュー

  • Formデザインビュー、Sourceウィンドウ

  • Formデザインビューからコンポーネント（invisible Object）の選択時

  • FormのSourceウィンドウからコードのブロック選択時

  • View Templateコード編集ウィンドウ

  • Project ExplorerからFormの選択時

• コード編集ウィンドウの上部のボタン

  • View Templateコードの編集時

変換対象のコードの自動選択

画面によって変換するコードを自動選択する機能を提供します。

• Formデザインビュー

  • 特定のコンポーネント（オブジェクト）を選択していない場合

    現在のLayoutに該当するLayoutのXMLコード

    選択したLayoutによって該当するLayoutのXMLコード

  • 特定のコンポーネント（オブジェクト）を選択している場合

    選択したコンポーネント（オブジェクト）のXMLコード（複数選択もサポート）

• Formソースビュー

  • 変換対象のXMLコードの領域選択

    選択したコードを変換処理

• Viewテンプレートエディタ

  • 変換対象のJSONもしくはXMLコードの領域選択

    選択したコードを変換処理

自動選択されたコードはInput領域にコピーされ、真ん中の変換ボタンをクリックするとJSONコードに変換されます。変換後のJSONコードはクリップボードにコピーされます。

コードの手入力

Input領域に直接入力したXMLもしくはJSONコードを変換することができます。自動的にXMLもしくはJSONコードを認識しそれぞれXML⇒JSON、JSON⇒XMLの変換を行います。

直接入力したコードにエラーがあった場合には、変換ボタンのクリック時にOutputウィンドウにエラーメッセージが出力されます。