넥사크로플랫폼에서는 기본적으로 사용자들이 필요로 하는 컴포넌트를 제공하고 있습니다. 하지만 사용자 환경에 따라 특화된 기능을 필요로 하는 경우가 있습니다. 이럴 때는 투비소프트 파트너 개발사 또는 개발자가 작성한 사용자 컴포넌트를 적용하거나 직접 필요한 기능을 추가한 사용자 컴포넌트를 작성할 수 있습니다.

이번 장에서는 사용자 컴포넌트가 제공되는 형식과 이를 사용하는 방법에 대한 가이드를 제공합니다.

사용자 컴포넌트를 작성하기 위한 가이드는 파트너 개발사에 일부 제공되고 있으며 앞으로 전체 사용자에게 제공될 예정입니다.

이 문서에서는 사용자 컴포넌트를 작성하는 구체적인 방법에 대해서는 다루지 않으며 이미 개발된 사용자 컴포넌트를 적용하는 방법만 다룹니다.

사용자 컴포넌트 구성

사용자 컴포넌트는 다음과 같은 형식으로 구성됩니다. 사용자 컴포넌트는 프로토콜 어댑터에서 모듈과 프로토콜을 등록하는 방법과 비슷하지만 약간의 차이가 있습니다.

사용자 컴포넌트는 구성에 따라 제공되는 파일의 개수가 달라질 수 있지만, 기본적으로 제공되는 파일은 3가지입니다.

모듈 파일 (*.json)
오브젝트 정보 파일 (*.info)
컴포넌트 스크립트 파일 (*.js)

모듈(Module) 등록

프로젝트 폴더에 있는 default_typedef.xml 파일을 직접 수정하거나 [Edit TypeDefinition > Modules]창에서 해당 항목을 추가합니다.

등록할 모듈과 스크립트는 넥사크로 스튜디오에서 Base Lib Path로 지정된 경로 아래 [component] 폴더 하위 경로에 파일이 있어야 합니다.

기본 설정은 넥사크로플랫폼 설치 경로 아래 nexacro14lib 폴더입니다.

Base Lib Path는 [Tools >Options > Environment > Build > Base Lib Path]에서 다른 경로로 변경할 수 있습니다.

모듈은 아래와 같은 형태로 JSON 파일을 작성합니다. 'scripts', 'objInfo' 항목에 지정된 자바스크립트 경로는 [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 파일에 포함하거나 별도 파일로 작성할 수 있습니다.

넥사크로 스튜디오에서는 ObjInfo에 지정된 파일 내용을 기준으로 컴포넌트를 추가하고 속성창에 정보가 나타나며 실제 실행되는 애플리케이션의 동작은 scripts에 설정된 자바스크립트 파일에 정의된 내용에 따라 처리됩니다.

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 항목을 지정했을 때 속성창에서 해당 속성의 입력영역은 선택목록 형태로 나타납니다.

컴포넌트 스크립트

애플리케이션 실행 시 컴포넌트의 각 속성과 메소드, 이벤트를 어떻게 처리할지에 대한 내용은 자바스크립트로 작성된 파일에 추가되어야 합니다.

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>

컴포넌트 사용

기본 컴포넌트를 사용하는 것과 같이 툴바에 있는 컴포넌트 아이콘을 선택하고 폼에 적절한 크기로 배치합니다.

설정창에서 필요한 속성을 추가하거나 이벤트를 정의할 수 있으며 스크립트 창에서는 지정된 속성이나 메소드에 대해 자동완성 기능을 제공합니다.