Div/Tab 사용시 유의사항

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

이벤트 순서(onload)

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

접근방법

• Div,Tab컴포넌트에서 부모 폼에 접근을 하고자 하는 경우 연결되는 폼에서는 부모 폼의 로딩 완료 시점 을 알수가 없다.

• 이 경우 부모 폼의 로딩이 끝나는 시점 (폼의 onload이벤트)에서 연결되는 Div/Tab의 폼을 접근하도록 조절해야 합니다.

Tab 컴포넌트 preload속성

• Tab컴포넌트에 연결된 Tabpage가 여러 개인 경우는 지정된 tabindex에 해당하는 페이지만 로드가 됩니다. (preload 디폴트값 false)

• 기타 나머지 Tabpage는 해당 Tabpage가 활성화 되는 경우 로딩이 됩니다.

• Tab컴포넌트에 연결된 모든 폼을 로드 하기 위해서는 preload속성을 true로 지정하면 폼이 로딩되는 시점에서 Tab컴포넌트에 연결된 모든 Tabpage의 폼이 로딩됩니다.

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

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

Div 컴포넌트 url설정

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

• 위와 같이 Div에 url을 지정 후 바로 밑에서 접근을 하게 되면 접근을 할 수가 없습니다. (Div에 폼이 로드 되는 시점차이기 발생되기 때문입니다.)

• 이 경우 Div에 연결되는 폼의 onload이벤트에서 역으로 부모 폼에 접근을 한 후 다시 Div에 접근을 하는 방식으로 구현을 해야 합니다.

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

Tab 컴포넌트 url설정

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

• 위와 같이 tabpage에 url을 지정 후 바로 밑에서 접근을 하게 되면 접근을 할 수가 없습니다. (tabpage에 폼이 로드 되는 시점차이기 발생되기 때문입니다.)

• 이 경우 tabpage에 연결되는 폼의 onload이벤트에서 역으로 부모 폼에 접근을 한 후 다시 tabpage에 접근을 하는 방식으로 구현을 해야 합니다.

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

Div/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이 속한 부모 폼

Div

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

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

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

주요 소스 내용

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); 
}

소스 위치

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

Tab

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

MultiLine

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

Properties를 이용한 설정방법

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

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);
 }
}

소스 위치

Sample\TabPage\np_TabPage_Multiline.xfdl

Position

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

• Tab에 대한 속성은 Properties를 통해 설정이 가능하며, Scrpt를 통해서도 설정이 가능합니다.

Properties를 이용한 설정방법

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);
 }
}

소스 위치

Sample\TabPage\np_TabPage_Position.xfdl

TagPage Index 변경

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

Properties를 이용한 설정방법

Script를 이용한 Index변경

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

소스 위치

Sample\TabPage\np_TagPage_TabIndex.xfdl