nexacro platformでは、基本的にユーザーが必要とするコンポーネントを提供しています。但し、ユーザー環境によって特化した機能を必要とする場合があります。こういう場合は、当社のパートナー開発会社や開発者が作成したカスタムコンポーネントを使用するか、直接必要な機能を追加したカスタムコンポーネントを作成することができます。

今回の章では、ユーザーコンポーネントが提供される形式と、それを使用する方法についてのガイドを提供します。

カスタムコンポーネントを作成するためのガイドは、パートナー開発会社に一部提供されており、今後、すべてのユーザーに提供される予定です。

この文書では、カスタムコンポーネントを作成する具体的な方法については説明せず、すでに開発されたカスタムコンポーネントを適用する方法のみ説明します。

カスタムコンポーネント構成

カスタムコンポーネントは、下記のような形式で構成されます。カスタムコンポーネントは、プロトコルアダプタでモジュールとプロトコルを登録する方法と似ていますが、やや違います。

カスタムコンポーネントは、構成によって提供されるファイルの数が異なりますが、基本的に提供されるファイルは3つあります。

モジュールファイル (*.json)
オブジェクト情報ファイル (*.info)
コンポーネントスクリプトファイル (*.js)

モジュール(Module)登録

プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接変更したり、[Edit TypeDefinition>Modules]ウィンドウで該当する項目を追加します。

登録するモジュールとスクリプトは、nexacro studioでBase Lib Pathに指定されたパスの下の[component]フォルダーのサブパスにファイルが必要です。

デフォルト設定は、nexacro platformインストール·パスの下にnexacro14libフォルダです。

Base Lib Pathは、[Tools> Options> Environment> Build> Base Lib Path]で別のパスに変更することができます。

モジュールは、以下のような形でJSONファイルを作成します。「scripts」、「objInfo」項目に指定されたJavaScriptのパスは、[Base Lib Path> component]フォルダの下に該当フォルダとスクリプトファイルが必要です。

{
"name": "ExtComp",
"version": "14.0.0.0",
"description": "nexacro platform Common Component Library",
"license": "",
"scripts": [
"ExtComp/ExtCombo.js"
],
"objInfo": [
"ExtComp/ExtCombo.info",
"ExtComp/ExtEnum.info"
]
}
//@ sourceURL=ExtComp.json

プロトコルアダプタと異なる点は、カスタムコンポーネントで提供されるプロパティ、メソッド、イベント、Enumの関連情報を「objInfo」項目に設定しています。

<Module url="ExtComp.json"/>

オブジェクト情報

nexacro.ExtComboコンポーネントは、モジュールの設定時に「ExtCombo.info」、「ExtEnum.info」の2つのObjInfoファイルを設定します。「ExtCombo.info」ファイルは、コンポーネントに必要な情報を含んでおり、「ExtEnum.info」ファイルは、Enumプロパティに関する情報を含んでいます。 Enumプロパティ情報は、用途によってコンポーネントinfoファイルに含めたり、別のファイルとして作成できます。

nexacro studioはObjInfoに指定されたファイルの内容によってコンポーネントを追加し、[プロパティ]ウィンドウに情報が表示され、実際に実行されるアプリケーションの動作は、scriptsに設定されたJavaScriptファイルに定義された内容によって処理されます。

ExtCombo.infoファイルで追加またはオーバーライドされた項目は下記の通りです。詳細については、完全なコードを参照してください。

新たに追加されたプロパティ
userprop
itemopacity
新たに追加されたPseudo
pushed
focused
継承されたプロパティをオーバーライド
tooltiptext
追加されたメソッド
testFunc
追加されたイベント
ontest

提供されたコードは、理解を助けるために提供されており、特定の機能を実行するための用途ではありません。

