Form 생성 마법사

Form 생성 마법사를 이용하여 새로운 Form을 생성할 수 있습니다. 메뉴 [File > New > Form]에서 Form 생성 마법사를 시작합니다.

Form 생성이 완료되면, 해당 편집 뷰를 자동으로 열어줍니다.

1단계 Location

생성될 Form의 이름과 경로를 입력하는 단계입니다. Form의 "Name"과 "Location"은 반드시 입력해야 하는 필수 항목입니다. Form 파일은 서비스에서 관리되는 파일이므로 서비스 이외의 경로에 생성할 수 없습니다.

폼 템플릿을 등록한 경우에는 등록된 템플릿 중에서 선택할 수 있습니다. 템플릿은 Layout, Position이 이미 정해져 있는 상태라, 바로 [Finish] 버튼을 클릭하면 폼이 생성됩니다.

지정한 경로에 같은 이름의 Form이 존재할 때는 생성할 수 없습니다.

2단계 Layout

Layout 항목에는 Form에서 사용할 레이아웃 정보를 입력합니다. 레이아웃을 추가하고 Layout Type에 따른 속성값을 설정할 수 있습니다. Layout Type 변경 시 설정할 수 있는 속성 목록이 달라지며 속성값 설정 시 참고할 수 있는 예시 이미지를 표시합니다.

예시 이미지는 고정된 이미지이며 속성값 입력 시 동적으로 반영되지 않습니다.

	항목	설명
1	Add Layout	레이아웃을 추가합니다.
2	Delete Layout	선택한 레이아웃을 삭제합니다. default 레이아웃은 삭제할 수 없습니다.
3	Layout Type	레이아웃 type 속성값을 선택합니다.
4	추가 속성	선택한 Layout Type에 따른 추가 속성을 설정합니다.

Layout 정보 생성 시 지정할 수 있는 기본 속성은 아래와 같습니다.

Layout 속성	설명
name	Layout 이름 (고유 식별자) default 레이아웃 이름은 변경할 수 없습니다.
width	Layout 너비를 설정합니다.
height	Layout 높이를 설정합니다.

Layout 속성

설명

name

Layout 이름 (고유 식별자)

default 레이아웃 이름은 변경할 수 없습니다.

width

Layout 너비를 설정합니다.

height

Layout 높이를 설정합니다.

Layout Type을 "Absolute" 값이 아닌 "Horizontal", "Vertical", "Table" 항목 중 하나를 선택하면 Fluid Layout 속성이 추가로 표시됩니다. 표시되는 속성은 선택한 Layout Type에 따라 다르게 표시됩니다.

추가 속성은 Layout 생성 시 간단하게 실제 속성값에 반영하기 위해 제시된 항목입니다.

예를 들어 Gap 속성 설정 시 실제 Layout 오브젝트의 horizontalgap, verticalgap 속성값에 반영됩니다.

Layout Type	추가 속성	Layout 오브젝트 속성
Horizontal Vertical	Spacing	spacing
Horizontal Vertical	Gap	horizontalgap, verticalgap
Table	Row	tabletemplate
	Column	tabletemplate
	Spacing	spacing
	Gap	horizontalgap, verticalgap

Form은 최소 하나 이상의 Layout을 가져야 하며, default Layout은 필수항목으로 삭제할 수 없습니다.

3단계 Position

Form에서 컴포넌트 생성 시 적용되는 Position 속성값 단위를 설정합니다. 기본값은 Option에서 지정한 값으로 표시됩니다.

각 속성값의 단위를 변경하고 왼쪽 아래에 있는 'Save position units in options' 항목을 체크하면 지정된 단위가 Option에 저장됩니다.

기타 파일 생성

메뉴 [File > New] 메뉴에서 추가로 필요한 스타일 파일(CSS), XML 파일, 스크립트 파일, 테마 파일을 생성할 수 있습니다.

Theme 파일 생성

새로운 Theme 파일을 생성합니다. 메뉴 [File > New > Theme]에서 실행합니다.

'Location' 값은 프로젝트 경로를 기준으로 자동 입력되며 변경할 수 없습니다. 'Name' 값은 생성될 경로에 같은 이름을 가진 Theme가 있을 때는 생성할 수 없습니다.

Theme 파일 생성이 완료되면, 해당 편집 뷰를 자동으로 열어주며, Theme 파일은 Resource Explorer창의 Theme에 등록되어 관리됩니다.

Theme 파일은 프로젝트 폴더 아래 지정한 이름으로 폴더가 생성되며 xcss 파일과 images 폴더 내에 이미지 파일로 생성됩니다.

[project]
- [_resource_]
-- [_theme_]
--- [test]
---- theme.xcss
---- [images]
----- btn_CalDrop_D.png
----- btn_CalDrop_N.png
...

Style Sheet 파일 생성

새로운 Style Sheet 파일을 생성할 수 있습니다. 메뉴 [File > New > Nexacro Style Sheet]에서 실행합니다. 생성할 수 있는 파일 확장자는 "*.xcss"입니다.

