2.사용자 컴포넌트

Edit

넥사크로 스튜디오에서 모듈 프로젝트 관련 기능은 넥사크로플랫폼 17.1.0.100 이후 버전에서 지원하지 않는 기능입니다.

- Composite Component 프로젝트는 넥사크로 모듈 디벨로퍼(베타)에서 개발할 수 있습니다.

넥사크로플랫폼에서는 기본적으로 사용자들이 필요로 하는 컴포넌트를 제공하고 있습니다. 하지만 사용자 환경에 따라 특화된 기능을 필요로 하는 경우가 있습니다. 이럴 때는 투비소프트 파트너 개발사 또는 개발자가 작성한 사용자 컴포넌트를 적용하거나 직접 필요한 기능을 추가한 사용자 컴포넌트를 작성할 수 있습니다.

이번 장에서는 사용자 컴포넌트가 제공되는 형식과 이를 사용하는 방법에 대한 가이드를 제공합니다.

2.1사용자 컴포넌트 구성

사용자 컴포넌트는 넥사크로 스튜디오의 모듈 프로젝트를 통해 생성할 수 있습니다. 하나의 모듈 프로젝트 안에는 1개 이상의 사용자 컴포넌트와 리소스를 포함할 수 있습니다.

모듈 프로젝트는 [Deploy] 메뉴를 통해 배포할 수 있는 파일로 생성됩니다. 배포된 모듈은 넥사크로 스튜디오에서 설치할 수 있으며 설치된 파일은 프로젝트 경로 아래 "_extlib_" 폴더 하위에서 확인할 수 있습니다. 설치되는 파일은 아래와 같습니다.

모듈 파일 (*.json)
오브젝트 정보 파일 (*.info)
컴포넌트 스크립트 파일, 디자인 스크립트 파일 (*.js)

2.2사용자 컴포넌트 생성

간단하게 사용자 컴포넌트를 생성하는 방법을 살펴봅니다. Button 컴포넌트를 상속받으며 속성, 메소드, 이벤트를 추가해봅니다.

2.2.1모듈 프로젝트 생성하기

메뉴[File > New > Project]를 선택하고 왼쪽 프로젝트 항목 중 "Module"를 선택합니다.

프로젝트명과 경로를 입력하고 [Next] 버튼을 클릭하면 상속받을 오브젝트를 지정합니다. "none"을 선택하면 다른 오브젝트를 상속받지 않고 새롭게 사용자 컴포넌트를 생성할 수 있습니다. 예제에서는 Button 컴포넌트를 선택합니다.

Object ID를 입력하고 [Finish] 버튼을 클릭하면 모듈 프로젝트가 생성됩니다. 생성된 프로젝트는 아래와 같습니다.

예제에서는 ExtCombo 라는 하나의 사용자 컴포넌트만 생성합니다. 하지만 모듈 프로젝트 안에는 1개 이상의 컴포넌트를 포함할 수 있습니다. 메뉴[File > New > Object]를 선택하면 바로 상속받을 오브젝트를 선택하는 화면으로 이동합니다.

2.2.2공통 정보 추가하기

생성된 프로젝트의 "Common" 항목 아래에는 아무런 파일도 생성되지 않았습니다. 컴포넌트와 관련된 정보 중에서 EnumInfo, UnitInfo, RefreshInfo는 공통으로 사용할 수 있기 때문에 "Common" 항목으로 분류합니다. 예제에서는 추가할 속성에서 사용할 Enum 정보를 생성해봅니다.

프로젝트 트리에서 "ObjectInfo > ExtCombo.info" 항목을 선택하고 [Edit] 메뉴를 선택합니다.

Enuminfo 항목을 선택하고 목록에서 [+] 버튼을 클릭합니다.

추가할 Enum 정보를 입력합니다. id는 userEnum으로 등록했습니다.

정보를 입력하고 [OK] 버튼을 클릭하면 프로젝트 트리의 "Common" 항목 아래에 EnumInfo.info 파일이 추가되는 것을 확인할 수 있습니다.

2.2.3속성 추가하기

프로젝트 트리에서 "ObjectInfo > ExtCombo.info" 항목을 선택하고 [Edit] 메뉴를 선택하고 속성을 추가할 수도 있지만, [Edit] 메뉴 대신 [Add > Property] 항목을 선택해서 속성을 추가할 수도 있습니다.

추가할 속성명을 입력합니다. Syntax, Location 항목은 자동으로 설정됩니다.

