Grid, ListView 컴포넌트 같은 경우에는 콘텐츠가 보이는 형태를 콘텐츠 에디터 형태를 사용해 설정할 수 있도록 지원합니다. 이를 통해 컴포넌트나 데이터를 여러 형태로 보여줄 수 있습니다. 넥사크로 모듈 디벨로퍼에서는 모듈 개발 시 콘텐츠 에디터를 설정하는 기능을 제공하고 있습니다.

메타인포 contents 속성으로 설정하는 방법은 기본 제공되는 3가지 형태의 콘텐츠 에디터를 사용합니다. 콘텐츠 에디터 프로젝트를 만들고 이를 설정하려면 오브젝트 contenteditor 속성으로 설정할 수 있습니다.

메타인포 contents 속성으로 설정하기

contents 속성을 설정하면 기본 제공되는 3가지 형태의 Content Editor를 오브젝트 속성 설정 시 사용할 수 있습니다.

contents 속성 설정하기

Component Wizard에서 설정하기

설정된 속성값은 메타인포에서 다시 확인할 수 있습니다.

아래와 같이 Contents Type에 따라 관련 함수가 자동 생성됩니다.

메타인포에서 설정하기

메타인포에서 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로 설정하고 모듈을 만들고 넥사크로 스튜디오에서 해당 오브젝트의 contents 속성값을 변경하는 방법을 살펴봅니다.

모듈 프로젝트 만들기

화면 구성하기

Static: staComp
Button: btnComp

Contents Item 항목 설정하기

ContentsInfo Editor가 실행되면 하단 Contents Item 항목을 추가합니다.

최상위 아이템 TypeName은 현재 작업하고 있는 오브젝트 클래스를 선택합니다. 예제에서는 "nexacro.CompContentsSample"입니다.

넥사크로 스튜디오에서 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에서 동작하는 함수인데 넥사크로 스튜디오에서 해당 컴포넌트 로딩 시에 동작하면서 중복된 함수가 실행되어 system.navigatorname을 체크해서 넥사크로 스튜디오에서는 실행되지 않도록 설정합니다.

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 함수는 아래와 같은 상황에서 호출됩니다.

• 넥사크로 스튜디오에서 오브젝트를 추가한 Form 로딩

• 넥사크로 스튜디오에서 오브젝트 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개의 아이템만 추가할 수 있습니다.

모듈 설치하고 동작 확인하기

이제 모듈을 배포하고 배포한 모듈을 넥사크로 스튜디오에서 확인해봅니다.

배포한 모듈 설치 파일을 넥사크로 스튜디오에서 가져옵니다.

[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 속성으로 설정하기

넥사크로 스튜디오에서 별도 개발한 콘텐츠 에디터 프로젝트를 연결해 사용하는 기능을 지원합니다.

Project Explorer에서 오브젝트 선택 시 속성창에서 Contents Editor 관련 속성을 지정할 수 있습니다.

등록한 콘텐츠 에디터 프로젝트는 Project Explorer에 노출되며 항목 선택 시 넥사크로 스튜디오에서 실행할 지 여부를 확인합니다.