기존 프로젝트에 QuickCode 개발 환경 구성하고 화면 만들기

간단한 ViewSet 템플릿, View 템플릿, Model, Action을 가지고 화면을 구성하는 방법을 살펴봅니다.

용어 설명

QuickCode에서 사용하는 용어입니다.

용어

필수

여부

설명

ViewSet 템플릿

X

Form 템플릿의 일종입니다. View 컴포넌트가 포함된 Form 템플릿을 ViewSet 템플릿이라고 합니다.

템플릿은 화면 1개만 만드는 용도가 아니라 같은 레이아웃을 가지는 화면을 빠르게 만드는 용도로 사용합니다.

ViewSet 템플릿을 적용하기 어려운 개별 화면은 ViewSet 템플릿을 사용하지 않고 직접 Form 오브젝트에 View 컴포넌트를 배치해 만들 수 있습니다.

View 템플릿

O

View 컴포넌트 내에 다른 컴포넌트를 자동으로 생성해주는 템플릿(규칙)입니다.

View 템플릿만 독립적으로 사용할 수는 없고 Model 선택 후 View 템플릿을 선택하면 Model 정보에 따라 적절한 컴포넌트가 View 컴포넌트 내에 자동으로 배치합니다.

이름은 템플릿이지만 주로 Model 정보와 View 템플릿에 작성된 코드에 따라 화면이 동적으로 다르게 만들어집니다.

Model

O

화면에서 다룰 데이터 정보를 설정합니다.

Model에서 설정한 label, fieldtype 등의 정보에 따라 View 템플릿에서 적절한 컴포넌트를 View 컴포넌트 내에 배치합니다.

Action

X

화면 로딩, 사용자 입력, 데이터 통신 등의 이벤트를 처리합니다.

View 컴포넌트 내에 화면 배치 후 Form 오브젝트 또는 생성된 컴포넌트, 오브젝트에 Action을 연결해 이벤트를 설정합니다.

개발 환경 설정하기

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

21.0.0.1700 이후 버전부터 QuickCode에서 viewdataset 속성을 처리하는 방식이 변경됐습니다.

아래 문서 설명과 첨부 파일은 21.0.0.1700 이후 버전에서만 정상적으로 동작합니다.

새로운 프로젝트 만들고 시작하기

xpackage 파일로 한 번에 필요한 항목 가져와서 시작하기

xpackage 파일은 프로젝트에서 필요한 리소스를 공유할 수 있게 만든 파일입니다. QuickCode 실습을 위한 xpackage 파일을 사용하면 아래 작업을 한 번에 처리할 수 있습니다.

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

1

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

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

ImportSample.xpackage

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

Export

2

프로젝트를 생성합니다.

3

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

4

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

5

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

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

6

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

7

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

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

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

13

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

필요한 항목 각각 가져와서 시작하기

xpackage 파일을 사용하지 않고 필요한 파일을 각각 가져와서 처리합니다.

1

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

2

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

3

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

4

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

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

ModelService.xmodel

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

Model 만들기

5

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

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

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

ViewSet 템플릿 파일 가져오기

1

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

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

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

sample.zip

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

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

2

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

ViewSet 템플릿 파일이 저장되는 기본 폴더는 메뉴 [Tools > Options > QuickCode]에서 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

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

ViewSet 템플릿 파일과 마찬가지로 저장되는 기본 폴더는 메뉴 [Tools > Options > QuickCode > 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] 버튼을 클릭합니다.

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

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

검색 UI 생성하기

1

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

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

2

사용할 필드를 선택합니다.

name 필드만 사용합니다. company 필드는 체크를 해제합니다.

3

[Next] 버튼을 클릭하고 View Template List에서 viewSampleForm을 선택합니다.

View Template을 선택하면 오른쪽 Preview 영역에 생성될 UI 이미지를 확인할 수 있습니다.

4

[Next] 버튼을 클릭하고 필드 데이터를 확인합니다.

fieldtype, datatype 값을 수정하거나 View Template에서 fn_GetFieldUserAttributeList로 제공하는 User Attribute를 설정할 수 있습니다.

5

[Next] 버튼을 클릭하고 use_triggerbutton 항목은 true 값을 선택합니다.

6

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

7

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