[Next] 버튼을 클릭하면 상세 설정을 지정할 수 있습니다. 예제에서는 group 항목값을 "Misc."로 지정하고 edittype 항목값을 "Enum"으로 지정합니다. enuminfo 항목에서 이전 단계에서 추가한 enum 정보인 "userEnum"을 선택합니다.

[Add > Property] 항목을 선택해서 속성을 추가한 경우에는 컴포넌트 스크립트 파일이 열리면서 set_ 함수가 추가됩니다. 함수 내 필요한 동작을 정의할 수 있습니다. 추가한 속성이 기본값을 가져야 하는 경우에는 기본값을 정의하는 코드를 추가합니다.


2.2.4메소드 추가하기

프로젝트 트리에서 "ObjectInfo > ExtCombo.info" 항목을 선택하고 [Edit] 메뉴를 선택하고 메소드를 추가할 수도 있지만, [Edit] 메뉴 대신 [Add > Method] 항목을 선택해서 메소드를 추가할 수도 있습니다.

추가할 메소드명을 입력하고 반환되는 값이 있는 경우 Return Type 항목을 선택하고 매개변수값의 형식을 지정합니다.

[Add > Method] 항목을 선택해서 메소드를 추가한 경우에는 컴포넌트 스크립트 파일이 열리면서 메소드 함수가 추가됩니다. 함수 내 필요한 동작을 정의할 수 있습니다.


2.2.5이벤트 추가하기

프로젝트 트리에서 "ObjectInfo > ExtCombo.info" 항목을 선택하고 [Edit] 메뉴를 선택하고 이벤트핸들러를 추가할 수도 있지만, [Edit] 메뉴 대신 [Add > EventHandler] 항목을 선택해서 이벤트핸들러를 추가할 수도 있습니다.

추가할 이벤트명을 입력하고 EventInfo 오브젝트를 선택합니다. 반환되는 값이 있는 경우 Return Type 항목을 선택하고 필요한 경우 EventInfo 오브젝트를 새로 생성한 후 생성된 오브젝트를 선택할 수 있습니다.

2.3사용자 컴포넌트 배포 및 설치

컴포넌트는 모듈 형태로 배포합니다. 메뉴[Deploy > Module Package]에서 Deploy path를 지정하고 배포할 모듈명과 버전 정보를 입력하면 배포 파일을 생성합니다.

생성된 모듈 파일은 모듈명 뒤에 xmodule이라는 확장자가 붙습니다.

배포된 모듈 파일은 앱 프로젝트에서 메뉴[File > Import Module]에서 설치할 수 있습니다. 설치 단계에서 json 파일 옆에 있는 버튼을 클릭하면 버전 정보 등을 확인할 수 있습니다.

모듈 설치 후에는 프로젝트를 다시 로딩합니다.

2.4사용자 컴포넌트 사용

추가한 사용자 컴포넌트는 기본 컴포넌트와 마찬가지로 오브젝트 툴바에 표시되며 선택 후 화면에 배치할 수 있습니다.

설정창에서 필요한 속성을 추가하거나 이벤트를 정의할 수 있으며 스크립트 창에서는 지정된 속성이나 메소드에 대해 자동완성 기능을 제공합니다.

속성창에서 추가된 속성항목 선택 시 공통 정보에서 추가한 Enum 목록을 확인할 수 있습니다.

2.4.1사용자 컴포넌트 스타일

하지만 화면에 배치했을 때 컴포넌트 UI가 화면에 표시되지 않습니다. 사용자 컴포넌트에 대한 스타일이 정의되지 않았기 때문에 화면에 컴포넌트 UI가 표시되지 않는 것입니다. 사용자 컴포넌트의 스타일은 아래와 같이 처리할 수 있습니다.

추가된 사용자 컴포넌트가 상속받은 오브젝트의 UI에 영향을 미치지 않는 경우에는 사용자 컴포넌트 스크립트에서 _type_name 값을 상속받은 오브젝트로 변경합니다. 아래의 경우 Combo 컴포넌트의 스타일을 그대로 사용합니다.

그렇지 않고 사용자 컴포넌트의 스타일이 상속받은 오브젝트와 달라지는 경우라면 사용자 컴포넌트에 맞는 스타일 속성을 정의해주어야 합니다. 테마 파일을 변경하거나 사용자 컴포넌트에 적용할 XCSS 파일을 생성해 사용할 수 있습니다.