프로젝트 생성

1. 넥사크로플랫폼 애플리케이션을 만들기 위해서는 프로젝트를 먼저 생성해야 합니다. 모든 넥사크로플랫폼 애플리케이션은 프로젝트에서 지정된 속성을 기반으로 사용자 화면에 보이고 동작하게 됩니다. 아래의 방법으로 프로젝트를 생성합니다.

[Menu] File > New > Project
or
Start Page의 New Project 버튼
or
Ctrl + Shift + N
or
아이콘 

2. Project Wizard 창이 실행됩니다.

   새로운 프로젝트를 만들기 위해서는 프로젝트 이름과 해당 프로젝트 파일의 저장 할 위치를 아래와 같이 지정합니다.

   • Project Name : nexacro17_design

   • Location : C:\nexacro17_design

3. 스크린 정보를 설정하는 단계입니다.

   스크린이란 애플리케이션 구동 시 필요한 화면 크기 등과 관련된 정보들의 모음입니다.

   프로젝트 생성시 애플리케이션에서 사용할 스크린 목록을 구성할 수 있습니다.

   Desktop용 스크린의 경우 사용자가 애플리케이션의 Width와 Height 를 생성단계에서 설정할 수 있습니다. Desktop용으로 설정하고 애플리케이션의 사이즈와 ID를 입력합니다.

   • Width - 1024

   • Height - 768

   • App ID - nexacro17_design

4. 스크린별 메인화면의 유형을 지정합니다.

   Frame이라고 하며, 브라우저에서 화면을 어떻게 나누어서 사용할 것인가에 대한 정보입니다.

5. 다음과 같이 프로젝트가 생성된 것을 확인할 수 있습니다.

프로젝트 구성

Project Explorer 창과 Resource Explorer 창으로 구성되어 있습니다.

Project Explorer

Environment

Environment는 실행 환경 정보를 가지고 있는 설정 파일로 애플리케이션에서 사용하는 Screen, Variables, Cookies등을 설정합니다. 여러개의 애플리케이션으로 구성 시 각각의 애플리케이션에서 공유하여 사용 할 수 있습니다.

Environment 항목을 더블클릭 또는 마우스 우클릭 Edit메뉴를 이용하여 편집합니다.

ScreenDefinition

애플리케이션 프로젝트 생성 시 지정한 Screen 정보에 대한 신규 항목 추가, 기존 항목의 수정 및 삭제기능을 제공합니다. [Preview relation with App] 영역에서는 Screen 정보와 Application이 어떻게 연결되어 있는 지 직관적으로 확인 할 수 있습니다.

Variables

여러 애플리케이션에서 공유하여 사용 할 변수를 설정합니다. 좌측의 +, - 버튼을 이용하여 추가, 삭제가 가능합니다.

Cookies

브라우저 쿠키로 처리 될 변수를 설정합니다. 좌측의 +, -버튼을 이용하여 추가, 삭제가 가능합니다.

HTTP Header

HTTP Header 영역에 전송할 변수를 설정합니다. 좌측의 +, - 버튼을 이용하여 추가, 삭제가 가능 합니다.

Script

여러 애플리케이션에서 공유하여 사용 할 스크립트를 작성합니다. Script 항목을 더블클릭 또는 마우스 우클릭 Edit메뉴를 통하여 편집합니다.

TypeDefinition

넥사크로플랫폼에서 사용되는 오브젝트와 Prefix 정보들을 가지고 있습니다. 하위 항목을 더블클릭 또는 마우스 우클릭 Edit메뉴를 이용하여 편집합니다.

Objects

넥사크로플랫폼을 구동하는 라이브러리와 화면에서 사용할 오브젝트를 관리합니다.

Modules

넥사크로 오브젝트를 모듈단위로 관리합니다. json 형태로 정의하여 Module로 등록을 해야 넥사크로 오브젝트로 사용할 수 있습니다. 등록된 모듈의 하위에는 json파일에 정의 되어있는 Object의 목록이 표현되며, Objects 목록에는 자주 사용하는 오브젝트만 등록되어 있습니다. 모듈 정보중에서 ComComp, Grid, DeviceAPI 항목에 포함된 오브젝트는 목록을 펼친 후에 추가할 오브젝트를 선택하고 '+'버튼을 클릭하면 Objects 목록에 추가됩니다.

모듈 이름 앞의 Show Json 버튼을 클릭하면 해당 파일 코드를 확인 할 수 있습니다. 소스는 읽기 전용으로 제공되며, 편집할 수 없습니다.

Objects

Form에서 사용 할 오브젝트를 관리합니다. 앞쪽의 +,- 버튼을 이용하여 오브젝트를 추가, 삭제 할 수 있습니다. Image 항목은 메뉴바에 표현되는 컴포넌트 아이콘을 의미하며, Width, Height 값은 컴포넌트를 화면에 마우스를 클릭해서 생성할 때의 기본 크기를 의미합니다.

Service

애플리케이션을 구성하는 Form, Script, Image 등의 경로를 설정합니다.
Resource Service 와 User Service 로 구분되며 Resource Service는 넥사크로 스튜디오에서 고정되어 사용하는 경로이며 사용자가 편집 할 수 없습니다.

