8.공통 스크립트

Edit

8.1공통 스크립트 소개

공통 스크립트는 프로젝트에서 자주 사용하는 기능을 모아 놓은 일종의 스크립트 라이브러리입니다. 특정 폼에만 필요한 스크립트는 폼 파일에 작성하지만 애플리케이션 전체에서 사용하는 스크립트는 별도의 파일(XJS)에 작성하여 각 폼에서 이를 참조해 사용하는 것이 좋습니다.

XJS는 넥사크로플랫폼에서 사용하는 스크립트 파일의 확장자입니다.

공통 스크립트를 한번 만들어 놓으면 같은 기능을 여러 번 개발하는 중복을 피할 수 있고, 여러 명이 작업할 때 통일된 기능을 사용할 수 있어 효율적입니다. 또한, 공통 스크립트 파일을 그대로 다른 프로젝트에서도 사용할 수 있으므로 코드의 재사용, 개발 시간 단축의 효과를 얻을 수 있습니다. 그러나 불필요하게 남용하면 애플리케이션의 크기가 커져 리소스 낭비와 속도 지연 등의 원인이 될 수 있으므로 필요한 곳에만 사용하는 것이 좋습니다.

일반적으로 공통 스크립트로 구현하는 기능은 문자 및 날짜 체크, 문자열 처리, 형식 검증, 각종 연산, 인/디코딩, 통신 연결 등의 공통으로 사용하는 기능은 무엇이든 될 수 있으며 프로젝트에 따라 내용은 달라질 수 있습니다.

8.2XJS 작성하기

공통 스크립트는 XJS 파일에 작성합니다. 프로젝트에 XJS 파일을 생성한 후 필요한 기능을 작성하면 각 폼에서 이를 참조하여 사용할 수 있습니다. XJS를 작성하는 절차는 다음과 같습니다.

1

메뉴에서 [File > New > Script (.xjs)]를 선택하여 New Script 팝업창을 오픈합니다.

그림 8-1New_Script_popup_02

2

Name에는 libCommon, Location은 기본 값인 Base를 설정한 후 OK 버튼을 클릭합니다. 그러면 XJS 파일이 생성되고 스크립트 편집 창에서 자동으로 오픈됩니다.

생성된 XJS 파일은 다음과 같이 Project Explorer에서도 확인할 수 있습니다.

그림 8-2base_libCommon

3

스크립트 편집 창에 오픈된 XJS 파일에 필요한 기능을 스크립트로 작성합니다.

함수를 선언할 때에는 this 키워드를 붙여줍니다. this를 붙여주지 않으면 전역으로 처리됩니다.

/* libCommon.xjs */
this.isNumber = function(str)
{
    var retVal = nexacro.isNumeric(str);
    return  retVal;
}

this.fn_add = function(x, y)
{
    var retAdd = nexacro.toNumber(x) + nexacro.toNumber(y);
    return retAdd;
}

8.3XJS 사용하기

폼에서 공통 스크립트를 사용하려면 해당 페이지에서 include 문을 선언해 주는 것만으로 간편히 사용할 수 있습니다.

1

Project Explorer에서 폼을 더블 클릭하여 오픈한 후 스크립트 편집 창의 상단에 include 문으로 XJS 사용을 선언합니다.

include "Base::libCommon.xjs";

include 문을 쓰고 "" 안에 XJS 파일의 서비스 ID와 파일명을 써줍니다. 그리고 코드의 끝에는 반드시 세미콜론(;)을 붙여 해당 줄이 끝났음을 명시해 줍니다.

공통으로 참조하는 스크립트가 많은 경우 여러 파일을 include로 참조할 수 있습니다. 또한, 참조하는 파일이 많은 경우에는 스크립트 코드 안에서 다시 다른 코드를 참조할 수도 있습니다. 예를 들어, libCommon.xjs 스크립트 파일을 다음과 같이 구성할 수 있습니다. 이렇게 구성하면 참조할 파일이 늘어나더라도 업무에서 사용하는 폼 파일은 건드리지 않고 libCommon.xjs 파일만 수정해 기능을 추가할 수도 있습니다.


