넥사크로플랫폼에서 애플리케이션 개발 시 사용하는 스크립트는 HTML5 명세서에서 사용하는 스크립트를 기준으로 개발됐습니다. 따라서 기존 웹 개발자가 별도로 스크립트 언어를 익히지 않아도 넥사크로플랫폼 스크립트를 작성할 수 있습니다.

하지만 HTML5은 계속 개발되고 있으며 아직 제공되지 않지만, 기업 내에서 필요한 기능을 지원하기 위해 넥사크로플랫폼 자체적으로 지원하는 스크립트도 같이 제공됩니다. 그래서 최적의 성능을 내는 애플리케이션을 만들기 위해서는 기본적인 스크립트 언어와 함께 넥사크로플랫폼 스크립트 언어에 대한 기본적인 지식이 필요합니다.

이번 장에서는 기존 버전에서 변경된 스크립트 언어를 설명합니다.

유효범위(Scope)

유효범위는 접근 가능한 변수의 범위와 관련된 내용을 설명합니다. 유효범위 또는 영역이라고 표기하며 영문 표기 그대로 사용할 때도 많습니다. 업무에 사용하는 애플리케이션은 여러 개의 화면을 동시에 조작하고 하나의 변수를 여러 화면에서 참조하는 경우가 많은데 이러면 어떤 식으로 원하는 자원에 접근할 수 있는지 유효범위를 통해 알 수 있습니다.

this

ADL 또는 폼에서 사용되는 항목에 대해 유효범위를 지정할 때는 항상 this를 사용합니다. 변수뿐 아니라 속성, 폼 간의 참조 시에도 적절한 유효범위를 지정해주어야 합니다.

폼 내에서 변수는 아래와 같이 선언합니다.

this.formvalue = 4;

함수를 선언할 때도 유효범위를 지정해주어야 합니다. 또한, 함수 내에서 폼 내에 선언된 변수를 참조할 때도 유효범위를 지정해주어야 합니다.

this.formvalue = 4;

this.test = function()
{
     this.formvalue = 3;
     this.parent.value = 3;
     this.parent.parent.value = 3;
}

trace나 alert과 같은 메소드는 지정된 유효범위에 따라 다른 메소드가 실행됩니다. alert()만 사용하는 것과 this.alret()을 사용하는 것은 서로 별개의 메소드를 실행하는 것입니다.

this.Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
     alert(e.button);
     this.alert(e.button);
}

단 함수 내에서 선언된 변수는 유효범위를 따로 지정하지 않고 사용할 수 있으며 매개변수로 전달된 값 역시 유효범위를 지정하지 않고 사용할 수 있습니다.

this.Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
     obj.set_text("button");
     var a = 3;
     trace(a); // 3
}

함수 선언 시에도 유효범위를 지정해 해당하는 애플리케이션 또는 폼의 멤버로 포함되도록 합니다.

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

eval 함수로 폼을 접근하는 경우에도 this를 사용해야 합니다.

eval("this.formfunc()");

Global

넥사크로플랫폼 스크립트 내에서 유효범위를 지정하지 않은 변수나 함수는 모두 최상위 Global 멤버로 처리됩니다.

아래와 같이 유효범위를 지정하지 않고 사용된 스크립트는 모두 Global로 처리됩니다. 함수 밖에서 var 키워드를 사용하는 경우에도 Global로 처리됩니다.

globalvar = 2; 
var globalvar2 = 3;

함수 내에 사용된 변수라도 유효범위를 지정하지 않으면 모두 Global로 처리됩니다. 단 var 키워드를 사용해 정의한 변수는 함수 밖에서 사용할 수 없습니다.

this.test = function()
{
	trace(globalvar); //2
	trace(globalvar2); //3
	
	value = 4;
	var localvar = 5;
}


this.test = function()
{
	trace(value); // 4
	trace(localvar); // ReferenceError: localvar is not defined
}

$r_title(includecode.xjs)
bbb = "bbb";
var ccc = "ccc";

