14.Form

14.1Collection

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

그림 14-1Form_Collection_0

14.1.1components 를 이용한 컴포넌트의 리스트 확인

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

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

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

폼에 있는 컴포넌트, Object리스트 확인방법을 알고 싶습니다.

소스 위치

Sample\Form\np_Form_Collection.xfdl

14.2Obj정보와 Event 확인

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

그림 14-2Form_ObjectEventList_0

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

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

넥사크로플랫폼(nexacro platform) 기본컴포넌트 이외에 외부 컴포넌트(ActiveX)를 사용하는

경우에도 해당 컴포넌트의 obj, e값을 확인 시에도 유용합니다.

외부 모듈의 경우 넥사크로플랫폼(nexacro platform)에서 기본적으로 값을 확인 할 수 없습니다.

ActiveX를 사용하려고 하는데 이벤트 사용시 obj, e에 포함된 값을 확인할 수 있나요?

컴포넌트 function의 obj, e의 값을 확인해 볼 수 있나요?

소스 위치

Sample\Form\np_Form_ObjectEventList.xfdl

14.3go Method를 이용한 페이지 이동

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

그림 14-3Form_go_0

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

go Method를 이용하여 화면을 전화하는 경우 파라미터 값은 전달할 수 없습니다.

Script를 이용하여 특정 폼 화면으로 이동할 수 있나요?

소스 위치

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

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

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

그림 14-4Form_overlaycolor_0

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

14.4.1관련 소스

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

IE8 에서는 제약이 있습니다.

showModal로 오픈시 Parent의 배경색을 변경할 수 있나요?

소스 위치

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

14.5Timer

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

그림 14-5Form_timer_0

14.5.1setTimer

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에 시간표시
}

14.5.2killTimer

setTimer에 의해 설정된 타이머를 제거하는 메소드입니다.
this.Button01_onclick = function (obj:Button, e:ClickEventInfo)
{
 this.killTimer(1); //Timer해제
}

setTimer(nTimerID,nElapse)시 사용하게 되는 nTimerID는 Application에서 유일한 값을 가져야 합니다.

소스 위치

Sample\Form\Form_Timer_0.xfdl

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

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

그림 14-6Form_getActivForm_0

14.6.1주요 소스 내용

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

이 샘플에서는 하나의 화면을 실행 했기 때문에 자기 자신의 이름을 얻지만 MDI 환경에서 여러

개의 화면이 있을 경우에는 그 중 하나인 활성화된 화면의 이름을 얻게 됩니다.

ActiveForm, 활성화된 화면

소스 위치

Sample\Form\np_Form_getActiveForm.xfdl

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

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

그림 14-7MLM_0

14.7.1ADL의 ScreenInfo 생성

그림 14-8MLM_5

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

14.7.2Layout List정의

화면 사이즈별 screen정보를 설정할 수 있습니다.
생성 된 화면 Default 탭에 우클릭 하여 "Layout List"를 클릭합니다.

그림 14-9MLM_4

그림 14-10MLM_1

Layout List에서 사용하는 screenid는 ADL의 ScreenInfo에서 정의한 내용을 사용합니다.

14.7.3Layout 사이즈별 그리드 Format 정의

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

그림 14-11MLM_6

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

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

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

그림 14-12MLM_2

14.7.5참고사항

MLM(Multi Layout Manager)

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

Sample\Form\np_Form_MLM.xfdl

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

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

그림 14-13Step_0

14.8.1stepcount 설정

그림 14-14Step_2

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

그림 14-15Step_1

14.8.2timer기능을 이용하여 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

14.9TitleBar 변경하기

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

그림 14-16TitleBar_1

14.9.1스크립트를 이용한 방법

주요 소스 내용

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

14.9.2테마(CSS)를 이용한 방법

그림 14-17TitleBar_2

스크립트를 이용해서 위와 같이 사용하기도 하지만 실제로는 CSS를 이용하여 사용합니다.

위의 같은 경로를 통해 있는 CSS의 위치에서 TitlebarForm이라는 속성을 제어하여 사용할 수 있습니다.

소스 위치

Sample\Form\np_Form_TitleBar.xfdl

14.10onbeforeclose 이벤트 사용시 주의사항

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

14.10.1현상

그림 14-18bouble1

14.10.2원인

onbeforeclose 이벤트는 상위로 버블 처리 되는 이벤트로 하위 오브젝트와 
상위 오브젝트의 모든 onbeforeclose 가 발생 한 후 지정된 모든 return 메지시 값을 중첩하여 
Confirm 창을 띄워 종료 여부를 사용자에게 선택하도록 합니다.
this.close_test2_onbeforeclose = function(obj:Form, e:nexacro.CloseEventInfo)
{
 return "창을 닫으시겠 습니까?" ;
}

14.10.3해결방법

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

onbeforeclose 사용시 메시지가 두번 출력됩니다.

onbeforeclose 이벤트가 2번 발생하는 문제가 있음