Notes for using Div/Tab

This describes about caution for using Div/Tab

Event order (onload)

When there is Div or Tab component in form, onload event order is that onload event of  form connected to Div/Tab occurs first. 
And onload event of main form including Div/Tabpage occurs.

Way of accessing

• When we want to access parent form at Div/ Tab component,we don't know completed loading time of parent form at connected form.

• So we need to access form connected to Div/Tab at end time of parent form loading (onload event of form).

Preload property of Tab component

• In case there are several Tabpages connected to Tab component, only the page which is assigned to tabindex is loaded. (Default preload value is false)

• Remaining Tabpages will be loaded when these Tabpages are activated.

• To load all forms connected to Tab component, set preload property true. All forms of Tabpage connected to Tab component will be loaded when form is loaded.

Connecting to Div/Tab component dynamically

When you assign page dynamically using script, you need to pay attention to timing to access to form.

Setting url to Div component

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

• After assigning url to Div, you can not access immediately. (Time gap occurs when Div is loaded)

• After accessing parent form at onload event of form connected to Div, access Div.

Connect url to Div -> access at onload event of connected form to function of parent form -> access at parent form to form connected to Div

Setting url to Tab component

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

• After setting url to tabpage, it is impossible to access immediately. (Time gap occurs when form is loaded in tabpage)

• After accessing to parent form at onload event of form connected to tabpage, access to tabpage.

Connect to url of tabpage -> access function of parent form at onload event of connected form -> access form connected tabpage at parent form

Accessing way to Div/Tab component connected to form

Accessing to subform connected to Div/Tab at form

this.Div00.Edit00.text;
this.Tab00.tabpage1.Edit00.text;

We can access based on form (this) as above.
In case Div or Tab are piled up, access according to depth.

ex)
this.Div00.Div01.Tab00.tabpage1.Edit00.text

Accessing way to parent form at sub form connected to Div/Tab

We can access to parent form using parent property.

//Form connected to Div : 
trace(this.parent); //Parent form of Div   
//Form connected to Tabpage : 
trace(this.parent); //  Parent tab of tabpage 
trace(this.parent.parent) // Parent form of Tab

Div

A number of sections on the screen or the screen configuration component to component group managing Div How to implement the functionality presented.

Passing parameters to link by URL from Div

Using url property of Div component we can connect to another screen, by using parent's property we can receive passing parameters from previous screen.

Main Source Content

Div main page

/*
 * File Name   : Div_SendParameter
 * Description : Passing parameters to link by URL from Div
 */
this.fv_param = "";
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.fv_param = this.edt_input0.text; 
}

Div url Link Page

/*
 * File Name   : Div_SendParameter_Sub
 * Description : Passing parameters to link by URL from Div
 */
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.alert(this.parent.fv_param); 
}

Source Location

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

Tab

MultiLine

If total size of tab buttons exceeds from the size of the component then spin is appeared automatically.

We can set property of Tab using “properties” tab and also can change using script.

Way to set Properties

• We can choose tab representation by choosing multiline attribute of tab component.

Changing property using 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);
 }
}

Source Location

Sample\TabPage\np_TabPage_Multiline.xfdl

Position

By setting tabposition and multiline properties of Tab, we can set the location of the TabPage

We can set property of Tab using “properties” and also can change using script. 

Way to set Properties

Way to set using 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);
 }
}

Source Location

Sample\TabPage\np_TabPage_Position.xfdl

Changing Index of TabPage

If there are many tab pages, we can choose TabPage by using mouse and we can also choose TabPage by using Script.

Changing Index using by Script

Way to set Properties

Changing Index using by Script

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

Source Location

Sample\TabPage\np_TagPage_TabIndex.xfdl

//Div에 연결된 폼 : 
trace(this.parent); //Div가 속한 부모 폼
//Tagpage연결된 폼 : 
trace(this.parent); //tabpage가 속한 Tab
trace(this.parent.parent) //Tab이 속한 부모 폼