Form 소개

넥사크로플랫폼에서 Form은 화면을 구성하는 가장 기본적인 단위입니다. 독립적으로 하나의 화면을 구성하기도 하고 Div, PopupDiv, Tab 컴포넌트처럼 다른 컴포넌트의 콘텐츠로 사용되기도 합니다. 넥사크로스튜디오에서 화면을 배치하려면 먼저 Form을 생성하고 그 위에 컴포넌트를 배치해야 합니다.

사용 예

Form은 직접 화면에 보이는 부분이 아니라 컴포넌트를 배치하고 관련된 이벤트 등을 처리하는 용도로 사용하기 때문에 예를 들어 설명하기 어렵습니다. 마치 공기가 눈에 보이지 않는 것처럼 말이죠.

Form 만들기

스크립트에서 동적으로 생성할 수도 있지만 일반적인 경우는 넥사크로 스튜디오 메뉴에서 Form을 생성합니다.

메뉴 [File > New > Form]

Form 이름과 서비스를 지정합니다. 프로젝트 규모가 큰 경우에는 업무에 따라 서비스를 구분하기 때문에 적절한 서비스를 선택합니다. 서비스는 Form 생성 후 변경할 수 있습니다.

Design | Source | Script

Form을 생성하면 넥사크로 스튜디오에서 생성된 Form을 열어줍니다. 열린 Form은 3가지 편집 모드를 제공합니다.

[Design] 모드에서는 컴포넌트를 배치하거나 컴포넌트를 선택하고 속성값을 지정할 수 있습니다. 수정된 속성값은 바로 반영되어 [Design] 모드 화면에서 확인할 수 있습니다.

[Source] 모드에서는 XML 파일 형식으로 생성된 코드값을 보여줍니다. 화면의 배치 순서나 컴포넌트의 속성, 등록된 이벤트 등을 확인할 수 있습니다. 코드를 직접 수정할 수 있지만 [Design] 모드나 속성창에서 수정한 값이 자동으로 반영되기 때문에 따로 수정할 필요는 없습니다.

[Script] 모드에서는 사용자가 함수를 생성하거나 이벤트 함수를 편집합니다.

화면 크기에 따라 레이아웃 바꾸기

모바일 디바이스가 처음 등장했을 때는 데스크탑에서 보던 화면을 그대로 보여주었습니다. 사용자가 많지 않았고 작은 화면에서도 원하는 부분을 확대해서 보면 사용하는 데 문제가 없다고 생각했습니다. 하지만 모바일 디바이스 사용자가 늘어나면서 사용자는 작은 화면에 최적화된 화면을 원하기 시작했습니다. 그런 요구에 따라 "모바일 퍼스트"라는 말도 등장했습니다.

넥사크로플랫폼에서는 디바이스에 따라 스크린 정보를 처리할 수 있고 화면 크기에 따라 레이아웃 정보를 사용할 수 있습니다. 이번 예제에서는 화면 크기에 따라 레이아웃을 어떻게 바꿀 수 있는지 알아보겠습니다.

예제에서는 기능 테스트를 위해 크기에 사용자가 강제적으로 창 크기를 조절하는 상황을 설정했습니다. 실제로는 모니터 크기나 디바이스 화면 종류, 크기에 따라 적절한 레이아웃을 사용할 수 있도록 설계합니다.

예제

버튼 클릭 시 open 메소드를 사용해 같은 Form을 새 창으로 띄웁니다. 띄운 창의 모서리 부분을 마우스로 잡고 움직여 화면 크기를 줄이면 버튼의 배치가 바뀌는 것을 확인할 수 있습니다. 다시 화면 크기를 크게 조절하면 버튼의 배치가 바뀝니다.

sample_form_01.xfdl

예제에서 사용한 핵심 기능

Layout: Form 오브젝트의 하위에 저장되는 오브젝트입니다. 넥사크로 스튜디오에서 지정할 수 있으며 스크립트로는 추가 생성하거나 변경할 수 없습니다. Form을 생성하면 default 레이아웃이 자동으로 생성됩니다. default 레이아웃의 name 속성은 변경할 수 없습니다.

onlayoutchanged: 화면 크기 등이 변경되면서 레이아웃이 변경됐을 때 발생하는 이벤트입니다. 이전 레이아웃 정보와 바뀐 레이아웃 정보를 확인할 수 있습니다.

예제 구현 방법

화면 구성하기

Button 컴포넌트를 예제 화면과 같이 배치합니다. 화면 크기 조정 시 편의를 위해 Form 생성 시 width, height 속성값은 600, 600으로 지정합니다. Button 컴포넌트 위에 레이아웃 변경 시 관련 정보를 표시하기 위해 Static 컴포넌트를 배치합니다.

레이아웃 추가하기

레이아웃은 Form 생성 시 지정할 수 있고 Form 생성 이후에 추가할 수 있습니다. 이번 예제에서는 Form을 생성한 후 추가하는 방식을 사용합니다. [Design] 모드 화면에서 오른쪽 마우스 클릭 후 컨텍스트 메뉴에서 [Add Layout] 항목을 선택하거나 화면 오른쪽 상단에 있는 미니 툴바에서 [Add Layout] 항목을 선택합니다.

레이아웃 정보 입력하기

[Add Layout] 항목을 클릭하면 레이아웃 정보를 입력할 수 있는 [New Layout] 창이 나타납니다. 예제에서는 width, height 값만 입력합니다.

항목을 입력하면 레이아웃이 추가되고 [Design] 모드 화면 상단에 추가된 레이아웃 탭이 생성됩니다.

새로운 레이아웃의 컨텐츠 배치 설정하기

추가된 레이아웃을 선택하고 버튼 컴포넌트의 배치를 아래와 같이 수정합니다. 레이아웃을 선택하면 해당 레이아웃의 width, height 설정값에 따라 [Design] 모드에 보이는 Form 크기가 변경됩니다.

Button 컴포넌트 이벤트 함수 작성하기

실행된 웹브라우저의 크기를 조절해도 되지만 편의를 위해 같은 Form을 가지는 창을 open 메소드를 사용해 띄워줍니다. 띄운 창의 크기를 조절해 레이아웃 변경 기능을 확인합니다.

