넥사크로 팝업으로의 데이터 전송 방법

넥사크로에서 더블클릭 이벤트로 팝업 오픈을 했을 때 부모 폼에서 자식 폼으로 전달하는 추가 데이터를 보내는 방법이 여러가지이다.

 

이 방법들을 알아보면

 

폼 직접 참조 방식

부모

this.Div00_Grid00_oncelldbclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
	if(! this.popUpCheck(e))
	{
		return;
	}
	
	var params = [];
	params.clsfCd = this.vo_resultData.getColumn(e.row, "clsfCd");
	
	var oData = {
                 sId  			: "EAA_1050P",           		
                 sUrl 			: "Test::EAA_1050P.xfdl",  		
                 bshowtitlebar  	: false,     					
                 bAutoSize 		: true,       					
                 bResize 		: true,       					
                 bShowstatusbar 	: false,     					
                 sOpenalign     	: "center middle",  			
                 oArgs 			: params						
           	};   
					
	this.gf_showmodal(this,oData,function(pId,sRetVal)			
 	{    	
		//this.fRtrv();											
	});
}

 

 

자식(팝업)

this.fSearch_init = function ()
{
	if(!this.gf_isnull(parent.clsfCd))
	{
		this.vo_inputData.clearData();
		this.vo_inputData.addRow();
		this.vo_inputData.setColumn(0, "clsfCd", this.parent.clsfCd);
	}
	
}

 

 

• 장점 : 구현이 간단하고 빠르게 부모의 데이터를 사용할 수 있습니다.
• 단점 : 부모 폼에 강하게 의존하여 결합도가 높아져 유지보수가 힘들어질 수 있습니다.

 

LocalStorage 또는 SessionStorage를 사용하는 방법

부모

this.Div00_Grid00_oncelldbclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
	if(! this.popUpCheck(e))
	{
		return;
	}
	
	//로컬 스토리지 사용 방법(부모 폼에서 데이터 저장)
	localStorage.setItem("popupData", JSON.stringify(this.vo_resultData.getColumn(e.row, "clsfCd")));
    
	var oData = {
                 sId  			: "EAA_1050P",           		
                 sUrl 			: "Test::EAA_1050P.xfdl",  		
                 bshowtitlebar 		: false,     					
                 bAutoSize 		: true,       					
                 bResize 		: true,       					
                 bShowstatusbar 	: false,     					
                 sOpenalign     	: "center middle",  			
                 oArgs 			: params						
            };   
					
	this.gf_showmodal(this,oData,function(pId,sRetVal)			
 	{    	
		//this.fRtrv();												
	});
}

 

자식(팝업)

this.fSearch_init = function ()
{
	var receivedData = JSON.parse(localStorage.getItem("popupData"));

	if(!this.gf_isnull(receivedData))
	{
		this.vo_inputData.clearData();
		this.vo_inputData.addRow();
		this.vo_inputData.setColumn(0, "clsfCd", receivedData);
	}
	
}

 

참고 CS 지식

1. LocalStorage

• 영구 저장 : 데이터를 브라우저에 영구적으로 저장합니다. 즉, 사용자가 브라우저를 닫거나 다시 열어도 데이터가 유지됩니다.
• 용량 : 일반적으로 5MB 이상 저장이 가능합니다.
• 범위 : 도메인 단위로 데이터를 저장합니다. 같은 도메인 내의 모든 페이지에서 접근할 수 있습니다.
• 데이터 삭제 : 사용자가 명시적으로 데이터를 삭제하거나 브라우저 캐시를 지우기 전까지 유지됩니다.

단점 : 보안에 취약할 수 있다.

2. SessionStorage

• 세션 기반 저장 : 데이터를 현재 브라우저 세션 동안만 저장합니다. 즉, 사용자가 브라우저나 탭을 닫으면 데이터가 사라집니다.
• 용량 : 일반적으로 5MB 내외의 용량을 가집니다.
• 범위 : 페이지의 탭 단위로 저장됩니다. 즉, 같은 도메인이라도 다른 탭에서는 접근할 수 없습니다. 같은 페이지를 여러 탭에서 열어도 각 탭은 개별적인 SessionStorage를 가집니다.
• 데이터 삭제 : 브라우저나 탭을 닫으면 데이터가 자동으로 삭제됩니다.

공통적인 단점 : 동기적이라 성능에 영향을 줄 수 있다.

 