XCSS 파일의 "Name"과 "Location"는 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 같은 이름을 가진 XCSS 파일이 있을 때는 생성할 수 없습니다. "Insert Target"에는 XCSS 파일을 적용할 위치를 명시합니다.

XCSS 파일 생성이 완료되면, 해당 편집 뷰를 자동으로 열어주며, Project Explorer창에서 Insert Target으로 지정한 Application 아래 Styles 하위 목록 또는 Resource Explorer 창에서 XCSSResource 하위 목록으로 등록됩니다.

편집 뷰가 열려 있는 ADL 파일 대상으로는 XCSS 파일을 연결할 수 없습니다.

Script 파일 생성

새로운 Script 파일을 생성할 수 있습니다. 메뉴 [File > New > Script]에서 실행합니다. 생성 가능한 파일의 확장자는 "*.xjs"입니다.

XJS 파일 "Name"과 "Location"은 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 같은 이름의 XJS 파일이 있을 때는 생성할 수 없습니다.

XJS 파일 생성이 완료되면, 해당 편집 뷰를 자동으로 열어주며, XJS 파일을 생성한 위치가 서비스 경로일 경우 Project Explorer창의 서비스에 등록되어 관리됩니다.

XML 파일 생성

새로운 XML 파일을 생성할 수 있습니다. 메뉴 [File > New > XML]에서 실행합니다. 생성 가능한 파일의 확장자는 "*.xml"입니다.

XML 파일 "Name"과 "Location"은 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 같은 XML명이 존재할 경우에는 생성할 수 없습니다.

XML 파일 생성 시 'Location' 항목에는 type이 "file"로 설정된 User Service만 표시됩니다.

XML 파일 생성이 완료되면, 해당 편집 뷰를 자동으로 열어주며, XML 파일을 생성한 위치가 서비스 경로일 경우 Project Explorer창의 서비스에 등록되어 관리됩니다.

InitValue 파일 생성

새로운 InitValue 파일을 생성할 수 있습니다. 메뉴 [File > New > InitValueDefinition]에서 실행합니다. 생성 가능한 파일의 확장자는 "*.xiv"입니다. 생성된 InitValue 파일은 Resource Explorer에 등록됩니다.

InitValue 항목은 프로젝트 폴더 아래 [_resource_/_initvalue_] 폴더를 만들고 해당 폴더 내에 생성합니다.

InitValueDefinition 파일의 생성 경로는 변경할 수 없으며 자동 설정된 경로를 사용합니다.

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

해당 오브젝트 또는 컴포넌트 아래 id가 생성되고 창 오른쪽 속성창이 활성화됩니다. 생성된 id는 항목을 클릭하면 수정할 수 있습니다. [Source] 탭을 클릭하면 생성, 변경된 initValueDefinition 파일 내용을 확인할 수 있습니다.

UserFont 파일 생성

새로운 UserFont 파일을 생성할 수 있습니다. 메뉴 [File > New > UserFont]에서 실행합니다. 생성 가능한 파일의 확장자는 "*.xfont"입니다. 생성된 UserFont 파일은 Resource Explorer에 등록됩니다.

UserFont 항목은 프로젝트 폴더 아래 [_font_] 폴더를 만들고 해당 폴더 내에 생성합니다.

"Apply current file to Environment 'userfontid' property value" 항목을 체크하면 생성된 UserFont를 Environment의 userfontid 속성값으로 지정합니다. userfontid 속성값은 UserFont 파일 생성 후 변경하거나 삭제할 수 있습니다.

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

NRE에서 실행하는 경우에는 사용자의 운영체제에 해당하는 폰트가 설정되어 있어야 합니다.

넥사크로 스튜디오 사용 시 운영체제에 설치되지 않은 폰트를 UserFont로 사용하는 경우에는 속성창에 해당 폰트가 표시되지 않습니다. 속성창에서 직접 해당 폰트명을 입력해주어야 합니다.

구글 폰트 서비스처럼 외부 서비스를 이용하는 경우 아래와 같이 해당하는 css URL을 지정해서 UserFont를 정의할 수 있습니다.