this.btnOpen_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	nexacro.open("TEST", "Sample::sample_form_01.xfdl", this.getOwnerFrame());
};

예제에서는 Form 이름을 직접 지정해주었지만 ChildFrame에 바로 연결된 Form이라면 this.parent.formurl 속성값으로 지정할 수 있습니다.

onlayoutchanged 이벤트 함수 작성하기

레이아웃이 변경됐을 때 Static 컴포넌트에 관련 정보를 표기합니다.

this.Form_onlayoutchanged = function(obj:nexacro.Form,e:nexacro.LayoutChangeEventInfo)
{
	this.staticLayoutInfo.set_text(e.oldlayout + "->" + e.newlayout + " (" + this.width + "x" + this.height + ")");
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 [OPEN] 버튼을 클릭해 새 창을 띄웁니다. 새 창의 크기를 변경하면서 버튼의 배치가 변경되는지 확인합니다.

화면을 스탭 단위로 나누기

간단한 레이아웃을 가지는 화면이라면 가로로 배치된 컴포넌트를 세로로 배치하는 것으로 화면 크기에 따른 문제를 해결할 수 있지만 복잡한 입력화면이라면 그것만으로 부족할 수 있습니다. 이런 경우에는 스탭 단위로 화면을 나눌 수 있습니다. 사용자가 입력하는 항목은 똑같지만, 화면을 넘기면서 단계적으로 입력할 수 있게 구성하는 것입니다.

넥사크로 스튜디오에서 Form 오브젝트의 stepcount 속성값을 2 이상으로 지정하면 Form의 너비가 지정된 값만큼 늘어납니다. 예를 들어 Form 오브젝트의 width 속성값을 200으로 지정하고 stepcount 속성값을 3으로 지정하면 600만큼 너비를 표시합니다. 그리고 200픽셀마다 파란 점선으로 구분해 표시합니다. 실제 화면에서 보이는 너비는 200이지만 스탭 단위로 화면을 넘기기 때문에 600만큼의 내용을 보여줄 수 있습니다.

예제

화면 하단에서 stepselector를 선택하면 선택한 화면으로 이동합니다. 첫 번째 화면에서 [Go STEP3] 버튼을 클릭하면 세 번째 화면으로 이동합니다.

모바일 디바이스에서 실행한 경우에는 제스처 동작으로 스탭을 이동할 수 있습니다.

sample_form_02.xfdl

StepControl(stepselector)은 독립적으로 사용할 수 없습니다. Form 오브젝트에서 stepcount 속성값을 지정해 화면을 분할하는 경우에만 적용됩니다.

StepControl의 속성 중 일부는 Form 오브젝트의 속성으로 제공되고 있습니다. stepalign, stepitemgap, stepitemsize 등의 속성값을 지정해 스타일을 조정할 수 있으며 stepshowtype 속성값을 지정해 화면에 보여지는 시점을 결정할 수 있습니다.

예제에서 사용한 핵심 기능

stepcount: 속성값에 지정한 값만큼 화면을 분할해 보여줍니다. 넥사크로 스튜디오 속성창에서는 Form 오브젝트를 선택하고 수정하지만 스크립트로 접근하는 경우에는 stepselector 오브젝트를 사용합니다.

positionstep: Form 오브젝트에서 stepcount 속성값을 지정해 화면을 분할한 경우 해당 컴포넌트가 어느 화면에 표시될지를 설정하는 속성입니다. 넥사크로 스튜디오 [Design] 모드에서는 컴포넌트를 배치하는 영역의 인덱스값으로 속성값을 수정합니다. 인덱스값은 0부터 시작합니다.

setStepIndex: 특정 인덱스의 화면으로 이동하고자 할 때 사용하는 메소드입니다. 인덱스값이 0부터 시작하니 세 번째 화면으로 가고자 한다면 2로 값을 설정합니다.

예제 구현 방법

Form 화면 구성하기

Form을 생성하고 width, height 속성값을 200, 300으로 지정합니다. 그리고 stepcount 속성값을 3으로 지정합니다. 화면이 3개로 분할되면서 처음 생성한 Form의 크기만한 영역이 stepcount 속성값에 지정한 숫자만큼 생성됩니다.

컴포넌트 배치하기

Button 컴포넌트를 배치합니다. 컴포넌트가 배치된 영역에 따라 positionstep 속성값이 달라집니다. 컴포넌트가 명확하게 특정 영역에 위치하지 못하고 걸쳐 있는 경우에는 앞부분이 걸친 영역이 positionstep 속성값으로 지정됩니다.

애플리케이션 실행 시 컴포넌트가 걸쳐있는 경우에는 positionstep 속성값으로 지정된 영역에만 표시되고 나머지 영역에서는 보이지 않습니다. 넥사크로스튜디오에서 보이는 것은 디자인 작업 편의를 위해 화면을 펼쳐 놓은 것이고 각 영역은 별개의 화면입니다.

Button 컴포넌트 이벤트 함수 작성하기

실행 후 stepselector를 사용해 화면을 이동할 수 있지만 메소드를 [Go STEP3] 버튼 클릭 시 지정된 인덱스 화면으로 이동하는 이벤트 함수를 작성합니다. 예를 들어 회원 가입 양식을 작성하는 경우 추가 입력 항목을 건너뛰는 경우에는 바로 전송 화면으로 이동할 수 있습니다.

this.btnGoStep3_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
		this.setStepIndex(2);
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 stepselector을 사용하거나 [Go STEP3] 버튼을 클릭해봅니다.

화면 이동하기

화면을 이동(Form 이동)하는 방법은 ChildFrame 오브젝트의 formurl 속성을 변경하거나 컨테이너 컴포넌트의 url 속성값을 변경할 수 있습니다. 하지만 Form의 parent 오브젝트가 어떤 것이 될지 알 수 없다면 Form 오브젝트의 go 메소드를 사용할 수 있습니다. 이번 예제에서는 go 메소드를 사용해 화면을 이동해봅니다.

예제

화면에서 버튼을 클릭하면 다른 Form 화면으로 이동합니다. go 메소드를 사용한 경우에는 보이는 화면을 이동하지만 ChildFrame 오브젝트의 formurl 속성을 변경하지는 않습니다. 이동한 화면에서 [Check formurl] 버튼을 클릭해 ChildFrame 오브젝트의 formurl 속성값(또는 컨테이너 컴포넌트의 url 속성값)을 확인합니다.

sample_form_03.xfdl

예제에서 사용한 핵심 기능

go: 지정된 Form을 화면에 표시하는 메소드입니다.

go 메소드는 값을 전달하는 기능을 제공하지 않습니다. 화면 전환 시 값을 같이 넘겨주어야 하는 경우에는 변수나 Dataset을 전달할 수 있는 방법이 없습니다. 전환된 화면에서 같은 값을 공유해야 한다면 AppVariables 또는 Environment의 Variables로 저장한 후 전환된 화면에서 접근해야 합니다.

hasOwnProperty: 오브젝트가 특정 속성을 가졌는지 확인하는 메소드입니다. 예제에서는 parent 속성값에 해당하는 오브젝트가 ChildFrame인지 Div와 같은 컨테이너 컴포넌트인지 확인하기 위해 formurl 속성값을 가졌는지를 확인합니다. formurl 속성값은 ChildFrame 오브젝트만 가지는 속성입니다.

예제 구현 방법

Form 화면 구성하기

첫 번째 Form에는 버튼 하나를 배치하고 두 번째 Form에는 버튼 2개와 Edit 컴포넌트를 배치합니다.

Button 컴포넌트 이벤트 함수 작성하기 (첫 번째 Form)

Button 컴포넌트 클릭 시 지정된 화면으로 이동합니다.

this.btnGo_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.go("Sample::sample_form_03_sub.xfdl");
};