번외 : MEPS_DEMO에서도 될까..?

 

전역 변수를 사용하는 방법

부모

this.Div00_Grid00_oncelldbclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
	if(! this.popUpCheck(e))
	{
		return;
	}
	
    	var arrParam = [];
	arrParam.push(this.vo_resultData.getColumn(e.row, "clsfCd"));
	application.g_sharedData = arrParam;  // 전역 변수 설정
    
	var oData = {
                 sId  			: "EAA_1050P",           		
                 sUrl 			: "Test::EAA_1050P.xfdl",  		
                 bshowtitlebar 		: false,     					
                 bAutoSize 		: true,       					
                 bResize 		: true,       					
                 bShowstatusbar 	: false,     					
                 sOpenalign     	: "center middle",  			
                 oArgs 			: params						
            };   
					
	this.gf_showmodal(this,oData,function(pId,sRetVal)			
 	{    	
		//this.fRtrv();												
	});
}

 

 

자식(팝업)

//전역변수 이용 방법
this.fSearch_init = function ()
{
	var receivedData = application.g_sharedData;  //전역변수에서 값 가져오기
	
	if(!this.gf_isnull(receivedData))
	{
		this.vo_inputData.clearData();
		this.vo_inputData.addRow();
		this.vo_inputData.setColumn(0, "clsfCd", receivedData);
	}
	
}

장점 :

• 전역 접근 가능: 어느 폼에서나 데이터를 쉽게 접근하고 수정할 수 있습니다.
• 간편한 데이터 전달: 팝업 간 데이터를 주고받거나, 여러 폼 간의 데이터 동기화에 유용합니다.

주의할 점 :

• 전역 변수 사용은 예기치 못한 충돌이 발생할 수 있기 때문에, 너무 자주 사용하면 코드가 복잡해지거나 유지보수가 어려워질 수 있습니다.
• 데이터를 항상 최신 상태로 관리해야 하며, 필요 없는 경우에는 명시적으로 초기화하거나 삭제하는 것이 좋습니다.

 

URL Query Parameter 사용

결론부터 보면 안되는 것 같습니다..

 

부모

this.Div00_Grid00_oncelldbclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
	if(! this.popUpCheck(e))
	{
		return;
	}
	
    	var arrParam = [];
	arrParam.push(this.vo_resultData.getColumn(e.row, "clsfCd"));
    
    var sUrlWithParams = "Test::EAA_1050P.xfdl?data=" + encodeURIComponent(arrParam.join(","));
    
	var oData = {
                 sId  			: "EAA_1050P",           		
                 sUrl 			: sUrlWithParams,  		
                 bshowtitlebar 		: false,     					
                 bAutoSize 		: true,       					
                 bResize 		: true,       					
                 bShowstatusbar 	: false,     					
                 sOpenalign     	: "center middle",  			
                 oArgs 			: params						
            };   
					
	this.gf_showmodal(this,oData,function(pId,sRetVal)			
 	{    	
		//this.fRtrv();												
	});
}

 

 

자식(팝업)

this.fSearch_init = function ()
{
	var receivedData = decodeURIComponent(application.gv_ActiveForm.url.split("?")[1].split("=")[1]);
	
	if(!this.gf_isnull(receivedData))
	{
		this.vo_inputData.clearData();
		this.vo_inputData.addRow();
		this.vo_inputData.setColumn(0, "clsfCd", receivedData);
	}
	
}

 

원인 : 경로 이유로 추정됨..

에러 메세지 [404] : GET http://localhost:8080/meps40/MEPSWEB/Test/EAA_1050P.xfdl?data=SMSMA012 404 (Not Found)

 

보통 http://localhost:8080/meps40/MEPSWEB/Test/EAA_1050P.xfdl 여기까지만 오면 제대로 열리는데 뒤에 data가 붙는 순간 404에러가 난다. 더 봐야할 것 같습니다.

또 자식 코드의 받는 부분에 url메서드도 알지못한다.

 

MEPS 에서 방법

if (this.parent.parent.vo_resultData.getRowCount() > 0)
	{
		this.emno 		= this.parent.parent.vo_resultData.getColumn(0, "emno");
		this.incearnerRrno 	= this.parent.parent.vo_resultData.getColumn(0, "incearnerRrno");
		this.fRetrieveBasic(this.emno);
	}