이번 장에서는 컴포지트 컴포넌트에 속성, 메소드, 이벤트를 추가하는 방법을 살펴봅니다.

속성 추가하기

문자열 속성 추가하기

Calendar 컴포넌트에서 선택한 값(value)에 바로 접근할 수 있는 속성을 추가합니다. 속성 이름은 fromValue, toValue 입니다.

Project Explorer에서 오브젝트를 선택하고 컨텍스트 메뉴에서 [Add > Property] 항목을 선택할 수도 있습니다.

Property Information 항목에서는 속성 관련 정보를 설정할 수 있습니다. 예제에서는 속성 관련 정보는 기본값을 유지합니다.

"Make setter function in a module scripts" 항목에서는 속성의 Setter Function 스켈레톤 코드 자동 생성 여부를 설정합니다. 메타인포 항목 unused, readonly, initonly 중에서 하나라도 true로 설정한 경우, 해당 체크박스는 비활성화 됩니다.

사용자가 fromValue 속성값을 설정하는 경우 해당 속성값을 Calendar 컴포넌트의 value 값으로 전달해줍니다.

nexacro.TwoMonthCalendar.prototype.fromValue = undefined;
nexacro.TwoMonthCalendar.prototype.set_fromValue = function (v)
{
	if(this.form.calFrom)
	{
		this.form.calFrom.set_value(v);
	}
	this.fromValue = v;
};

Calendar 컴포넌트에서 선택한 값이 바뀌었을 때 변경된 값을 fromValue 속성값에 저장해줍니다.

this.calFrom_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	this.parent.set_fromValue(e.postvalue);
};

Enum 속성 추가하기

Enum 속성은 열거형(enumeration) 형태로 값을 지정할 수 있는 속성을 의미합니다. 예를 들어 Calendar 컴포넌트의 type 속성값은 "normal | monthonly | spin" 3가지 값 중에서 선택할 수 있는데, 미리 지정할 수 있는 속성값을 EnumInfo 속성으로 추가해서 사용하는 것입니다.

Calendar 컴포넌트의 스타일을 변경할 수 있는 속성을 추가합니다. 속성 이름은 colorTheme 입니다. 속성을 추가하기 전에 EnumInfo부터 추가해주어야 합니다.

선택한 값에 따라 Calendar 컴포넌트에서 사용할 cssclass 속성값을 변경해줍니다.

nexacro.TwoMonthCalendar.prototype.colorTheme = "";
nexacro.TwoMonthCalendar.prototype.set_colorTheme = function (v)
{
	var _cssclass = "";
	if(v=="purple")
	{
		_cssclass = "simple_module, simple_module_purple";
	}
	else
	{
		_cssclass = "simple_module";
	}
	
	if(this.form.calFrom && this.form.calTo)
	{
		this.form.calFrom.set_cssclass(_cssclass);
		this.form.calTo.set_cssclass(_cssclass);
	}
	this.colorTheme = v;
};

컴포넌트 실행 시 속성값 처리하기

아래와 같이 인터페이스 함수를 추가해서 실행 시 속성값으로 설정한 값이 반영되도록 합니다.

nexacro.TwoMonthCalendar.prototype.on_create_contents = function ()
{
	nexacro._CompositeComponent.prototype.on_create_contents.call(this);
	this.set_fromValue(this.fromValue);
	this.set_toValue(this.toValue);
	this.set_colorTheme(this.colorTheme);
};

메소드 추가하기

파라미터 없는 메소드(getDayCount) 추가하기

Calendar 컴포넌트에서 선택한 값(value)의 차이를 계산해 반환하는 메소드를 추가합니다. 메소드 이름은 getDayCount입니다.

Project Explorer에서 오브젝트를 선택하고 컨텍스트 메뉴에서 [Add > Method] 항목을 선택할 수도 있습니다.

Method Information 항목에서는 메소드 관련 정보를 설정할 수 있습니다. 예제에서는 두 개의 Calendar 컴포넌트에서 선택한 날짜 사이의 차이를 계산하고 반환해주는 메소드를 작성할 겁니다. Return Information 항목에서 Type 값을 "Integer"로 설정합니다.

