Model 만들기

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

TypeDefinition에서 서비스 추가하기

Model Service 항목 추가하기

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

Model Wizard에서 Model 만들기

ID 항목값을 입력하면 Name 항목값은 자동으로 채워집니다. Name 항목값은 다른 값으로 변경할 수 있습니다.

조회 조건처럼 사용자가 입력하거나 선택한 데이터를 서버에 전송하는 용도의 경우에는 "input", 조회 결과를 보여주는 용도의 경우에는 "output"을 선택합니다.

Model 설정 화면 오른쪽 끝에 있는 [+] 버튼을 클릭하고 펼쳐지는 목록(Predefined Attribute) 중에서 'uselabel' 항목을 체크합니다.

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

Model을 선택하고 컨텍스트 메뉴에서 [Copy] 항목을 선택합니다.

컨텍스트 메뉴에서 [Paste] 항목을 선택해 새로운 Model 항목을 만들고 저장합니다. 그리고 속성창에서 id, iotype, name을 수정한 후 다시 저장합니다.

User Attribute 추가하기

Predefined Attribute에 원하는 항목이 없는 경우에는 User Attribute를 추가할 수 있습니다.

View Template 코드 내에서 fn_GetFieldUserAttributeList 함수를 작성한 경우에는 설정된 User Attribute 목록을 가져올 수 있습니다.

Model Service 설정하기

Model Service 편집 상태 시 속성창에서 Service 관련 속성을 설정할 수 있습니다. ID, Name, Url 속성값을 설정합니다.

Model 정보 소스 코드 확인하기

Model 설정 화면 하단 탭을 'Source'로 변경하면 생성된 소스 코드를 보여줍니다. 소스 코드를 직접 수정하고 하단 탭을 "Items"로 변경하면 수정된 내용을 확인할 수 있습니다.

View 템플릿 만들기

View 템플릿을 만드는 2가지 방법

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

프로젝트 생성 시 'Use QuickCode' 항목을 체크하고 'Install > Sample'을 선택했다면 Tutorial에 사용하는 View 템플릿이 viewtemplate 폴더로 복사됩니다. View 템플릿 항목을 더블클릭하면 스크립트를 확인할 수 있습니다. 예제에서는 샘플 View 템플릿을 사용하지 않고 새로운 View 템플릿을 만듭니다.

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

View Template 생성 시 참고할 수 있는 예시 코드를 주석 형태로 추가하고 싶지 않다면 'Include Example' 항목값을 false로 변경합니다. true로 선택한 경우에는 아래와 같이 예시 코드가 포함된 상태로 View Tamplate이 만들어집니다.

디자인 된 View 컴포넌트로 View 템플릿 만들기

View 컴포넌트 화면을 미리 디자인한 상태에서 View 템플릿을 만들 수 있습니다. View 컴포넌트 화면을 기반으로 fn_GetViewGenerationResult 함수 내 코드가 자동 생성됩니다.

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

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

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

View 템플릿에서는 아래와 같은 함수를 구현해주어야 합니다.

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

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": "ds_company"
						},
						"Dataset": [
							{
								"tag": "ColumnInfo",
								"ColumnInfo": [
									{
										"tag": "Column",
										"attribute": {
											"id": "code",
											"type": "STRING",
											"size": "80"
										}
									},
									{
										"tag": "Column",
										"attribute": {
											"id": "data",
											"type": "STRING",
											"size": "256"
										}
									}
								]
							},
							{
								"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 생성 여부를 판단합니다.

Model에 따라 Dataset 오브젝트를 생성하고 생성된 Dataset 오브젝트는 viewdataset 속성값으로 설정됩니다. 그리고 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 = "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);		

	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를 입력하면 자동으로 채워집니다. FinalClass 속성값은 true, Contents 속성값은 false로 변경합니다.

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

Action 오브젝트 추가하기

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

추가하는 Action 오브젝트의 이름은 "TestAlertAction"입니다. FinalClass 속성값은 true, Contents 속성값은 false로 변경합니다.

Action 오브젝트 속성 편집하기

subgroup: Action
registration: allow

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 속성으로 설정된 Dataset 오브젝트에 저장된 컬럼값을 합친 값을 반환받고 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.destroy = function ()
	{
		nexacro.Action.prototype.destroy.call(this);
        this.samplefilename = null;
		this.alerttype = 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._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 오브젝트는 아래와 같이 2개의 속성을 추가합니다.

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 모듈 파일 생성하기

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