Collection

By using this.compnents, this.all we can access all the objects and events generated on the form.

Verifying component list using components

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 var i;
 var components = this.components;
 var icnt = components.length;
 this.Dataset00.set_enableevent(false);
 for( i = 0 ; i < icnt ; i++ )
 {
     var nRow = this.Dataset00.addRow();
     this.Dataset00.setColumn(nRow,0,components[i].id);
     this.Dataset00.setColumn(nRow,1,components[i].name);
     this.Dataset00.setColumn(nRow,2,components[i].valueOf());
     this.Dataset00.setColumn(nRow,3,components[i].text);
     this.Dataset00.setColumn(nRow,4,this.valueOf());
     this.Dataset00.setColumn(nRow,5,this.get_url(components[i],""));
      
    if(components[i].valueOf() == "[object Div]"){
     var divcomponents = components[i].components;
     var subcnt = divcomponents.length;
     for( j = 0 ; j < subcnt ; j++ )
     {
    var nRow = this.Dataset00.addRow();
    this.Dataset00.setColumn(nRow,0,divcomponents[j].id);
    this.Dataset00.setColumn(nRow,1,divcomponents[j].name);
    this.Dataset00.setColumn(nRow,2,divcomponents[j].valueOf());
    this.Dataset00.setColumn(nRow,3,divcomponents[j].text);
    this.Dataset00.setColumn(nRow,4,this.parent.valueOf());
    this.Dataset00.setColumn(nRow,5,this.get_url(divcomponents[j],""));
   }
    }
 }
 this.Dataset00.set_enableevent(true);
 
}

By using all verifying all objects list

this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 var i;
 var allobjects  = this.all;
 var icnt = allobjects.length;
 this.Dataset00.set_enableevent(false);
 for( i = 0 ; i < icnt ; i++ )
 {
     var nRow = this.Dataset00.addRow();
     this.Dataset00.setColumn(nRow,0,allobjects[i].id);
     this.Dataset00.setColumn(nRow,1,allobjects[i].name);
     this.Dataset00.setColumn(nRow,2,allobjects[i].valueOf());
     this.Dataset00.setColumn(nRow,3,allobjects[i].text);
     this.Dataset00.setColumn(nRow,4,this.valueOf());
     this.Dataset00.setColumn(nRow,5,this.get_url(allobjects[i],""));
     
    if(allobjects[i].valueOf() == "[object Div]"){
     var divcomponents = allobjects[i].components;
     var subcnt = divcomponents.length;
     for( j = 0 ; j < subcnt ; j++ )
     {
    var nRow = this.Dataset00.addRow();
    this.Dataset00.setColumn(nRow,0,divcomponents[j].id);
    this.Dataset00.setColumn(nRow,1,divcomponents[j].name);
    this.Dataset00.setColumn(nRow,2,divcomponents[j].valueOf());
    this.Dataset00.setColumn(nRow,3,divcomponents[j].text);
    this.Dataset00.setColumn(nRow,4,this.parent.valueOf());
    this.Dataset00.setColumn(nRow,5,this.get_url(divcomponents[j],""));
   }
    }
 }   
 this.Dataset00.set_enableevent(true);
}

this.get_url = function(obj, str)
{
 if(obj == "[object Form]"){var s = "form";}else{var s = obj.name;}
 if(str != ""){s += "."+str}
 if(obj ==  "[object MainFrame]"){return "application.mainframe." + str;}
 return this.get_url(obj.parent, s);
}

Source Location

Sample\Form\np_Form_Collection.xfdl

Obj information and Event confirmation

In the nexacro platform using components having coding, we can know the value of including 
function's parameters obj and e. 
We can also verify the values.

Way to Implement Object List

this.Button00_onclick = function (obj:Button, e:ClickEventInfo)
{
 var x;
 var objList;
    
 for (x in obj)   
 {
  this.objList = this.objList + (x + " : " + obj[x] + "\n");
 }         
 
 this.TextArea00.set_value("");
 this.TextArea00.set_value(this.objList);
}

Way to Implement Event List

this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 var y;
 var eList;
    
 for (y in e)   
 {
  this.eList = this.eList + (y + " : " + e[y] + "\n");
 }         
 this.TextArea01.set_value("");
 this.TextArea01.set_value(this.eList);
}

In the nexacro platform we can use additional external component ActiveX. 
In this component we can check the value of obj and e object. 
In external module by default we cannot check the values.

Source Location

Sample\Form\np_Form_ObjectEventList.xfdl

Move to next page by using go method

We can move from the current screen to specific screen by using go method.

this.Button00_onclick = function (obj:Button, e:ClickEventInfo)
{
 this.go("Sample_Form::Form_go_1.xfdl");
}

Source Location

Sample\Form\np_Form_go.xfdl
Sample\Form\np_Form_go_target.xfdl

Changing background color using overlaycolor

showModel in nexacro platform is internally expressed by using div. 
When we open Div form, parent background color will be changed to gray but we can change the backend color by setting color.

• To specify the background color following code should be added

newChild.style.set_overlaycolor("#ff000039");

Relevant source

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 
 var newChild = null;
    var objParentFrame = this.getOwnerFrame();   
    var nRight = 0;
    var nBottom = 0;
 
 newChild = new nexacro.ChildFrame;
    newChild.init("frmop01", "absolute", 0 , 0, 500 , 500 ,null ,null, "Sample_Form::Form_OverlaycolorDiv.xfdl");
    
    //overlaycolor setting 
    newChild.style.set_overlaycolor(this.edOverlaycolor.text);
 newChild.autosize = true; 
    newChild.showModal(objParentFrame, "", this, "f_pop_callback");
}   
this.f_pop_callback = function (sFormId, arg)
{
}

