Nexacro Platform basically offers components which users need. However, some specialized features might be needed depending on user environments. In that case, you can utilize user components created by firms or individual developers in partnership with our company. You can also write user components with additional features you need by yourself.

This chapter describes component composition and usage.

User Component Composition

The composition of user components is as follows. How to register user components is the same as registering modules and protocols in Protocol Adapters, but they are slightly different.

The number of provided files may differ depending on user component composition. However, three files are basically provided:

• Module file (*.json)

• Object information file (*.info)

• Component script file (*.js)

Registering Modules

You can register modules by editing the default_typedef.xml file in the project folder directly or by adding the relevant item in the [Edit TypeDefinition > Modules] window.

Module files will be written in JSON files as follows. Paths for JavaScript designated in scripts and objInfo items must have relevant folders and script files subordinate to the [Base Lib Path > component] folder.

{
"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

The difference from Protocol Adapters is that the information about properties, methods, events and enum provided by components is regarded as "objInfo".

<Module url="ExtComp.json"/>

Object Info

When setting the module, the nexacro.ExtCombo component sets two objInfo files -ExtCombo.info, and ExtEnum.info. The ExtCombo.info file contains the information required for the component while the ExtEnum.info file contains the information about Enum properties. Enum property information can be included in the component info file or can be written separately depending on purposes.

The following items were added or redefined in the ExtCombo.info file. For details, refer to the entire code.

• New property

  userprop

  itemopacity

• New Pseudo

  pushed

  focused

• Redefinition of inherited property

  tooltiptext

• Added method

  testFunc

• Added event

  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>

When you arrange user components on the screen, you can see the pseudo item, properties and events added in the properties window.

Among items which define the userprop properties in the following example code, enuminfo is defined as enum_ext_test. Details regarding the corresponding item can be found in the ExtEnum.info file.

<?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>

When you designate the Enum item, the input area of the relevant property in the properties window will be displayed as Combo.

Component Scripts

How to handle a component's property, method and event when running an application shall be added to a file written in JavaScript.

The entire code of the ExtCombo.js file is as follows.

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;
}

Applying User Components

Registering Components

You can register a component by editing the default_typedef.xml file in the project folder directly or by adding the relevant item in the [Edit TypeDefinition >Objects] window.

You can set ID arbitrary, but the class name should have a certain class name designated when creating an user component. For the class name, refer to the guide provided with user components or the Object id included in the info file.

In the ExtCombo.info file used when registering the module, Object id is set as nexacro.ExtCombo. For that reason, the classname value will be nexacro.ExtCombo this time.

<?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"

The default information of the component is saved in the default_typedef.xml file.

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

When adding another component, the default information of height, width and icon is stored in the project file(*.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>

Using Components

You can use components by clicking the component icon on the tool bar and by adjusting the components on the screen in your preferred size as you use the basic components.

You can add necessary properties or define events in the setting window. The script window provides "AutoComplete" regarding designated properties or methods.