"Make setter function in a module scripts" 항목에서는 메소드의 Function 스켈레톤 코드 자동 생성 여부를 설정합니다. 메타인포 unused 항목이 true로 설정한 경우, 해당 체크박스는 비활성화 됩니다.

[Next] 버튼을 클릭하면 메소드에서 사용하는 파라미터를 지정할 수 있습니다. 예제에서는 파라미터를 사용하지 않아 해당 단계는 건너 뛰었습니다.

두 개의 Calendar 컴포넌트의 값을 비교하고 그 차이값을 반환합니다.

nexacro.TwoMonthCalendar.prototype.getDayCount = function ()
{
	var fromDate = new Date();
	var toDate = new Date();
	var calDate;
	var day = 1000*60*60*24;
	var returnvalue = -1;
    
	if(this.form.calFrom.value && this.form.calTo.value)
	{
		fromDate.setFullYear(this.form.calFrom.getYear());
		fromDate.setMonth(this.form.calFrom.getMonth()-1);
		fromDate.setDate(this.form.calFrom.getDay());
		
		toDate.setFullYear(this.form.calTo.getYear());
		toDate.setMonth(this.form.calTo.getMonth()-1);
		toDate.setDate(this.form.calTo.getDay());
	
		calDate = fromDate.getTime() - toDate.getTime();
		trace("calDate: "+calDate);
		
		returnvalue = Math.abs(calDate/day);
	}
	trace("returnvalue: "+returnvalue);
	return returnvalue;
};

콘솔창에서 메소드 이름을 입력할 때 IntelliSense 기능이 동작하는 것도 확인할 수 있습니다.

파라미터 있는 메소드(addDay) 추가하기

첫 번째 Calendar 컴포넌트에서 선택한 값(value)에 파라미터로 넘어온 날짜만큼을 더해 두 번째 Calendar 컴포넌트 값으로 설정해주는 메소드를 추가합니다. 메소드 이름은 addDay입니다.

Project Explorer에서 오브젝트를 선택하고 컨텍스트 메뉴에서 [Add > Method] 항목을 선택할 수도 있습니다.

Method Information 항목에서는 메소드 관련 정보를 설정할 수 있습니다. 예제에서는 첫 번째 Calendar 날짜에 파라미터로 전달된 숫자를 더해 두 번째 Calendar 컴포넌트에 설정해주고 결과값을 반환해줍니다. Return Information 항목에서 Type 값을 "Boolean"으로 설정합니다.

Arguments 항목에서 [+] 버튼을 클릭해서 파라미터를 추가하고 Type 속성을 "Integer"로 설정합니다.

파라미터 추가 시에는 arg00 형식으로 이름이 붙는데, 항목을 선택하고 컨텍스트 메뉴에서 [Rename] 항목을 선택하면 이름을 변경할 수 있습니다. 예제에서는 nDay로 이름을 변경했습니다.

파라미터가 여러 개인 경우에는 위, 아래 화살표를 이용해서 순서를 변경할 수 있습니다.

첫 번째 Calendar 컴포넌트의 값에 파라미터로 넘어온 값을 더한 후 두 번째 Calendar 컴포넌트 값으로 지정해줍니다.

nexacro.TwoMonthCalendar.prototype.addDay = function (nDay)
{
	var fromDate = new Date();
	var toDate = new Date();
		
	if(this.form.calFrom.value)
	{
		fromDate.setFullYear(this.form.calFrom.getYear());
		fromDate.setMonth(this.form.calFrom.getMonth()-1);
		fromDate.setDate(this.form.calFrom.getDay());
		toDate = new Date(fromDate.addDate(nDay));
			
		var year = toDate.getFullYear().toString().padLeft(4, "0");
		var month = (toDate.getMonth()+1).toString().padLeft(2, "0");
		var day = toDate.getDate().toString().padLeft(2, "0");			
			
		this.form.calTo.set_value(year+month+day);
		return true;
	}
	else
	{
		trace("calFrom value is null");
		return false;
	}
};

이벤트 추가하기