Button 컴포넌트 이벤트 함수 작성하기 (두 번째 Form)

두 번째 Form에는 2개의 Button 컴포넌트가 배치되어 있습니다. [Go TEST (SUB)] Button 컴포넌트 클릭 시에는 지정된 화면으로 이동하며 [Check formurl] Button 컴포넌트 클릭 시에는 ChildFrame 오브젝트의 formurl 속성값(또는 컨테이너 컴포넌트의 url 속성값)을 보여줍니다.

this.btnCheck_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.parent.hasOwnProperty("formurl"))
	{
		this.Edit00.set_value(this.parent.formurl);
	} else {
		this.Edit00.set_value(this.parent.url);
	}
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 화면이 이동하는지 확인합니다.

오브젝트 접근하기

Form 오브젝트 내 생성된 컴포넌트나 오브젝트는 id를 지정해 접근할 수 있습니다. 하지만 특정 컴포넌트가 아니라 전체 요소에 대해서 뭔가 속성을 지정해야 할 수도 있습니다.

예제

[Count] 버튼은 두 개의 Button 컴포넌트와 두 개의 Dataset 컴포넌트가 있는 화면의 components, objects, all 속성의 length 값을 확인합니다. [Add Button] 버튼 클릭 시에는 Button 오브젝트를 추가로 생성합니다. 화면에는 보이지 않지만 [Count] 버튼을 클릭하면 Button 오브젝트가 추가된 것을 확인할 수 있습니다. 마지막으로 [Hide Button] 버튼 클릭 시 해당 버튼을 제외한 나머지 버튼이 화면에서 사라집니다.

sample_form_04.xfdl

예제에서 사용한 핵심 기능

components, objects, all: 컴포넌트, 오브젝트 목록을 Collection 형식으로 제공합니다. 아래 그림처럼 디버깅 상태에서 실제 제공되는 형식을 확인할 수 있습니다. all 속성의 경우 objects, components 순서로 표시됩니다.

예를 들어 btnAddbutton 컴포넌트가 Button 컴포넌트 중에서 우선순위가 가장 높은 경우 해당 컴포넌트는 아래와 같이 사용할 수 있습니다.

this.btnAddbutton;
this.all[2];

this.all[0], this.all[1]은 Dataset 오브젝트를 가리키고 있으며 그 다음 우선순위로 this.all[2]가 btnAddbutton 컴포넌트를 가리킵니다.

예제 구현 방법

Form 화면 구성하기

Button 컴포넌트를 예제 화면과 같이 배치합니다. Dataset 오브젝트도 두 개 추가해줍니다. Dataset 오브젝트를 어떻게 처리하는지 확인하기 위한 용도라 따로 컬럼값을 지정하지는 않습니다. Button 컴포넌트 하단에 정보를 출력하기 위해 TextArea 컴포넌트를 배치합니다.

Button 컴포넌트 이벤트 함수 작성하기

[Count] 버튼 클릭 시 components, objects, all 속성 정보를 보여줍니다.

this.btnCount_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value("components.length: "+this.components.length+"\n"
		+"objects.length: "+this.objects.length+"\n"
		+"all.length: "+this.all.length);
};

[Add Button] 버튼 클릭 시 스크립트에서 Button을 생성하고 Form 오브젝트에 추가합니다. 여러 번 추가할 수 있도록 임의의 변수를 만들어 addChild 메소드에 지정하는 id값을 계속 변경해줍니다.

var i=0;
this.btnAddbutton_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var btnobj = new Button();
	this.addChild("btn"+i, btnobj);
	i++;
};

[Hide Button] 버튼 클릭 시 해당 버튼을 제외한 나머지 버튼이 화면에서 보이지 않도록 합니다. 다시 버튼을 클릭하면 화면에 나타납니다.

this.btnHide_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var tempobj;
	for(var j=0;j<this.components.length;j++)
	{
		tempobj = this.components[j];
		if(tempobj.visible == true && tempobj != obj)	{
			tempobj.set_visible(false);
		} else {
			tempobj.set_visible(true);
		}
	}

	if(obj.text == "Hide Button")
	{
		obj.set_text("Show Button");
	} else {
		obj.set_text("Hide Button");
	}
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 오브젝트의 속성을 확인합니다.

엔터키로 컴포넌트 이동하기

