24.Easy UI 코어

Edit

이번 장 또는 절에서 설명하는 기능은 넥사크로플랫폼 17.1.2.100 버전에서 추가된 기능입니다.

Easy UI 코어 기능으로 제공하는 Model, View 템플릿, Action을 만들고 이를 사용해 정보를 조회하고 변경하는 UI 기능을 만들 수 있습니다.

데이터(Model)와 코드 자동 생성 템플릿(View 템플릿)을 기준으로 컴포넌트를 배치하거나 Dataset 오브젝트를 구성한 코드를 생성하고 화면과 실행 스크립트(Action)를 연결해 사용자의 입력 동작이나 특정 조건에서 이벤트가 발생하도록 합니다.

이번 장에서는 먼저 기능 설명을 위해 간단한 화면을 구성합니다. 상단에 검색 UI를 배치하고, 가운데 Grid 컴포넌트를 사용한 결과 목록, 하단에는 Grid 컴포넌트 클릭 시 상세 정보가 표시되도록 합니다. 미리 만들어진 Model, View 템플릿, Action을 사용하는 방법을 설명합니다.

그리고 화면 구성 시 사용한 Model, View 템플릿, Action을 만드는 방법을 살펴봅니다.

24.1Easy UI Tutorial Wizard

Easy UI Tutorial Wizard는 Easy UI를 사용해 화면을 구성하는 방법을 간략하게 살펴보고 필요한 개발 환경을 설정하고 샘플 파일을 설치합니다.

24.1.1Easy UI Tutorial Wizard 실행하기