Calendar 컴포넌트에서 값이 변경된 경우(onchanged) 이를 확인할 수 있는 이벤트를 추가합니다. 이벤트 이름은 onchanged입니다.

Project Explorer에서 오브젝트를 선택하고 컨텍스트 메뉴에서 [Add > Event] 항목을 선택할 수도 있습니다.

이벤트에 따라 반환할 값이 있는 경우에는 Return Information의 Type을 설정해줍니다. 예제에서는 반환할 값이 없기 때문에 해당 항목을 지정하지 않습니다.

예제에서는 nexacro.ChangeEventInfo로 항목을 변경했습니다.

먼저 컴포지트 컴포넌트를 초기화하는 함수에 this.addEvent 라는 메소드를 호출합니다. 컴포넌트 내부에서 이벤트 목록을 관리하는 변수가 있는데, addEvent 메소드가 실행되면서 해당 목록에 이벤트를 추가합니다.

그리고 코드 하단에 아래와 같은 이벤트 함수를 추가합니다.

nexacro.TwoMonthCalendar.prototype.on_fire_onchanged = function (obj, pretext, prevalue, posttext, postvalue)
{
	if (this.onchanged && this.onchanged._has_handlers)
	{
		var evt = new nexacro.ChangeEventInfo(obj, "onchanged", pretext, prevalue, posttext, postvalue);
		return this.onchanged.fireEvent(this, evt);
	}
	return false;
};

this.calFrom_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	this.parent.set_fromValue(e.postvalue);
	this.parent.on_fire_onchanged(obj, e.pretext, e.prevalue, e.posttext, e.postvalue);
};

this.calTo_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	this.parent.set_toValue(e.postvalue);
	this.parent.on_fire_onchanged(obj, e.pretext, e.prevalue, e.posttext, e.postvalue);
};

추가한 이벤트는 에뮬레이터에서 테스트할 수 없고 모듈 배포 후 앱에서 확인할 수 있습니다.

모듈 설치 후 추가한 속성, 메소드, 이벤트 확인하기

넥사크로 스튜디오에서 모듈 설치 후 추가한 속성, 메소드, 이벤트를 어떻게 사용할 수 있는지 살펴봅니다.

속성창에 추가한 속성, 메소드 표시

속성창에 추가한 속성과 이벤트가 표시됩니다. 값을 지정하면 디자인 탭에서 값이 변경되는 것을 확인할 수 있습니다.

colorTheme 속성 항목 선택 시 드롭다운 목록으로 지정한 속성값이 보이는지 확인할 수 있습니다. 값을 선택하면 넥사크로 스튜디오 디자인 창에서 변경된 스타일이 적용됩니다.

IntelliSense 동작 시 추가한 속성, 메소드, 이벤트 표시

스크립트 탭에서 IntelliSense 동작 시 추가한 속성이나 메소드, 이벤트가 표시되는 것도 확인할 수 있습니다.

메소드 동작 확인하기

메소드 호출 시 정상적으로 값을 반환하는 것도 확인할 수 있습니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	trace(this.TwoMonthCalendar00.getDayCount());
};

메소드 실행 결과는 브라우저 개발자 도구 콘솔 화면에서 확인할 수 있습니다.

이벤트 동작 확인하기

this.TwoMonthCalendar00_onchanged = function(obj:nexacro.TwoMonthCalendar, e:nexacro.ChangeEventInfo)
{
	trace("e.fromobject.id: "+e.fromobject.id);
	trace("e.prevalue: "+e.prevalue);	
	trace("e.postvalue: "+e.postvalue);
};

메소드 실행 결과는 브라우저 개발자 도구 콘솔 화면에서 확인할 수 있습니다.

메타인포 편집 (속성, 메소드, 이벤트)

속성, 메소드, 이벤트를 추가하는 위자드에서 세부 항목을 설정할 수 있는데 이를 메타인포라고 합니다. Project Explorer에서 MetaInfo 파일 아래에 오브젝트의 Property, Method, Event 항목을 선택하고 더블 클릭하면 세부 항목을 편집할 수 있습니다.

옵션에 따라 표시되는 목록을 선택해 표시할 수 있습니다.

속성

메소드

이벤트