28.Div/Tab

28.1Div/Tab 사용시 유의사항

Div/Tab 컴포넌트를 사용시 유의사항에 대해 기술합니다.

28.1.1이벤트 순서(onload)

폼에 Div나 Tab컴포넌트가 존재할 경우 onload 이벤트 발생순서는
Div, Tab에 연결된 폼의 onload가 먼저 발생하며, 메인폼 즉 Div, Tab페이지를 포함한 폼의
onload순서로 이벤트가 발생됩니다.

접근방법

Tab 컴포넌트 preload속성

preload 속성값을 true로 설정하는 경우 연결된 Tabpage가 많을 경우 시스템 부하를 줄 수 있으므로 유의하여 사용하여야 합니다.

28.1.2Div/Tab컴포넌트에 동적으로 폼 연결

스크립트상에서 동적으로 페이지를 지정할 경우에는 연결되는 폼에 대한 접근시점에 유의해야 합니다.

Div 컴포넌트 url설정

this.Div00.set_url("Base::SubDiv.xfdl");
this.Div00.fn_search();

Div에 url연결->연결된 폼의 onload이벤트에서 부모 폼의 함수 접근->부모 폼에서 Div에 연결된 폼에 접근

Div의 속성 중 async를 false로 지정하는 경우 url변경된 직후에 child에 접근할 수 있습니다.

Div의 child에서 url을 변경하는 경우에는 반드시 async속성이 true로 설정이 되어야 프로그램 비정상 종료되지 않습니다.

Tab 컴포넌트 url설정

this.Tab00.tabpage1.set_url("Base::SubTabpage.xfdl");
this.Tab00.tabpage1.fn_search();

tabpage에 url연결->연결된 폼의 onload이벤트에서 부모 폼의 함수 접근->부모 폼에서 tabpage에 연결된 폼에 접근

tabpage의 속성 중 async를 false로 지정하는 경우 url변경된 직후에 child에 접근할 수 있습니다.

tabpage의 child에서 url을 변경하는 경우에는 반드시 async속성이 true로 설정이 되어야 프로그램 비정상 종료되지 않습니다.

28.1.3Div/Tab 컴포넌트에 연결된 폼 접근방법

폼에서 Div/Tab 컴포넌트에 연결된 하위 폼에 접근하기

this.Div00.Edit00.text;
this.Tab00.tabpage1.Edit00.text;
위와 같이 폼(this)를 기준으로 접근이 가능합니다. 
Div나 Tab이 중첩되어 있는 경우에는 depth에 따라 접근을 해야 합니다.
ex)
this.Div00.Div01.Tab00.tabpage1.Edit00.text

Div/Tab에 연결된 하위 폼에서 부모 폼을 접근하는 방법

parent속성을 이용하여 부모 폼 즉 상위로 접근이 가능합니다.
//Div에 연결된 폼 : 
trace(this.parent); //Div가 속한 부모 폼
//Tagpage연결된 폼 : 
trace(this.parent); //tabpage가 속한 Tab
trace(this.parent.parent) //Tab이 속한 부모 폼

28.2Div

하나의 화면에 여러 개의 부분화면을 구성하거나 컴포넌트를 그룹 관리하는 Div컴포넌트를
이용하여 기능을 구현하는 방법을 제시합니다.

28.2.1Div에 url 속성으로 화면 연결시 매개변수 넘기기

Div컴포넌트 url 속성을 이용하여 화면을 연결할 경우, parent 속성을 이용하여 연결된 화면에서 매개변수를 사용하는 방법에 대해 설명합니다.

그림 28-1Div_SendParameter_0

주요 소스 내용

Div Main 페이지

/*
 * File Name   : Div_SendParameter
 * Description : Div에서 url로 화면 link시 Parameter넘기기
 */
this.fv_param = "";
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.fv_param = this.edt_input0.text; 
}

Div url링크 페이지

/*
 * File Name   : Div_SendParameter_Sub
 * Description : Div에서 url로 화면 link할때 Parameter넘기기
 */
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.alert(this.parent.fv_param); 
}

Div에 연결되는 url 페이지는 반드시 화면에 load가 되어야 값 참조가 가능합니다.

Div, 매개변수, parent

소스 위치

Sample\Div\np_Div_SendParameter.xfdl, Sample\Div\np_Div_SendParameter_Sub.xfdl

28.3Tab

Tab은 좁은 화면에 많은 수의 입출력 컴포넌트의 배치될 필요가 있을 때 사용하는 컴포넌트로 이와 관련된 기능처리 방법을 제시합니다.

28.3.1MultiLine

탭 버튼이 컴포넌트 크기를 초과하는 경우 여러 줄에 표시할지 여부를 지정하는 속성입니다

그림 28-2Tabpage_multine_1

Properties를 이용한 설정방법

Tab컴포넌트의 속성 중 multiline속성을 변경하여 Tab의 표현방법을 변경할 수 있습니다.

그림 28-3Tabpage_multine_3

그림 28-4Tabpage_multine_0

Script를 이용한 속성변경

this.Radio00_onitemchanged = function (obj:Radio, e:ItemChangeEventInfo)
{
 if (this.Radio00.value == 'Single') 
 {
  this.Tab00.set_multiline(false);
 }
 else 
 {
  this.Tab00.set_multiline(true);
 }
}

TabPage를 Multiline 형태로 표현할 수 있나요?

소스 위치

Sample\TabPage\np_TabPage_Multiline.xfdl

28.3.2Position

Tab의 속성 중 tabposition과 multiline속성을 이용하여 TabPage의 위치를 설정할 수 있습니다.

그림 28-5Tabpage_position_0

Properties를 이용한 설정방법

그림 28-6Tabpage_position_2

그림 28-7Tabpage_position_1

Script를 이용한 설정방법

this.Radio00_onitemchanged = function (obj:Radio, e:ItemChangeEventInfo)
{
 this.Tab00.set_tabposition(e.postvalue);
}
this.Radio01_onitemchanged = function (obj:Radio, e:ItemChangeEventInfo)
{
 if (obj.value == 'Single') 
 {
  this.Tab00.set_multiline(false);
 }
 else 
 {
  this.Tab00.set_multiline(true);
 }
}

TabPage의 Title을 상/하/좌/우 이동이 가능합니까?

소스 위치

Sample\TabPage\np_TabPage_Position.xfdl

28.3.3TagPage Index 변경

TabPage의 내용이 많은 경우 마우스를 이용하여 TabPage를 선택할 수 있습니다. 
또한 Script를 통해서도 선택이 가능합니다.

Properties를 이용한 설정방법

그림 28-8Tabpage_tabindex_2

Script를 이용한 Index변경

그림 28-9Tabpage_tabindex_0

this.Button00_onclick = function (obj:Button, e:ClickEventInfo)
{
 this.Tab00.set_tabindex(this.Spin00.value);
}

TabPage의 index는 0부터 시작합니다.

Script를 통해서 Tabpage의 Index를 변경할 수 있습니까?

소스 위치

Sample\TabPage\np_TagPage_TabIndex.xfdl