프로젝트 생성 시 [Use 'Easy UI' > Start Tutorial]를 선택하거나 프로젝트를 연 상태에서 메뉴[Easy UI > Let's Try Easy UI] 선택 시 Easy UI Tutorial Wizard를 실행합니다.

프로젝트 생성 마법사에서 실행에서 Use 'Easy UI' 선택하기

Easy UI 단계에서 [Use 'Easy UI' > Start Tutorial] 항목을 선택하고 [Finish] 버튼을 클릭하면 Easy UI Tutorial Wizard를 실행합니다.

Easy UI Tutorial Wizard 실행 중 [Cancel] 버튼을 클릭하면 Easy UI 설정 없이 프로젝트를 생성합니다.

메뉴에서 Let's Try Easy UI 항목 선택하기

메뉴[Easy UI > Let's Try Easy UI] 선택 시 Easy UI Tutorial Wizard를 실행합니다. 현재 열려있는 프로젝트에 개발 환경을 설정하고 샘플 파일을 설치합니다.

24.1.2Easy UI Tutorial Wizard 실행 화면

Easy UI Tutorial Wizard는 설정값을 입력하는 화면은 없으며 간단한 기능 소개 화면으로만 구성되어 있습니다. [Next] 또는 [Prev] 버튼을 클릭해 내용을 탐색할 수 있습니다.


설명

1

기능 소개 내용을 확인하고 마지막 소개 단계에서 [Finish] 버튼이 활성화됩니다.

[Finish] 버튼을 클릭하면 개발 환경을 설정하고 샘플 파일을 설치합니다.

2

실행 중 [Cancel] 버튼을 클릭하면 Wizard 실행을 종료합니다.

24.1.3Easy UI Tutorial Wizard 실행 결과

Easy UI Tutorial Wizard를 실행하고 [Finish] 버튼을 클릭하면 프로젝트에 아래와 같은 결과가 반영됩니다.

EasyUITutorialForm.xfdl

Easy UI Tutorial Wizard 실행 결과로 생성되는 파일이며 QuickView 실행 후 [Search] 버튼 클릭 시 데이터를 조회할 수 있습니다.

전체 화면은 2개의 View로 구성되어 있습니다. Easy Design Mode를 활성화하고 각각의 View 오른쪽 아래쪽에 보이는 [i] 버튼을 클릭하면 View 정보를 확인할 수 있습니다.

24.2Model, View 템플릿, Action을 사용한 화면 구성하기

미리 만든 ViewSet 템플릿, View 템플릿, Model, Action을 가지고 화면을 구성하는 방법을 살펴봅니다.

24.2.1개발 환경 설정하기

미리 만든 ViewSet 템플릿, View 템플릿, Model, Action을 가지고 화면을 구성하는 방법을 살펴봅니다. 만들어진 프로젝트를 받아서 사용하는 경우에는 새로운 프로젝트에서 시작하기 단계는 건너뛰고 ViewSet 템플릿 파일 가져오기 단계부터 진행합니다.

단계

설명

새로운 프로젝트에서 시작하기

Model 파일

model Type 서비스를 추가하고 xmodel 파일을 Import 합니다.

SvcModelSample.xmodel

[프로젝트 경로]\[Model Service PrefixID]

Action

xmodule 파일을 설치합니다.

SampleActions.xmodule

[프로젝트 경로]\_extlib_

ViewSet 템플릿 파일 가져오기

ViewSet 템플릿

ViewSet 템플릿 파일을 디렉터리 구조에 맞게 지정된 경로에 복사합니다.

sample.zip

  • sample

    • viewTemplateSample

      viewTemplateSample.xtemplate

C:\Users\[User]\Documents\nexacro\17.1\templates\user\formTemplate\viewset

View 템플릿 파일 가져오기

View 템플릿

View 템플릿 파일을 복사합니다.

viewSampleForm.xviewgen

viewSampleGrid.xviewgen

C:\Users\[User]\Documents\nexacro\17.1\templates\user\viewtemplate

새로운 프로젝트에 xpackage 파일 import 해서 시작하기

xpackage 파일을 사용하면 아래 작업을 한 번에 처리할 수 있습니다.

아래 단계는 직접 설정해주어야 합니다.

1

아래 링크에서 xpackage 파일을 내려받습니다.

아래 링크에서 xmodel 파일을 내려받을 수 있습니다.

ImportSample.xpackage

xpackage 만들기는 아래 링크를 참고하세요.

Export

2

메뉴 [File > Import]를 선택하고 Import Wizard를 실행합니다.

3

Package File 항목에 내려받은 xpackage 파일을 선택해 입력합니다.

4

FileList에서 선택할 수 있는 항목을 모두 선택하고 [Import] 버튼을 클릭합니다.

기존에 있는 항목과 같은 파일인 경우에는 overwrite로 표시됩니다. Preview 화면 위에 있는 옵션을 선택해서 다른 이름으로 변경해 추가할 수 있습니다.

5

Project Explorer에서 TypeDefinition > Objects 항목을 선택하고 nexacro.View 컴포넌트를 추가합니다.

6

Easy UI 패널이 표시되지 않은 상태라면 메뉴 [Easy UI > View > Easy UI]를 선택하고 Easy UI 패널을 표시합니다.

7

Action 모듈 설치 파일(SampleActions.xmodule) 파일을 준비합니다.

아래 링크에서 xmodule 파일을 내려받을 수 있습니다.

SampleActions.xmodule

Action 만들기는 아래 링크를 참고하세요.

Action 만들기

8

메뉴 [File > Install Module]을 선택하고 Install Module Wizard를 실행합니다.

9

Install Type은 "Module Package"를 체크하고 가져올 xmodule 파일을 선택합니다.

10

모듈에 포함된 Action 정보를 확인하고 [Install] 버튼을 클릭합니다.

모듈을 설치하면 프로젝트를 새로고침합니다.

11

Easy UI 패널에서 Action 탭을 선택하고 설치한 Action 모듈이 등록되었는지 확인합니다.

12

새로운 Form 만들기에서 계속 작업을 진행합니다.

새로운 프로젝트에서 시작하기

1

Project Explorer에서 TypeDefinition > Objects 항목을 선택하고 nexacro.View 컴포넌트를 추가합니다.

2

Project Explorer에서 TypeDefinition > Services 항목을 선택하고 "SvcModelSample"라는 이름으로 Model 서비스를 추가합니다.

3

Easy UI 패널이 표시되지 않은 상태라면 메뉴 [Easy UI > View > Easy UI]를 선택하고 Easy UI 패널을 표시합니다.

4

Easy UI 패널에서 Model 탭을 선택하고 컨텍스트 메뉴에서 "Import" 항목을 선택합니다.

5

Model 파일(SvcModelSample.xmodel) 파일을 준비합니다.

아래 링크에서 xmodel 파일을 내려받을 수 있습니다.

SvcModelSample.xmodel

Model 만들기는 아래 링크를 참고하세요.

Model 만들기

6

파일 탐색기에서 가져올 xmodel 파일을 선택합니다.

7

Model이 추가된 것을 확인합니다. Model 항목을 더블클릭하면 정보를 확인할 수 있습니다.

8

Action 모듈 설치 파일(SampleActions.xmodule) 파일을 준비합니다.

아래 링크에서 xmodule 파일을 내려받을 수 있습니다.

SampleActions.xmodule

Action 만들기는 아래 링크를 참고하세요.

Action 만들기

9

메뉴 [File > Install Module]을 선택하고 Install Module Wizard를 실행합니다.

10

Install Type은 "Module Package"를 체크하고 가져올 xmodule 파일을 선택합니다.

11

모듈에 포함된 Action 정보를 확인하고 [Install] 버튼을 클릭합니다.

모듈을 설치하면 프로젝트를 새로고침합니다.

12

Easy UI 패널에서 Action 탭을 선택하고 설치한 Action 모듈이 등록되었는지 확인합니다.

ViewSet 템플릿 파일 가져오기

1

ViewSet 템플릿 파일을 준비합니다.

아래 링크에서 xtemplate 파일을 내려받을 수 있습니다.

압축 해제 후 폴더 전체를 복사해서 프로젝트 Viewset 경로 아래로 이동합니다.

sample.zip

Viewset 템플릿 만들기는 아래 링크를 참고하세요.

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

2

ViewSet 템플릿 파일을 해당 폴더에 복사합니다.

ViewSet 템플릿 파일이 저장되는 기본 폴더는 메뉴 [Tools > Options > Easy UI]에서 Form Template 경로 아래에 viewset 폴더에 저장됩니다.

viewset 폴더 아래에 카테고리 폴더(sample)와 ViewSet 템플릿 폴더(viewTemplateSample)를 만들고 xtemplate 파일을 복사해주어야 합니다.

_preview.xfdl.js 파일은 Form을 신규로 만들때 ViewSet 템플릿 파일을 선택하면 자동으로 생성되는 미리보기 파일입니다. ViewSet 템플릿 파일을 복사할 때 같이 가져와도 괜찮습니다.

View 템플릿 파일 가져오기

1

View 템플릿 파일을 준비합니다.

아래 링크에서 xviewgen 파일을 내려받을 수 있습니다.

viewSampleForm.xviewgen

viewSampleGrid.xviewgen

View 템플릿 만들기는 아래 링크를 참고하세요.

View 템플릿 만들기

2

Easy UI 패널에서 View Template 탭을 열고 상단 메뉴 버튼을 클릭하고 [Open Containing Folder] 항목을 선택하면 해당 폴더를 열어줍니다.

ViewSet 템플릿 파일과 마찬가지로 저장되는 기본 폴더는 메뉴 [Tools > Options > Easy UI > View Template]에서도 확인할 수 있습니다. View Template 탭에서 Location 링크 위에 있는 Setting 버튼을 클릭하면 해당 옵션으로 바로 이동합니다.

3

View 템플릿 파일을 해당 폴더에 복사합니다.

4

파일 복사 후 View Template 탭에서 상단 메뉴 버튼을 클릭하고 [Refresh All] 항목을 선택하면 복사한 View 템플릿 목록에 표시됩니다.

새로운 Form 만들기

1

메뉴 [File > New > Form]을 선택하고 Form Wizard를 실행합니다.

2

왼쪽 Template 목록에서 Viewset Templates 항목을 선택하고 앞에서 추가한 ViewSet 템플릿을 선택합니다.

예제에서는 View 컴포넌트의 디자인을 포함하지 않았습니다. 화면 디자인에 따라 View 컴포넌트에 border 또는 background 등 속성이 정해졌다면 테마에 추가해 반영할 수 있습니다.

3

Form 이름을 입력하고 [Finish] 버튼을 클릭합니다.

24.2.2Model과 View 템플릿으로 화면 UI 생성하기

Model을 선택하고 View 컴포넌트로 끌어다 놓으면 View 템플릿과 추가 속성을 선택합니다. 선택한 항목에 따라 화면 UI를 생성합니다.

검색 UI 생성하기

1

Easy UI 패널에서 Model을 선택하고 첫 번째 View 컴포넌트에 끌어다 놓습니다.

Model을 마우스로 드래그해서 View 컴포넌트 위로 이동하면 검은색으로 View 컴포넌트의 영역을 표시해줍니다.

2

View Generation Wizard에서 viewSampleForm을 선택합니다.

3

필드값 선택 단계에서 name 항목만 선택합니다.

4

use_triggerbutton 항목은 true 값을 선택합니다.

5

[Finish] 버튼을 클릭하면 화면이 생성됩니다.

6

생성된 View 컴포넌트 정보를 Easy Design Mode에서 확인합니다.

디자인 화면 위에 있는 [Easy Design Mode] 버튼을 클릭하면 Easy Design Mode가 활성화됩니다. View 컴포넌트 오른쪽 아래에 [i] 버튼을 클릭하면 연결된 Model 정보와 View Template 정보 등을 표시합니다.

Grid UI 생성하기

1

Easy UI 패널에서 Model을 선택하고 두 번째 View 컴포넌트에 끌어다 놓습니다.

2

View Generation Wizard에서 viewSampleGrid를 선택합니다.

3

필드값 선택 단계에서 name, company 항목 모두 선택합니다.

4

[Finish] 버튼을 클릭하면 화면이 생성됩니다.

상세 정보 UI 생성하기

1

Easy UI 패널에서 Model을 선택하고 세 번째 View 컴포넌트에 끌어다 놓습니다.

2

View Generation Wizard에서 viewSampleForm을 선택합니다.

3

필드값 선택 단계에서 name, company 항목 모두 선택합니다.

4

use_triggerbutton 항목은 false 값을 선택합니다.

5

[Finish] 버튼을 클릭하면 화면이 생성됩니다.

6

View 컴포넌트를 선택하고 속성창에서 sourceview 속성값을 두 번째 View 컴포넌트(View01)로 설정합니다.

sourceview 속성값을 변경하면 Grid 컴포넌트와 같은 Dataset에 바인딩한 상태로 변경되어 Grid 컴포넌트에서 선택한 값이 세 번째 View 컴포넌트에 표시됩니다.

24.2.3Action 사용해서 데이터 조회 기능 추가하기

Button 컴포넌트 클릭 시 Action이 동작하도록 기능을 추가합니다. 서버 연결 없이 데이터 조회 기능을 구현하기 위해 XML 파일을 만들어서 데이터를 조회합니다.

Action 연결하기

1

Easy UI 패널에서 Action 탭을 선택하고 TestQueryAction 항목을 선택합니다.

2

선택한 TestQueryAction 항목을 두 번째 View 컴포넌트에 배치된 Grid 컴포넌트에 끌어다 놓습니다.

3

Controller Wizard에서 Target 정보를 확인하고 samplefilename, alerttype 값과 Trigger 관련 정보를 입력합니다.

samplefilename은 정보를 조회할 XML 파일명을 입력합니다. 예제에서는 "sample.xml" 파일을 만들었습니다. alerttype은 데이터 조회 후 처리할 Action에게 전달할 속성인데, 여기에서는 기본값 false를 그대로 유지합니다.

Trigger는 이벤트를 추가하는 것과 비슷한 작업입니다. 예제에서는 Button 클릭 시 Action이 동작하도록 하기 위해서 type 속성값은 "Click", view는 검색 UI가 있는 "View00", object는 Button 컴포넌트인 "btn_Trigger"을 선택했습니다. type, view, object 순서대로 선택해야 다음 입력 항목에 해당하는 목록만 표시되며 목록 중에서 속성값을 선택합니다.

condition 속성은 Action이 동작하는 조건인데, 여기에서는 사용하지 않습니다.

Trigger type으로 선택할 수 있는 항목에 대한 설명은 아래 링크를 참고하세요.

Trigger type에 사용할 수 있는 항목 정보

Trigger condition으로 추가할 수 있는 항목에 대한 설명은 아래 링크를 참고하세요.

Trigger condition 예약어 및 샘플

4

Button 클릭 시 넘겨질 필드 정보를 확인합니다.

5

User defined(extra) arguments를 추가합니다.

예제에서는 넘겨진 값을 trace 메소드로 표시만 합니다.

6

[Finish] 버튼을 클릭합니다.

Invisible Object 영역에 Action이 추가된 것을 확인할 수 있습니다.

Easy UI Design 모드에서 첫 번째 View 컴포넌트를 선택하면 Controller 정보가 추가된 것을 확인할 수 있습니다.

sample XML 파일 만들기

로컬 환경에서 간단하게 테스트할 수 있도록 XML 파일을 배치합니다.

1

Project Explorer에서 TypeDefinition > Services 항목을 선택하고 "Sample"라는 이름으로 File 서비스를 추가합니다.

2

메뉴 [File > New > XML]을 선택하고 파일 이름은 "sample"로 입력합니다.

3

해당 폴더에 아래와 같은 내용으로 XML 코드를 작성합니다.

<?xml version="1.0" encoding="utf-8"?>
<Root xmlns="http://www.nexacroplatform.com/platform/dataset" ver="5000" >
     <Parameters>
          <Parameter id="ErrorCode" type="int">0</Parameter>
          <Parameter id="ErrorMsg" type="string">SUCC</Parameter>
     </Parameters>
     <Dataset id="ds_viewdataset">
          <ColumnInfo>
               <Column id="name" type="STRING" size="80"/>
               <Column id="company" type="STRING" size="80"/>
          </ColumnInfo>
          <Rows>
               <Row>
                    <Col id="name">john</Col>
                    <Col id="company">1dollar</Col>
               </Row>
               <Row>
                    <Col id="name">donald</Col>
                    <Col id="company">EBOT</Col>
               </Row>
          </Rows>
     </Dataset>
</Root>

화면 실행하기

1

Quick View 버튼을 클릭하고 브라우저에서 화면을 실행합니다.

2

Name 필드에 아무 값이나 입력하고 [Search] 버튼을 클릭합니다.

Grid 컴포넌트에서 선택한 Row 변경 시 세 번째 View 컴포넌트에 표시되는 정보도 같이 변경되는지 확인합니다.

24.2.4데이터 조회 Action 성공 시 처리되는 Action 추가하기

특정 Action에서 필요한 기능이 성공 또는 실패한 경우 연결해서 처리해야 하는 Action을 지정할 수 있습니다. 이전 단계에서 데이터 조회 성공 시 Alert 메시지를 표시하는 Action을 추가합니다.

Action 연결하기

1

Easy UI 패널에서 Action 탭을 선택하고 TestAlertAction 항목을 선택합니다.

2

선택한 TestAlertAction 항목을 화면 내 배치된 컴포넌트 중 하나로 끌어다 놓습니다.

targetview를 사용하지 않기 때문에 끌어다 놓는 대상 컴포넌트는 중요하지 않습니다.

일관성 있는 동작 방식을 유지하기 위해 Action 추가 시에는 targetobj 위에 Action 항목을 끌어다놓는 동작을 사용합니다.

3

Controller Wizard에서 message 값과 Trigger 관련 정보를 입력합니다.

message는 alert 메소드 실행 시 전달할 파라미터값입니다.

Trigger는 이벤트를 추가하는 것과 비슷한 작업입니다. 예제에서는 지정한 Action에서 onsucess 이벤트가 발생했을 때 Action이 동작하도록 하기 위해서 type 속성값을 "Action Success"로 지정합니다. view 속성값은 View 컴포넌트가 아닌 Form 오브젝트를 선택합니다. Form 오브젝트를 선택하면 object 항목에는 Action 목록만 표시됩니다.

condition 속성은 Action이 동작하는 조건인데, 데이터 조회 Action에서 alerttype 속성값이 true인 경우에만 동작하도록 조건을 설정합니다.

condition: triggerobj.alerttype == 'true'

Trigger type으로 선택할 수 있는 항목에 대한 설명은 아래 링크를 참고하세요.

Trigger type에 사용할 수 있는 항목 정보

Trigger condition으로 추가할 수 있는 항목에 대한 설명은 아래 링크를 참고하세요.

Trigger condition 예약어 및 샘플

4

이벤트 발생 시 넘겨지는 필드 정보는 사용하지 않습니다. 다음 단계로 넘어가지 않고 [Finish] 버튼을 클릭해서 Action을 추가합니다.

Invisible Object 영역에 Action이 추가된 것을 확인할 수 있습니다.

데이터 조회 Action 속성값 변경하기

1

Invisible Object 영역에서 TestQueryAction00 항목을 더블클릭합니다.

2

alerttype 속성값을 true로 변경합니다.

화면 실행하기

1

Quick View 버튼을 클릭하고 브라우저에서 화면을 실행합니다.

2

Name 필드에 아무 값이나 입력하고 [Search] 버튼을 클릭합니다.

데이터가 조회되고 Alert 대화상자가 표시되는 것을 확인합니다.

24.2.5Action에 트리거만 추가하기

앞에서 버튼 클릭 시 데이터를 조회하는 기능을 추가했는데, 버튼 클릭 뿐 아니라 Form이 로딩되는 시점에 데이터를 조회하도록 기능을 추가합니다.

Action 연결하기

1

Easy UI 패널에서 Action 탭을 선택하고 TestQueryAction 항목을 선택합니다.

2

선택한 TestQueryAction 항목을 두 번째 View 컴포넌트에 배치된 Grid 컴포넌트에 끌어다 놓습니다.

Action 사용해서 데이터 조회 기능 추가하기에서는 Controller Wizard이 바로 실행됐는데, 이미 Action 오브젝트를 추가한 상태이기 때문에 새로운 Action 오브젝트를 만들지 아니면 트리거만 추가할지 선택하게 됩니다.

3

팝업 메뉴에서 [Add Trigger] 항목을 선택합니다.

Controller Wizard 대신 Trigger Item Editor가 실행됩니다.

4

추가된 아이템 항목값을 아래와 같이 설정합니다.

Trigger Item Editor는 메뉴[Easy UI > Design > Trigger Editor]에서 확인하고 수정할 수 있습니다.

화면 실행하기

1

Quick View 버튼을 클릭하고 브라우저에서 화면을 실행합니다.

Form onload 이벤트가 발생하면서 트리거가 동작하고 데이터를 조회합니다. 버튼을 클릭하지 않아도 데이터가 조회되는 것을 확인할 수 있습니다.

다음 내용에서는 Model, View 템플릿, Action을 만드는 방법을 설명합니다.

24.3Model 만들기

Model은 화면에서 다루어야 하는 데이터를 설정합니다. Model 필드값에 따라 컴포넌트를 배치할 수 있고 Dataset 오브젝트의 컬럼으로 등록해 Grid 컴포넌트와 바인딩해서 데이터를 표현할 수 있습니다. Model은 단독으로 사용되지 않고 View 템플릿과 연결해서 사용합니다. View 컴포넌트에 Model을 연결할 때 View 템플릿을 선택하고 View 템플릿에서 작성한 로직에 따라 콘텐츠를 생성합니다.

24.3.1Model 서비스 등록하기

1

Project Exeplorer에서 [TypeDefinition> Services] 항목을 선택합니다.

2

User Service 항목에 서비스를 추가합니다. Type 항목은 "model"로 선택하고 PrefixID를 설정합니다.

24.3.2Easy UI 패널 표시하기

새로운 Model을 만들기 위해서는 Easy UI 패널을 활성화해주어야 합니다.

1

메뉴 [Easy UI > View > Easy UI] 항목을 선택합니다.

2

Easy UI 패널이 표시되면 Model 탭을 선택합니다.

3

Model 서비스 항목을 오른쪽 마우스로 클릭해 컨텍스트 메뉴를 실행하고 [Add] 항목을 선택해 Model Wizard를 실행합니다.

24.3.3Model Wizard에서 Model 만들기

Easy UI 패널에서 Model 탭을 선택하고 Model Wizard를 실행합니다. Easy UI 패널을 띄우지 않고 메뉴 [File > New > Model] 항목을 선택해도 Model Wizard를 실행할 수 있습니다.

1

Model Name을 입력합니다.

Location 항목은 앞에서 생성한 모델 서비스 항목으로 설정됩니다. Model Name 값을 입력하면 Service ID는 Model Name과 같은 값이 입력됩니다. 외부 서비스에 접근해서 데이터를 받아오는 경우에는 Service URL을 설정할 수 있습니다.

모델 서비스를 미리 등록하지 않은 경우에는 Location 항목 옆에 있는 버튼을 클릭해서 [Add New Service] 창을 실행하고 모델 서비스를 추가할 수 있습니다.

2

[Next] 버튼을 클릭하고 추가할 속성(Field Attribute) 정보를 추가합니다.

[+] 버튼을 클릭해서 직접 속성을 추가하고 설정할 수도 있으며 [Add User Attribute] 기능을 사용할 수도 있습니다. 예제에서는 [Add User Attribute] 기능을 사용합니다.

3

설정 버튼을 클릭해 [Add User Attribute] 창을 실행하고 새로운 속성을 추가합니다.

예제에서는 uselabel이라는 속성을 선택하고 추가합니다. [Target List] 항목 중 "Predefined"를 선택하고 [Attribute List] 항목에서 "uselabel"을 체크해서 [User Attribute List]에 옮깁니다.

4

[Next] 버튼을 클릭하고 [+] 버튼을 클릭해 Field List 항목을 추가합니다.

항목을 추가한 후에 Field Type 값은 수정할 수 있습니다. Field Type 값은 그 자체로 기능을 가지는 것은 아니고, View 템플릿에서 화면 구성 시 해당하는 필드값에 어떤 컴포넌트나 기능을 적용할지 참조하는 값입니다.

5

[Finish] 버튼을 클릭하고 Model을 만듭니다. 만들어진 Model은 Easy UI 패널 Model 탭에서 확인할 수 있습니다.

View Template에서 User Attribute 목록 가져오기

1

필드 정보 확인 시 [+] 버튼을 클릭하고 [Add From View Template] 항목을 선택합니다.

2

User Attribute 목록을 가져올 View Template을 선택합니다.

fn_GetFieldUserAttributeList 함수가 작성된 View Template 목록만 표시됩니다.

3

Attribute List에서 추가할 User Attribute 항목만 체크합니다.

User Attribute 항목 옆에 있는 버튼을 클릭하면 상세 정보를 확인할 수 있습니다.

4

선택한 User Attribute 항목이 추가된 것을 확인합니다.

24.3.4Model 정보 수정하기

모델 항목을 더블클릭하거나 컨텍스트 메뉴에서 [Edit] 선택 시 편집 화면으로 이동합니다.

편집 화면에서 [Edit Attribute] 버튼을 클릭하면 [Edit Field Attribute] 창으로 이동합니다.

id, serviceid, serviceurl 항목값은 속성창에서 수정할 수 있습니다.

24.4View 템플릿 만들기

24.4.1View Template Wizard에서 View 템플릿 만들기

프로젝트 생성 시 아래와 같이 샘플 View 템플릿 2개가 View 템플릿 폴더로 복사됩니다. View 템플릿 항목을 더블클릭하면 스크립트를 확인할 수 있습니다. 예제에서는 샘플 View 템플릿을 사용하지 않고 새로운 View 템플릿을 만듭니다.

1

Easy UI 메뉴에서 [Add] 항목을 선택해 View Template Wizard를 실행합니다. Easy UI 패널을 띄우지 않고 메뉴 [File > New > View Template] 항목을 선택해도 View Template Wizard를 실행할 수 있습니다.

2

Name을 입력합니다.

3

View Type을 선택하거나 입력합니다.

기본 제공되는 Type은 "FreeForm", "GridView" 2가지이며, 다른 값을 직접 입력해서 추가할 수 있습니다. 직접 추가한 View Type 값은 View Template Wizard 실행 시 목록으로 표시됩니다. 샘플과 구분할 수 있도록 View Type 항목값을 "ViewSample"로 입력합니다.

4

[Finish] 버튼을 클릭하고 View 템플릿을 만듭니다. 만들어진 View 템플릿은 Easy UI 패널 View Template 탭에서 확인할 수 있습니다.

24.4.2View 템플릿 스크립트 편집하기

View Template Wizard에서 View 템플릿을 만들거나 Easy UI 패널에서 View 템플릿 항목을 더블 클릭하면 [파일명].xviewgen이라는 파일이 편집창에서 열립니다. 해당 스크립트를 편집해서 원하는 기능을 구현할 수 있습니다.

기본적인 인터페이스 함수가 작성되어 있으며 필요한 정보를 주석으로 제공합니다.

View 템플릿에서는 2개의 함수를 만들어야 합니다. fn_GetViewAttributeList 함수는 Model 정보와 상관없이 추가로 지원하는 기능 처리 여부를 확인하기 위한 용도로 사용합니다. 예제에서는 버튼 생성 여부를 물어보고 사용자의 선택에 따라 버튼 UI를 생성합니다. fn_GetViewGenerationResult 함수는 넥사크로 스튜디오에서 사용자가 선택한 Model을 포함한 3가지 정보에 대한 화면 UI를 구성할 정보를 반환합니다.

다음 내용에서는 fn_GetViewAttributeList 함수와 fn_GetViewGenerationResult 함수에서 받는 매개변수는 어떤 형태이고 반환해야 하는 값은 어떤 형태인지 살펴보겠습니다.

24.4.3fn_GetViewGenerationResult

매개변수(fieldarray, contents, generationattr) 값을 기반으로 생성된 View contents 오브젝트를 반환하는 함수입니다. fn_GetViewGenerationResult 함수에서 사용하는 매개변수와 반환하는 값은 JSON 형식의 오브젝트를 사용합니다.

Syntax

fn_GetViewGenerationResult(fieldarray, contents, generationattr)

Parameters

매개변수

타입

설명

fieldarray

Object

Model Field 정보

contents

Object

View 정보

generationattr

Object

View Generation 속성 정보

Return

타입

설명

String

referenceinfo를 제외한 contents 형식의 오브젝트를 문자열로 반환합니다.

반환값 JSON 형식에 대한 상세 설명은 fn_GetViewGenerationResult 반환값 JSON 형식 내용을 참고해주세요.

fieldarray 매개변수 JSON 형식

선택한 Model 정보입니다. 기본적인 값은 모델 생성 시 필드값이며 "uselabel"과 같은 Attribute를 추가한 경우 같이 넘겨집니다.

{
    "modelinfo": {
        "serviceid": "mdlSample",
        "serviceurl": ""
    },
    "fieldcount": "2",
    "fields": [
        {
            "id": "name",
            "label": "Name",
            "fieldtype": "FreeText",
            "datatype": "STRING",
            "datasize": "80",
            "uselabel" : "true"
        },
        {
            "id": "company",
            "label": "Company",
            "fieldtype": "FreeText",
            "datatype": "STRING",
            "datasize": "80",
            "uselabel" : "true"
        }
    ]
}

contents 매개변수 JSON 형식

Model을 연결하려고 하는 View 컴포넌트 정보입니다. View 컴포넌트의 Border 영역을 제외하고 컴포넌트를 배치할 수 있는 실제 너비와 높이(referenceinfo)를 기준으로 컴포넌트를 배치할 수 있습니다. 실제 크기와 각 컴포넌트의 간격, 폰트 크기 등을 고려해 컴포넌트를 배치하게 됩니다.

View 컴포넌트에 이미 연결된 모델 정보가 있거나 다른 컴포넌트가 있다면 Model 정보가 추가되고 Dataset 오브젝트가 포함된 경우 Objects 정보가 추가됩니다. 그 외 View 컴포넌트에 연관된 정보가 같이 넘겨집니다.

{
    "View": {
        "tag": "View",
        "referenceinfo": {
            "realwidth": "490",
            "realheight": "90"
        },
        "attribute": {
            "id": "View00",
            "taborder": "0",
            "text": "View00",
            "viewdataset": "viewdataset",
            "left": "0",
            "top": "0",
            "width": "500",
            "height": "100",
            "border":"5px solid darkkhaki"
        },
        "Model": [],
        "Objects": [
            {}
        ],
        "Bind": [
            {}
        ],
        "InitValue": [
            {}
        ],
        "Script": {}
    }
}

generationattr 매개변수 JSON 형식

ViewAttribute 설정 정보입니다. 각 항목은 fn_GetViewAttributeList 함수에서 반환된 값이며 항목값은 Model 연결 시 View Template Attributes 단계에서 설정한 값입니다.

{
    "attributes": {
        "use_triggerbutton": "true"
    }
}

반환값 JSON 형식

View 템플릿에서 매개변수(fieldarray, contents, generationattr) 값을 기반으로 생성된 View contents 값입니다.

{
    "View": {
        "tag": "View",
        "attribute": {
            "id": "View00",
            "taborder": "0",
            "text": "View00",
            "viewdataset": "viewdataset",
            "left": "85",
            "top": "43",
            "width": "437",
            "height": "110"
        },
        "Model": [
            {
                "fieldid": "name",
                "Components": [
                    {
                        "tag": "Static",
                        "attribute": {
                            "id": "Static0",
                            "text": "Name",
                            "left": 0,
                            "top": 0,
                            "width": 60,
                            "height": 20,
                            "font": "normal bold 15pt/normal"
                        }
                    },
                    {
                        "tag": "Edit",
                        "attribute": {
                            "id": "Edit0",
                            "left": "Static0:5",
                            "top": 0,
                            "width": 100,
                            "height": 20,
                            "font": "normal bold 15pt/normal"
                        }
                    }
                ]
            },
            {
                "fieldid": "company",
                "Components": [
                    {
                        "tag": "Static",
                        "attribute": {
                            "id": "Static1",
                            "text": "Company",
                            "left": 0,
                            "top": 30,
                            "width": 60,
                            "height": 20,
                            "font": "normal bold 15pt/normal"
                        }
                    },
                    {
                        "tag": "Edit",
                        "attribute": {
                            "id": "Edit1",
                            "left": "Static1:5",
                            "top": 30,
                            "width": 100,
                            "height": 20,
                            "font": "normal bold 15pt/normal"
                        }
                    }
                ]
            },
            {
                "fieldid": "",
                "Components": [
                    {
                        "tag": "Button",
                        "attribute": {
                            "id": "btn_Trigger",
                            "right": 0,
                            "top": 0,
                            "width": 70,
                            "height": 20,
                            "text": "Search"
                        }
                    }
                ]
            }
        ],
        "Objects": [
            {
                "tag": "Objects",
                "Objects": [
                    {
                        "tag": "Dataset",
                        "attribute": {
                            "id": "viewdataset"
                        },
                        "Dataset": [
                            {
                                "tag": "ColumnInfo",
                                "ColumnInfo": [
                                    {
                                        "tag": "Column",
                                        "attribute": {
                                            "id": "name",
                                            "type": "STRING",
                                            "size": "80"
                                        }
                                    },
                                    {
                                        "tag": "Column",
                                        "attribute": {
                                            "id": "company",
                                            "type": "STRING",
                                            "size": "80"
                                        }
                                    }
                                ]
                            },
                            {
                                "tag": "Rows",
                                "Rows": [
                                    {
                                        "tag": "Row"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ],
        "Bind": [
            {
                "tag": "Bind",
                "Bind": [
                    {
                        "tag": "BindItem",
                        "attribute": {
                            "id": "item0",
                            "compid": "Edit0",
                            "propid": "value",
                            "datasetid": "viewdataset",
                            "columnid": "name"
                        }
                    },
                    {
                        "tag": "BindItem",
                        "attribute": {
                            "id": "item1",
                            "compid": "Edit1",
                            "propid": "value",
                            "datasetid": "viewdataset",
                            "columnid": "company"
                        }
                    }
                ]
            }
        ]
    }
}

24.4.4fn_GetViewAttributeList

View 생성에 필요한 속성 정보를 반환하는 함수입니다.

Syntax

fn_GetViewAttributeList()

Return

타입

설명

String

View Template Attributes 목록 오브젝트를 문자열로 반환합니다.

null 값을 반환하면 View Generation Wizard에서 추가 속성 설정을 처리하지 않습니다.

반환값 JSON 형식

{
    "attributecount": 1,
    "attributes": [
        {
            "id": "use_triggerbutton",
            "edittype": "Boolean",
            "defaultvalue": "true",
            "description": "Create a button for data inquiry (true/false)"
        }
    ]
}

edittype 값이 "Enum"인 경우에는 아래와 같이 처리할 수 있습니다.

{
    "attributecount": "1",
    "attributes": [
        {
            "id": "gridtype",
            "edittype": "Enum",
            "defaultvalue": "Single Line",
            "enumlist": [
                "Single Line",
                "Multi Line"
            ],
            "description": "Specifies the generation type of grid."
        }
    ]

24.4.5fn_GetFieldUserAttributeList

Model 생성 시 Model 필드로 추가할 User Attributes 정보를 반환하는 함수입니다.

fn_GetFieldUserAttributeList 함수를 정의하지 않은 View 템플릿은 Model 필드 추가 시 View Template List 목록에 표시되지 않습니다.

Syntax

fn_GetFieldUserAttributeList()

Return

타입

설명

String

Model 필드로 추가할 User Attributes 목록 오브젝트를 문자열로 반환합니다.

null 값을 반환하면 Attribute List를 표시하지 않습니다.

반환값 JSON 형식

{
    "attributecount": 1,
    "attributes": [
        {
            "id": "editable",
            "edittype": "Boolean",
            "defaultvalue": "true",
            "description": "Sets whether the field data can be edited."
        }
    ]
}

24.4.6View 템플릿 샘플

예제에서는 2개의 View 템플릿을 생성합니다. viewSampleForm은 Model 정보에 따라 조회 조건 UI를 생성하거나 Grid 컴포넌트에서 선택한 항목의 상세 정보를 표현하는 UI를 생성합니다. viewSampleGrid는 Model 정보에 따라 Grid 컴포넌트를 표현합니다.

아래 샘플에서는 JSON 반환값 형식을 만들기 위해 Object, Array를 사용했는데, 아래와 같이 문자열만으로도 코드를 작성할 수 있습니다.

...
var strDataset1 = "{";
strDataset1 += "\"tag\": \"Dataset\",";
strDataset1 += "\"attribute\": {\"id\": \"viewdataset\"},";
strDataset1 += "\"Dataset\": [";
strDataset1 += "{\"tag\": \"ColumnInfo\",";
strDataset1 += "\"ColumnInfo\": [";
...

샘플 코드에서는 함수 안에 모든 코드를 다 추가했지만, 반환값에 포함되는 각 객체별로 구분해서 별도의 함수를 만들고 결과값을 조합하는 방식이 좀 더 깔끔할 수 있습니다.

viewSampleForm

필드 정보에 따라 Edit 컴포넌트를 생성하고 uselabel 추가 속성이 "true"인 경우에는 Static 컴포넌트를 Edit 컴포넌트 앞에 배치합니다. fn_GetViewAttributeList 함수에서는 use_triggerbutton이라는 항목을 반환하며 Button 생성 여부를 판단합니다.

viewdataset 이라는 id로 Dataset 오브젝트를 생성하고 Edit 컴포넌트 value 속성에 바인딩합니다.

fn_GetViewGenerationResult = function (fieldarray, contents, generationattr) {
    var vResult = "";
    var json_contents = JSON.parse(contents);
    var json_fieldarray = JSON.parse(fieldarray);
    var json_generationattr = JSON.parse(generationattr);
    
    var View = new Object(); // JSON Object    
    var tempInfo;
    var tempPostion;
    
    var ModelArray = new Array();
    var ModelInfo;
    
    var ComponentArray;
    var ObjectsArray = new Array();
    var ObjectArray = new Array();
    var DatasetArray = new Array();
    var ColumnArray = new Array();
    var BindsArray = new Array();
    var BindArray = new Array();

    for (var i in json_fieldarray.fields) {
        ModelInfo = new Object();
        ComponentArray = new Array();
        ModelInfo.fieldid = json_fieldarray.fields[i].id;
        
        tempInfo = new Object();
        tempInfo.tag = "Column";
        tempInfo.attribute = new Object();
        tempInfo.attribute.id = json_fieldarray.fields[i].id;
        tempInfo.attribute.type = json_fieldarray.fields[i].datatype;
        tempInfo.attribute.size = json_fieldarray.fields[i].datasize;
        ColumnArray.push(tempInfo);
        
        if(json_fieldarray.fields[i].uselabel == "true") {
            tempInfo = new Object();
            tempInfo.tag = "Static";
            tempInfo.attribute = new Object();
            tempInfo.attribute.id = "Static"+i;
            tempInfo.attribute.text = json_fieldarray.fields[i].label;
            tempInfo.attribute.left = 0;
            tempInfo.attribute.top = i*30;
            tempInfo.attribute.width = 60;
            tempInfo.attribute.height = 20;
            tempInfo.attribute.font = "normal bold 15pt/normal";
            ComponentArray.push(tempInfo);
        }
        
        tempInfo = new Object();
        tempInfo.tag = "Edit";
        tempInfo.attribute = new Object();
        tempInfo.attribute.id = "Edit"+i;
        tempInfo.attribute.left = "Static"+i+":5";
        tempInfo.attribute.top = i*30;
        tempInfo.attribute.width = 100;
        tempInfo.attribute.height = 20;
        tempInfo.attribute.font = "normal bold 15pt/normal";
        ComponentArray.push(tempInfo);
        
        tempInfo = new Object();
        tempInfo.tag = "BindItem";
        tempInfo.attribute = new Object();
        tempInfo.attribute.id = "item"+i;
        tempInfo.attribute.compid = "Edit"+i;
        tempInfo.attribute.propid = "value";
        tempInfo.attribute.datasetid = "viewdataset";
        tempInfo.attribute.columnid = json_fieldarray.fields[i].id;
        BindArray.push(tempInfo);    
        
        ModelInfo.Components = ComponentArray;
        ModelArray.push(ModelInfo);        
    }
    tempInfo = new Object();
    tempInfo.tag = "ColumnInfo";
    tempInfo.ColumnInfo = ColumnArray;
    DatasetArray.push(tempInfo);
    
    tempInfo = new Object();
    tempInfo.tag = "Rows";
    tempInfo.Rows = new Array();

    var RowInfo = new Object();
    RowInfo.tag = "Row";
    tempInfo.Rows.push(RowInfo);
    DatasetArray.push(tempInfo);

    tempInfo = new Object();
    tempInfo.tag = "Dataset";
    tempInfo.attribute = new Object();
    tempInfo.attribute.id = "viewdataset";
    tempInfo.Dataset = DatasetArray;
    ObjectArray.push(tempInfo);
    
    tempInfo = new Object();    
    tempInfo.tag = "Objects";    
    tempInfo.Objects = ObjectArray;
    ObjectsArray.push(tempInfo);
    
    tempInfo = new Object();
    tempInfo.tag = "Bind";
    tempInfo.Bind = BindArray;
    BindsArray.push(tempInfo);
    
    if(json_generationattr.attributes.use_triggerbutton == "true") {
        ModelInfo = new Object();
        ComponentArray = new Array();
        ModelInfo.fieldid = "";
        
        tempInfo = new Object();
        tempInfo.tag = "Button";
        
        var buttonwidth = 70;
        tempInfo.attribute = new Object();
        tempInfo.attribute.id = "btn_Trigger";
        tempInfo.attribute.right = 0;
        tempInfo.attribute.top = 0;
        tempInfo.attribute.width = buttonwidth;
        tempInfo.attribute.height = 20;
        tempInfo.attribute.text = "Search"
        ComponentArray.push(tempInfo);
        ModelInfo.Components = ComponentArray;
        ModelArray.push(ModelInfo);
    }    

    tempInfo = new Object();
    tempInfo.tag = "View";
    tempInfo.attribute = json_contents.View.attribute;
    tempInfo.Model = ModelArray;
    tempInfo.Objects = ObjectsArray;
    tempInfo.Bind = BindsArray;

    View.View = tempInfo;
    var vResult = JSON.stringify(View);
    return vResult;
};

fn_GetViewAttributeList = function () {
    var attrArray = new Array();
    var attrObj = new Object();
    attrObj.id = "use_triggerbutton";
    attrObj.edittype = "Boolean";
    attrObj.defaultvalue = "true";
    attrObj.description = "Create a button for data inquiry (true/false)";
    attrArray.push(attrObj);
    
    var attr = new Object();
    attr.attributecount = attrArray.length;
    attr.attributes = attrArray;
    
    var strJson = JSON.stringify(attr);
    trace("RE : "+strJson);    
    return strJson;
};

viewSampleGrid

필드 정보에 따라 Grid 컴포넌트와 Dataset 오브젝트를 생성하고 Dataset 오브젝트는 Grid 컴포넌트와 바인딩합니다. fn_GetViewAttributeList 함수는 사용하지 않습니다.

fn_GetViewGenerationResult = function (fieldarray, contents, generationattr) {
    var vResult = "";
    var json_contents = JSON.parse(contents);
    var json_fieldarray = JSON.parse(fieldarray);
    //var json_generationattr = JSON.parse(generationattr);
    
    var View = new Object(); // JSON Object    
    var tempInfo;
    
    var ModelArray = new Array();
    var ModelInfo = new Object();
    ModelInfo.fieldid = "";

    var ComponentArray = new Array();
    var ObjectsArray = new Array();
    var ObjectArray = new Array();
    var DatasetArray = new Array();
    var ColumnArray = new Array();
    
    var GridColumnsArray = new Array();
    var GridRowsArray = new Array();
    var GridBandHeadArray = new Array();
    var GridBandBodyArray = new Array();


    for (var i in json_fieldarray.fields) {
        if(ModelInfo.fieldid != "") {
            ModelInfo.fieldid += ",";
        }
        ModelInfo.fieldid += json_fieldarray.fields[i].id;
        
        tempInfo = new Object();
        tempInfo.tag = "Column";
        tempInfo.attribute = new Object();
        tempInfo.attribute.id = json_fieldarray.fields[i].id;
        tempInfo.attribute.type = json_fieldarray.fields[i].datatype;
        tempInfo.attribute.size = json_fieldarray.fields[i].datasize;
        ColumnArray.push(tempInfo);
        
        tempInfo = new Object();
        tempInfo.tag = "Column";
        tempInfo.attribute = new Object();
        tempInfo.attribute.size = "80";
        GridColumnsArray.push(tempInfo);

        tempInfo = new Object();
        tempInfo.tag = "Cell";
        tempInfo.attribute = new Object();
        tempInfo.attribute.col = i;
        tempInfo.attribute.text = json_fieldarray.fields[i].label;
        GridBandHeadArray.push(tempInfo);        
        
        tempInfo = new Object();
        tempInfo.tag = "Cell";
        tempInfo.attribute = new Object();
        tempInfo.attribute.col = i;
        tempInfo.attribute.text = "bind:"+json_fieldarray.fields[i].id;
        tempInfo.attribute.edittype = "text";
        GridBandBodyArray.push(tempInfo);
    }
    var GridInfo = new Object();
    GridInfo.tag = "Formats";
    GridInfo.Formats = new Array();
    var formatInfo = new Object();
    formatInfo.tag = "Format";
    formatInfo.attribute = new Object();
    formatInfo.attribute.id = "default";
    formatInfo.Format = new Array();
    
    tempInfo = new Object();
    tempInfo.tag = "Columns";
    tempInfo.Columns = GridColumnsArray;
    formatInfo.Format.push(tempInfo);
    
    tempInfo = new Object();
    tempInfo.tag = "Row";
    tempInfo.attribute = new Object();
    tempInfo.attribute.band = "head";
    tempInfo.attribute.size = "24";
    GridRowsArray.push(tempInfo);
    tempInfo = new Object();
    tempInfo.tag = "Row";
    tempInfo.attribute = new Object();
    tempInfo.attribute.size = "24";
    GridRowsArray.push(tempInfo);    

    tempInfo = new Object();
    tempInfo.tag = "Rows";
    tempInfo.Columns = GridRowsArray;
    formatInfo.Format.push(tempInfo);
    
    tempInfo = new Object();
    tempInfo.tag = "Band";
    tempInfo.attribute = new Object();
    tempInfo.attribute.id = "head";
    tempInfo.Columns = GridBandHeadArray;
    formatInfo.Format.push(tempInfo);    
    
    tempInfo = new Object();
    tempInfo.tag = "Band";
    tempInfo.attribute = new Object();
    tempInfo.attribute.id = "body";    
    tempInfo.Columns = GridBandBodyArray;
    formatInfo.Format.push(tempInfo);    
    GridInfo.Formats.push(formatInfo);
    
    tempInfo = new Object();
    tempInfo.tag = "Grid";
    tempInfo.attribute = new Object();
    tempInfo.attribute.id = "Grid"+i;
    tempInfo.attribute.left = 0;
    tempInfo.attribute.top = 0;
    tempInfo.attribute.right = 0;
    tempInfo.attribute.bottom = 0;
    tempInfo.attribute.binddataset = "viewdataset";
    tempInfo.Grid = new Array();
    tempInfo.Grid.push(GridInfo);
    ComponentArray.push(tempInfo);        
        
    tempInfo = new Object();
    tempInfo.tag = "ColumnInfo";
    tempInfo.ColumnInfo = ColumnArray;
    DatasetArray.push(tempInfo);
    
    tempInfo = new Object();
    tempInfo.tag = "Rows";
    tempInfo.Rows = new Array();

    var RowInfo = new Object();
    RowInfo.tag = "Row";
    tempInfo.Rows.push(RowInfo);
    DatasetArray.push(tempInfo);

    tempInfo = new Object();
    tempInfo.tag = "Dataset";
    tempInfo.attribute = new Object();
    tempInfo.attribute.id = "viewdataset";
    tempInfo.Dataset = DatasetArray;
    ObjectArray.push(tempInfo);
    
    tempInfo = new Object();    
    tempInfo.tag = "Objects";    
    tempInfo.Objects = ObjectArray;
    ObjectsArray.push(tempInfo);
    
    ModelInfo.Components = ComponentArray;
    ModelArray.push(ModelInfo);

    tempInfo = new Object();
    tempInfo.tag = "View";
    tempInfo.attribute = json_contents.View.attribute;
    tempInfo.Model = ModelArray;
    tempInfo.Objects = ObjectsArray;

    View.View = tempInfo;
    var vResult = JSON.stringify(View);
    return vResult;
};

fn_GetViewAttributeList = function () {
    return null;
};

24.5Action 만들기

Model과 View 템플릿을 사용해 만든 화면에서 실제 동작할 기능을 설정해주는 단계입니다. Trigger로 지정한 오브젝트에 특정 이벤트가 발생하는 경우 지정한 동작을 처리합니다. 예제에서는 검색창에서 버튼을 클릭하면 Grid 컴포넌트에 데이터를 표시하도록 합니다. 데이터 조회를 위한 Action 속성값에 따라 데이터 조회가 성공했을 때 특정 속성값이면 Alert 대화상자를 표시합니다.

Action은 사용자 모듈 형태로 생성하고 넥사크로 스튜디오에 설치합니다.

넥사크로 모듈 디벨로퍼 beta에서 Invisible Object 프로젝트를 생성해서 Action 모듈을 생성할 수 있습니다.

24.5.1Action 모듈 프로젝트 생성하기

1

넥사크로 모듈 디벨로퍼 beta를 실행합니다.

넥사크로 스튜디오 설치 시 바로가기를 생성하지 않은 경우에는 설치 폴더에서 "nexacromoduledeveloper17.exe" 파일을 실행합니다.


2

메뉴 [File > New > Project]를 선택해 Project Wizard를 실행합니다.

3

Module 항목에서 Invisible Object를 선택합니다.

4

Project Name을 입력하고 [Next] 버튼을 클릭합니다.

5

Object ID를 입력합니다. Object ID는 Action 오브젝트 이름으로 설정됩니다.

예제에서는 "TestQueryAction"으로 Object ID를 입력합니다. ClassName은 Object ID를 입력하면 자동으로 채워집니다.

6

[Finish] 버튼을 클릭합니다.

프로젝트가 생성됩니다. 상세 옵션 설정은 이번 예제에서는 설정하지 않습니다. 오브젝트의 상세 속성은 프로젝트 생성 이후 언제든지 설정할 수 있습니다.

24.5.2Action 오브젝트 추가하기

프로젝트 생성 시에는 기본 오브젝트 1개가 생성되며 같은 모듈로 배포할 오브젝트는 추가해주어야 합니다.

1

메뉴 [File > New > Invisible Object]를 선택해 Invisible Object Wizard를 실행합니다.

2

Object ID를 입력합니다.

추가하는 Action 오브젝트의 이름은 "TestAlertAction"입니다.

3

[Finish] 버튼을 클릭합니다.

24.5.3Action 오브젝트 속성 편집하기

1

Project Explorer에서 TestQueryAction 오브젝트 MetaInfo 항목을 선택하고 속성창에서 아래 속성값을 수정합니다.

subgroup: Action
registration: allow
contents: true

2

contents 속성값을 true로 설정한 후 [ContentsInfo Editor] 설정창을 띄우고 "Contents Format" 속성값을 "json"으로 변경합니다.

17.1.2.300 이후 버전은 Action 오브젝트 생성 시 contents 속성값이 true로 설정됩니다.

이전 버전에서만 참고해주세요.

3

Project Explorer에서 TestAlertAction 오브젝트 MetaInfo 항목을 선택하고 같은 값으로 속성값을 수정합니다.

24.5.4Action 오브젝트 스크립트 편집하기

1

Project Explorer에서 편집할 Action 오브젝트 스크립트 파일을 더블클릭하거나 컨텍스트 메뉴에서 [Edit] 항목을 선택합니다.

2

Action 오브젝트에 맞게 스크립트 파일을 수정합니다.

Action 스크립트는 nexacro.Action을 상속받아 구현합니다. 기본적인 구조는 아래와 같으며 이벤트 발생 시 run 함수가 실행됩니다. run 함수 내에서 필요한 정보를 수집하고 처리하게 됩니다.

스크립트 내에서 필요한 정보는 Action 오브젝트 속성, 메소드를 사용해 접근할 수 있습니다.

Action 오브젝트 속성, 메소드, 이벤트

(function(nexacro) {
    "use strict";

    if (!nexacro)
        return;
    if (nexacro.TestQueryAction)
        return nexacro.TestQueryAction;

    var TestQueryAction = function(id, parent)
    {
        nexacro.Action.call(this, id, parent);
    };    
        
    var _pTestQueryAction = nexacro._createPrototype(nexacro.Action, TestQueryAction);        
    TestQueryAction.prototype = _pTestQueryAction;
    _pTestQueryAction._type_name = "TestQueryAction";
    _pTestQueryAction.uservalue = null;    
    
    _pTestQueryAction.destroy = function ()
    {
        nexacro.Action.prototype.destroy.call(this);
        this.uservalue = null;
    };

    _pTestQueryAction.set_uservalue = function (v)
    {
        if (v && this.uservalue!== v)
        {        
            this.uservalue= v;
        }
    };

    _pTestQueryAction.run = function ()
    {
    };

    nexacro.TestQueryAction = TestQueryAction;
    return TestQueryAction;
}) (nexacro);

TestQueryAction, TestAlertAction에 사용한 스크립트는 아래와 같습니다.

TestQueryAction 스크립트

trigger 발생 시(버튼 클릭 시) run 함수를 호출합니다. _getArgumentList 함수를 호출해서 매개변수로 넘겨진 Contents 정보와 viewdataset 오브젝트에 저장된 컬럼값을 합친 값을 반환받고 samplefilename에 입력된 값을 가지고 데이터 로딩을 위한 XML 파일을 확인한 후 transaction 메소드를 실행합니다. 예제에서는 XML 파일을 바로 호출하는 것이기 때문에 매개변수가 넘겨지는 값은 trace 메소드를 사용해 출력하고 사용하지는 않습니다.

TestQueryAction.js

(function(nexacro) {
    "use strict";

    if (!nexacro)
        return;
    if (nexacro.TestQueryAction)
        return nexacro.TestQueryAction;

    var TestQueryAction = function(id, parent)
    {
        nexacro.Action.call(this, id, parent);
    };    
        
    var _pTestQueryAction = nexacro._createPrototype(nexacro.Action, TestQueryAction);        
    TestQueryAction.prototype = _pTestQueryAction;
    _pTestQueryAction._type_name = "TestQueryAction";        
    
    _pTestQueryAction.samplefilename = ""; // XML file name    
    _pTestQueryAction.alerttype = false; // TestAlertAction condition
    _pTestQueryAction.targetobj = null;

    _pTestQueryAction.destroy = function ()
    {
        nexacro.Action.prototype.destroy.call(this);
        this.samplefilename = null;
        this.alerttype = null;
        this.targetobj = null;        
    };
    
    _pTestQueryAction.set_samplefilename = function (v)
    {
        if (v && this.samplefilename !== v)
        {        
            this.samplefilename = v;            
        }
    };
    
    _pTestQueryAction.set_alerttype = function (v)
    {
        if (v && this.alerttype !== v)
        {        
            this.alerttype = v;            
        }
    };    
    
    _pTestQueryAction.set_targetobj = function (v)
    {
        if (v && this.targetobj !== v)
        {
            this.targetobj = v;    
        }
    };    


    _pTestQueryAction._getArgumentList = function (strType)
    {
        var argumentlist = this.getContents(strType);
        if (!argumentlist) {
            return;
        }
        if(strType == "model")
        {
            for (var i = 0; i < argumentlist.length; i++)
            {
                var tempDataset = this.parent.lookup(argumentlist[i].viewid).getViewDataset();
                argumentlist[i].value = tempDataset.getColumn(tempDataset.rowposition, argumentlist[i].fieldid);
            }
        }
        return argumentlist;
    };

    _pTestQueryAction.run = function ()
    {
        var targetview = this.getTargetView();
        var viewdataset = targetview.viewdataset;
        var argumentlist = "";

        var modellist = this._getArgumentList ("model");
        var extralist = this._getArgumentList ("extra");
        var outdataset = viewdataset + "=ds_" + viewdataset;

        var callbackfn = "fn_callback";

        if (modellist)
        {
            for (var i = 0; modellist.length > i; i++)
            {
                if (modellist[i].value)
                {
                    argumentlist += modellist[i].name + "=" + modellist[i].value;
                    argumentlist += " ";
                }
            }
        }
        
        if (extralist)
        {
            for (var i = 0; extralist.length > i; i++)
            {
                if (extralist[i].value)
                {
                    argumentlist += extralist[i].name + "=" + extralist[i].value;
                    argumentlist += " ";
                }
            }
        }        
        
        // transaction callback function (onsuccess, onerror event)
        var targetaction = this;
        targetview.form[callbackfn] = function (strSvcID, nErrorCode, strErrorMag)
        {
            if (nErrorCode >= 0)
            {
                targetaction.error = "callback-success";
                targetaction.on_fire_onsuccess();
            }
            else
            {
                targetaction.error = "callback-error";
                targetaction.on_fire_onerror();
            }    
        }

        argumentlist += "dsname=" + viewdataset + " ";
        argumentlist.trim();
        var serviceurl = "Sample::"+this.samplefilename+".xml";
        trace("argumentlist: "+argumentlist);
        trace("outdataset: "+outdataset);
        trace("serviceurl: "+serviceurl);

        targetview.form.transaction("TEST", serviceurl, "", outdataset, argumentlist, callbackfn);
    };        
    
    nexacro.TestQueryAction = TestQueryAction;

    return TestQueryAction;
    
}) (nexacro);

TestAlertAction 스크립트

TestAlertAction 스크립트에서는 run 함수 실행 시 message 속성값을 alert 메소드 파라미터로 담아 실행하는 것이 전부입니다.

TestAlertAction.js

(function(nexacro) {
    "use strict";

    if (!nexacro)
        return;
    if (nexacro.TestAlertAction)
        return nexacro.TestAlertAction;
        
    var TestAlertAction = function(id, parent)
    {
        nexacro.Action.call(this, id, parent);
    };
        
    var _pTestAlertAction = nexacro._createPrototype(nexacro.Action, TestAlertAction);        
    TestAlertAction.prototype = _pTestAlertAction;
    _pTestAlertAction._type_name = "TestAlertAction";        
        
    _pTestAlertAction.message = "";

    _pTestAlertAction.destroy = function ()
    {
        nexacro.Action.prototype.destroy.call(this);
        
        this.message = null;
    };

    _pTestAlertAction.set_message = function (v)
    {
        this.message = v;            
    };

    _pTestAlertAction.run = function ()
    {
        alert(this.message);
    };        
    
    nexacro.TestAlertAction = TestAlertAction;

    return TestAlertAction;

}) (nexacro);

24.5.5Action 오브젝트 메타인포 속성 편집하기

Action을 모듈로 배포하고 사용하기 위해서 메타인포 파일을 생성해야 합니다.

1

Project Explorer에서 편집할 Action 오브젝트 MetaInfo 항목을 더블클릭하거나 컨텍스트 메뉴에서 [Edit] 항목을 선택합니다.

2

targetview 속성의 세부 정보를 수정합니다.

parent, targetview 속성은 nexacro.Action 기본 속성으로 Action 오브젝트 생성 시 메타인포에 기본값으로 표시됩니다. targetview 항목을 선택하고 속성창에서 정보를 수정합니다.

Group: Action
Edit Type: ViewObjList

3

[Property] 탭에서 [+] 버튼을 클릭해 Action 오브젝트의 속성을 추가합니다.

Action 스크립트 편집 시 Add 메뉴를 사용해 속성을 추가하면 메타인포에도 정보가 추가되지만 스크립트를 직접 편집한 경우에는 메타인포 정보에 추가해주어야 합니다.

TestQueryAction 오브젝트는 아래와 같이 3개의 속성을 추가합니다.

Name: targetobj
Group: Action
Edit Type: ViewChildObjList

Name: samplefilename
Group: Misc.
Edit Type: String

Name: alerttype
Group: Misc.
Edit Type: Boolean
Default Value: false

TestAlertAction 오브젝트는 아래와 같이 1개의 속성을 추가합니다.

Name: message
Group: Misc. 
Edit Type: String

TestAlertAction 오브젝트에서는 targetview 속성을 사용하지 않습니다. 해당 속성 선택 후 Unused 항목을 true로 변경합니다.

메타인포 파일에서 설정한 내용은 Action 연결 시 Controller Wizard에서 아래와 같이 처리됩니다.

group

Controller Wizard에서 보이는 그룹명을 지정할 수 있습니다. 사용자가 쉽게 속성을 인식할 수 있도록 보조적으로 제공하는 정보입니다.

edittype

ObjectInfo 태그에서는 edittype을 "action"으로 설정합니다.

<ObjectInfo ... edittype="action" ...

각 속성 설정 시 edittype을 지정하면 사용자 입력값 형식을 설정할 수 있습니다. 텍스트로 값을 입력하지 않고 목록에서 선택할 수 있도록 기능도 지원합니다. Action에서 사용할 수 있는 edittype은 아래와 같습니다.

edittype

설명

String

문자열을 입력합니다.

Number

숫자를 입력합니다.

Boolean

true, false 값을 선택합니다.

ModelServiceID

Model 목록을 제공합니다.

ViewObjList

현재 Form에서 사용할 수 있는 View 컴포넌트 목록을 제공합니다. refreshinfo 항목을 같이 설정하면 선택한 목록 변경 시 하위 항목에 영향을 미칩니다.

ViewChildObjList

ViewObjList에서 선택한 View 컴포넌트에 포함된 컴포넌트 또는 오브젝트 목록을 제공합니다.

24.5.6Action 오브젝트 메타인포 RefreshInfo 추가하고 적용하기

2가지 속성이 서로 연결되어 있어서 하나의 속성값을 변경했을때 다른 속성값이 변경되어야 한다면 RefreshInfo 정보로 등록해 관리할 수 있습니다. 예제에서는 targetview 속성값 변경 시 targetobj 목록에 바뀌게 됩니다.

1

TestQueryAction 속성 중에서 targetview 속성을 선택한 상태에서 Refresh Properties 항목을 선택하고 [+] 버튼을 클릭한 후 [New] 항목을 선택합니다.

2

[Add Refresh Information] 창이 열리면 ID를 "targetview"로 입력하고 아래에 Refresh Item 항목에 "targetobj"를 선택해 추가합니다.

Refresh Item은 Action 오브젝트의 속성 중에서 선택할 수 있습니다.

추가한 항목은 TestQueryAction 메타인포 편집창 오른쪽 편집 아이콘을 클릭하고 Edit Common Information 창 Refresh 탭에서 확인할 수 있습니다.

24.5.7Action 모듈 파일 생성하기

1

메뉴에서 [Deploy > Module Package]를 선택합니다.

2

모듈 파일을 생성할 경로를 확인하고 [Next] 버튼을 클릭합니다.

Version 등의 정보는 필요에 따라 입력합니다.

3

모듈에 포함할 대상 항목을 선택합니다.

4

[Deploy] 버튼을 클릭해 xmodule 파일을 생성합니다.

24.6참고

24.6.1Action 오브젝트 속성, 메소드, 이벤트

속성

속성명

설명

targetview

Action을 수행할 View 컴포넌트를 설정하는 속성입니다.

메소드

메소드명

설명

getContents

Action 실행 시 전달되는 contents 오브젝트 또는 key에 해당하는 value 오브젝트를 반환합니다.

Action.getContents([strKey])

- strKey 매개변수을 설정하지 않으면 contents 오브젝트를 반환합니다.

- strKey 매개변수는 "model", "extra" 중 하나를 설정할 수 있습니다.

getTargetView

targetview 속성값에 해당하는 View 컴포넌트를 반환합니다.

Action.getTargetView()

run

Action 을 수행합니다.

Action.run()

이벤트

이벤트명

설명

onsuccess

run 메소드 실행이 성공했을 때 Trigger callback 처리를 위한 event 입니다.

onsuccess(obj:nexacro.Action,e:nexacro.ActionEventInfo);

onerror

run 메소드 실행이 실패했을 때 Trigger callback 처리를 위한 event 입니다.

onerror(obj:nexacro.Action,e:nexacro.ActionEventInfo);

24.6.2Trigger type에 사용할 수 있는 항목 정보

예제에서는 Button 클릭 시 trigger가 동작하도록 "click" 항목을 선택했습니다. "click" 항목을 선택하는 것은 Button 컴포넌트의 onclick 이벤트 함수를 작성하는 것과 비슷합니다. 아래 목록은 사용할 수 있는 trigger type을 보여줍니다.

type

event

설명

Click

onclick

대상 오브젝트(컴포넌트) 마우스 클릭 동작 시 발생합니다.

Row Change

onrowposchanged

대상 View 컴포넌트의 viewdataset 오브젝트의 rowposition 변경 시 발생합니다.

View 컴포넌트 선택 시 Object 항목은 자동 선택되며 변경할 수 없습니다.

Value Change

oncolumnchanged

대상 View 컴포넌트의 viewdataset 오브젝트의 컬럼값 변경 시 발생합니다.

View 컴포넌트 선택 시 Object 항목은 자동 선택되며 변경할 수 없습니다.

Action Success

onsuccess

선택한 Action 오브젝트 실행이 성공했을 때 발생합니다.

View 항목은 Form 오브젝트를 선택하며 Object 항목은 Action 오브젝트를 선택합니다.

Action Fail

onerror

선택한 Action 오브젝트 실행이 실패했을 때 발생합니다.

View 항목은 Form 오브젝트를 선택하며 Object 항목은 Action 오브젝트를 선택합니다.

Model Load Success

onmodelloadsuccess

대상 View 컴포넌트의 viewdataset 오브젝트의 데이터 로딩 시 발생합니다.

View 컴포넌트 선택 시 Object 항목은 자동 선택되며 변경할 수 없습니다.

Model Load Fail

onmodelloadfail

대상 View 컴포넌트의 viewdataset 오브젝트의 데이터 로딩 실패 시 발생합니다 (데이터가 없는 경우도 발생합니다).

View 컴포넌트 선택 시 Object 항목은 자동 선택되며 변경할 수 없습니다.

Form init

onload

Form 오브젝트 로딩 시 발생합니다.

External Input

onextendedcommand

DeviceAdaptors 에 정의된 디바이스에서 이벤트가 전달되었을 때 발생합니다.

24.6.3Trigger condition 예약어 및 샘플

Action 연결 시 Trigger 발생 조건을 설정할 수 있습니다. 사용할 수 있는 예약어는 아래와 같습니다.

예약어

설명

triggerview

Action 설정 시 Trigger 항목의 triggerview로 설정한 오브젝트입니다.

triggerobj

Action 설정 시 Trigger 항목의 triggerobj로 설정한 오브젝트입니다.

form

Trigger가 포함된 상위 Form 오브젝트입니다.

아래와 같은 식으로 적용할 수 있습니다.

triggerview.name=='view_search' && triggerobj.name == 'btn_Trigger00_00' && form.name == 'sample_MasterDetail_V'

triggerobj의 특정 속성을 조건으로 적용할 수 있습니다. 예를 들어 Type이 "Action Success"인 경우에는 triggerobj가 Action입니다. 해당 Action이 처리될 때 속성값에 따라 다음 Action 처리 여부를 판단할 수 있습니다.

triggerobj.alerttype == 'true'

24.6.4fn_GetViewGenerationResult 반환값 JSON 형식

fn_GetViewGenerationResult 함수 호출 시 전달되는 contents 매개변수나 함수 호출 후 반환되는 값은 아래와 같은 JSON 형식으로 처리됩니다. contents 매개변수는 현재 화면의 XML 코드를 JSON으로 변환해서 전달하고 함수 호출 후 반환되는 JSON 코드는 넥사크로 스튜디오에서 XML 코드로 변환해 화면에 반영됩니다.

contents 매개변수는 넥사크로 스튜디오 내부에서 변환하지만 반환할 JSON 코드는 fn_GetViewGenerationResult 함수 내에서 형식에 따라 작성해야 합니다.

기본 형식

반환되는 JSON 코드는 View 컴포넌트 내 화면을 구성하고 Dataset 오브젝트나 바인딩 아이템 정보, 스크립트 등을 설정합니다. 기본 형식은 아래와 같습니다.

XML

JSON

<View>
    <Layouts>
        <Layout/>
    </Layouts>
    <InitValue/>
    <Objects/>
    <Bind/>
    <Script/>
</View>

{
    "View": {
        "Model": [
            {
                "fieldid": "",
                "Components": [
                    {}
                ]
            }
        ],
        "InitValue": [
            {}
        ],
        "Objects": [
            {}
        ],
        "Bind": [
            {}
        ],
        "Script": {
        }
    }
}

사용하지 않는 항목은 제외할 수 있습니다. 예를 들어 Dataset 오브젝트 하나만 가지는 구조라면 JSON 코드는 아래와 같이 처리할 수 있습니다.

{
    "View": {
        "Objects":[
            {}
        ]
    }
}

View Template은 Default 레이아웃만 지원합니다.

레이아웃을 추가한 Form에서 View Template을 사용하는 경우에는 fn_GetViewGenerationResult 함수에서 정보를 처리하지 못할 수도 있습니다.

fn_GetViewGenerationResult 함수 호출 후 생성되는 XML 파일 내에는 ModelInfo나 ViewTemplateInfo 같은 태그가 추가로 생성됩니다. 해당 영역은 연결된 Model, View Template 관련 정보를 관리하는 코드이며 임의로 수정 시에는 Model과 View 템플릿으로 화면 UI 생성 시 이전 설정 정보를 가져오지 못할 수 있습니다.

변환 규칙

fn_GetViewGenerationResult 반환값 JSON 코드가 만들어야 하는 것은 넥사크로 스튜디오에서 사용할 XML 태그입니다. 아래와 같은 규칙에 따라 각 태그와 연결되는 JSON 코드를 작성합니다.

최상위 View 컴포넌트에 배치되는 컴포넌트 Model 속성 아래 구성합니다.

View 컴포넌트에 배치되는 컴포넌트는 연결된 fieldid 정보를 같이 가지고 있습니다. 그래서 Model 속성 아래에 fieldid 속성과 Components 속성을 가지고 실제 컴포넌트는 Components 속성 아래에 구성합니다.

컴포넌트와 연결된 fieldid가 없다면 Model 속성은 하나의 JSON 오브젝트만 가지고 Components 속성 아래에 컴포넌트를 나열합니다. 연결된 fieldid가 2개 이상이라면 아래와 같이 fieldid 개수만큼 JSON 오브젝트를 가지고 XML 생성 시 ModelInfo 아래에 관련 정보를 생성합니다.

XML

JSON

<View>
    <Layouts>
        <Layout>
            <Button id="Btn01"/>
            <Button id="Btn02"/>
    </Layouts>
    <ModelInfo>
        <Components>
            <Component id="Btn01" fieldid="ID"/>
            <Component id="Btn02" fieldid="DATA"/>
        </Components>
    </ModelInfo>
</View>

{
    "View": {
        "Model": [
            {
                "fieldid": "ID",
                "Components": [
                    {
                        "tag": "Button",
                        "attribute": {
                            "id": "Btn01"
                        }
                    }
                ]
            },
            {
                "fieldid": "DATA",
                "Components": [

                    {
                        "tag": "Button",
                        "attribute": {
                            "id": "Btn02"
                        }

                    }                ]
            }        ]
    }
}

하나의 태그는 하나의 JSON 오브젝트로 구성합니다.

태그명은 JSON 오브젝트의 tag 속성으로 태그 속성은 attribute 속성으로 처리합니다.

<태그명 속성1="속성1 값" 속성2="속성2 값" 속성3="속성3 값"/>
{
  "tag": "태그명",
  "attribute": {
    "속성1": "속성1 값",
    "속성2": "속성2 값",
    "속성3": "속성3 값"
  }
}

아래와 같이 컴포넌트나 오브젝트와 상관없이 하나의 태그는 하나의 JSON 오브젝트로 처리합니다.

XML

JSON

<Dataset id="Dataset00"/>


{
    "tag":"Dataset",
    "attribute":{
        "id":"Dataset00"
    }
}
<Button id="Button00" 
    taborder="0"
    text="Button00" 
    left="209" 
    top="12" 
    width="90" 
    height="30" 
    onclick="View00_Button00_onclick"/>
{
    "tag": "Button",
    "attribute": {
        "id": "Button00",
        "taborder": "0",
        "text": "Button00",
        "left": "209",
        "top": "12",
        "width": "90",
        "height": "30",
        "onclick": "View00_Button00_onclick"
    }
}
<BindItem id="item0" 
    compid="Button00" 
    propid="text" 
    datasetid="Dataset00" 
    columnid="Column0"/>
{
    "tag": "BindItem",
    "attribute": {
        "id": "item0",
        "compid": "Button00",
        "propid": "text",
        "datasetid": "Dataset00",
        "columnid": "Column0"
    }
}

하위 태그는 상위 태그의 Tag 명과 같은 JSON 배열로 구성합니다.

하위 컴포넌트를 포함하는 컨테이너 컴포넌트 같은 경우에는 tag, attribute 속성과 같은 수준에 컴포넌트 이름과 같은 이름의 속성을 가지며 속성값은 JSON 배열로 처리합니다.

컨테이너 컴포넌트가 아니더라도 Grid 컴포넌트처럼 하위 태그 구조로 된 경우에 같은 방식으로 처리합니다.

<상위 태그명>
    <하위 태그명 속성1="속성1 값" 속성2="속성2 값" 속성3="속성3 값"/>
</상위 태그명>
{
    "tag": "상위 태그명",
    "attribute": {
    },
    "상위 태그명": [
        {
            "tag": "하위 태그명",
            "attribute": {
                "속성1": "속성1 값",
                "속성2": "속성2 값",
                "속성3": "속성3 값"
            }
        }
}

아래 예시 코드에서는 이해를 돕기 위해 컴포넌트의 일부 속성은 제외했습니다.

XML

JSON

<Div id="Div00" text="Div00">
    <Layouts>
        <Layout>
            <Button id="Button00" text="Button00"/>
        </Layout>
    </Layouts>
</Div>
{
    "tag": "Div",
    "attribute": {
        "id": "Div00"
    },
    "Div": [
        {
            "Components": [
                {
                    "tag": "Button",
                    "attribute": {
                        "id": "Button00",
                        "text": "Button00"
                    }
                }
            ]
        }
    ]
}
<Bind>
    <BindItem id="item0" compid="Button00" propid="text" datasetid="Dataset00" columnid="Column0"/>
    <BindItem id="item1" compid="Button01" propid="text" datasetid="Dataset00" columnid="Column0"/>
</Bind>
{
    "tag": "Bind",
    "Bind": [
        {
            "tag": "BindItem",
            "attribute": {
                "id": "item0",
                "compid": "Button00",
                "propid": "text",
                "datasetid": "Dataset00",
                "columnid": "Column0"
            }
        },
        {
            "tag": "BindItem",
            "attribute": {
                "id": "item1",
                "compid": "Button01",
                "propid": "text",
                "datasetid": "Dataset00",
                "columnid": "Column0"
            }
        }
    ]
}
<Dataset id="Dataset00">
    <ColumnInfo>
        <Column id="Column0" type="STRING" size="256"/>
    </ColumnInfo>
    <Rows>
        <Row/>
    </Rows>
</Dataset>
{
    "tag": "Dataset",
    "attribute": {
        "id": "Dataset00"
    },
    "Dataset": [
        {
            "tag": "ColumnInfo",
            "ColumnInfo": [
                {
                    "tag": "Column",
                    "attribute": {
                        "id": "Column0",
                        "type": "STRING",
                        "size": "256"
                    }
                }
            ]
        },
        {
            "tag": "Rows",
            "Rows": [
                {
                    "tag": "Row"
                }
            ]
        }
    ]
}

Grid 컴포넌트 같은 경우에는 화면에 표시하는 형식을 지정하기 위해 몇 단계의 하위 태그를 포함하고 있습니다.

XML

JSON

<Grid id="Grid00" binddataset="Dataset00">
    <Formats>
        <Format id="default">
            <Columns>
                <Column size="80"/>
            </Columns>
            <Rows>
                <Row size="24" band="head"/>
                <Row size="24"/>
            </Rows>
            <Band id="head">
                <Cell text="Column0"/>
            </Band>
            <Band id="body">
                <Cell text="bind:Column0"/>
            </Band>
        </Format>
    </Formats>
</Grid>
{
    "tag": "Grid",
    "attribute": {
        "id": "Grid00",
        "binddataset": "Dataset01"
    },
    "Grid": [
        {
            "tag": "Formats",
            "Formats": [
                {
                    "tag": "Format",
                    "attribute": {
                        "id": "default"
                    },
                    "Format": [
                        {
                            "tag": "Columns",
                            "Columns": [
                                {
                                    "tag": "Column",
                                    "attribute": {
                                        "size": "80"
                                    }
                                }
                            ]
                        },
                        {
                            "tag": "Rows",
                            "Rows": [
                                {
                                    "tag": "Row",
                                    "attribute": {
                                        "size": "24",
                                        "band": "head"
                                    }
                                },
                                {
                                    "tag": "Row",
                                    "attribute": {
                                        "size": "24"
                                    }
                                }
                            ]
                        },
                        {
                            "tag": "Band",
                            "attribute": {
                                "id": "head"
                            },
                            "Band": [
                                {
                                    "tag": "Cell",
                                    "attribute": {
                                        "text": "Column0"
                                    }
                                }
                            ]
                        },
                        {
                            "tag": "Band",
                            "attribute": {
                                "id": "body"
                            },
                            "Band": [
                                {
                                    "tag": "Cell",
                                    "attribute": {
                                        "text": "bind:Column0"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Grid 컴포넌트는 하위 태그가 여러 단계로 들어가 있어서 JSON 코드가 복잡해 보일 수 있지만, 변환 규칙은 같습니다. 위의 표에 있는 Grid 컴포넌트를 태그별로 분리해보면 아래와 같습니다.

XML

JSON

<Grid id="Grid00" binddataset="Dataset00">
    <Formats>
    </Formats>
</Grid>
{
    "tag": "Grid",
    "attribute": {
        "id": "Grid00",
        "binddataset": "Dataset01"
    },
    "Grid": [
        {
            "tag": "Formats"
        }
    ]
}
<Formats>
    <Format id="default">
    </Format>
</Formats>
{
    "tag": "Formats",
    "Formats": [
        {
            "tag": "Format"
        }
    ]
}
<Format id="default">
    <Columns>
    </Columns>
    <Rows>
    </Rows>
    <Band id="head">
    </Band>
</Format>
{
    "tag": "Format",
    "attribute": {
        "id": "default"
    },
    "Format": [
        {
            "tag": "Columns"
        },
        {
            "tag": "Rows"
        },
        {
            "tag": "Band",
            "attribute": {
                "id": "head"
            }
        }
    ]
}
<Columns>
    <Column size="80"/>
</Columns>
{
    "tag": "Columns",
    "Columns": [
        {
            "tag": "Column",
            "attribute": {
                "size": "80"
            }
        }
    ]
}

아래와 같이 각 태그 단위로 JSON 오브젝트 또는 JSON 오브젝트 배열을 생성하는 함수를 만들어서 사용할 수도 있습니다. Grid나 Dataset 오브젝트처럼 필드 정보를 기반으로 처리해야 하는 영역은 별도 함수로 필드 정보를 넘겨서 처리하면 코드 가독성을 높일 수 있습니다.

{
    "tag": "Dataset",
    "attribute": { "id": "viewdataset" },
    "Dataset": [
        {
            "tag": "ColumnInfo",
            "ColumnInfo": fn_GetDsColumns(oFieldArray)
        },
        {
            "tag": "Rows",
            "Rows": fn_GetDsRows(oFieldArray)
        }
    ]
}

변환 규칙 예외 (컨테이너 컴포넌트)

View Template은 Default 레이아웃만 지원합니다. 그래서 컨테이너 컴포넌트는 Layouts, Layout 태그 대신 Components 라는 속성 하나로 대응할 수 있도록 지원합니다.

XML

JSON

<Div id="Div00" text="Div00">
    <Layouts>
        <Layout>
            <Button id="Button00" text="Button00"/>
        </Layout>
    </Layouts>
</Div>
{
    "tag": "Div",
    "attribute": {
        "id": "Div00"
    },
    "Div": [
        {
            "Components": [
                {
                    "tag": "Button",
                    "attribute": {
                        "id": "Button00",
                        "text": "Button00"
                    }
                }
            ]
        }
    ]
}

아래와 같이 하나의 태그를 하나의 JSON 오브젝트로 구성하는 기본 변환 규칙을 따라갈 수도 있습니다. Components 속성 대신 Layouts, Layout 속성을 사용합니다.

XML

JSON

<Div id="Div00" text="Div00">
    <Layouts>
        <Layout>
            <Button id="Button00" text="Button00"/>
        </Layout>
    </Layouts>
</Div>
{
    "tag": "Div",
    "attribute": {
        "id": "Div00"
    },
    "Div": [
        {
            "tag": "Layouts",
            "Layouts": [
                {
                    "tag": "Layout",
                    "Layout": [
                        {
                            "tag": "Button",
                            "attribute": {
                                "id": "Button00",
                                "text": "Button00"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

이벤트 처리

이벤트는 Action을 통해서 처리할 수도 있지만 반환값에 Script 태그를 추가해서 처리할 수도 있습니다. 이런 경우에는 View 컴포넌트 내 포함된 스크립트를 호출하도록 설정해주어야 합니다.

넥사크로 스튜디오에서 이벤트 처리 시 Form 스크립트에 등록되는 것과는 다르게 View 컴포넌트의 innerform 스크립트로 처리되기 때문에 onclick 이벤트 작성 시 해당하는 View 컴포넌트의 아이디로 접근해야 합니다.

"이벤트명": {View 컴포넌트 아이디}.form.{이벤트함수명}
"onclick": "View00.form.btnAdd_onclick"
{
    "View":{
        "tag":"View",
        "attribute":{
            "id": "View00"
        },
        "Model": [
            {
                "fieldid": "",
                "Components": [
                    {
                        "tag": "Button",
                        "attribute": {
                            "id": "Button00",
                            "text": "Button00",
                            "onclick": "View00.form.btnAdd_onclick"
                        }
                    }
                ]
            }
        ],
        "Script": {
            "tag": "Script",
            "attribute": {
                "type": "xscript5.1"
            },
        "value": "this.btnAdd_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo) {}"
}