웹브라우저에서 컴포넌트를 이동할 때는 탭(Tab)키를 사용합니다. 하지만 엔터키를 사용하는 경우도 있습니다. 각 컴포넌트의 이벤트를 확인해 엔터키 입력 시 동작을 지정할 수도 있지만 Form 오브젝트에서 이벤트를 처리해줄 수도 있습니다. 각 컴포넌트에서 발생하는 이벤트는 상위 컴포넌트로 전달이 됩니다. 이를 활용한 예제입니다.

예제

두 개의 Edit 컴포넌트는 문자열 입력 후 탭키 또는 엔터키를 입력하면 다음 컴포넌트로 포커스를 이동합니다. [SUBMIT] 버튼은 클릭 시 Edit 컴포넌트의 텍스트를 모두 삭제합니다.

첫 번째 Edit 컴포넌트는 autoskip, maxlength, inputtype 속성값을 지정해 숫자만 입력할 수 있고 5자리를 입력하면 다음 컴포넌트로 포커스를 이동합니다.

sample_form_05.xfdl

예제에서 사용한 핵심 기능

onkeydown: 해당 컴포넌트나 오브젝트에 포커스가 있는 상태에서 키 입력 시 발생하는 이벤트입니다. 해당 이벤트 함수에서 true 값을 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다. 이번 예제에서는 Button 컴포넌트는 엔터키를 입력했을 때 Form 오브젝트에 지정된 이벤트를 실행하지 않도록 하기 위해 Button 컴포넌트의 onkeydown 이벤트 함수 내에서 true 값을 반환합니다.

getFocus: Form 오브젝트 내에서 현재 포커스를 가지고 있는 컴포넌트를 반환합니다. 예제에서는 KeyEventInfo 오브젝트의 fromreferenceobject 속성값을 참조해도 같은 컴포넌트를 반환합니다.

getNextComponent: 탭키 입력 시 포커스가 이동할 컴포넌트를 반환합니다. taborder 속성값에 따라 반환하는 컴포넌트가 달라집니다. 단지 대상 컴포넌트를 반환하는 용도이며 실제 포커스가 변경되지는 않습니다.

setFocus: 해당 컴포넌트로 포커스를 이동합니다.

탭키를 사용하는 경우에는 getFocus, getNextComponent, setFocus 메소드에서 처리하는 일련의 과정을 자동으로 처리하기 때문에 별도로 이벤트 함수를 작성할 필요가 없습니다.

maxlength, autoskip: 입력하는 문자열의 최댓값을 지정합니다. 지정된 최댓값만큼 문자열이 입력되면 더는 입력되지 않습니다. autoskip 속성값을 true로 설정한 경우에는 입력한 문자열이 최댓값이 도달하면 자동으로 다음 포커스를 가지는 컴포넌트로 이동합니다.

inputtype: 첫 번째 Edit 컴포넌트는 inputtype 속성값을 'number'로 지정했습니다. 숫자만 입력할 수 있습니다.

예제 구현 방법

Form 화면 구성하기

Edit, Button 컴포넌트를 예제 화면과 같이 배치합니다. 첫 번째 Edit 컴포넌트의 autoskip, inputtype, maxlength 속성값을 true, number, 5로 지정합니다.

Form 이벤트 함수 작성하기

넥사크로 스튜디오에서 Form을 선택하고 속성창에서 onkeydown 속성 항목을 더블클릭합니다. 엔터키 입력 여부는 KeyEventInfo 오브젝트의 keycode 속성값으로 비교합니다. 엔터키를 입력하는 경우에는 13이라는 값으로 비교합니다.

this.Form_onkeydown = function(obj:nexacro.Form,e:nexacro.KeyEventInfo)
{
	if(e.keycode == 13)
	{
		var objFocus = this.getFocus();
		var objComp = obj.getNextComponent(objFocus, true);
		objComp.setFocus();
	}
};

Button 컴포넌트 이벤트 함수 작성하기

onkeydown 함수는 컴포넌트의 이벤트가 먼저 발생하고 상위 Form 오브젝트의 이벤트가 발생합니다. 이때 true를 반환하면 이벤트가 상위 Form 오브젝트로 전파되지 않습니다. Button 컴포넌트에 포커스가 있을때 엔터키를 입력하면 클릭 이벤트가 발생하는데 이를 처리하기 위해 상위 Form 오브젝트로 이벤트가 전파되지 않도록 합니다.

this.btnSubmit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.edit01.set_value('');
	this.edit02.set_value('');
};