$r_title(includecode.xjs.js)
(function()
{
	return function(path)
	{
		var obj;

		// User Script
		this.registerScript(path, function() {
			bbb = "bbb";
			var ccc = "ccc";
		});

		this.loadIncludeScript(path);
		obj = null;
	};
}
)();

함수를 선언하거나 호출할 때도 유효범위를 지정해주어야 합니다. 아래 스크립트에서 test()와 this.test()는 서로 다른 함수를 호출합니다. 유효범위를 지정하지 않고 test()를 호출하게 되면 Global에 선언된 test 함수를 호출합니다.

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

아래와 같이 유효범위 없이 지정된 함수는 Global로 처리됩니다.

Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
...
}

function Button00_onclick(obj:Button, e:nexacro.ClickEventInfo)
{
...
}

Expr

expr 스크립트는 넥사크로플랫폼 내부적으로 바인딩 된 Dataset을 기준으로 처리되기 때문에 별도의 유효범위를 지정하지 않아도 사용할 수 있습니다. 단 바인딩 되지 않은 Dataset에 직접 접근하려면 유효범위를 지정해주어야 합니다.

아래와 같이 바인딩 된 Dataset에 대해 expr를 사용하는 경우에는 this를 붙이지 않습니다.

<Cell text="expr:Column00"/>
<Cell text="expr:Column00.min"/>
<Cell text="expr:currow"/>
<Cell text="expr:rowposition"/>
<Cell text="expr:getSumNF('col0')"/>

Dataset.set_filterstr("Column00=='test'");
Dataset.filter("Column00=='test'");

바인딩 된 Grid, Dataset, Cell을 지정하는 경우에는 아래와 같은 지시자를 사용합니다.

Grid: comp
dataset: dataset
Cell: this

<Cell text="expr:this.col"/> <!-- cell -->
<Cell text="expr:dataset.rowcount"/> <!-- binded dataset -->
<Cell text="expr:comp.currentcell"/> <!-- grid -->
<Cell text="expr:dataset.parent.func1()"/> <!-- form -->
<Cell text="expr:comp.parent.func1()"/> <!-- form -->

컴포넌트 속성으로 Expr과 Text가 같이 있는 경우에 화면에 보이는 텍스트를 반환하는 displaytext 속성을 사용할 수 있습니다.

this.Button00.set_text("text");
this.Button00.set_expr("1+1");

trace(this.Button00.text); // "text"
trace(this.Button00.expr); // "1+1"
trace(this.Button00.displaytext); // "2"

lookup

lookup 메소드는 유효범위를 지정해 접근하기 어려운 경우 사용할 수 있도록 설계된 추가 메소드입니다. 원하는 오브젝트나 함수를 id 또는 함수명을 가지고 찾을 수 있습니다.

lookup 메소드는 아래와 같은 형식으로 사용할 수 있습니다.

Form.lookup( strid );
Frame.lookup( strid );
Application.lookup( strid );
EventSyncObject.addEventHandlerLookup( eventid, funcid, target );

실제 코드에서는 아래와 같이 사용됩니다.

// this에서 상위로 검색해서 objectid에 해당하는 오브젝트를 반환
var obj = this.lookup("objectid");

// this에서 상위로 검색해서 fn_onclick에 해당하는 함수를 반환
this.lookup("fn_onclick")();

// this에서 상위로 검색해서 fn_onclick에 해당하는 함수를 이벤트 핸들러에서 처리
btn00.addEventHandlerLookup( "onclick", "fn_onclick", this );

이벤트 핸들러

이벤트 처리를 위한 이벤트 핸들러는 넥사크로 스튜디오 속성창에서 추가하거나 각 컴포넌트, 오브젝트에 제공하는 메소드를 사용해 스크립트에서 추가할 수 있습니다.

메소드

