넥사크로 17 - 컴포넌트 활용 2

동일출처정책 

 

웹 브라우저 실행 시 화면 페이지와 데이터 통신시 호출하는 서버 페이지 도메인이 일치해야함 

 

서비스 경로 사용시 prefixID - svcURL 사용하기 

'

 

넥사크로에는 동기, 비동기 방식 두가지가 있는데,

주로 비동기 방식을 사용하게 된다

Sync, 동기	ASync, 비동기
Transaction 함수 호출 후 서버에서 응답이 완료되는 시점까지 대기 후 결과를 받으면 다음 스크립트 진행	Transaction함수 호출 후 통신 완료와 상관없이 다음 스크립트를 수행하며, 서버에서 결과를 리턴 받게 되면 callback 함수가 호출
서버에서 넘겨준 건수를 확인 가능(순차적 진행)	서버에서 넘겨준 건수를 확인 불가능(대기X)

***동기 방식으로 프로그램을 작성하면 스크립트가 순차적으로 진행하기 때문에 코드를 작성하기 쉽지만, 통신 응답 대기 상태에서의 응답없음, 화면 멈춤, 이미지 비정상적 표현 등이 발생하기 때문에 비동기로 작성하는 것이 좋다.

​

​

Transaction 시 전송되는 데이터 형태

• 0 : XML -> 기본 값
• 1 : Binary -> 이진형태, 가장 빠름, 외부 통신에서는 사용 불가
• 2 : SSV
• 3 : JSON

​

***이렇게 데이터 타입을 알맞게 바꿔주지 않으면 통신에 어려움이 생김

​

웹 브라우저 실행 시 화면 페이지와 데이터 통신 시 호출하는 서버 페이지 도메인이 일치해야 함(동일출처정책)

***일치하지 않으면 오류 발생~

​

​

<X-API>

: 클라이언트와 서버 간의 데이터 통신 포멧을 맞춰주는 역할을 하는 것

- PlatformData : 데이터를 보관하는 기본 객체

- PlatformRequest : JSP 요청 시에 XML Format Data를 읽고 객체화하는 Input 객체

- PlatformResponse : JSP 요청 시에 XML Format Data를 출력하는 output 객체

- DatasetList & Dataset : 데이터를 2차원 Table 형태 또는 Table Array 타입으로 보관

- VariableList & Variable : I/O 인자값으로 사용되는 단일 값을 보관

​

추가 유의사항

• 서비스 경로 사용 시 Full 경로(상대 경로도 No)가 아닌 PrefixID 사용

ex) http://ex.com/sample/ 이게 아닌 SvcURL::select_emp.jsp 이런식

• Cache Level은 서비스 단위에서 설정(넥사크로 내 Services -> CacheLevel에서 설정)
• 한 번의 호출로 여러 Dataset을 가져올 수 있음(구분은 공백으로 하기 때문에 주의!!!)

-> 트랜젝션이 많을 수록 느려지는거지 데이터 많이 가져온다고 느려지는거 아니라서 걍 한번에 많이~

-> 공백 감싸는 방법 : nexacro.wrapQuote("홍 길동"); 이런식으로 사용~

• Dataset에 UseclientLayout 사용 가능

-> 서비스 호출 시 서버에서 받아온 Dataset으로 치환, 기본 값은 false(사용하려면 true로 바꿔줘야 함)

-> UseclientLayout 방법이 아닌 Script를 통해 Type등 변경은 권장하지 않음

-> 따로 형 변환을 해줄 필요가 없음(sort는 형 변환 불가능), 원하는 데이터 타입으로 넘어오지 않을 때 원하는 데이터 타입으로 형 변환해서 가져오겠단 의미

• 이벤트에 e.reason 이 있는 경우 반드시 분기처리

-> append , modify, delete 등 여러 기능 분리

• Dataset 변경 시 enableevent 사용

-> 특정 컬럼 값을 초기화하고 싶을 때 사요(엔진 동작 시간 줄여줌)

-> 한번 false로 초기화하면 반드시 true로 바꿔줘야 함!!!

• Dataset을 페이지에 보여줄 때 -> 바인딩 된 Dataset을 우선으로 하고 안되는 경우는 expression으로 해결

---

컴포넌트 활용

Dataset

Grid

Container Component

Form

Common

​

​

​

1) Dataset

 

• 데이터를 테이블(2차원) 형태로 관리하는 오브젝트
• 내부에서 사용하는 데이터로 컴포넌트와 바인디하여 사용
• 서버와의 통신 시 데이터를 주고 받는 형식으로 사용
• 데이터가 수정, 삭제되면 변경 전 내용을 Origin Buffer에 저장
• Invisible Object에 생성
• 더블 클릭하여 편집
• AppVariables에 공통 Dataset 생성

this.btn_Exe1_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nColCount = this.Dataset1.getColCount(); // this.Dataset1.colcount;
	var nRowCount = this.Dataset1.getRowCount(); // this.Dataset1.rowcount;
	trace("Col Count=" + nColCount + " : Row Count=" + nRowCount);	
	
	this.txtRtn1.set_value("Col Count=" + nColCount + " : Row Count=" + nRowCount);
    
 	for(var i=0; i<nColCount; i++){
// 		var sColID = this.Dataset1.getColID(i);
// 		trace("Col ID=" + sColID);
		var objCol=this.Dataset1.getColumnInfo(i);
        trace(objCol.id+":"+objCol.type+":"+objCol.size+":"+objCol.prop);
 	}

};

