모듈을 만드는 기본 과정은 간단합니다. 새로운 프로젝트를 생성하고 화면을 구성하고 Deploy 단계에서 배포할 수 있는 파일로 생성합니다. 좀 더 구체적인 모듈을 만들기 위해서는 기능을 추가하고 여러 설정을 조정해주어야 합니다. 이번 장에서는 모듈(Composite Component)을 만드는 기본적인 단계를 가볍게 살펴봅니다.

프로젝트 / 오브젝트 만들기

하나의 프로젝트는 하나 이상의 오브젝트를 가질 수 있습니다. 예를 들어 Chart 모듈 프로젝트 안에는 Line Chart, Bar Chart 등 여러 오브젝트(컴포넌트)를 포함할 수 있습니다. 프로젝트 안에는 하나 이상의 오브젝트를 가져야 하므로 처음 프로젝트를 만들 때 오브젝트도 같이 만들어줍니다.

오브젝트 ID는 모듈 배포 시 컴포넌트 이름으로 사용하기 때문에 만들고자 하는 컴포넌트의 특징을 담고 있는 것이 좋습니다. 예제에서는 2개의 Calendar 컴포넌트를 나란히 배치한 컴포넌트를 만듭니다.

오브젝트 ID를 입력하면 Project Preview 영역에 생성할 프로젝트 구조를 미리 보여줍니다.

컴포지트 컴포넌트 화면 구성하기

사용자가 모듈을 설치하고 컴포넌트를 화면에 배치했을 때 보이는 모습을 설정합니다.

예제에서는 두 개의 Calendar 컴포넌트를 나란히 배치합니다. 그리고 Calendar 컴포넌트의 type 속성값을 "monthonly"로 지정해서 사용자가 컴포넌트를 배치했을 때 바로 날짜를 선택할 수 있도록 합니다.

프로젝트를 처음 생성한 경우에는 프로젝트를 생성하고 나서 xcdl 파일이 열려진 상태로 표시됩니다.

화면을 배치하고 조정하는 작업은 넥사크로 스튜디오에서 화면 디자인 작업과 같습니다.

오브젝트 생성 시 지정한 Default Size를 수정하는 것이기 때문에 크기 변경 시 경고창이 표시됩니다. Default Size는 사용자가 컴포넌트를 선택하고 화면에 배치 시에 기본적으로 설정되는 크기입니다.

Form 크기는 컴포지트 컴포넌트의 용도에 따라 달라질 수 있습니다. 예제에서는 2개의 Calendar 컴포넌트의 크기에 딱 맞게 설정했습니다.

에뮬레이터에서는 추가된 기능을 확인하는 기능을 제공하지만, 이번 예제에서는 추가 기능은 작성하지 않았으므로 컴포지트 컴포넌트가 보여지는 모습만 확인합니다.

모듈 설치 파일 만들기

만들어진 프로젝트는 모듈 파일로 만들어서 사용자(개발자)에게 배포할 수 있습니다.

JSON 편집 단계가 필요하지 않다면 이전 단계에서 [Nex] 버튼을 클릭하지 않고 [Deploy] 버튼을 클릭할 수 있습니다.

scriptsfilter 항목에서는 모듈 설치 후 앱 배포 시 배포 대상 운영체제에 따라 배포 여부를 설정할 수 있습니다. 예를 들어 TEST라는 스크립트를 운영체제에 따라 해당하는 파일만 배포하고자 한다면 아래와 같이 scriptsfilter 항목을 설정합니다.

"scriptsfilter":[
	{name: "SIMPLE_MODULE_PROJECT/TEST_NRE.js", target:"NRE"},
	{name: "SIMPLE_MODULE_PROJECT/TEST_WRE.js", target:"WRE, iOS_NRE"}
]

target 속성값으로 설정할 수 있는 항목은 아래와 같습니다.

• NRE: iOS/iPadOS를 제외한 운영체제 NRE

• iOS_NRE: iOS/iPadOS NRE

• WRE

파란색으로 표시된 링크를 클릭하면 해당 폴더를 열어줍니다.

모듈 설치하고 화면에 컴포넌트 배치하기

넥사크로 스튜디오에서 프로젝트를 열고 배포된 모듈 파일을 설치한 후 컴포지트 컴포넌트를 화면에 배치합니다.

모듈 프로젝트 공유하기

모듈 프로젝트를 생성한 폴더 전체를 압축해서 공유할 수 있습니다.