개발 환경 설정하기
미리 만든 ViewSet 템플릿, View 템플릿, Model, Action을 가지고 화면을 구성하는 방법을 살펴봅니다. 만들어진 프로젝트를 받아서 사용하는 경우에는 새로운 프로젝트에서 시작하기 단계는 건너뛰고 ViewSet 템플릿 파일 가져오기 단계부터 진행합니다.
단계 | 설명 |
|---|---|
Model 파일 | model Type 서비스를 추가하고 xmodel 파일을 Import 합니다. [프로젝트 경로]\[Model Service PrefixID] |
Action | xmodule 파일을 설치합니다. [프로젝트 경로]\_extlib_ |
ViewSet 템플릿 | ViewSet 템플릿 파일을 디렉터리 구조에 맞게 지정된 경로에 복사합니다.
|
View 템플릿 | View 템플릿 파일을 복사합니다.
|
새로운 프로젝트에 xpackage 파일 import 해서 시작하기
xpackage 파일을 사용하면 아래 작업을 한 번에 처리할 수 있습니다.
서비스 추가하고 폴더 생성하기 (SvcModelSample, Sample)
모델 가져오기 (SvcModelSample.xmodel)
View 템플릿 가져오기 (viewSampleForm.xviewgen, viewSampleGrid.xviewgen)
ViewSet 템플릿 가져오기 (vieTemplateSample.xtemplate)
sample XML 파일 생성하기 (sample.xml)
아래 단계는 직접 설정해주어야 합니다.
TypeDefinition에서 nexacro.View 컴포넌트 추가하기
Action 모듈 설치하기
Easy UI 패널 표시하기
1
아래 링크에서 xpackage 파일을 내려받습니다.
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) 파일을 준비합니다.
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) 파일을 준비합니다.
6
파일 탐색기에서 가져올 xmodel 파일을 선택합니다.
7
Model이 추가된 것을 확인합니다. Model 항목을 더블클릭하면 정보를 확인할 수 있습니다.
8
Action 모듈 설치 파일(SampleActions.xmodule) 파일을 준비합니다.
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 경로 아래로 이동합니다.
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 파일을 내려받을 수 있습니다.
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] 버튼을 클릭합니다.
Model과 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 컴포넌트에 표시됩니다.
Action 사용해서 데이터 조회 기능 추가하기
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 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 컴포넌트에 표시되는 정보도 같이 변경되는지 확인합니다.
데이터 조회 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 condition으로 추가할 수 있는 항목에 대한 설명은 아래 링크를 참고하세요.
4
이벤트 발생 시 넘겨지는 필드 정보는 사용하지 않습니다. 다음 단계로 넘어가지 않고 [Finish] 버튼을 클릭해서 Action을 추가합니다.
Invisible Object 영역에 Action이 추가된 것을 확인할 수 있습니다.
데이터 조회 Action 속성값 변경하기
1
Invisible Object 영역에서 TestQueryAction00 항목을 더블클릭합니다.
2
alerttype 속성값을 true로 변경합니다.
화면 실행하기
1
Quick View 버튼을 클릭하고 브라우저에서 화면을 실행합니다.
2
Name 필드에 아무 값이나 입력하고 [Search] 버튼을 클릭합니다.
데이터가 조회되고 Alert 대화상자가 표시되는 것을 확인합니다.