Collection

this.components, this.all 를 이용하여 폼에서 생성된 오브젝트에 접근할 수 있는 방법을 기술합니다.

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

all를 이용한 모든 오브젝트에 리스트 확인

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

소스 위치

Sample\Form\np_Form_Collection.xfdl

Obj정보와 Event 확인

넥사크로플랫폼(nexacro platform) 의 컴포넌트를 사용하여 코딩을 하는 경우 function에 포함되어 있는
obj와 e의 값을 확인해 보고 싶은 경우가 있습니다. 
이 경우 아래와 같은 방법으로 확인이 가능합니다.

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

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

소스 위치

Sample\Form\np_Form_ObjectEventList.xfdl

go Method를 이용한 페이지 이동

현재 실행중인 화면에서 특정 화면으로 이동을 하고자 하는 경우 go Method를 통해 화면 전환이 가능합니다.

Example)
this.Button00_onclick = function (obj:Button, e:ClickEventInfo)
{
 //이동하고자 하는 폼 정보를 기술합니다.
 this.go("Sample_Form::Form_go_1.xfdl"); 
}

소스 위치

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

overlaycolor 속성을 이용한 배경색 바꾸기

넥사크로플랫폼(nexacro platform)에서 showModal은 내부적으로 Div를 이용하여 표현이 됩니다.
Div 형태로 화면이 오픈되는 경우 전체적인 배경색은 회색에 가까우며 이는 화면을 띄우기 전에 설정이 
가능합니다.

• 배경색을 지정하기 위해서 는 아래와 같은 코드 한 줄이 추가되어야 합니다.

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

관련 소스

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

소스 위치

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

Timer

form의 이벤트 중 ontimer 이벤트를 사용하는 방법에 대해 기술합니다.

setTimer

setTimer 메소드로 생성한 타이머는 ontimer 이벤트를 발생시킵니다.

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

this.comp_timer_ontimer = function (obj:Form, e:TimerEventInfo)
{
 this.Static_clock.set_text(this.Clock()); //시계표시용 Static Component에 시간표시
}

killTimer

setTimer에 의해 설정된 타이머를 제거하는 메소드입니다.

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

소스 위치

Sample\Form\Form_Timer_0.xfdl

활성화된 화면이름(ID) 얻기

getActiveForm 메소드를 이용하여 활성화된 화면의 이름을 얻을 수 있습니다.

주요 소스 내용

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

소스 위치

Sample\Form\np_Form_getActiveForm.xfdl

Layout 크기에 따른 적합한 화면 보기 - MLM

여러 개의 화면 Layout을 미리 만들어 놓고 사용자의 모니터 크기나 가로 세로 보기에 따라 적합한
화면 Layout을 보여줄 수 있습니다.

ADL의 ScreenInfo 생성

MLM기능에서 사용할 기본 Screen 정보를 등록관리합니다.

Layout List정의

화면 사이즈별 screen정보를 설정할 수 있습니다.

생성 된 화면 Default 탭에 우클릭 하여 "Layout List"를 클릭합니다.

Layout 사이즈별 그리드 Format 정의

MLM은 컴포너튼에 대한 위치정보만을 가지고 있습니다. 
따라서 각 Layout별로 보여주고자 하는 그리드 표현내용이 다른 경우 스크립트 또는 그리드 Format등을 이용하여 변경작업을 해 주어야 합니다.

Layout변경시 그리드 Format변경

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

화면 리사이즈를 통한 Layout크기 확인 - MLM

화면의 크기를 변경 또는 마우스를 이용하여 폼의 사이즈를 변경하게 되면 해당 사이즈에 
가장 가까운 Layout정보를 이용하여 화면에 보여줍니다.

참고사항

MLM(Multi Layout Manager)

MLM이란 사용자가 개발 시 한 화면에 대해 Script 코딩은 변경하지 않고 여러 개의 화면 Layout을 미리 만들어 놓으면 사용자의 모니터 크기나 가로/세로 보기에 따라 적합한 화면 Layout을 보여주는 기능이다. 모니터 사이즈가 다른 데스크톱이나 모바일 기기 등의 적용에 유용합니다.

소스 위치

Sample\Form\np_Form_MLM.xfdl

Step를 이용한 화면내 구간보기

stepcount 속성을 이용하여 화면전환을 하지 않고 화면 내에서
구간을 볼 수 있습니다.

stepcount 설정

폼의 속성 중 stepcount 를 지정하게 되면 지정된 숫자만큼 아래와 같이 화면이 표시가 됩니다.
step한 페이지마다 각각의 디자인이 가능합니다.

timer기능을 이용하여 step화면 표현

timer기능을 이용하여 각 step에 디자인된 화면을 보여줍니다. 
해당 샘플에서는 step에 이미지를 표현하도록 구성하였습니다.

주요 소스 내용

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

참고사항

step

작은 크기의 모바일 기기 등에서 많은 정보를 보여주고자 할 때. 화면 전환을 하지 않고 화면 내에서 구간보기를 할 수 있는 기능이다.

소스 위치

Sample\Form\np_Form_Step.xfdl

TitleBar 변경하기

스크립트나 CSS를 이용하여 타이틀바의 디자인과 속성을 변경할 수 있습니다.

스크립트를 이용한 방법

주요 소스 내용

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

테마(CSS)를 이용한 방법

소스 위치

Sample\Form\np_Form_TitleBar.xfdl

onbeforeclose 이벤트 사용시 주의사항

onbeforeclose 에 “창을 닫으시겠 습니까?” 문구를 띄워 주려는 의도로 만들었는데. 
Div 개수 만큼 경고창에 문자열이 여러 개 붙는 경우가 있습니다. 
이를 해결 하기 위한 방법에 대하여 알아봅니다.

현상

원인

onbeforeclose 이벤트는 상위로 버블 처리 되는 이벤트로 하위 오브젝트와 
상위 오브젝트의 모든 onbeforeclose 가 발생 한 후 지정된 모든 return 메지시 값을 중첩하여 
Confirm 창을 띄워 종료 여부를 사용자에게 선택하도록 합니다.

this.close_test2_onbeforeclose = function(obj:Form, e:nexacro.CloseEventInfo)
{
 return "창을 닫으시겠 습니까?" ;
}

해결방법

this.close_test2_onbeforeclose = function(obj:Form, e:nexacro.CloseEventInfo)
{
 if(e.fromobject == obj)
 {
  return "창을 닫으시겠 습니까?" ;
 }
}