넥사크로17 - popupdiv

Container Component

 하나의 화면을 여러 개의 부분화면으로 구성.
 Div/PopupDiv에 다른 화면을 연결하여 사용가능
손쉽게 화면을 구성하고 화면에 대한 재사용성을 높임.
 구조는 Div/PopupDiv 컴포넌트 안에
 innerform이라는 내부 Form객체로 구성

 

Contents로 구성된 popupdiv를 버튼 하단에 

this.btn_Exe1_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
 	var nX = 0;	
 	var nY = obj.height;
	this.PopupDiv1.trackPopupByComponent(this.btn_Exe1_1, nX, nY);	
};

 

 

popupdiv에 선택된 값 넘겨주기  

//popupdiv의 값을 넘겨주기 
this.PopupDiv1_btn_Exe1_Close_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{	
	//칼럼의 값을 변수에 저장 
    var sDept = this.Dataset1.getColumn(this.Dataset1.rowposition, "DEPT_NAME");
	var sName = this.Dataset1.getColumn(this.Dataset1.rowposition, "FULL_NAME");
	var sID   = this.Dataset1.getColumn(this.Dataset1.rowposition, "EMPL_ID");
	
    //edit 컴포넌트에 값 저장 
 	this.edt_dept.set_value(sDept);
 	this.edt_name.set_value(sName);
 	this.edt_id.set_value(sID);	
	this.PopupDiv1.closePopup();	
	
};

this.Dataset1.rowposition은  지금 현재 선택된 행 

 

 

link로 구성된 popupdiv를 버튼 하단에 

this.btn_Exe2_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nX = parseInt(0);	
	var nY = parseInt(obj.height);
	this.PopupDiv2.trackPopupByComponent(obj
	                                   , nX
									   , nY
									   , null
									   , null
									   , "fn_pDivCallback");	
};

this.fn_pDivCallback = function(objID, rtnValue)
{
	if(rtnValue == ""){
		return;
	}
	if(objID == "PopupDiv2"){
		this.edt_dept2.set_value(rtnValue[0]);
		this.edt_name2.set_value(rtnValue[1]);
		this.edt_id2.set_value(rtnValue[2]);
	}
};

 

 

 

링크 팝업디브의 버튼 

this.btn_Exe2_Close_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    var arrRtn = [];
    arrRtn[0] = this.Dataset2.getColumn(this.Dataset2.rowposition, "DEPT_NAME");
    arrRtn[1] = this.Dataset2.getColumn(this.Dataset2.rowposition, "FULL_NAME");
    arrRtn[2] = this.Dataset2.getColumn(this.Dataset2.rowposition, "EMPL_ID");
	//인자 arrRtn은 returnvalue에 저장될 값 
	this.parent.parent.PopupDiv2.closePopup(arrRtn);
};

 

콜백함수를 이용해서 값을 array로 리턴받는다. 

 depth를 반드시 기입해줘야한다 .

 

 

캘린더 form 밑으로 + confirm 버튼 으로 적용하기 

이 방법으로 밑에 드롭다운을 만들 수 있다 

 

하지만 팝업창을 띄워주는 로직을 구현해보자 

this.cal_from_ondropdown = function(obj:nexacro.Calendar,e:nexacro.EventInfo)
{
	this.PopupDiv3.form.cal_from.set_value(this.cal_from.value);
	this.PopupDiv3.form.cal_from.set_value(this.cal_to.value);
	this.PopupDiv3.trackPopupByComponent(this.cal_from,0,obj.height);
	
};

// Confirm Button
this.PopupDiv3_btn_confirm_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var sFrom=this.PopupDiv3.form.cal_from.value;
	var sTo=this.PopupDiv3.form.cal_to.value;
	
	this.cal_from.set_value(sFrom);
	this.cal_to.set_value(sTo);
	this.PopupDiv3.closePopup();
	
};

trackPopupByComponent(this.cal_from,0,obj.height) 로 밑에 캘린더가 뜰 수 있도록

 

 

 

from의 값이 더 클때 

this.PopupDiv3_oncloseup = function(obj:nexacro.PopupDiv,e:nexacro.EventInfo)
{
	if(this.cal_from.value > this.cal_to.value){
		this.alert("End Date Should be later than From Date");
		this.cal_to.set_value("");
	}
};

 

 

Form
 화면을 구성하는 기본 단위.
여러 컴포넌트를 배치하여 화면을 구성하고
스크립트가 실행 될 수 있는 환경

폼에 생성되어있는 컴포넌트/오브젝트 모두 구하기 

// Exe 1-1
this.btn_Exe1_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var arrObj = this.all;	//this.components;
	for(var i=0; i<arrObj.length; i++)
	{
		trace(arrObj[i] + " : " + arrObj[i].name);
	}
    
	this.fn_compList(this);
};

this.fn_compList = function(pObj)
{
	var arrObj = pObj.all;
//	var arrObj = pObj.components;

	for(var i=0; i<arrObj.length; i++)
	{
		trace(pObj.parent + " : " + pObj.valueOf() + " : " + arrObj[i] + " : " + arrObj[i].name);
	
		var sType = arrObj[i].valueOf();
		if(sType == "[object Div]"){
			this.fn_compList(arrObj[i].form);
		}		
		else if(sType == "[object Tab]"){
			for(var j=0; j<arrObj[i].tabpages.length; j++){
				//trace( arrObj[i].valueOf() + " : " + arrObj[i].tabpages[j].name);
				this.fn_compList(arrObj[i].tabpages[j].form);
			}
		}
	}
}