this.btnSubmit_onkeydown = function(obj:nexacro.Button,e:nexacro.KeyEventInfo)
{
	return true;
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 오브젝트의 속성을 확인합니다.

타이머로 시간 표시하기

타이머 기능은 뭔가 변경되는 모습을 사용자에게 보여줄 때 유용하게 사용합니다. 이번 예제에서 보여줄 시계뿐 아니라 그래프를 애니메이션처럼 보여준다든지 데이터가 변경되는 모습을 시각적으로 잘 드러내기 위해 사용하기도 합니다.

자바스크립트에서도 setInterval 메소드를 사용하면 간단한 타이머를 구현할 수 있지만 한 번에 하나만 사용할 수 있습니다. 넥사크로플랫폼에서는 별도 id를 지정해 여러 개의 타이머를 구현할 수 있다는 것이 큰 차이입니다.

예제

검은색 Static 컴포넌트와 두 개의 Button 컴포넌트가 한 쌍입니다. [Time Start] 버튼 클릭 시 시간이 표시되며 [Time Stop] 버튼 클릭 시 표시된 시간의 업데이트가 중단됩니다. 빨간색 Static 컴포넌트의 쌍도 같은 형식인데 타이머 이벤트가 별도로 동작하는 것이 차이입니다.

sample_form_06.xfdl

예제에서 사용한 핵심 기능

setTimer: 키값과 타이머 이벤트를 처리할 시간 간격을 지정해 타이머를 실행합니다. 시간 간격은 밀리세컨드 단위로 지정할 수 있습니다. 예를 들어 1000을 지정하면 1초 간격으로 타이머가 실행됩니다.

ontimer: setTimer에서 지정한 시간 간격에 따라 이벤트 함수가 실행됩니다. 이벤트 함수 내에서 TimerEventInfo 오브젝트의 timerid 속성값으로 지정된 키값도 확인할 수 있습니다.

killTimer: 실행된 타이머를 중지합니다. setTimer 메소드 실행 시 설정한 키값을 지정해주어야 합니다.

예제 구현 방법

Form 화면 구성하기

Static, Button 컴포넌트를 예제 화면과 같이 배치합니다. Static 컴포넌트의 text 속성값은 "READY"로 지정하고 background 속성값과 color 속성값을 구분해 지정합니다.

사용자 속성 추가하기

[Time Start] 버튼 클릭 시 전달할 키값을 Button 컴포넌트의 User Properties로 추가합니다. Button 컴포넌트를 선택하고 속성창에서 오른쪽 마우스 버튼을 클릭하면 컨텍스트 메뉴가 나타납니다. 여기에서 [Add User Property] 항목을 선택합니다.

그리고 입력창에 Name, Value 항목을 입력합니다. 예제에서는 Name 항목은 "timekey" 그리고 Value 항목은 첫 번째 버튼은 1 두 번째 버튼은 2를 입력합니다. 입력된 값은 속성창에서 [User Properties] 항목으로 보이며 다른 속성값처럼 사용할 수 있습니다.

타이머 생성 함수 작성하기

[Time Start] 버튼 클릭 시 타이머를 생성하는 함수를 작성합니다. 키값은 클릭한 Button 컴포넌트의 사용자 속성으로 추가한 timekey 속성을 지정합니다. 이렇게 하면 버튼마다 사용자 속성에 지정된 값으로 다른 키값을 지정해줍니다.

this.btnStart_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.setTimer(obj.timekey, 1000);
};

두 개의 Button 컴포넌트 모두 btnStart_onclick를 onclick 이벤트로 지정합니다. 따로 이벤트 함수를 지정하고 키값을 지정할 수도 있지만 사용자 속성으로 키값을 처리하기 때문에 하나의 이벤트 함수를 만들고 두 개의 Button 컴포넌트에서 사용합니다.

타이머 이벤트 함수 작성하기

타이머에 지정된 시간 간격마다 이벤트가 발생합니다. 이때 처리할 함수를 작성합니다. Form 오브젝트의 ontimer 이벤트를 선택하고 이벤트 함수를 생성합니다.

this.Form_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid == 1)
	{
		this.staticTime.set_text(this.Clock());
	} else if(e.timerid == 2) {
		this.staticTime01.set_text(this.Clock());
	}
};

timerid 속성값에 따라 Static 컴포넌트의 text 속성값을 지정하는데 이때 Clock이라는 함수를 사용합니다. Clock 함수는 locale 속성값에 따라 현재 시간을 반환하는 함수입니다. 화면에 나타나는 시간 형식은 locale 속성값에 따라 달라질 수 있습니다.

this.Clock = function()
{
	var objDate = new Date();
	return objDate.toLocaleTimeString();
}

타이머 중지 함수 작성하기

[Time Stop] 버튼 클릭 시 타이머를 중지하는 함수를 작성합니다. 타이머를 중지했다가 다시 실행하는 것은 아니므로 타이머 자체를 삭제한다는 표현이 더 정확합니다.

this.btnEnd_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.killTimer(obj.timekey);
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 각 버튼을 클릭해 타이머가 정상적으로 실행되고 Static 컴포넌트에 시간이 표시되는지 확인해봅니다.

화면 크기에 따라 Grid 포맷 바꾸기

화면 크기에 따라 레이아웃 바꾸기와 비슷한 예제입니다. 하지만 이번에는 컴포넌트의 배치를 바꾸는 것이 아니라 Grid 포맷 속성을 바꾸어서 필요한 컬럼만 보이도록 합니다.

예제

버튼 클릭 시 open 메소드를 사용해 같은 Form을 새 창으로 띄웁니다. 띄운 창의 모서리 부분을 마우스로 잡고 움직여 화면 크기를 줄이면 Grid 컴포넌트에 보여지는 컬럼이 바뀌는 것을 확인할 수 있습니다.

sample_form_07.xfdl

예제에서 사용한 핵심 기능

onlayoutchanged: 화면 크기 등이 변경되면서 레이아웃이 변경됐을 때 발생하는 이벤트입니다. 레이아웃이 바뀌는 시점에 Grid 컴포넌트의 속성을 바꾸어줍니다. 특정 컴포넌트의 visible 속성값을 수정해주면 화면에 보여지는 시점도 조정할 수 있습니다.

예제 구현 방법

화면 구성하기

Button 컴포넌트와 Grid 컴포넌트를 예제 화면과 같이 배치합니다.

레이아웃 추가하기

레이아웃 정보 입력하기

[Add Layout] 항목을 클릭하면 레이아웃 정보를 입력할 수 있는 [New Layout] 창이 나타납니다. 예제에서는 width, height 값만 입력합니다.

항목을 입력하면 레이아웃이 추가되고 [Design] 모드 화면 상단에 추가된 레이아웃 탭이 생성됩니다.

새로운 레이아웃의 컨텐츠 배치 설정하기

추가된 레이아웃을 선택하고 Grid 컴포넌트의 크기만 적절하게 조정합니다.

Grid 포맷 복사해서 추가하기

Grid 컴포넌트를 더블클릭해 Grid Content Editor를 실행합니다. 아예 새로운 포맷을 만드는 것이 아니라 기존 포맷을 살짝 변경할 것이라서 에디터 상단에서 [+] 버튼을 클릭하지 않고 default 포맷 항목 위에서 오른쪽 마우스 버튼을 클릭하면 표시되는 컨텍스트 메뉴에서 [Copy & Add Format] 항목을 선택합니다.

Grid 포맷 변경하기

추가된 포맷에서 홀수 컬럼만 삭제합니다. Column1, Column3, Column5를 선택하고 삭제합니다. 그러면 3개의 컬럼만 남습니다.

Button 컴포넌트 이벤트 함수 작성하기

