Frame Tree

넥사크로플랫폼은 하나의 Form만 가지는 간단한 구조로 화면을 구성할 수 있고 여러 기능을 복합적으로 수행하는 형태의 구조로 구성할 수도 있습니다. 이런 복잡한 구조에서는 각 화면을 구성하는 요소가 서로 어떻게 연결되는지 이해하는 것이 필요합니다.

이번 장에서는 이런 연결 구조에 대한 개념을 몇 가지 예제를 통해 살펴봅니다.

Application

// application -> mainframe
this.mainframe
this.id
this.all[n]
this.all['id']

// mainframe -> application
this.mainframe.parent

// mainframe -> childframe
this.mainframe.frame
this.mainframe.all[n]
this.mainframe.all['id']
this.mainframe.id

// childframe -> mainframe
this.mainframe.frame.parent
this.mainframe.frame.getOwnerFrame()

// childframe -> form
this.mainframe.frame.form

// form -> childframe
this.parent
this.getOwnerFrame()
nexacro.getApplication().mainframe.frame

form내의 component / bind / invisible object는 .getOwnerFrame()이나 .getOwnerForm()이 없습니다.

Script 예시 화면

frame_tree_script_application

application에서 form 오브젝트 접근

// frm0로의 접근
this.mainframe.frame.form.name =="frm0"
this.mframe0.frame.form.name == "frm0"
this.mframe0.chdframe0.form.name == "frm0"
this.all[0].all[0].form.name == "frm0"
this.all["mframe0"].all["chdframe0"].form.name == "frm0"
this.mainframe.frame.form.name == "frm0"

form에서 상위 오브젝트 접근

// frm0에서 application으로 접근
this.parent.name == "chdframe0"
this.parent.parent.name == "mframe0"
this.getOwnerFrame().getOwnerFrame().name == "mframe0"
nexacro.getApplication().mainframe.name == "mframe0"

Form

하나의 Form과 Object, Bind, Component의 관계는 1:N 구조입니다. 스크립트 코드상에서는 아래와 같은 형식으로 접근할 수 있습니다.

// Form -> Object
this.all[n]
this.all['id']
this.id
this.objects[n]
this.objects['id']

// Form -> Bind
this.all[n]
this.all['id']
this.id
this.binds[n]
this.binds['id']

// Form -> Component
this.all[n]
this.all['id']
this.id
this.components[n]
this.components['id']

// Object, Bind, Component -> Bind
this.all[n].parent

Div, PopupDiv, Tabpage와 같은 컨테이너 컴포넌트는 url 속성을 지정해 Form을 연결할 수 있습니다. 이런 경우 컨테이너 컴포넌트와 Form은 1:1 구조입니다. 스크립트 상에서 Form에 연결된 Object, Bind, Component는 아래와 같은 형식으로 접근할 수 있습니다.

// Container Component -> Object
this.Div.form.all[n]
this.Div.form.all['id']
this.Div.form.id
this.Div.form.objects[n]
this.Div.form.objects['id']

// Container Component -> Bind
this.Div.form.all[n]
this.Div.form.all['id']
this.Div.form.id
this.Div.form.binds[n]
this.Div.form.binds['id']

// Container Component -> Component
this.Div.form.all[n]
this.Div.form.all['id']
this.Div.form.id
this.Div.form.components[n]
this.Div.form.components['id']

// Object, Bind, Component -> Container Component
this.Div.form.all[n].parent.parent

all, objects, binds, components 속성은 nexacro.Collection 형식으로 제공됩니다. 컬렉션 오브젝트 내 인덱스 또는 id로 접근할 수 있습니다.

all 속성으로 접근하는 컬렉션 오브젝트 내 인덱스는 다음과 같은 순서로 지정됩니다.

1. Object

2. Component

3. Bind

그리고 같은 항목 내에서는 소스 코드 내 순서에 따라 지정됩니다.

Script 예시 화면

frame_tree_script_01

인덱스 순서는 dtset1, btn0, btn1, cmb0, div0, div1, bind1으로 가정합니다.

일반적인 폼에서 인덱스 순서는 Dataset이 가장 먼저 오고 나머지 컴포넌트는 배치된 순서대로 정해지며 Bind 오브젝트가 마지막에 지정됩니다.

한 form에서 같은 level에서만 id가 중복될 수 없습니다. 즉, btn0와 div0_btn0와 div2_btn은 동일 Level이 아니므로, 같은 id로 지정하여도 무방합니다.

component / object / bind

this.name == "frm0"
// btn0으로의 접근
this.all["btn0"].name == "btn0"
this.all[1].name == "btn0"
this.btn0.name == "btn0"
this.components[0].name == "btn0"
this.components["btn0"].name == "btn0"
// dtset1으로의 접근
this.all["dtset1"].name == "dtset1"
this.all[0].name == "dtset1"
this.dtset1.name == "dtset1"
this.objects[0].name == "dtset1"
this.objects["dtset1"].name == "dtset1"
// component / invisible object / bind의 개수
this.all.length == 7
this.components.length == 5 //btn0, btn1, comb0, div0, div1
this.binds.length == 1

container component

form을 연결하지 않은 container component도 동적으로 invisible object / bind를 가질 수 있습니다.

// div0내의 div0_btn0으로의 접근
this.div0.form.div0_btn0.name == "div0_btn0"
this.div0.form.all[0].name == "div0_btn0"
this.components[3].form.components[0].name == "div0_btn0"
// div2내의 div2_btn0으로의 접근
this.div0.form.div2.form.div2_btn0.name == "div2_btn0"
this.all["div0"].form.all["div2"].form.all["div2_btn0"].name == "div2_btn0"
this.components["div0"].form.components["div2"].form.components["div2_btn0"].name == "div2_btn0"

form을 연결한 container component

// (frm1안의 script인 경우) frm1에 있는 btn0의 접근
this.parent.name == "div1"
this.btn0.name == "btn0"
this.all["btn0"].name == "btn0"
// (frm0안의 script에서 접근할 경우) frm1에 있는 btn0의 접근
this.name == "frm0"
this.div1.form.btn0.name == "btn0"

parent

this.div1.form.dtset2.parent.parent.name == "form" // frm0이 아닙니다.
this.div1.form.dtset2.parent.name == "div1"