all : 컴포넌트 목록, invisible Object, Bind 정보까지 가지고 있는 속성
var arrObj = this.all;
this.components; 컴포넌트의 목록만 가지고 있는 속성

 

this.all : 전체 컴포넌트 (invisible, visible 모두)
this.components : visible 컴포넌트 목록 (dataset제외)
this.objects : Form 에 등록된 모든 Invisible Object (Dataset)

 

 

String 값을 오브젝트로 바꾸기 : eval (X)  this.components[ ]

var sGridID = this.Grid3.name;
trace(sGridID + " : " + typeof sGridID);
var objGrid = this.components[sGridID];
trace(objGrid + " : " + typeof objGrid);

eval을쓰면 안된다 ->시큐어코딩에서 문제가 되기때문에 

 

타이머 Timer를 사용해서 시간 표현 :공지사항, 알람 등등. ..

this.btn_Exe2_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
//	this.fn_getTime();
//id, 1000 = 1초 
	this.setTimer(123, 1000);
};


//event의 ontimer이벤트가 발생 
this.Exe_Form_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid == 123){
		this.fn_getTime();
	}
};

this.fn_getTime = function()
{
	var objDate = new Date();	
    var nH = objDate.getHours("h");
    var nM = objDate.getMinutes();
    var nS = objDate.getSeconds();

    var sH = (nH.toString().length < 2 ? "0" + nH.toString() : nH.toString());
    var sM = (nM.toString().length < 2 ? "0" + nM.toString() : nM.toString());
    var sS = (nS.toString().length < 2 ? "0" + nS.toString() : nS.toString());
	
	this.Static2.set_text(sH + " : " + sM + " : " + sS);
}

 

 

브라우저 제약상, 모달리스의 경우 메인엔진을 공유해서 쓸 수 없기 때문에 속도가 느리다 

모달리스 = 창을 하나 더 띄움 

 

모달창 

// Exe 3-1
this.btn_Exe3_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame("chf_popup1", 0, 0, 400, 300);
	objChildFrame.set_formurl("Exe::Exe_Form_Popup.xfdl");
	objChildFrame.set_openalign("center middle");
	objChildFrame.set_overlaycolor("RGBA(196,196,196,0.5)")
	objChildFrame.set_dragmovetype("all");
//	objChildFrame.set_resizable(false);
//	objChildFrame.set_showstatusbar(false);
		
	var objParam = { param1:this.Edit3_1.value
	               , param2:this.Edit3_2.value
				   , param3:this.Dataset3 };
				   
	objChildFrame.showModal( this.getOwnerFrame()
	                       , objParam
						   , this
						   , "fn_popupCallback");	
};


this.fn_popupCallback = function(strPopupID, strReturn)
{
	if(strReturn == undefined){
		return;
	}

	if(strPopupID == "chf_popup1"){
		trace("Return Value: " + strReturn);
		var arrRtn = strReturn.split(":");
		this.Edit3_1.set_value(arrRtn[0]);
		this.Edit3_2.set_value(arrRtn[1]);
	}
};

 

모달리스

// Exe 3-3
this.btn_Exe3_3_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nW = 400;
	var nH = 300;

	var objApp = nexacro.getApplication();
	var nLeft = (objApp.mainframe.width  / 2) - Math.round(nW / 2);
	var nTop  = (objApp.mainframe.height / 2) - Math.round(nH / 2) ;		

	nLeft = system.clientToScreenX(this, nLeft);
	nTop  = system.clientToScreenY(this, nTop);
	
	var sOpenStyle = "showtitlebar=true showstatusbar=false "
	               + "resizable=true autosize=true titletext=Modeless Popup";

	var objParam = { param1:this.Edit3_1.value
	               , param2:this.Edit3_2.value
				   , param3:this.Dataset3 };

	nexacro.open("chf_popup2"
	           , "Exe::Exe_Form_Popup.xfdl"
			   , this.getOwnerFrame()
			   , objParam
			   , sOpenStyle
			   , nLeft
			   , nTop
			   , nW
			   , nH
			   , this);
	
};


this.fn_return = function(objDs)
{
    this.Dataset3.copyData(objDs);
	trace(objDs.saveXML());
}

 

 

Common

버튼 생성 후  삭제하기  

// Exe 2-1(Create Components on Form)
this.btn_Exe2_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objBtn = new Button();
	objBtn.init("btn_Comp", 10, 250, 150, 50);
	this.addChild("btn_Comp", objBtn);
	/*objBtn.set_text("Created Button");*/
	objBtn.show();	//화면에 보임

};

// Exe 2-2(Destroy Components on Form)
this.btn_Exe2_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objBtn = this.removeChild("btn_Comp"); 
	objBtn.destroy(); 
	objBtn = null; //null까지 해야함 메모리 때문에 

};

objBtn=null; 로 메모리 관리하는것 중요