this.btnOpen_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	nexacro.open("TEST", "Sample::sample_form_07.xfdl", this.getOwnerFrame());
};

예제에서는 Form 이름을 직접 지정해주었지만 ChildFrame에 바로 연결된 Form이라면 this.parent.formurl 속성값으로 지정할 수 있습니다.

onlayoutchanged 이벤트 함수 작성하기

레이아웃이 변경됐을 때 Grid 컴포넌트의 formatid 속성값을 변경합니다.

this.Form_onlayoutchanged = function(obj:nexacro.Form,e:nexacro.LayoutChangeEventInfo)
{
	if(e.newlayout == 'default') {
		this.Grid00.set_formatid("default");
	} else if(e.newlayout == 'Layout0') {
		this.Grid00.set_formatid("default_00");
	}
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 [OPEN] 버튼을 클릭해 새 창을 띄웁니다. 새 창의 크기를 변경하면서 Grid 컴포넌트에 표시되는 컬럼이 변경되는지 확인합니다.

visible 속성 조정하기

처음 화면을 실행할 때 사용하지 않는 Grid 컴포넌트가 보여지는 것이 조금 불편합니다. 새 창에서도 [OPEN] 버튼이 없었으면 좋겠습니다. Form 오브젝트의 onload 이벤트 함수 내에서 필요한 컴포넌트의 visible 속성을 조정합니다.

this.sample_form_07_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	if(this.parent.name == "TEST") {
		this.Grid00.set_visible(true);
		this.btnOpen.set_visible(false);
	} else {
		this.Grid00.set_visible(false);
		this.btnOpen.set_visible(true);
	}
};

앞 단계에서 open 메소드 실행 시 첫번째 값으로 "TEST"라는 이름을 주었습니다. 새창을 띄울때 그 부모가 되는 ChildFrame 오브젝트의 이름을 "TEST"로 한다는 의미입니다. onload 이벤트 함수 내에서는 그 이름을 가지고 현재 Form 오브젝트가 어떤 상황인지 판단합니다.

스탭 기능을 활용해 슬라이드쇼 만들기

stepcount 속성을 이용해 스탭을 나누는 것은 사용자가 직접 화면을 전환하기 위한 용도로 주로 사용하지만 타이머를 설정하면 자동으로 화면이 바뀌면서 슬라이드쇼 효과를 만들 수 있습니다.

예제

첫 화면이 로딩되고 2초마다 화면이 전환됩니다.

sample_form_08.xfdl

예제에서 사용한 핵심 기능

stepselector: StepControl 오브젝트에 접근하기 위해 사용하는 속성입니다. 해당 속성을 사용하면 StepControl 오브젝트 하위의 속성이나 메소드를 사용할 수 있습니다.

stepIt: stepindex 속성값을 1씩 증가하거나 감소하면서 다음 화면으로 이동시키는 메소드입니다. bRotate 파라미터는 기본값이 false이고 반복해서 슬라이드를 표시하려면 true로 설정합니다.

예제 구현 방법

Form 화면 구성하기

컴포넌트 배치하기

Static 컴포넌트를 배치합니다. 같은 크기의 컴포넌트를 배치하고 text 속성값만 다르게 지정합니다. 속성창에서 text 속성값을 선택하고 오른쪽에 있는 버튼을 클릭하면 넓게 입력할 수 있는 창이 펼쳐집니다. Ctrl+ENTER 키를 입력하면 줄을 바꾸어 입력할 수 있습니다.

입력한 컴포넌트의 모습은 아래 그림과 같습니다. Form 오브젝트의 배경색을 검정색으로 Static 컴포넌트의 color 속성값은 흰색으로 지정했습니다.

타이머 이벤트 함수 작성하기

Form 오브젝트의 onload 함수에서 setTimer 메소드를 실행합니다.

this.sample_form_08_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.setTimer(1, 2000);
};

2초마다 ontimer 이벤트가 발생하며 stepindex 속성값을 변경합니다. stepindex 속성값이 변경되면 다음 스탭 화면으로 이동하게 됩니다.

this.sample_form_08_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid == 1){
		this.stepselector.stepIt(true, true);
	}
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 슬라이드가 2초마다 바뀌는지 확인합니다.

컴포넌트 목록 표시하기

컴포넌트의 목록을 표시하는 기능입니다. 해당 기능 자체로는 사용할 일이 많지 않겠지만, Form 내의 모든 컴포넌트의 특정 속성값을 변경해야 하는 경우에는 전체 목록을 가져와서 반복문을 사용해 처리하게 됩니다. 예제의 코드를 활용하면 원하는 기능을 구현할 수 있습니다.

예제

[check list] 버튼을 클릭하면 화면에 표시되는 컴포넌트 목록을 Grid에 표시합니다. [check all list]는 화면에 보이지 않는 컴포넌트(Dataset 오브젝트 같은)나 바인딩 아이템을 포함한 목록을 표시합니다.

sample_form_09.xfdl

예제에서 사용한 핵심 기능

components: Form에 포함된 하위 컴포넌트 목록을 가지고 있는 속성입니다. 인덱스 또는 id로 원하는 컴포넌트에 접근할 수 있습니다.

all: components 속성으로 접근하지 못하는 Invisible Object, Bind 정보를 포함한 목록을 가지고 있는 속성입니다.

예제 구현 방법

Form 화면 구성하기

Form을 생성하고 각 컴포넌트를 배치합니다. 예제에서는 Div 컴포넌트와 Tab 컴포넌트 안에 컴포넌트를 배치하는 예제를 사용하고 있습니다. 상단 기능 버튼과 하단 목록을 표시하는 Grid 컴포넌트 외에는 자유롭게 배치하면서 테스트할 수 있습니다.

Dataset 바인딩하기

Dataset 오브젝트의 담겨지는 데이터는 컴포넌트 목록 정보를 직접 대입합니다. Dataset 오브젝트는 Column0, Column1, Column2 3개의 컬럼을 가지고 Row 정보는 입력하지 않습니다. Grid 컴포넌트와 Div00 안에 있는 TextArea 컴포넌트에 바인딩합니다. Dataset 오브젝트 아이콘을 드래그해서 TextArea 컴포넌트 위에 가져다놓으면 바인딩할 속성과 컬럼을 지정할 수 있습니다.