<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
	<Object id="nexacro.ExtCombo"> 

		<!-- define extend component based nexacro.Combo -->
		<ObjectInfo 
			inheritance="nexacro.Combo"
			typename="nexacro.ExtCombo"
			csstypename="ExtCombo,ExtComboABC[userprop='abc']"
			csscontrolname="ExtComboControl,ExtComboControlABC[userprop='abc']"
			group="UIComponent"
			csspseudo="true"
			container="false"
			composite="true"
			tabstop="true"
			cssstyle="true"
			contents="true"
			formats="false"
			contentseditor="auto"
			defaultwidth="300"
			defaultheight="200"
			requirement="Runtime,HTML5"
			description=""/> 
		
		<PseudoInfo> 
			<Pseudo 
				name="pushed" 
				control="true" 
				deprecated="false" 
				unused="false" 
			/> 
			<Pseudo 
				name="focused" 
				control="true" 
				deprecated="false" 
				unused="true" 
			/>
		</PseudoInfo> 

		<ControlInfo>
		</ControlInfo>


		<PropertyInfo> 
			<!-- define new property -->
			<Property
				name="userprop"
				group="Misc"
				type="Enum"
				defaultvalue="abc"
				readonly="false"
				initonly="false"
				hidden="false"
				control="false"
				style="false"
				expr="false"
				deprecated="false"
				unused="false"
				objectinfo=""
				enuminfo="enum_ext_test"
				unitinfo=""
				requirement="Runtime,HTML5"
				description="this is desc"
			/>
			<!-- re-define super's property -->
			<Property
				name="tooltiptext"
				group="Misc"
				type="String"
				defaultvalue="1111111"
				readonly="false"
				initonly="false"
				hidden="false"
				control="false"
				style="false"
				expr="false"
				deprecated="false"
				unused="false"
				objectinfo=""
				enuminfo=""
				unitinfo=""
				requirement="Runtime,HTML5"
				description="this is desc"
			/>
			<!-- define new style property -->
			<Property
				name="itemopacity"
				group="Style"
				type="Opacity"
				defaultvalue=""
				readonly="false"
				initonly="false"
				hidden="false"
				control="false"
				style="true"
				expr="false"
				deprecated="false"
				unused="false"
				objectinfo="nexacro.Style_opacity"
				enuminfo=""
				unitinfo=""
				requirement="Runtime,HTML5"
				description="this is desc"
			/>
		</PropertyInfo> 

		
		<MethodInfo>
			<Method
				name="testFunc"
				group=""
				async="false"
				deprecated="false"
				unused="false"
				requirement="Runtime,HTML5"
				description="this is test method"
			>
				<Syntax
					text = "testFunc(a [, b])"
				>
				<Return/>
				<Arguments>
					<Argument 
						name="a" 
						type="String" 
						in="true" 
						out="false" 
						option="false" 
						variable="false" 
						description="any string" 
					/> 
					<Argument 
						name="b" 
						type="String" 
						in="true" 
						out="false" 
						option="true" 
						variable="false" 
						description="any string" 
					/> 
				</Arguments>
				</Syntax>
			</Method>
		</MethodInfo>
		

		<EventHandlerInfo>
			<!-- define event -->
			<EventHandler
				name="ontest"
				group="Event"
				deprecated="false"
				unused="false"
				requirement="Runtime,HTML5"
				description="this is test event"
			>
				<Syntax
					text="ontest(obj:Object, e:nexacro.EventInfo)"
				>
					<Return/>
					<Arguments>
						<Argument 
							name="obj" 
							type="Object" 
							in="true" 
							out="false" 
							option="false" 
							variable="false" 
							description="Event Source Object" 
						/> 
						<Argument 
							name="e" 
							type="nexacro.EventInfo" 
							in="true" 
							out="false" 
							option="false" 
							variable="false" 
							description="Event Information Object" 
						/> 
					</Arguments>
				</Syntax>
			</EventHandler>
		</EventHandlerInfo>
	</Object> 
</MetaInfo>

カスタムコンポーネントを画面上に配置すると、プロパティウィンドウに追加されたPseudo項目やプロパティ、イベントを確認することができます。