- getColCount : 컬럼의 갯수 (열) 

- getRowCount : 데이터의 갯수(레코드 갯수) (행)

- set_value : value값 출력

- getColID : 컬럼의 ID 출력

​

// Exe 1-2
this.btn_Exe1_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset1.addColumn("COL_CHK", "STRING", 36);
};

 

컬럼을 하나 추가할 수 있다

여기서 addColumn을 복사한 뒤 [F1] 누르고 검색창에 붙여넣고 해당 내용을 보면, 생략 가능한 값이 존재함을 확인할 수 있다. 위의 예시 코트는 size를 33으로 설정한 것인데 이를 따로 설정해주지 않으면 기본 값인 256이 들어간다.

 

 

this.btn_Exe2_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	 
	var nRow = this.Dataset1.findRow("EMPL_ID", "KR120");
	var sVal = this.Dataset1.getColumn(nRow, "FULL_NAME");
	//var sVal = this.Dataset1.getColumn(nRow, 1);
	
	//두줄-> 한줄로 줄이기 :lookup 사용 
	sVal=this.Dataset1.lookup("EMPL_ID","KR120","FULL_NAME");
    trace(sVal);	
	this.txtRtn1.set_value(sVal);	
};

 

-lookup(a,b,c) :  a에서 b를 찾아서 c의 값을 가져와 

-findRow  (a,b) : 필터링 되어 보이지 않는 Row 를 제외한 범위에서 특정 Column 값이 전달된 값과 일치하는 첫번째 Row 의 인덱스를 반환하는 메소드입니다.

this.btn_Exe2_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{

	var nRow = this.Dataset1.findRow("EMPL_ID", "KR120");
	var sVal = this.Dataset1.getColumn(nRow, "FULL_NAME");
    trace(sVal);	
	this.txtRtn1.set_value(sVal);	
};

​

-getColumn(a,b) : a행에서 b를 찾아서 주기 b는 해당컬럼의 인덱스거나  칼럼이름 

 

​

유연하게 대응할 수 있는 부분은 exe2-2

this.btn_Exe2_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{

	var nRow = this.Dataset1.findRowExpr("DEPT_CODE == 'K10' && SALARY <= 5000");
	var sVal = this.Dataset1.getColumn(nRow, "FULL_NAME");
	trace(sVal);	
	this.txtRtn1.set_value(sVal);	
};

 

- findRowExpr("조건표현식")  :  조건표현식과 일치하는  행 반환 

평균 값 구하기(남성과 여성의 급여 평균 출력)

// Exe 3-1
this.btn_Exe3_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nAvgM  = this.Dataset1.getCaseAvg("GENDER=='M'", "SALARY");
	var nAvgW1 = this.Dataset1.getCaseAvg("GENDER=='W'", "SALARY");
	var nAvgW2 = this.Dataset1.getCaseAvg("GENDER=='W'", "SALARY",0, -1, false);
	trace("Man Avg=" + Math.round(nAvgM, 2) + " : Woman Avg=" + nAvgW1 + " : " + nAvgW2);
	this.txtRtn1.set_value("Man Avg=" + Math.round(nAvgM, 2) + " : Woman Avg=" + nAvgW1 + " : " + nAvgW2);
};

 -getCaseAvg(a,b,c,d,e) : a는 조건표현식, b는칼럼, c=시작인덱스 d=마지막인덱스 e=null값인 경우는 false 

// Exe 3-2
this.btn_Exe3_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nAvg = this.Dataset1.getAvg("SALARY+BONUS");
	trace("Salary+Bonus AVG=" + nAvg);
	this.txtRtn1.set_value("Salary+Bonus AVG=" + nAvg);
};

-getAvg("") :"" 안에 칼럼을 같이 쓸수 있음 

 

 

this.Dataset1.set_keystring("S:+HIRE_DATE");

this.Dataset1.set_keystring("S:-HIRE_DATE");

 this.Dataset1.set_keyString()  -> s: 정렬 +는 오름차순, -는 내림차순 

 

this.Dataset1.filter("GENDER == 'M' && MARRIED == '0'");

filter("조건식" ) : 필터의 기능

 

 

this.btn_Exe3_5_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nCnt   = this.Dataset1.getRowCount();
	var nCntNF = this.Dataset1.getRowCountNF();
	trace(nCnt + " : " + nCntNF);
	this.txtRtn1.set_value(nCnt + " : " + nCntNF);
};

-getRowCount() :  행의 갯수를 반환 

-getRowCountNF() : 필터링된 행의 갯수까지 반환함 

 

 

this.btn_Exe3_Filter_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{

    // like filter --> String.indexOf()
	var sText = "e'";
	//e가 포함된 이름 찾기 
	this.Dataset1.filter("String(FULL_NAME).toUpperCase().indexOf('"+nexacro.replaceAll(sText,"'","").toUpperCase()+"')>=0"); 
	//this.Dataset1.filter("FULL_NAME.toUpperCase().indexOf('E')>=0"); 
	

};

 

filter() 와 indexOf를 통해서 e가 포함되어있는것들만 필터링 하기