No 컬럼 추가하기

순번을 표시하는 No 컬럼을 Grid 컴포넌트에 추가합니다. Grid 컴포넌트를 더블클릭해 Grid Contents Editor를 실행하고 가장 앞쪽에 컬럼을 추가한 후 head text는 "No", 셀 expr 속성값은 "expr:rowidx+1"로 지정합니다. rowidx는 0부터 시작하는 인덱스값을 반환하는데 1을 더해주면 1부터 순번을 표시할 수 있습니다.

onclick 이벤트 함수 작성하기

Button 컴포넌트 클릭 시 컴포넌트 또는 오브젝트 목록을 화면에 표시하는 기능을 처리합니다. 실제 데이터 처리는 get_com_info 함수에서 처리합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.clearData();
	this.get_com_info(this);
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.clearData();
    this.get_com_info(this, true);
};

get_com_info 함수는 3개의 값을 받아서 처리합니다. 첫번째 값은 오브젝트입니다. Div 컴포넌트에 안에 있는 컴포넌트가 있는 경우 Form에서는 Div 컴포넌트가 있는 것만 확인하고 Div 컴포넌트 안에 있는 컴포넌트의 목록은 확인할 수 없습니다. 때문에 Div, Tab 컴포넌트 같은 경우에는 안쪽에 컴포넌트를 가지고 있는지 확인하는 과정을 거칩니다. 조건에 따라 다시 get_com_info 함수를 호출하는 코드입니다. 이런 방식을 재귀함수(Recursive)라고 합니다.

this.get_com_info = function(obj, bAll, bRecursive)
{
	var i;
	var components = bAll?obj.all:obj.components;
	this.Dataset00.set_enableevent(false);
	
	for( i = 0 ; i < components.length ; i++ )
	{
	    var nRow = this.Dataset00.addRow();
	    this.Dataset00.setColumn(nRow,0,components[i].id);	
	    this.Dataset00.setColumn(nRow,1,bRecursive?obj.parent.valueOf():this.valueOf());
	    this.Dataset00.setColumn(nRow,2,this.get_url(components[i],""));
	    var strType = components[i].valueOf(); 
	    
		if(strType == "[object Div]" || strType == "[object Tab]"){			
			if (strType == "[object Tab]") {
				for(var j = 0 ; j < components[i].tabpages.length ; j++ )
				{
					var nRow = this.Dataset00.addRow();
					this.Dataset00.setColumn(nRow,0,components[i].tabpages[j].id);	
					this.Dataset00.setColumn(nRow,1,components[i].valueOf());
					this.Dataset00.setColumn(nRow,2,this.get_url(components[i].tabpages[j],""));				
					
					this.get_com_info(components[i].tabpages[j].form, bAll, true);				
				}				
			} else {
				this.get_com_info(components[i].form, bAll, true);
			}
		}		 
	}
	this.Dataset00.set_enableevent(true);
};

get_url 함수는 목록에 표시되는 아이템의 경로를 표시합니다.

this.get_url = function(obj, str)
{
	if(obj == "[object Form]")
	{
		var s = "form";
		if(obj.name == "sample_form_09")
		{
			return str;
		}
	}	else	{
		var s = obj.name;
	}
	if(str != "")
	{
		s += "."+str;
	}
	return this.get_url(obj.parent, s);
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 Button 컴포넌트를 클릭해 실제 목록과 맞게 출력되는지 확인해봅니다.

서버와 transaction 처리하기

transaction 메소드는 주로 Form 오브젝트의 메소드를 사용합니다. 하지만 AppVariables와 연계해 사용해야 할 때에는 application 오브젝트의 transaction 메소드를 사용합니다.

예제

버튼을 클릭하면 transaction 메소드를 실행해 서버에 있는 데이터와 통신을 시작합니다. 가져온 데이터는 지정된 Dataset에 입력합니다. 선택한 동기화 여부 조건에 따라 통신이 처리되는 과정이 달라집니다.

선택한 동기화 여부 조건에 따라 "Before Transaction", "Transaction rowcount:", "After Transaction" 3개의 경고 대화상자가 보이는 순서가 달라집니다.

sample_form_10.xfdl

예제에서 사용한 핵심 기능

transaction: transaction 메소드는 데이터를 주고받는 용도로 사용하지만, 이번 예제에서는 데이터를 받는 용도로만 사용했습니다. XML 파일을 읽어서 지정된 Dataset에서 해당 값을 받아 처리합니다. bAsync 옵션 설정에 따라 transaction 처리를 동기식(transaction 처리를 끝내고 다음 처리를 할지) 또는 비동기식(transaction 처리 여부와 상관없이 다음 처리 진행)으로 진행할지 결정합니다. default 값은 비동기식(true)입니다.

예제 구현 방법

메인 화면 구성하기

Button 컴포넌트와 Radio, TextArea 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 innerdataset 속성값은 아래와 같습니다.

Boolean 값 처리 시 false 값을 가지는 조건은 0, -0, null, false, NaN, undefined, 빈 문자열입니다. innerdataset은 각 컬럼값을 String 형식으로 처리하기 때문에 false 값을 가지려면 빈 문자열로 설정하는 방법을 취합니다. Dataset을 따로 만들면 컬럼 형식을 지정할 수 있어서 원하는 형식으로 지정하고 적절한 값을 대입할 수 있습니다.

Dataset 오브젝트를 추가하고 컬럼 id가 id, name인 2개 컬럼을 추가합니다.

Button 컴포넌트 이벤트 함수 작성하기

버튼 클릭 시 처리할 이벤트 함수를 작성합니다. transaction 메소드 실행 전과 후 그리고 콜백함수 처리 시에 TextArea 컴포넌트에 메시지를 추가하는 함수를 실행하는데 bAsync 옵션 설정에 따라 메시지를 처리하는 순서가 달라집니다.

var bAsync = true;
this.btnTransaction_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value("");
	this.fn_addlog("Before Transaction");
	this.transaction("TEST","FileSample::sample_form_10_file.xml", null, "Dataset00=TEST", null, "fn_test", bAsync);
	this.fn_addlog("After Transaction");
};