サンプルコードで、userpropプロパティを設定する項目の中でenuminfoは、値を直接入力せずに「enum_ext_test」というEnum項目を指定します。該当項目についての内容は、「ExtEnum.info」ファイルから確認することができます。

<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
	<!-- define enum information -->
	<EnumInfo
		id="enum_ext_test"
		composite="false"
		delimiter=""
		description="abc, 123"
	>
		<Enum
			name="abc"
			description="abc"
		/>
		<Enum
			name="123"
			description="123"
		/>	
	</EnumInfo>
</MetaInfo>

Enum項目を指定したときに、プロパティウィンドウで該当プロパティの入力領域は、選択リストの形で表示されます。

コンポーネントスクリプト

アプリケーションの実行時コンポーネントの各プロパティとメソッド、イベントをどのように処理するかについての内容は、Javaスクリプトで作成されたファイルに追加する必要があります。

ExtCombo.jsファイルの完全なコードは下記の通りです。

提供されたコードでは、理解を助けるために提供されており、特定の機能を実行するための用途ではありません。

if (!nexacro.ExtCombo) 
{
    // ==============================================================================
    // nexacro.ExtCombo
    // ==============================================================================
    nexacro.ExtCombo = function(id, position, left, top, width, height, right, bottom, parent) 
    {
        nexacro.Combo.call(this, id, position, left, top, width, height, right, bottom, parent);
		
		this.userprop = "abc";
		this.itemopacity ="";
		this.onclick = null;
    };
    
    var _pExtCombo = nexacro._createPrototype(nexacro.Combo);
    nexacro.ExtCombo.prototype = _pExtCombo;
    _pExtCombo._type = "nexacroExtCombo";
    _pExtCombo._type_name = "ExtCombo";
    
	_pExtCombo.set_userprpo = function (v) 
	{
	    this.userprop = v;
	}
	
	_pExtCombo.set_itemopacity = function (v) 
	{
	    this.itemopacity = v;
	}
	_pExtCombo.testFunc = function (a,b)
	{
		return a+b;
	}

    delete _pExtCombo;
}

カスタムコンポーネント適用

コンポーネント登録

プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接変更したり、[Edit TypeDefinition> Objects]ウィンドウで該当する項目を追加します。

idはユーザーが任意に指定できますが、classname値はカスタムコンポーネントの作成時に指定したクラス名を指定する必要があります。クラス名は、カスタムコンポーネントに添付されているマニュアル文書を参照するか、infoファイルのObject id項目を参照します。

モジュールの登録時に使用したExtCombo.infoファイルでは、Object id値を「nexacro.ExtCombo」に設定したため、コンポーネントの登録時にclassname値を「nexacro.ExtCombo」に設定します。

<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
	<Object id="nexacro.ExtCombo"> 

		<!-- define extend component based nexacro.Combo -->
		<ObjectInfo 
			inheritance="nexacro.Combo"
			typename="nexacro.ExtCombo"

設定されたコンポーネントの基本的な情報は、default_typedef.xmlファイルに保存されます。

<Component type="JavaScript" id="ExtCombo" classname="nexacro.ExtCombo"/>

追加的なコンポーネントの配置時、デフォルト設定されている高さ、幅、アイコンの情報は、プロジェクト設定ファイル(*.xprj)に保存されます。

<?xml version="1.0" encoding="utf-8"?>
<Project active_adl="dd" version="1.2">
  <TypeDefinition url="default_typedef.xml"/>
  <GlobalVariables url="globalvars.xml"/>
  <ADL id="dd" url="dd.xadl"/>
  <ComponentInfoGroup>
    <ComponentInfo name="ExtCombo" defaultwidth="100" defaultheight="20" image="5"/>
  </ComponentInfoGroup>

コンポーネント使用

基本的なコンポーネントを使用することと同じように、ツールバーにあるコンポーネントのアイコンを選択し、フォームに適切なサイズで配置します。

設定ウィンドウで必要なプロパティを追加したり、イベントを定義することができ、スクリプトウィンドウでは、指定されたプロパティやメソッドの自動補完機能を提供します。