/* libCommon.xjs */

include "Lib::libAuth.xjs";

include "Lib::libGrid.xjs";

include "SERVICE::libService.xjs";

include "Util::libUtil.xjs";

2

폼 스크립트에서 함수를 호출합니다.

폼 스크립트에서 다음과 같이 libCommon.xjs에 정의된 fn_add 함수를 사용할 수 있습니다.

/* calc.xfdl */

include "Base::libCommon.xjs";

this.btn_calc_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    var result = this.fn_add(5, 2);    //result = 7
};

8.4XJS 가져오기

이전에 작성했던 XJS 파일을 프로젝트로 가져와 사용할 수 있습니다.

1

XJS 파일을 프로젝트 경로 내의 Base 디렉터리로 복사합니다.

XJS 파일을 Base 디렉터리 이외의 경로에 복사하면 프로젝트에서 사용할 수 없습니다. XJS 파일을 Base 디렉터리 이외의 경로에서 사용하려면 User Service에 해당 경로를 등록해야 합니다. 자세한 내용은 다음 장을 참조하십시오.

2

Project Explorer를 refresh 하여 Base 하위에 복사한 XJS 파일이 표시되는지 확인합니다.

그림 8-3base_libCommon

3

폼 스크립트에서 XJS를 include하여 사용합니다.

8.5서비스 등록하기

XJS 파일을 별도의 경로에 두고 사용하려면 해당 경로를 서비스로 등록합니다.

1

Project Explorer의 [TypeDefinition > Services]를 선택 후 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴에서 [Edit] 항목을 선택하고 서비스 편집 창을 오픈합니다.

그림 8-4edit_services

2

User Service에서 + 버튼을 클릭하여 서비스 ID(PrefixID), 파일 형식(Type), 경로(URL) 정보를 입력합니다. 그 이외의 항목은 디폴트 값으로 둡니다.

그림 8-5TypeDefinition_Service

3

Project Explorer에서 서비스 경로를 확인합니다.

새로운 서비스가 등록되면 서비스와 해당 경로에 위치한 XJS 파일이 Project Explorer에 표시되고 관리가 가능해집니다.

그림 8-6xjs_creation_project_explorer

8.6App에서 스크립트 사용하기

App(XADL)은 프로젝트의 메인에 해당되는 부분으로 애플리케이션을 로딩할 때 호출됩니다. XADL 파일의 스크립트 코드에는 주로 애플리케이션의 시작이나 종료 시에 필요한 기능을 작성하는데 필요에 따라 공통 스크립트를 이곳에 정의해 사용하기도 합니다.

XADL에 공통 스크립트를 작성하면 초기에 application 객체와 함께 로딩됩니다. 따라서 별도의 include 절차가 필요 없으며 객체를 this 객체로 정의하면 application 객체의 자식으로 동작합니다.

XADL 파일을 변경할 때마다 index.html도 자동으로 업데이트되므로 index.html에 추가 코딩을 한 경우에는 별도로 관리를 해줘야 합니다.

1

Project Explorer에서 프로젝트의 App '[프로젝트명]'을 선택한 후 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴에서 [Edit Script]를 선택합니다.

그림 8-7Edit_Script

2

XADL 파일이 스크립트 편집 창으로 오픈되면 다음과 같이 기능을 구현합니다.

/* calc.xadl */

this.adl_add = function(x, y)
{
    var retAdd = nexacro.toNumber(x) + nexacro.toNumber(y);
    return retAdd;
}

3

폼에서 XADL에 정의된 함수를 사용합니다.

nexacro.getApplication 메소드를 사용하여 application 객체를 얻은 후 calc.xadl에 정의된 adl_add 함수를 다음과 같이 사용할 수 있습니다.

/* calc_adl.xfdl */

var objApp = nexacro.getApplication();
result = objApp.adl_add(5, 2);    //result = 7