Source Location

Sample\Form\np_Form_OverlaycolorMain.xfdl
Sample\Form\np_Form_OverlaycolorDiv.xfdl

Timer

This is explanation about how to use ontimer event on events of form

setTimer

setTimer method is used to generate an ontimer event on setting time.

this.Button00_onclick = function(obj:Button, e:ClickEventInfo)
{
 this.setTimer(1, 1000); //Timer setting
}

this.comp_timer_ontimer = function (obj:Form,e:TimerEventInfo)
{
 this.Static_clock.set_text(this.Clock()); //Using clock display time display in static component
}

KillTimer

KillTimer removes the time setting set by setTimer method.

this.Button01_onclick = function (obj:Button, e:ClickEventInfo)
{
 this.killTimer(1); //Timer Remove
}

Source Location

Sample_Script\Script_Newline_0.xfdl

Getting active screen name (ID)

By using getActiveForm method, we can get Enabled screen name.

Main Source Content

this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 var objForm = application.getActiveForm();
 
 this.edt_output0.set_value(objForm.name);
 this.edt_output1.set_value(application.getActiveForm().titletext);
}

Source Location

Sample\Form\np_Form_getActiveForm.xfdl

Showing suitable screen by Layout size

We can show suitable screen by users monitor size and aspect after creating several screen layouts.
.

Creating ScreenInfo in ADL

This manages the Screen information which is used in MLM function.

Layout List meaning

We can set screen information by screen size.

Click mouse right button and then click on "Layout List" on newly created screen.

Grid Format definition by Layout size

MLM only has location information of component.
If grid expression content is different by each Layout, you need to change using script or grid Format.

Changing Grid Format as Layout changes

this.np_Form_MLM_onlayoutchanged = function(obj:Form, e:nexacro.LayoutChangeEventInfo)
{
 if(e.newlayout == 'default')
 {
  this.Grid00.set_formatid("default");
 } else if(e.newlayout == 'Layout1')
 {
  this.Grid00.set_formatid("format1");
 } else if(e.newlayout == 'Layout2')
 {
  this.Grid00.set_formatid("format2");
 } 
}

Verification the Layout size using screen resizing - MLM

AS form size is changed using changing the screen size or mouse, the screen shows using the closest Layout information.

Reference

MLM(Multi Layout Manager)

MLM is showing suitable screen Layout by monitor size or length without changing script code after creating several screen Layouts .
This is useful to Desktop and Mobile having variety screen size.

Source Location

Sample\Form\np_Form_MLM.xfdl

Showing section within screen using Step

We can see section within screen without changing screen using stepcount property.

Setting stepcount

If you set stepcount in form property, the screen will appear as many as the number you set like below.   
You can design each step page.

Expressing the step screen using timer function

This shows the designed screen on each step using timer function.
This sample is composed of image to show on step.

Main Source Content

this.nIndex = 0;
this.np_Form_Step_onload = function(obj:Form, e:nexacro.LoadEventInfo)
{
 this.setTimer(1, 2000);  
}
this.np_Form_Step_ontimer = function(obj:Form, e:nexacro.TimerEventInfo)
{
 if(e.timerid == 1){
    
  var StepCtrl = this.stepcontrol;
  StepCtrl.set_stepindex(this.nIndex);
  this.nIndex++;
  if(this.nIndex == 3){
   this.nIndex = 0;
  }  
 }
}

Reference

step

When you want to show a lot of information on small mobile machine, You can show section without changing screen in screen using this function.

Source Location

Sample\Form\np_Form_Step.xfdl

Changing TitleBar

Title Bar design and property can be changed using by script or CSS.

Way to use script

Main Source Content

var objParentFrame = null;
this.Button00_onclick = function (obj:Button, e:ClickEventInfo)
{
  this.objParentFrame.titlebar.minbutton.set_visible(false);
  this.objParentFrame.titlebar.maxbutton.set_visible(false);
  this.objParentFrame.titlebar.closebutton.set_visible(true);
}
  
this.Form_TitleBar_onload = function(obj:Form, e:nexacro.LoadEventInfo)
{
    this.objParentFrame = this.getOwnerFrame();   
}
this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.objParentFrame.set_titletext("title changed");
 
}
this.Button02_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.objParentFrame.style.set_titlebarheight(25); 
}  
this.Button03_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.objParentFrame.titlebar.style.set_background("@gradation");
 this.objParentFrame.titlebar.style.set_gradation("linear 0,0 #7ebdb2 0,100 #256e6d");
}

Way to use theme(css)

Source Location

Sample\Form\np_Form_TitleBar.xfdl

Note for onbeforeclose event use

We write  "Do you want to close this window?" in onbeforeclose event to pop up.

But sometimes the message appears as many as Div number.
This explains a way to solve this problem.

Phenomenon

Cause

It is a bubbling event, so the onbeforeclose event occurs at the all levels of objects. 
After piling all the specified return messages, a confirming window appears to prompt users to decide whether to close.

this.close_test2_onbeforeclose = function(obj:Form, e:nexacro.CloseEventInfo)
{
 return "Do you want to close this window?" ;
}

Troubleshooting

this.close_test2_onbeforeclose = function(obj:Form, e:nexacro.CloseEventInfo)
{
 if(e.fromobject == obj)
 {
  return "Do you want to close this window?"  ;
 }
}