스크립트 내에서 이벤트 처리를 위해 이벤트 핸들러를 추가, 설정하거나 삭제할 수 있는 메소드를 제공합니다. 기존 버전에서는 addHandler, setHandler, removeHandler 3개의 메소드를 제공했지만, 해당 메소드는 더는 지원하지 않습니다

1. addEventHandler( eventid, funcobj, target )

2. addEventHandlerLookup( eventid, funcstr, target )

3. setEventHandler( eventid, funcobj, target )

4. setEventHandlerLookup( eventid, functstr, target )

5. removeEventHandler( eventid, funcobj, target )

6. removeEventHandlerLookup( eventid, funcstr, target )

이벤트를 처리할 함수의 유효범위에 따라 적절한 메소드를 선택해 사용합니다.

this.btn00.setEventHandler("onclick", this.fn_onclick, this);
this.dataset00.addEventHandlerLookup("onrowposchange", "fn_onchange", this);

타입

넥사크로 스튜디오에서 이벤트 핸들러 함수에 매개변수를 설정할 때 오브젝트의 타입을 지정할 수 있습니다. 타입은 자바스크립트 표준 문법은 아니며 넥사크로 스튜디오 내부에서 개발 편의성을 제공하기 위해 지원되는 형식입니다.

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

입력된 타입 값을 기준으로 넥사크로 스튜디오에서 코드 힌트 기능을 지원합니다.

해당 코드를 자바스크립트 코드로 변환할 때는 타입 값을 제거합니다.

this.Button00_onclick = function(obj,  e)
{
	trace(obj.text);
}

Setter

ECMAScript 5부터는 Setter/Getter를 사용해 변수의 접근 제한을 처리할 수 있습니다. 하지만 IE8 이하 웹브라우저에서 지원할 수 없는 명세서이기 때문에 넥사크로플랫폼에서는 별도의 set 메소드를 제공합니다.

set 메소드

예를 들어 Button 컴포넌트의 text 속성을 사용할 때는 아래와 같이 사용할 수 있습니다.

this.Button00.set_text("text");
trace(this.Button00.text);

this.Button00.myprop = "333";

this.Button00.mytext = "text";

스타일 속성에 접근하는 방식도 set 메소드를 사용해야 합니다. 추가된 set 메소드에는 하위 속성까지 포함하고 있습니다. 기존 속성은 값을 가져올 때만 사용할 수 있습니다.

this.Button00.style.set_color('aqua');
trace(this.Button00.style.color); // 'aqua'

단, CSS 코드는 기존과 동일합니다.

Button
{
     background : red;
}

동적인 속성

속성값을 가져오는 것은 기존과 같지만 예외적으로 동적으로 속성값이 변경되는 오브젝트는 별도의 GetMethod를 제공합니다. System 오브젝트의 curx, cury, screenwidth, screenheight 4개 속성은 추가된 메소드를 사용해야 합니다.

System.getCursorX();
System.getCursorY();
System.getScreenWidth();
System.getScreenHeight();

컴포넌트 타입에 따라 사용하지 않는 속성은 접근할 수 없습니다. 예를 들어 Calendar 컴포넌트의 타입이 spin이 아닌 경우에는 아래 속성에 접근할 수 없습니다.

this.Calendar.spindownbutton
this.Calendar.spinupbutton

기타 변경 및 참고 사항

nexacro 메소드

ECMAScript에서 지원하지 않는 메소드를 넥사크로플랫폼 자체적으로 추가해 사용하던 것을 표준에 따라 변경하면서 더는 지원하지 않습니다. 대신 해당 메소드는 nexacro 메소드로 별도 제공합니다.

예를 들어 Math 오브젝트에서 제공하던 메소드 중 2개의 인자를 지원하는 floor, ceil, round 메소드는 더는 제공되지 않습니다. 해당 메소드를 사용하려면 nexacro 메소드로 사용해야 합니다.

//Math.floor( v, digit );
nexacro.floor( v, digit );

//Math.ceil( v, digit );
nexacro.ceil( v, digit );

