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

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

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

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

Easy UI Tutorial Wizard

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

Easy 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를 실행합니다. 현재 열려있는 프로젝트에 개발 환경을 설정하고 샘플 파일을 설치합니다.

Easy UI Tutorial Wizard 실행 화면

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

Easy UI Tutorial Wizard 실행 결과

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

• View 컴포넌트를 사용할 수 있도록 설정하고 툴바에 표시합니다.

• model 타입의 서비스를 등록하고 3가지 모델 샘플을 등록합니다.

• 3가지 View Template을 등록합니다.

• 2가지 Action 오브젝트를 설치하고 등록합니다.

• 4가지 Viewset Template을 등록합니다.

• 그리고 sample_SingleDetail Viewset Template으로 EasyUITutorialForm.xfdl 파일을 생성합니다.

EasyUITutorialForm.xfdl

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

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

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

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

개발 환경 설정하기

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

새로운 프로젝트에 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 패널 표시하기

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

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

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

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

ViewSet 템플릿 파일 가져오기

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

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

View 템플릿 파일 가져오기

새로운 Form 만들기

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

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

검색 UI 생성하기

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

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

Grid UI 생성하기

상세 정보 UI 생성하기

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

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

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

Action 연결하기

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

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

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

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

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

sample XML 파일 만들기

로컬 환경에서 간단하게 테스트할 수 있도록 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>

화면 실행하기

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

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

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

Action 연결하기

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

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

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

condition: triggerobj.alerttype == 'true'

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

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

화면 실행하기

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

Action에 트리거만 추가하기

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

Action 연결하기

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

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

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

화면 실행하기

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

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

Model 만들기

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

Model 서비스 등록하기

Easy UI 패널 표시하기

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

Model Wizard에서 Model 만들기

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

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

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

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

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

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

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

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

Model 정보 수정하기

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

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

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

View 템플릿 만들기

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

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

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

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

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

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

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

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

fn_GetViewGenerationResult

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

Syntax

fn_GetViewGenerationResult(fieldarray, contents, generationattr)

Parameters

Return

fieldarray 매개변수 JSON 형식

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

• modelinfo

  • serviceid - Model name (Service ID)

  • serviceurl - Service URL

• fieldcount - fields count

• fields

  • id - Model Field ID

  • labeltext - Model Field Label

  • fieldtype - Model Field Field Type

  • datatype - Model Field Data Type

  • datasize - Model Field Data Size

  • uselabel - Added 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 - Border 영역을 제외한 View 컴포넌트의 너비

    • realheight - Border 영역을 제외한 View 컴포넌트의 높이

  • attribute - View 컴포넌트에 설정된 속성

    • id

    • taborder

    • text

    • viewdataset

    • left

    • top

    • width

    • height

  • Model

  • Objects

  • Bind

  • InitValue

  • Script

{
	"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

  • [attribute name] - ViewAttribute 설정값

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

반환값 JSON 형식

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

• View

  • tag - 태그 이름 (View)

  • attribute - View 컴포넌트에 설정된 속성 (수정하지 않았다면 Contents 매개변수값)

  • Model - field 별 컴포넌트 목록을 배열로 설정

    • fieldid - Grid 컴포넌트처럼 여러 필드를 참조하는 경우 콤마(,)로 구분해 입력하고, 필드 정보가 없는 컴포넌트는 빈값으로 입력합니다.

    • Components

  • InitValue

  • Objects

  • Bind

  • Script

{
	"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"
						}
					}
				]
			}
		]
	}
}

fn_GetViewAttributeList

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

Syntax

fn_GetViewAttributeList()

Return

반환값 JSON 형식

• attributecount - attributes 개수

• attributes

  • id - VIew Generation Wizard에서 View Template Attributes 항목으로 표시되는 값

  • edittype - Boolean/String/Number/Enum/ViewObjList/Layout

  • defaultvalue - edittype이 Enum인 경우 기본값

  • enumlist - edittype이 Enum인 경우 값의 배열

  • userproperties - edittype이 Layout인 경우 사용자 지정 속성 설정

  • description - VIew Generation Wizard에서 항목 선택 시 표시되는 설명

{
	"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."
        }
    ]

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