User Service는 +,- 버튼을 이용하여 서비스를 추가, 삭제 합니다.
Type에 따라 서비스에 표시되는 파일타입이 제한됩니다. Type별 지원되는 파일확장자는 아래와 같습니다.

Protocols

넥사크로플랫폼에서는 기본 HTTP 프로토콜을 사용해 요청과 응답을 처리합니다. 사용자 환경에 따라 데이터를 암호화하거나 원하는 형식으로 변환해 처리가 필요한 경우 프로토콜 어댑터를 설정합니다.

프로토콜 어댑터는 다른 데이터 구조를 필요로 하는 관계를 서로 연결해 원하는 형태로 동작하게 만드는 도구입니다. 간단한 설정만으로 원하는 기능을 쉽게 만들 수 있습니다.

App Information

AppVariables

애플리케이션에서 사용하는 전역변수와 2차원 형태의 데이타를 관리합니다.

Datasets

Dataset은 Data를 처리하는 표 형태의 기억장소입니다. 애플리케이션에서 전역적으로 사용하는 데이타를 추가, 삭제하거나 많은 양의 데이터를 재사용할 수 있게 하는 Import/Export 기능도 제공합니다.

Variables

한 애플리케이션에서 전역적으로 사용하는 변수입니다. 항목의 우클릭 Edit메뉴 또는 더블클릭하여 변수를 추가, 삭제 할 수 있습니다.

Apps

애플리케이션에 적용되는 mainframe, Trays 정보를 관리합니다.

mainframe

애플리케이션의 기본화면을 구성하는 요소입니다. 프레임구조를 이용하여 여러 형태의 메인화면 구성이 가능합니다.

Trays

애플리케이션의 Tray 영역에 표시되는 아이콘 및 툴팁 등을 정의합니다.

Script

애플리케이션에서 공통으로 사용할 스크립트를 정의합니다.

Resource Explorer

Nexacro Theme

넥사크로 스튜디오에서 기본으로 제공하는 테마파일입니다. 해당파일은 이미지와 XCSS파일이 압축된 형태의 파일로 제공되며 수정하거나 삭제할 수 없습니다.

Theme

프로젝트에 새로운 Theme를 생성하거나 추가할 때 지정합니다. Theme 항목에서 생성된 테마는 이미지와 XCSS 파일이 분리된 형태로 생성됩니다. Theme 편집기는 더블클릭을 하거나 선택 우클릭 후 Edit메뉴를 선택하여 확인 할 수 있습니다.

XCSSResource

프로젝트에서 생성하거나 추가하는 Nexacro Style Sheet 파일은 지정된 XCSSResource 경로에 생성됩니다. XCSSResource 편집기는 더블클릭을 하거나 선택 우클릭 후 Edit메뉴를 선택하여 확인 할 수 있습니다.

InitValueDefinition

InitValueDefinition 파일은 애플리케이션 내에서 오브젝트 속성값에 대한 최초값을 설정합니다.

메뉴 [File > New > InitValueDefinition(.xiv)] 또는 [Resource Explorer > InitValueDefinition 우클릭 New InitValueDefinition 선택]으로 실행하면 _resource_ > _initvalue_에 " οοο.xiv " 파일로 생성됩니다.

InitValue 파일이 생성되면서 InitValue를 지정할 수 있는 설정창이 나타납니다. InitValue를 생성할 오브젝트 또는 컴포넌트를 선택하고 오른쪽 마우스 클릭 후 나타나는 메뉴에서 [Add InitValueDefinition] 항목을 선택하거나 상단에서 [+] 항목을 선택합니다.

해당 오브젝트 또는 컴포넌트 아래 id가 생성되고 창 오른쪽 속성창이 활성화됩니다. 생성된 id는 항목을 클릭하면 수정할 수 있습니다.

Project Explorer > Environment > Information - initvaluefileid 속성에서 파일을 지정하여 사용할 수 있습니다.

UserFont

시스템에 없는 서체를 지정하여 사용할 수 있는 기능입니다.

메뉴[File > New > UserFont(.xfont)] 또는 [Resource Explorer > UserFont 우클릭 New UserFont 선택]으로 실행하면 _resource_ > _font_에 " οοο.xfont " 파일로 생성됩니다.

UserFont 파일은 샘플코드가 포함된 상태로 생성됩니다. 샘플코드를 원하는 항목으로 수정하고 주석을 제거하면 적용할 수 있습니다. UserFont파일에 포함된 코드는 Genarate 시 index.html의 head에 <style>태그로 추가됩니다.

Environment 선택 후 Information그룹에서 userfontid 속성에 파일을 지정하여 사용합니다.

ImageResource

ImageResource에 이미지를 추가하여 이미지 경로 팝업창에서 테마이미지 리스트 밑으로 imagerc:: 로 경로를 보여주는 이미지가 등록되어 사용할 수 있습니다.
이미지의 위치는 해당 프로젝트 _resource_ > _images_ 에 이미지가 등록됩니다.

프로젝트 구조

실습을 통해 생성된 프로젝트 파일은 다음과 같습니다.

아래와 같은 방법으로 경로를 좀 더 쉽게 접근할 수 있습니다.

Project Explorer > Project 'nexacro17_design' 우 클릭 > Open Containing Folder