@import url(//fonts.googleapis.com/earlyaccess/hannari.css);

폼 템플릿 등록하고 사용하기

폼 템플릿은 프로젝트 내에서 사용하는 표준 서식을 지정하거나 자주 사용하는 화면 유형을 등록해서 사용할 수 있습니다. 새로운 폼을 만들 때 원하는 템플릿을 선택할 수 있습니다.

폼 템플릿 등록하기

폼 템플릿은 아래와 같은 방법으로 등록할 수 있습니다.

새로운 폼을 생성합니다.

템플릿으로 만들 화면을 구성하고 필요한 속성과 스크립트를 추가합니다.

메뉴 [File > Save As > Form Template] 항목을 선택합니다.

템플릿 이름과 템플릿에 대한 설명을 작성합니다.

기본 저장 경로는 아래와 같습니다. 메뉴[Tools > Options] 실행 후 [Project > QuickCode > Form Template]에서 프로젝트에서 관리하는 저장 경로를 변경할 수 있습니다.

C:\Users\[User Name]\Documents\TOBESOFT\Nexacro N\templates\user\formTemplate\[Category Name]\[Template Name]
C:\Users\[User Name]\Documents\TOBESOFT\Nexacro N\templates\user\formTemplate\[Template Name]

폼 템플릿 등록 시 카테고리 항목을 추가하거나 변경할 수 있습니다. 추가한 카테고리가 하나도 없는 경우에는 Form Templates 기본 경로 바로 아래에 폼 템플릿을 등록합니다. 관리하는 폼 템플릿이 많은 경우에는 카테고리를 생성하고 관리하는 것을 권장합니다.

카테고리 추가 시에는 ctgr0 형식으로 카테고리명이 추가됩니다. 항목 선택 후 F2 키를 입력하면 카테고리명을 수정할 수 있습니다.

[Create] 버튼을 클릭하면 템플릿 파일을 생성하고 결과를 표시합니다. 링크를 클릭하면 해당 폴더를 열어줍니다.

폼 템플릿으로 새로운 Form 만들기

메뉴 [File > New > Form] 항목을 선택합니다.

Form Wizard 화면에서 Template을 선택합니다. 선택한 폼 템플릿이 어떤 구성인지 미리 확인해볼 수 있습니다.

Location을 선택하고 [Finish] 버튼을 클릭하면 선택한 폼 템플릿으로 새로운 Form을 만듭니다.

ViewSet 템플릿 등록하고 사용하기

ViewSet 템플릿은 View 컴포넌트를 사용해 프로젝트 내에서 사용하는 표준 레이아웃을 지정할 수 있습니다. 만든 ViewSet 템플릿은 새로운 폼을 만들 때 선택할 수 있습니다.

ViewSet 템플릿 등록하기

폼 템플릿은 아래와 같은 방법으로 등록할 수 있습니다

새로운 폼을 생성합니다.

ViewSet 템플릿으로 만들 화면 레이아웃을 View 컴포넌트를 이용해 구성합니다.

View 컴포넌트는 실제 동작할 컴포넌트를 배치할 레이아웃을 잡아주는 역할을 합니다. 전체 프로젝트 내에서 자주 사용하는 레이아웃 형태를 먼저 정의하고 이를 ViewSet 템플릿으로 만듭니다.

ViewSet 템플릿 작성 시 View 컴포넌트 내에 다른 컴포넌트를 배치할 수 있지만, ViewSet 템플릿으로 저장하면서 해당 컴포넌트는 템플릿 코드에서 삭제합니다. View 컴포넌트 내에서 동작할 컴포넌트는 Model을 기반으로 자동 생성합니다.

View 컴포넌트는 Div 컴포넌트 같은 ContainerComponent 안에 배치할 수 없습니다. View 컴포넌트는 Form 오브젝트의 자식으로만 등록할 수 있습니다. 넥사크로 스튜디오 내에서 Div 컴포넌트 영역 내에 View 컴포넌트를 가져다 놓더라도 Div 컴포넌트에 포함되지 않습니다.

메뉴 [File > Save As > Form Template] 항목을 선택합니다.

View 컴포넌트가 포함된 Form을 저장하는 경우에는 ViewSet Template Wizard가 실행되고, View 컴포넌트가 포함되지 않은 경우에는 Form Template Wizard가 실행됩니다.

Template Name과 Category 항목을 채우고 [Create] 버튼을 클릭합니다.

Category는 필요한 경우 추가하거나 변경할 수 있습니다. Category를 선택하지 않으면 Viewset Templates 항목 바로 아래에 ViewSet 템플릿을 표시합니다. 사용하는 ViewSet 템플릿이 많은 경우에는 Category를 생성하고 관리하는 것을 권장합니다.

기본 저장 경로는 아래와 같습니다. 메뉴[Tools > Options] 실행 후 [Project > QuickCode > Form Template]에서 프로젝트에서 관리하는 저장 경로를 변경할 수 있습니다. 설정한 경로를 기준으로 "viewset" 폴더가 생성되고 그 아래에 ViewSet 폼 템플릿 저장 경로가 생성됩니다.

C:\Users\[User Name]\Documents\TOBESOFT\Nexacro N\templates\user\formTemplate\viewset\[Category Name]\[Template Name]
C:\Users\[User Name]\Documents\TOBESOFT\Nexacro N\templates\user\formTemplate\viewset\[Template Name]

ViewSet 템플릿으로 새로운 Form 만들기

Viewset Templates 항목은 프로젝트 TypeDefinition > Objects 목록에 View 컴포넌트가 추가된 경우에만 표시됩니다.

메뉴 [File > New > Form] 항목을 선택합니다.

Form Wizard 화면에서 Viewset Templates 항목 아래에서 ViewSet 템플릿을 선택합니다. 선택한 ViewSet 템플릿이 어떤 구성인지 미리 확인해볼 수 있습니다.

Category를 설정한 경우에는 해당 Category 폴더 아래에서 ViewSet 템플릿을 확인할 수 있습니다.

Name을 입력하고 Location을 선택한 후 [Finish] 버튼을 클릭하면 선택한 ViewSet 템플릿으로 새로운 Form을 만듭니다.