//Math.round( v, digit );
nexacro.round( v, digit );

또한, 자바스크립트에서 예약어로 사용하는 일부 오브젝트의 명칭이 변경되었습니다.

//new Image();
new nexacro.Image();

예약어와 중복되지 않는 나머지 컴포넌트도 TypeDefinition 내의 classname이 nexacro.Button과 같은 형식으로 변경되었습니다. 하지만 기존처럼 Button을 그대로 사용할 수 있습니다.

this.button00 = new Button();
or
this.button00 = new nexacro.Button();

동작 방식 변경

자바스크립트에서 지원하지 않거나 다르게 동작하는 일부 항목이 수정되었습니다.

<> 비교 연산자 지원하지 않음

<> 비교 연산자를 더는 지원하지 않습니다. 다른 값을 비교할 때는 != 연산자를 사용하세요.

switch 문 내 문자열 처리 방식 변경

이전 버전에서는 switch 문 내에서 case "2" 와 case 2 가 같은 방식으로 처리되던 것을 별개의 값으로 처리합니다.

정규표현식 /g 옵션 적용 방식 변경

정규표현식에서 /g 옵션을 사용하지 않고 replace를 적용하게 되면 한 개의 항목만 변경되며 /g 옵션을 적용해야 전체 항목이 변경됩니다.

오브젝트 명 생성 시 제약 사항

컨테이너의 멤버인 속성, 메소드명과 같은 ChildName을 만들 수 없습니다. 예를 들어 폼은 text라는 속성이 있는데 추가된 버튼 컴포넌트의 id를 text로 지정할 수 없습니다. 아래 같은 경우 버튼이 생성되지 않습니다.

<Form text="formtext">
     <Layouts>
          <Layout>               
               <Button id="text'>

Dataset과 같은 Invisible 오브젝트 역시 Array의 멤버로 처리되어 length와 같은 속성을 id로 지정할 수 없습니다. 아래 같은 경우 컬럼이 생성되지 않습니다.

<Objects>
     <Dataset id="Dataset00">
          <ColumnInfo>
               <Column id="length" type="STRING" size="256"/>
          </ColumnInfo>

변수, 함수 명 생성 시 제약 사항

예를 들어 아래의 경우 로딩이 완료되지 않고 화면이 보이지 않습니다. 넥사크로플랫폼 라이브러리에서 사용하는 _is_loading 변수와 같은 이름으로 변수명을 만들었습니다.

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

예를 들어 아래의 경우 컴포넌트 생성이 완료되지 않고 화면이 보이지 않습니다. 넥사크로플랫폼 라이브러리에서 사용하는 createComponent 함수와 같은 이름으로 함수명을 만들었습니다.

this.createComponent = function()
{
	trace('createComponent ');
}

Modeless 팝업창에서 application 오브젝트 사용 시 주의 사항

open 메소드로 실행한 Modeless 팝업창에서 application 오브젝트를 참조하는 경우 실행 성능에 영향을 미칠 수 있고 스크립트 에러가 발생할 수 있습니다.

HTML5 환경에서 실행 시 발생하는 문제이며 사용자 시스템과 브라우저 특성에 따라 발생하는 문제입니다. IE 브라우저와 같은 구형 브라우저 사용 시 현상이 두드러지게 나타날 수 있습니다.

특히, 아래와 같이 ADL 내 공통 스크립트 함수에서 showModal 메소드를 실행하도록 작성하고 Modeless 팝업창에서 해당 함수에 접근해 모달 팝업창을 생성하고 닫을 경우 참조 문제로 스크립트 에러가 발생할 수 있습니다. 사용자 시스템에 따라 발생할 수 있는 스크립트 에러는 달라지거나 중복 발생할 수 있습니다.

// ADL Script
this.appModal = function(form) {
	newChild.showModal(form.getOwnerFrame(), null, form, "fn_callback");
}

// Modeless popup window script
this.Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
	application.appModal(this);
}