this.fn_addlog = function(strMessage)
{
	this.TextArea00.set_value(this.TextArea00.text + strMessage + '\n');
}

콜백함수 작성하기

transaction 메소드를 실행하면 지정된 URL에 접근해 데이터를 수신합니다. 데이터 수신이 정상적으로 처리되면 콜백함수로 지정된 함수를 실행합니다. 예제에서는 "fn_test"라는 콜백함수명을 지정했습니다.

넥사크로플랫폼에서 사용하는 콜백함수는 이름은 달라질 수 있지만 형식은 아래와 같습니다.

[function name] = function(strSvcID, nErrorCode, strErrorMag) {}

this.fn_test = function(strSvcID, nErrorCode, strErrorMag)
{
	this.fn_addlog("Transaction rowcount: "+this.Dataset00.rowcount);
}

Radio 컴포넌트 이벤트 작성하기

Radio 컴포넌트의 아이템 선택 시 bAsync 변수에 값을 대입합니다. 해당 변수는 transaction 메소드 호출 시 옵션값으로 지정됩니다.

this.radioTransaction_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	bAsync = obj.value;
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 bAsync 옵션 선택 후 버튼을 클릭해 경고 대화상자가 나타나는 순서를 확인합니다.

ASync를 선택한 경우에는 transaction 메소드를 실행하는 동안 다른 프로세스를 멈추지 않습니다. 그래서경고 대화상자가 보이는 순서는 다음과 같습니다.

[Before Transaction] -> [After Transaction] -> [Transaction rowcount: xxx]

Sync로 선택한 경우에는 transaction 메소드를 처리한 다음 다른 프로세스를 진행합니다. 그래서 경고 대화상자가 보이는 순서는 다음과 같습니다.

[Before Transaction] -> [Transaction rowcount: xxx] -> [After Transaction]

Bind 아이템 목록 확인하기

넥사크로 스튜디오 Invisible Object 영역에서 Dataset 오브젝트를 선택하면 Binding Components List 영역에 아이템을 표시합니다. 같은 내용을 스크립트에서 확인하는 방법을 살펴봅니다.

예제

[binds check] 버튼을 클릭하면 Form 오브젝트 내에서 Bind 아이템 목록을 TextArea 컴포넌트에 표시합니다. Grid 컴포넌트처럼 binddataset 속성에 직접 바인딩 설정을 하는 컴포넌트는 표시하지 않습니다.

sample_form_11.xfdl

예제에서 사용한 핵심 기능

binds: Form 오브젝트 내 바인딩 정보를 가지고 있는 속성입니다. 각 바인딩 정보는 BindItem 오브젝트에 담겨 있습니다.

예제 구현 방법

화면에 컴포넌트를 아래와 같이 배치합니다.

2개의 Dataset 오브젝트를 추가합니다.

Dataset00 오브젝트에는 두 개의 컬럼을 추가하고 첫 번째 컬럼 데이터는 a, b, c 두 번째 컬럼 데이터는 1, 2, 3 으로 설정합니다. Dataset01 오브젝트도 두 개의 컬럼을 추가하고 첫 번째 컬럼 데이터는 1, 2, 3 두 번째 컬럼 데이터는 a, b, c 로 설정합니다.

Project Explorer에서 Form 오브젝트를 선택하고 컨텍스트 메뉴에서 [Bind Dataset > Dataset00]을 선택합니다.

Bind Item 창에서 아래와 같이 값을 입력합니다. Bind Item 창에서는 여러 개의 Bind 아이템 목록을 관리하는데 편리하게 사용할 수 있습니다.

Dataset01 오브젝트를 선택하고 Grid 컴포넌트에 바인딩합니다.

[binds check] 버튼 컴포넌트를 선택하고 onclick 이벤트 함수를 아래와 같이 추가합니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(var i = 0; i < this.binds.length; i++)
	{
		this.TextArea00.set_value(this.TextArea00.value+this.binds[i].compid+", "+ this.binds[i].propid+", "+ this.binds[i].datasetid + ", " + this.binds[i].columnid+"\n");
	}
};

TextArea 컴포넌트를 선택하고 속성창에서 해당 값을 빈값으로 설정합니다. value 속성항목을 선택하고 컨텍스트 메뉴에서 [Set Empty Value]를 선택합니다.

Empty Value 설정을 하지 않으면 undefined로 값을 처리합니다.

QuickView(Ctrl + F6)로 실행한 후 [binds check] 버튼 컴포넌트를 클릭해 TextArea 컴포넌트에 Bind 아이템 목록이 표시되는지 확인합니다.

컴포넌트의 속성을 모두 수정하기

Form 내에 있는 컴포넌트의 속성을 같은 값으로 수정하는 예제입니다.

예제

[Check] 버튼을 클릭하면 Edit, Combo, Button 컴포넌트의 배경색이 수정됩니다.

sample_form_12.xfdl

예제에서 사용한 핵심 기능

instanceof: 해당하는 컴포넌트가 어떤 오브젝트인지 확인할 수 있습니다. Edit 컴포넌트의 경우 Edit 또는 nexacro.Edit 모두 true 값을 반환합니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

예제 구현 방법

화면에 컴포넌트를 아래와 같이 배치합니다.

[Check] 버튼의 onclick 이벤트 함수를 아래와 같이 작성합니다.

[Check] 버튼은 속성 변경 시 제외합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(var i = 0; i < this.components.length; i++)
	{
		if(this.components[i] instanceof nexacro.Edit)
		{
			this.components[i].set_background("lavenderblush");
		}
		else if(this.components[i] instanceof nexacro.Combo)
		{
			this.components[i].set_background("beige");
		}
		else if(this.components[i] instanceof nexacro.Button)
		{
			if(this.components[i].id != obj.id)
				this.components[i].set_background("lightgreen");
		}
	}
};

QuickView(Ctrl + F6)로 실행한 후 [Check] 버튼 컴포넌트를 클릭해 나머지 컴포넌트의 배경색이 바뀌는지 확인합니다.