{
    "attributecount": "1",
    "attributes": [
        {
            "id": "view_layout",
            "edittype": "Layout",
			"userproperties": {
				"propertycount": "1",
				"properties": [
					{
						"id": "gap",
						"edittype": "Number",
						"defaultvalue": 5
					}
				]
			}
        }
    ]

fn_GetFieldUserAttributeList

fn_GetFieldUserAttributeList 함수는 2가지 기능을 지원합니다.

• Model 생성 시 Model 필드로 추가할 User Attributes 정보를 반환합니다.

• Model 적용 시 User Attributes 정보를 Model 필드로 추가합니다.

Model 생성 시 User Attributes 처리

Model 생성 시 [Add User Attribute] 설정에서 fn_GetFieldUserAttributeList 함수를 가진 View Template 목록을 Target List에 표시하고 View Template을 선택하면 추가할 수 있는 User Attributes 정보를 표시합니다.

Model 적용 시 User Attributes 처리

View 컴포넌트에 Model 적용 시 선택한 View Template에 fn_GetFieldUserAttributeList 함수가 있다면 User Attributes 정보를 Model 필드에 추가합니다.

Syntax

fn_GetFieldUserAttributeList()

Return

반환값 JSON 형식

• attributecount - attributes 개수

• attributes

  • id - User Attributes 항목으로 표시되는 값

  • edittype - Boolean/String/Number/Enum/ViewObjList

  • description - Model 필드 항목 선택 시 표시되는 설명

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

View 템플릿 샘플

예제에서는 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;
};

Action 만들기

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

Action 모듈 프로젝트 생성하기

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

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

Action 오브젝트 추가하기

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

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

Action 오브젝트 속성 편집하기

subgroup: Action
registration: allow
contents: true

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

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

(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 메소드를 사용해 출력하고 사용하지는 않습니다.

$r_title(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 메소드 파라미터로 담아 실행하는 것이 전부입니다.

$r_title(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);

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

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

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

Group: Action
Edit Type: ViewObjList

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은 아래와 같습니다.

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

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

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

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

Action 모듈 파일 생성하기

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

참고

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

속성

메소드

이벤트

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

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

Trigger condition 예약어 및 샘플

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

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

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'

fn_GetViewGenerationResult 반환값 JSON 형식

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

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

기본 형식

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

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

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

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

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

변환 규칙

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

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

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

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

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

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

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

<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 오브젝트로 처리합니다.

<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 값"
			}
		}
}

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

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

<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 컴포넌트를 태그별로 분리해보면 아래와 같습니다.

<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 라는 속성 하나로 대응할 수 있도록 지원합니다.

<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 속성을 사용합니다.

<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) {}"
}

View Layout Editor

View 템플릿 fn_GetViewAttributeList 함수 내에 edittype이 "Layout"인 항목을 설정한 경우 View Generation Wizard에서 View Attributes 항목 설정 시 View Layout Editor를 사용해 레이아웃 정보를 설정할 수 있습니다.

설정한 값은 fn_GetViewGenerationResult 함수에 generationattr 매개변수로 전달되어 View 화면 구성에 사용할 수 있습니다.

fn_GetViewAttributeList 함수에서 반환하는 JSON 값이 아래 같은 경우를 예로 설명합니다.

{
	"attributecount": 2,
	"attributes": [
		{
			"id": "use_triggerbutton",
			"edittype": "Boolean",
			"defaultvalue": "true"
		},
		{
			"id": "view_layout",
			"edittype": "Layout",
			"userproperties": {
				"propertycount": "1",
				"properties": [
					{
						"id": "gap",
						"edittype": "Number",
						"defaultvalue": 5
					}
				]
			}
		}			
	]
}

Form 디자인 창에서 View 컴포넌트에 Model을 연결합니다. View Generation Wizard에서 View Template을 선택하고 View Attributes 항목 설정 창에서 "Layout"으로 edittype을 설정한 항목(view_layout) 옆에 표시되는 버튼을 클릭해 VIew Layout Editor를 실행할 수 있습니다.

View Layout Editor 실행 후 첫 번째 보이는 "Create Table" 버튼을 클릭하고 레이아웃의 기본 Column, Row를 설정합니다. Column 10개, Row 8개 조합 형태까지는 바둑판 모양의 창에서 마우스 조작으로 선택할 수 있으며 그 이상 값은 "Custom" 항목 선택 후 직접 Column, Row 숫자를 입력할 수 있습니다.

Column, Row 크기는 View 컴포넌트에 꽉 차게 자동 설정됩니다. 각 Column, Row 크기는 속성창에서 변경할 수 있습니다. 빨간 점선으로 표시된 경계선은 View 컴포넌트의 크기를 표시해줍니다.

기본 테이블을 만든 후에는 "Edit Column", "Edit Row" 버튼 또는 컨텍스트 메뉴에서 Column, Row를 추가, 삽입하거나 삭제할 수 있습니다.

레이아웃 설정 후 [OK] 버튼을 클릭하면 "Layout"으로 edittype을 설정한 항목의 값이 설정됩니다.

셀 속성 설정하기

View Layout Editor에서 셀 선택 후 셀 속성을 설정할 수 있습니다.

기본으로 설정할 수 있는 속성은 아래와 같습니다.

• halign (left | center | right): 셀에 표시할 모델 필드 가로 정렬 속성

• valign (top | middle | bottom): 셀에 표시할 모델 필드 세로 정렬 속성

