Grid、ListViewコンポーネントは、コンテンツが表示される形態について、コンテンツエディタ形態を使って設定できるようにサポートします。 これにより、コンポーネントやデータを様々な形で示すことができます。 nexacroモジュルデベロッパーでは、モジュール開発時にコンテンツエディタを設定する機能を提供しています。

MetaInfo contentsプロパティに設定する方法は、基本的に提供される3種類のコンテンツエディタを使用します。コンテンツエディタプロジェクトを作成して設定すると、オブジェクトcontenteditorプロパティに設定することができます。

MetaInfo contentsプロパティに設定

Contentsプロパティを設定すると、デフォルトで提供される3種類のContent Editorをオブジェクトプロパティの設定時に使用することができます。

contentsプロパティの設定

Component Wizardで設定

設定されたプロパティ値は、MetaInfoで確認できます。

下記のようにContents Typeによって関連関数が自動生成されます。

MetaInfoで設定

MetaInfoでcontentsプロパティを変更した場合には、自動でコードが追加されません。必要なコードを直接追加する必要があります。

Contents Format、Contents Typeの設定

Contentsプロパティ値を「true」に設定すると、Contents FormatとContents Typeを設定できます。Contents Formatによって、選択できるContents Typeの設定が異なります。

Contents Format

処理するプロパティ値の形式を設定します。選択したプロパティ値によってモジュールのインストール後に使用できるエディタが変わります。

Contents Type

プロパティ値を「formats」に設定する場合には、formatidを使って1つ以上のデータを設定することができます。Component Wizardに設定した場合には、下記のようにformats、formatidプロパティに関連する関数が設定されます。

モジュールのインストール後に使用できるエディタの上段にFormatを追加できるボタンが追加されます。追加したFormatを削除したり名前を変更することできます。

Contents Itemの設定

Contents Formatの値を「objectitem」に設定した場合には、Contents Itemを設定する必要があります。

Minimum OccursもしくはMaximum Occursを設定時にidプロパティ値を指定して設定できます。

簡単なサンプルを作成

オブジェクトのcontentsプロパティを「true」に設定してモジュールを作り、nexacro studioで該当オブジェクトのcontentsプロパティ値を変更する方法について説明します。

モジュールプロジェクト作成

画面構成

Static: staComp
Button: btnComp

Contents Item項目の設定

ContentsInfo Editorが実行されると、下段のContents Item項目を追加します。

最上位のアイテムであるTypeNameは、現在作業しているオブジェクトクラスを選択します。例題の「nexacro.CompContentsSample」です。

nexacro studioでcontentsプロパティを設定すると、各下位のアイテムは一つずつ追加することができ、id値は「staComp」、「btnComp」に設定されます。

スクリプト作成

Contentsプロパティ値の設定時に設定された値を処理する方式は、直接スクリプトで実装する必要があります。Component Wizardでcontentsプロパティを設定すると、スクリプトコードは下記のように生成されます。

nexacro.CompContentsSample.prototype.contents = "";
nexacro.CompContentsSample.prototype.set_contents = function (v)
{
	this.contents = v;
	this._setContents(this.contents);
};
	
nexacro.CompContentsSample.prototype._setContents = function (v)
{
	// This function is necessary to apply contents in the run environment.
	// TODO : enter your code here.
};

アプリ実行時にNRE、WREで発生するオブジェクトインターフェイスが異なるため、下記のように2つをすべて登録しました。サービス対象がWREだけであれば、on_attach_contents_handle関数のみ登録します。

on_created_contentsはNREで動作する関数ですが、nexacro studioでの該当コンポーネントのロード時に動作しながら重複した関数が実行されてしまうので、system.navigatornameをチェックして、nexacro studioで実行されないように設定します。

nexacro.CompContentsSample.prototype.on_attach_contents_handle = function (win)
{
	nexacro._CompositeComponent.prototype.on_attach_contents_handle.call(this, win);
	this._setContents(this.contents);
};	

nexacro.CompContentsSample.prototype.on_created_contents = function (win)
{
	nexacro._CompositeComponent.prototype.on_created_contents.call(this, win);
	if(system.navigatorname != "nexacro DesignMode")
	{
		this._setContents(this.contents);
	}		
};

_setContents関数は、下記のような状況で呼び出されます。

• nexacro studioでオブジェクトを追加したFormをロード

• nexacro studioでオブジェクトcontentsプロパティ値を変更

• アプリロード時にon_attach_contents_handle、on_created_contents関数を呼び出し

contentsプロパティで設定した値はXML文字列に伝わり、関数内でDomParserを使ってDOMDocumentオブジェクトを生成し、各項目に設定された値を確認して設定した値を反映します。

nexacro.CompContentsSample.prototype._setContents = function (v)
{
	this.contents = v;
	var objDoc = new nexacro.DomParser();
	var xmlDoc = objDoc.parseFromString(this.contents);
	var obj = null;
	var n, children = null;
		
	var contentsNode = xmlDoc.firstChild;
	if(!contentsNode)
		return;
	
	var objectNode = contentsNode.firstChild;
	if(!objectNode || objectNode.tagName != "MyComp")
		return;
			
	var childNode = objectNode.firstChild;
	while(childNode)
	{
		var id = childNode.getAttribute("id");
		var obj = this.form[id];
		if(obj == undefined)
			break;
			
		var attributes = childNode.attributes;
		var nCount = attributes.length;
			
		for(var i=0; i<nCount; i++)
		{
			var attr = attributes[i];
			var attr_name = attr.name;
			var attr_value = attr.value;
				
			if(attr_name == "id")
				continue;
				
			var setter = obj["set_"+attr_name];
			if(setter)
				setter.call(obj, attr_value);
		}
		childNode = childNode.nextSibling;
	}
};

エミュレータで動作を確認

前のステップで、Contents Itemを設定する際に、指定されたidで2つのアイテムのみ追加できるように設定したため、2つのアイテムのみ追加できます。

モジュールをインストールして動作を確認

これからモジュールを配布し、配布したモジュールをnexacro studioで確認してみましょう。

配布したモジュールのインストールファイルをnexacro studioから取得します。

「Contents」タブでアイテムを追加して設定する方法は、エミュレータと同様です。これからは、「Design Source」タブで設定する方法について説明します。

<Contents>
  <MyComp id="MyComp00">
    <Static id="staComp" text="TEST" color="red" font="36px/normal &quot;Arial&quot;" textAlign="center"/>
    <Button id="btnComp" text="TEST BUTTON" background="cornflowerblue"/>
  </MyComp>
</Contents>

ボタンをクリックする際にオブジェクトのcontentsプロパティ値を設定し、オブジェクト内のコンポーネントのtextプロパティ値を変更します。

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.CompContentsSample00.set_contents("<Contents><MyComp id='MyComp00'><Static id='staComp' text='SAMPLE'/><Button id='btnComp' text='SAMPLE BUTTON'/></MyComp></Contents>");
};

オブジェクトのcontentseditorプロパティで設定

nexacro studioで別途開発したコンテンツエディタプロジェクトを連結して使用する機能をサポートします。

Project Explorerでオブジェクトを選択すると、プロパティウィンドウでContents Editorに関するプロパティを指定できます。

登録したコンテンツエディタプロジェクトはProject Explorerに表示され、項目選択時にnexacro studioで実行するかどうか確認します。