Easy UI 상세 스펙 및 참고

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

속성

속성명

설명

targetview

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

메소드

메소드명

설명

getContents

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

Action.getContents([strKey])

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

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

getTargetView

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

Action.getTargetView()

run

Action 을 수행합니다.

Action.run()

이벤트

이벤트명

설명

onsuccess

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

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

onerror

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

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

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

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

type

event

설명

Click

onclick

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

Row Change

onrowposchanged

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

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

Value Change

oncolumnchanged

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

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

Action Success

onsuccess

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

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

Action Fail

onerror

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

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

Model Load Success

onmodelloadsuccess

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

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

Model Load Fail

onmodelloadfail

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

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

Form init

onload

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

External Input

onextendedcommand

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

Trigger condition 예약어 및 샘플

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

예약어

설명

triggerview

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

triggerobj

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

form

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

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

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

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

triggerobj.alerttype == 'true'

fn_GetViewGenerationResult 반환값 JSON 형식

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

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

기본 형식

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

XML

JSON

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


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

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

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

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

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

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

변환 규칙

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

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

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

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

XML

JSON

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


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

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

                    }                ]
            }        ]
    }
}

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

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

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

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

XML

JSON

<Dataset id="Dataset00"/>



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

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

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

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

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

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

XML

JSON

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

<Bind>
    <BindItem id="item0" compid="Button00" propid="text" datasetid="Dataset00" columnid="Column0"/>
    <BindItem id="item1" compid="Button01" propid="text" datasetid="Dataset00" columnid="Column0"/>
</Bind>

{
    "tag": "Bind",
    "Bind": [
        {
            "tag": "BindItem",
            "attribute": {
                "id": "item0",
                "compid": "Button00",
                "propid": "text",
                "datasetid": "Dataset00",
                "columnid": "Column0"
            }
        },
        {
            "tag": "BindItem",
            "attribute": {
                "id": "item1",
                "compid": "Button01",
                "propid": "text",
                "datasetid": "Dataset00",
                "columnid": "Column0"
            }
        }
    ]
}

<Dataset id="Dataset00">
    <ColumnInfo>
        <Column id="Column0" type="STRING" size="256"/>
    </ColumnInfo>
    <Rows>
        <Row/>
    </Rows>
</Dataset>
{
    "tag": "Dataset",
    "attribute": {
        "id": "Dataset00"
    },
    "Dataset": [
        {
            "tag": "ColumnInfo",
            "ColumnInfo": [
                {
                    "tag": "Column",
                    "attribute": {
                        "id": "Column0",
                        "type": "STRING",
                        "size": "256"
                    }
                }
            ]
        },
        {
            "tag": "Rows",
            "Rows": [
                {
                    "tag": "Row"
                }
            ]
        }
    ]
}

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

XML

JSON

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

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

XML

JSON

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

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

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

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

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

XML

JSON

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

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

XML

JSON

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

이벤트 처리

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

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

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