• direction (horizontal | vertical): 셀에 표시할 모델 필드 방향 속성

Model 설정 시 선택한 필드값을 선택했다면 셀에 적용할 필드값을 설정할 수 있습니다.

• fieldlist: 선택한 모델 필드값

fn_GetViewAttributeList 함수에서 userproperties 값을 반환했다면 User Properties 속성을 추가로 설정할 수 있습니다.

• User Properties: userproperties로 설정한 속성 정보

두 개의 모델 필드값(name, company)을 선택하고 한 개의 userproperties 값(gap)을 반환했다면 설정할 수 있는 셀 속성은 아래와 같습니다.

셀 합치기, 해제하기

Grid Editor와 비슷하게 셀 합치기, 해제하기 기능을 지원합니다. 두 개 이상의 셀을 선택하고 컨텍스트 메뉴에서 "Merget Cells" 항목을 선택해 셀을 합치거나 합쳐진 셀을 선택하고 컨텍스트 메뉴에서 "Split Cell" 항목을 선택해 합쳐진 셀을 해제할 수 있습니다.

셀 합치기 시 Column, Row 인덱스 정보는 작은 값으로 설정됩니다.

value 반환값 JSON 형식

value 반환값 JSON 형식은 아래와 같습니다. 반환값은 fn_GetViewGenerationResult 함수에 generationattr 매개변수로 전달되어 View 화면 구성에 사용할 수 있습니다.

• columnsize - Column 크기 배열

• rowsize - Row 크기 배열

• celllist - 셀 속성 배열

  • col - Column 인덱스

  • row - Row 인덱스

  • halign

  • valign

  • direction

  • User Properties

  • colspan - 가로 방향으로 셀을 합친 경우

  • rowspan - 세로 방향으로 셀을 합친 경우

  • fieldlist - 설정한 필드값 배열

{
	"columnsize":[101,101,101],
	"rowsize":[66,66],
	"celllist":[
		{
			"col":"0",
			"row":"0",
			"halign":"left",
			"valign":"top",
			"direction":"horizontal",
			"gap":"5",
			"fieldlist":["name"]
		},
		{
			"col":"0",
			"row":"1",
			"halign":"center",
			"valign":"middle",
			"direction":"vertical",
			"gap":"5",
			"colspan":"2",
			"fieldlist":["name","company"]
		}
	]
}

XML <-> JSON Converter

XML 코드를 JSON 코드로 변환하거나 JSON 코드를 XML 코드로 변환할 수 있는 기능을 지원합니다.

View 컴포넌트 정보가 View 템플릿 fn_GetViewGenerationResult 함수에 contents 매개변수로 전달되는 결과를 미리 확인하거나 fn_GetViewGenerationResult 함수에서 반환할 JSON 데이터를 만드는 용도 등으로 활용할 수 있습니다.

기능 제공 경로

XML <-> JSON Converter 기능은 여러 방식으로 접근할 수 있습니다.

• 넥사크로 스튜디오 메뉴 [EasyUI > XML<->JSON Converter]

• 컨텍스트 메뉴

  • Form 디자인 뷰, Source 창

  • Form 디자인 뷰에서 컴포넌트(invisible Object) 선택 시

  • Form Source 창에서 코드 블록 선택 시

  • View Template 코드 편집 창

  • Project Explorer에서 Form 선택 시

• 코드 편집 창 상단 버튼

  • View Template 코드 편집 시

변환할 코드 자동 선택

접근 경로에 따라 변환할 코드를 자동 선택하는 기능을 제공합니다.

• Form 디자인 뷰

  • 특정 컴포넌트(오브젝트)를 선택하지 않은 경우

    현재 Layout에 해당하는 Layout XML 코드

    선택한 Layout에 따라 해당하는 Layout XML 코드

  • 특정 컴포넌트(오브젝트)를 선택한 경우

    선택한 컴포넌트(오브젝트) XML 코드 (여러 개 선택하는 기능도 지원)

• Form 소스 뷰

  • 변환할 XML 코드 영역 선택

    선택한 코드를 변환할 코드로 처리

• View 템플릿 에디터

  • 변환할 JSON 또는 XML 코드 영역 선택

    선택한 코드를 변환할 코드로 처리

자동 선택된 코드는 Input 영역에 복사되고 가운데 변환 버튼 클릭 시 JSON 코드로 변환됩니다. 변환된 JSON 코드는 클립보드에 복사됩니다.

직접 코드 입력

Input 영역에 직접 XML 또는 JSON 코드를 입력해서 변환할 수 있습니다. 자동으로 XML 또는 JSON 코드를 인식하고 XML->JSON 또는 JSON->XML 변환을 처리합니다.

직접 입력한 코드에 오류가 있는 경우 변환 버튼 클릭 시 Output 창에 오류 메시지를 출력합니다.