메뉴 [QuickCode > Design > QuickCode Design Mode] 항목을 선택하거나 툴바에서 QuickCode Design Mode 항목을 선택하면 QuickCode Design Mode가 활성화됩니다. Form 화면 오른쪽에 VIew Information 패널이 표시되고 각 View 오브젝트에 대한 정보를 표시합니다.

Grid UI 생성하기

1

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

2

사용할 필드를 선택합니다.

두 개 필드 모두 체크된 상태를 유지합니다.

3

[Next] 버튼을 클릭하고 View Template List에서 viewSampleGrid를 선택합니다.

4

[Next] 버튼을 클릭하고 필드 데이터를 확인합니다.

5

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

상세 정보 UI 생성하기

1

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

2

사용할 필드를 선택합니다.

두 개 필드 모두 체크된 상태를 유지합니다.

3

[Next] 버튼을 클릭하고 View Template List에서 viewSampleForm을 선택합니다.

4

[Next] 버튼을 클릭하고 필드 데이터를 확인합니다.

5

[Next] 버튼을 클릭하고 use_triggerbutton 항목은 false 값을 선택합니다.

6

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

Grid UI와 상세 정보 UI는 같은 Model을 선택해서 생성했기 때문에 Dataset 오브젝트를 추가로 만들지 않고 같은 Dataset 오브젝트를 사용합니다.

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

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

Action 연결하기

1

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

2

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

3

컨텍스트 메뉴가 표시되면 'Click' 항목을 선택합니다.

4

Controller 정보를 확인하고 [OK] 버튼을 클릭합니다.

View00에 배치된 btn_Trigger id를 가진 Button 컴포넌트를 클릭하면 트리거 이벤트가 발생하게 됩니다.

5

Controller Wizard에서 트리거 이벤트 발생 시 처리할 Action 정보와 기타 관련 정보를 입력합니다.

속성

설정값

설명

targetview

View01

Grid 컴포넌트가 배치된 View 컴포넌트

samplefilename

sample

정보를 조회할 XML 파일명

alerttype

false

데이터 조회 후 처리할 Action에게 전달할 속성

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

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

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

Trigger condition 예약어 및 샘플

6

[Next] 버튼을 클릭하고 트리거 이벤트 발생 시 넘겨질 필드 정보를 확인합니다.

7

[Next] 버튼을 클릭하고 User defined(extra) arguments를 추가합니다.

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

8

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

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

QuickCode Design 모드에서 첫 번째 View 컴포넌트의 버튼을 선택하면 Controller Preview 패널에 추가된 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_TEST_mdlSample_Detail">
          <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 컴포넌트에 표시되는 정보도 같이 변경되는지 확인합니다.

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

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

Action 연결하기

1

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

2

선택한 TestAlertAction 항목을 Invisible Object에 있는 TestQueryAction00 항목 위에 끌어다 놓습니다.

3

컨텍스트 메뉴가 표시되면 'Action Success' 항목을 선택합니다.

4

Controller 정보를 확인하고 condition 속성값을 입력한 후 [OK] 버튼을 클릭합니다.

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

triggerobj.alerttype == 'true'

5

Controller Wizard에서 message 값을 입력합니다.

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

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

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

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

Trigger condition 예약어 및 샘플

6

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

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

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

1

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

2

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

화면 실행하기

1

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

2

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

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

Action에 트리거만 추가하기

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

Action 연결하기

1

메뉴 [QuickCode > Design > Controller Chain Editor] 항목을 선택합니다.

2

Controller Chain Editor 오른쪽 기능 버튼 중 "Add Controller" 버튼을 클릭합니다.

3

하위 항목 중에서 "New Controller" 항목을 선택합니다.

"Add Next Controller" 항목은 Controller Chain Editor에서 Controller를 선택한 상태인 경우 활성화됩니다.

4

Trigger View, Trigger Object 목록에서 Form을 선택합니다.

5

Controller가 선택된 상태에서 컨텍스트 메뉴를 실행하고 "Add Next Controller" 항목을 선택합니다.

6

Trigger Type 항목은 "Form Init", Target Action 항목은 "TestQueryAction00"을 선택하고 [OK] 버튼을 클릭합니다.

새로운 Controller가 추가된 것을 확인합니다.

7

Controller Chain Editor 오른쪽 기능 버튼 중 "Show Perview" 버튼을 클릭합니다.

등록된 전체 Controller의 동작을 미리 확인할 수 있습니다.

화면 실행하기

1

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

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