JAVA와 놀자

트러스트 폼 에서 발생 했으나 자바스크립트 로직상 일반 html 에서도 동일한 증상이 일어 날것으로 예상. 

문제 발생 멀쩡 하게 사용 하던 팝업창 에서 

자식창 데이터 클릭 -> 부모창에 데이터 전송 과정에서 exception 처리로 인한 오류 발생

기존 opener  호출 함수. 

function doFg1DblClick(){

if(!fGridReturn("fg1")) return;

var obj = doc.addGrid("fg1").getRowObj(fg1.row);   // 선택된 그리드의 데이터를 OBJECT 로 변환 하는 함수.

try{

opener.javascript.popNrnd(obj);              // 부모창의 함수를 호출

}catch(exception){

alert(exceptioni);

}

window.close();

}

alert 창으로 아래와 같은 오류를 출력. 하지만 데이터는 이상없이 부모창으로 insert 처리 됨. ( 메시지내용은 실제론 단순 alert 이 아님으로 아래와 같이 캡쳐됨)

해당과 같은 오류의 상세 내역을 확인 하기 위해 exception 내용을 상세 하게 확인 할수 있는 추가 구현. 

기존 alert(exception); ====>을 

var output = '';

for (var i in exception) {

output += i + ' : ' + exception[i] + '\n';

}

alert(output);

으로 변경 

더 알수가 없게 되었다.. (하지만 해당 구문은 자바스크립트 오류 확인시  많은 도움이 될것 같다.)

해당과 관련 미친듯이 google 을 찾아본 결과 opener 함수 내에서 실행되는 함수 중에 구현 되지 않은 함수가 있는 경우 스크립트 오류가 아닌

object 오류나 syntax 오류로 표기 될수 있다는 글을 확인 했고 

자식창및 부모창을 번갈아 가며 다른 파일로 호출 테스트 해 본 결과 자식창이 아닌 부모창에 문제가 있다는 것을 확인

확인해본 결과 함수 호출 과정에서 기존에 사용 하던 js 파일을 제거 하고 해당 기능과 관련된 공통 기능 js 파일을 스크립트 하는 과정에서 실제 사용 한 

함수를 누락 하게 되어 발생 한 문제 였다. 

부모창 의 함수  (자식창에서 opener 로 호출 하는)

function popNrnd(obj){

fg1.valueMatrix(fg1.row, fg1.colRef("MNS_PROJ_CD_YN")) = "Y";

fg1.valueMatrix(fg1.row, fg1.colRef("RESPERSONNO")) = obj.RESPERSONNO; //부처사업코드

fg1.valueMatrix(fg1.row, fg1.colRef("PRJNAME")) = obj.PRJNAME; //부처과제명

fg1.valueMatrix(fg1.row, fg1.colRef("MNS_PROJ_CD")) = obj.PRJNO; //협약일련번호

fSetFlag("fg1",fg1.row);     //  <== 문제를 발생 시킨 누락 함수. 

model.refresh();

}

위와 같이 지역함수 안에 구현된 function 의 경우 호출 대상이 자신(부모)인 경우에는 function  누락 으로 인한 스크립트 오류가 발생 하지만 

자신이 아닌 자식창에서 호출할 경우 제대로 스크립트 오류가 발생 하지 않는 상태로 exception 처리 됨을 확인 할수 있었다. 

//팝업에서 오브젝트를 부모창으로 보내기 위한 작업 FUNCTION

<script type="javascript" ev:event="ondblclick">

<![CDATA[cardInfo();]]>

</script>

function cardInfo() {

if(!fGridReturn("fg1")) return;

var obj = doc.addGrid("fg1").getRowObj(fg1.row);

try{

opener.javascript.purCardAprovPopUp(obj);

}catch(e){

if(opener.javascript.comInfo(obj) == false){

return false;

}

}

window.close();

}

//데이터 그리드의 컬럼 타입이 체크박스 인경우 컬럼명에 체크박스를 넣어 버튼 클릭시 모두 클릭 되도록 함. 

fg1.fixedcellcheckbox(0,1)=true;

//문자타입의 데이터 값 수식 . 

 := parseInt(model.getValue("/root/main/detail/TRF_AMT"),10)

    -- 10진법의 숫자로 변환 . 

// input 타입의 입력 창에 포커스(마우스 클릭) 했을때 한영을 지정된 것으로 변경 하는 옵션

 imemode="hangul"

-- 한글 

 imemode="alpha"

-- 영문 

// datagrid 의 col 값이 전체 width 값만큼 조정 되는 것을 막음 

     fg1.extendLastCol = "false"

// input 박스 두개  기간 체크

<script type="javascript" ev:event="xforms-value-changed">

<![CDATA[

fDayPeriodCheck("/root/search/APROV_DT_FR","/root/search/APROV_DT_TO", "str" );

doFg1Search();

model.refresh();

]]>

</script>

<script type="javascript" ev:event="onkeydown">

<![CDATA[

fEnterFunction("doFg1Search",event.target);

]]>

</script>

// date 유효성 검사 하나 

fDayCheck("/root/main/PUBCT_DT","input10");

//grid 의 date 유효성 검사  

<col ref="FRM_DT" type="inputdate">

<script type="javascript" ev:event="xforms-value-changed">

<![CDATA[

fDayCheck(fg3.row,"fg3.FRM_DT");

]]>

</script>

</col>

//grid 에서 emp_pop 셋팅 function 사용 

<script type="javascript" ev:event="onbuttonclick">

<![CDATA[

doFg23Insert("O");

]]>

</script>

<script type="javascript" ev:event="onkeyup">

<![CDATA[

 if(event.keyCode == 13){

doFg23Insert("O");

 }

]]>

</script>

function doFg23Insert(emp_OA){

var owner_nm ="";

if(emp_OA=="O"){

owner_nm =  fg3.valueMatrix(fg3.row, fg3.colRef("OWNER_NM"));

}else {

owner_nm =  fg2.valueMatrix(fg2.row, fg2.colRef("CARD_ADMIN_NM"));

}

model.makeValue("/root/temp/EMP_NM",owner_nm);

if(owner_nm!=""){

popupValueSet("/root/temp/EMP_NM", "EMP_NM", "E");

popupValueSet("/root/temp/EMP_NO", "EMP_NO", "");

}else {

popupValueSet("/root/temp/EMP_NM", "EMP_NM", "");

popupValueSet("/root/temp/EMP_NO", "EMP_NO", "");

}

      //popupValueSet("/root/temp/DEPT_NM", "DEPT_NM", "");

      empPopup("/root/temp/EMP_NM");

      if(emp_OA!="O"){

      if (doFg2Check())return; // 기존에 추가된 관리자 인지 확인

      }

      if(emp_OA=="O"){

      fg3.valueMatrix(fg3.row, fg3.colRef("OWNER_NM")) = model.getValue("/root/temp/EMP_NM");

    fg3.valueMatrix(fg3.row, fg3.colRef("OWNER")) = model.getValue("/root/temp/EMP_NO");

fg3.colWidth(0)=30;

      }else {

      fg2.valueMatrix(fg2.row, fg2.colRef("CARD_ADMIN_NM")) = model.getValue("/root/temp/EMP_NM");

    fg2.valueMatrix(fg2.row, fg2.colRef("CARD_ADMIN")) = model.getValue("/root/temp/EMP_NO");

fg2.colWidth(0)=30;

      }

model.refresh();

}

//input 박스 에서 emp_pop 셋팅

<script type="javascript" ev:event="onbuttonclick">

<![CDATA[

popupValueSet("/root/search/OWNER_NM","EMP_NM","");

popupValueSet("/root/search/OWNER_NO","EMP_NO","");

empPopup();

]]>

</script>

<script type="javascript" ev:event="xforms-value-changed">

<![CDATA[

popupValueSet("/root/search/OWNER_NM","EMP_NM","E");

popupValueSet("/root/search/OWNER_NO","EMP_NO","");

empPopup("");

]]>

</script>

<script type="javascript" ev:event="onkeypress">

<![CDATA[

fEnterKey("");

]]>

</script>

//데이터 그리드 더블클릭후 팝업 데이터 넘기기

<script type="javascript" ev:event="ondblclick">

<![CDATA[

if(!fGridReturn("fg1")) return;

model.makeValue("/root/temp/ACCT_CD", fg1.valueMatrix(fg1.row, fg1.colRef("ACCT_CD")));

model.makeValue("/root/temp/ACCT_NM", fg1.valueMatrix(fg1.row, fg1.colRef("DIS_NM")));

model.makeValue("/root/temp/FRM_DT", model.getValue("/root/search/FRM_DT"));

model.makeValue("/root/temp/TO_DT", model.getValue("/root/search/TO_DT"));

loadPopUp("/etr/xrw/mis/act/main/act_4003_007.xrw", "", "1010", "590", "/root/temp", "/root/temp"

]]>

</script>

// 더블클릭후 받은 데이터 처리

function doInit(){

doImportSearch("CORP","");

model.makeValue("/root/search/ACCT_NM", model.getValue("/root/temp/ACCT_NM"));

model.makeValue("/root/search/ACCT_CD", model.getValue("/root/temp/ACCT_CD"));

model.makeValue("/root/search/FRM_DT", model.getValue("/root/temp/FRM_DT")); 

     model.makeValue("/root/search/TO_DT", model.getValue("/root/temp/TO_DT"));

input3.disabled=false;

model.refresh();

model.setFocus("input7");

}

// 최초 실행시 사용 할수 있도록 위치 </model> 바로 위

<script type="javascript" ev:event="xforms-model-construct-done">

<![CDATA[

doInit();

]]>

</script>

// 데이터 그리드를 초기화

     fg1.rebuild();

//데이터그리드 스크롤 되지 않게 고정

fg1.FrozenCols = 3;       // 좌측 3개의 칼럼을 고정시킨다.

 fg1.FrozenRows = 2;    // 상단 2개의 행을 고정시킨다.

// 데이터 있는지 확인.

if(fg1.rows==1){

   jsAlert("그리드 안에 데이터가 없습니다."); 

return;

  }

//xrw 오픈시 특정 값을 받는 쿼리 .jsp 의 request.getParameter 와 같다. 

model.makeValue("/root/main/search/CARD_CLS", model.property("CARD_CLS"));

// 특정 데이터 그리드의 row 를 추가한다. 

   doc.addGrid("fg2").insertRow("last");

// 입력창을 FOCUS 하게함

    model.setFocus("input1");

//데이터 그리드에 값 셋팅 하기 

    doc.addGrid("fg1").setAction("/module/mis/act/main/Act_7001_007.do").setMode("getList").setSendRef("/root/search").getList("true");

                    대상그리드               네임스페이스                                                   XML ID                     MAP 에 가져갈 검색 조건 ## 

// 가져온 데이터 그리드의 여러개의 ROW 중 조건에 맞는 경우에만 ROW 에 백그라운드를 다르게 하여 표현 하게함 

    for(var i=fg1.fixedRows; i<fg1.rows; i++) if(fg1.valueMatrix(i, fg1.colRef("OUT_CHK"))=="Y") fg1.rowStyle(i, "data", "background-color") = "#ffddff";

//대상 데이터 그리드의 데이터 ROW 숫자를 캡션 안에 넣어 준다. 

   getGridRowCnt("fg1", "caption37");

// 선택된 ROW의 특정 컬럼 값을 임시 저장 하여 sedRef 에 추가 하기 

model.makeValue("/root/search/search2/CARD_NO", fg1.valueMatrix(fg1.row, fg1.colRef("CARD_NO"))); doc.addGrid("fg2").setAction("/module/mis/act/main/Act_7001_007.do").setMode("getFg2List").setSendRef("/root/search/search2/CARD_NO").getList("true");

//모든 컬럼 값을 변경 하기 ( check  속성의 값을 true 로 바꿈 )

for (var i=1; i<fg2.rows; i++){ fg2.valueMatrix(i, fg2.colRef("isChecked"))="true"; }

//submit 전에 값의 유효성 검사를 함 체크 펑션을 사용 하는경우 반드시 조건문 안에 사용 하여 값을 받아 사용 한다. 

function doSaveCheck(){

if(!chkValue(model.getValue("/root/main/CARD_NO"), "input1", "카드번호를 입력해 주십시요.")) return false;

}

// submit 할때 특정 값이 아닌 데이터 그리드의 값을 모두 보낼때 사용 //대상 데이터 그리드의 isChecked 값을 찾아서 플래그 한후에 getUpdateData() 를 이용 하여 ref 값을 생성후

    subMit 시에 ref 값으로 보내 준다. JAVA 단에서 받는다. 

        -- XRW

fSetGridAllFlag("fg2");

model.makeValue("/root/temp/updateData3", fg2.getUpdateData());

** getUpdateData() 는 특정 그리드의 데이터 값중 insert update delete 된 값을 지정 하여 보내 getGridUpdatedList, getGridInsertdList,getGridDeleteList 등으로 구분 하여 받을수 있다.  따라서 이것을 모두 가져와 사용 하기위해서는 모두 대상에 적용 시켜야할 필요가 있는데  fSetGridAllFlag("fg2"); 

을 사용 하여 getGridUpdatedList 로 받을수 있다. 

        --JAVA 

       List adminList = request.getGridUpdatedList("updateData3");

for(Iterator all = adminList.iterator(); all.hasNext();){

Map row = (Map)all.next();

row.put("SESS_USER_ID", map.get("SESS_USER_ID"));

row.put("CARD_NO", map.get("CARD_NO"));

createObject("act.main.act7001007.insertAdminList", row);

}

// 위의 값을 submit 하자 submit 의 경우 String 으로 결과 값을 response.addReturnValue("Y"); 돌려줘 밑과 같이 처리 한다. 

if(submit("/module/mis/act/main/Act_7001_007.do", "tmSave", "/root/main,/root/temp/updateData3","","","", false)=="Y"){

if(!fMessageBox("I_Y","doFg1Search")) return;

}else{

if(!fMessageBox("I_N","doFg1Search")) return;

}

         }

//인사의 팝업 사용 하기 

popupValueSet("/root/main/ADMIN_NM", "EMP_NM", "");

popupValueSet("/root/main/ADMIN", "EMP_NO", "");

      empPopup();

      if (doFg2Check())return; // 기존에 추가된 관리자 인지 확인

       fg2.valueMatrix(fg2.row, fg2.colRef("EMP_NM")) = model.getValue("/root/main/ADMIN_NM");

       fg2.valueMatrix(fg2.row, fg2.colRef("EMP_NO")) = model.getValue("/root/main/ADMIN");

function doFg2Check(){

         for (var i=fg2.fixedRows; i<fg2.rows; i++){

if(fg2.valueMatrix(i, fg2.colRef("EMP_NO"))==  model.getValue("/root/main/ADMIN")   ){

if(model.getValue("/root/main/ADMIN")!=""){

jsAlert("이미 등록된 관리자 입니다.");

}

return true;

}

}

}

//선택 ROW 를 삭제 한다. 

         function doDelete(){

if(jsConfirm("삭제하시겠습니까?")){

if(submit("/module/mis/act/main/Act_7001_007.do", "tmDelete", "/root/main/CARD_NO","","","",false)=="Y"){

if(!fMessageBox("D_Y","doFg1Search")) return;

}else{

if(!fMessageBox("D_N","doFg1Search")) return;

}

model.refresh();

}

}

// 추가 자체 FUNCTION 

// 특정 값을 가져와 숫자로 바꾸어 값을 확인 한다. 

//결제일 맥스값 체크

function doSttlDtChange(){

var sttlDt=parseInt(model.getValue("/root/main/STTL_DT"));

if(sttlDt>31){

jsAlert("유효하지 않는 결제일입니다.");

model.setFocus("input3");

}

}

// ROW 를 삭제 하기 

    function doFg2Delete(){

if(fg2.row<fg2.fixedRows){

jsAlert("삭제할 내역을 선택해 주십시요.");

return;

}else if(jsConfirm("선택한 행을 삭제하시겠습니까?")){

fg2.deleteRow(fg2.row);

fg2.colWidth(0)=30;

     }

     }

//SELECT  형식으로 데이터 그리드를 보는것 (사업처 코드를 사용 -보이는 값과 넘기는 값이 다르다 ) 

//데이터 그리드 안에서 

<col ref="BUSI_PLC_CD" type="combo" visibility="hidden">

<choices>

<itemset nodeset="/root/temp/IMPORT/CORP">

<label ref="label"/>

<value ref="value"/>

</itemset>

</choices>

</col>

// 단일 SELECT 안에서 사용 

<select1 id="combo2" ref="/root/search/BUSI_PLC_CD" appearance="minimal" style="left:125px; top:38px; width:210px; height:17px; font-family:Gulim; text-align:center; padding-top:1; ">

<choices>

<itemset nodeset="/root/temp/IMPORT/CORP">

<label ref="label"/>

<value ref="value"/>

</itemset>

</choices>

<script type="javascript" ev:event="xforms-value-changed">

<![CDATA[

doFg1Search();

]]>

</script>

</select1>

위의 두 값은 아래와 같이 초기 셋팅 한다. 

<script type="javascript" ev:event="xforms-model-construct-done">

<![CDATA[

//doImportSearch("CORP,C320,C321,C315@ETC1='320-001'","--전체--,,,--선택--");

doImportSearch("CORP_INF","--전체--");

    //doInit();

]]>

</script>

// 특정 그리드의 checked 된 값을 숫자로 return 하는 function 사용  // act.js 에 구현

fGridChkCntReturn("fg1","isChecked","true")==0

   -- 특정 데이터그리드의 refid 값과 몇개 인제 확인할 상태값을(true or false)  넘겨 준다. 

// 데이터 별로 특정 값을 찾아 style 을 조정 하여 백그라운드를 다르게 보여 준다. 2개 이상의 값

for(var i = fg1.fixedRows ; i < fg1.rows ; i++){

var gbn = fg1.valueMatrix(i, fg1.colRef("GBN"));

if(gbn=="2"||gbn=="6"||gbn=="8"||gbn=="9"){

fg1.mergebyfree(i, fg1.colRef("CARD_NO"), i, fg1.colRef("APROV_DATE"));

fg1.cellStyle("text-align", i, fg1.colRef("CARD_NO"), i, fg1.colRef("APROV_DATE"))="center";

fg1.rowStyle(i, "data", "background-color") =  "#e1e1ff";

fg1.rowStyle(i, "data", "color") =  "#0000ff";

fg1.rowStyle(i, "data", "font-weight") =  "bold";

}else if(fg1.valueMatrix(i, fg1.colRef("GBN"))=="10"){

fg1.mergebyfree(i, fg1.colRef("CARD_NO"), i, fg1.colRef("APROV_DATE"));

fg1.cellStyle("text-align", i, fg1.colRef("CARD_NO"), i, fg1.colRef("APROV_DATE"))="center";

fg1.rowStyle(i, "data", "background-color") =  "#e1e1ff";

fg1.rowStyle(i, "data", "color") =  "#ff0000";

fg1.rowStyle(i, "data", "font-weight") =  "bold";

}

}

//공통단 엑셀 처리 xrw 부분 

T폼 지원 : saveExcel(document.title, document.title, "fg1", "1");

//따로 만든것 

    var excelFileName = "acctCd.xls";

     var fgColName= "소득코드^소득구분^표준코드^순번^소득명^필요경비세율(%)^세율";

     //var fgColName2= "소득코드^소득구분^표준코드^순번^소득명^필요경비세율(%)^세율"; //타이틀 값 두줄 넣을때 사용 fgColName 과 사이즈가 같아야함

     var fgColRef=     "INCM_CD^INCM_CLS^STAN_INCM_CD^STAN_INCM_SEQ^INCM_NM^NECES_TAX_RATE^TAX_RATE";

     model.makeValue("/root/temp/excel/colName",fgColName);

     //model.makeValue("/root/temp/excel/colName2",fgColName2);

     model.makeValue("/root/temp/excel/colRef",fgColRef);

     model.makeValue("/root/temp/excel/getList","act.main.act0009007.getList");

     model.makeValue("/root/temp/excel/title", document.title);

     model.makeValue("/root/temp/excel/fileNm",excelFileName);

     submit("/module/mis/act/main/Act_0000_007.do", "excelDown", "/root/temp/excel,/root/search", "", "excel", "", false, true);

// 엑셀 다운 작업 2

model.makeValue("/root/search/FINC_STAT_CD","390-001");

var excelFileName = "acct_Balance_sheet.xls";

var fgColName= "계정과목코^"+model.getValue("/root/main/TITLE3")+"^"+

model.getValue("/root/main/TITLE3")+"^"+model.getValue("/root/main/TITLE4")+"^"+model.getValue("/root/main/TITLE4");

var fgColName2= "^^금액^금액^금액^금액"; //타이틀 값 두줄 넣을때 사용 fgColName 과 사이즈가 같아야함

     var fgColRef=     "DIS_NM^SEQ^THIS_L_AMT^THIS_R_AMT^BACK_L_AMT^BACK_R_AMT";

     model.makeValue("/root/temp/excel/colName",fgColName);

     model.makeValue("/root/temp/excel/colName2",fgColName2);

     model.makeValue("/root/temp/excel/busiPlcNm",model.getValue("/root/main/TITLE1")+"     "+model.getValue("/root/main/TITLE2"));

     model.makeValue("/root/temp/excel/colRef",fgColRef);

     model.makeValue("/root/temp/excel/getList","act.main.act5002007.getList");

     model.makeValue("/root/temp/excel/title", document.title);

     model.makeValue("/root/temp/excel/fileNm",excelFileName);

     submit("/module/mis/act/main/Act_0000_007.do", "excelDown", "/root/temp/excel,/root/search", "", "excel", "", false, true);

// 비어 있는 fg2 의 값을 삭제 하여 submit

for (var i=fg2.rows; i>=fg2.fixedRows; i--){

if(fg2.valueMatrix(i, fg2.colRef("EMP_NO"))== "" ){

fg2.deleteRow(i);

}

}

// row 를 삭제 하는 경우 위에서 부터 하면 전체 row 값이 바뀌기 때문에 문제가 발생 한다. 

---------------------------------------------------------------------------------------------------------------------------------------------------------------
1 . trustForm 
 화일 이름 : D:\Workspace\Project\ALP\ALP_GSW\WebSource\xfm\test\test.xfm

---------------------------------------------------------------------------------------------------------------------------------------------------------------
2. actionInfo
 화일이름 : D:\Workspace\Project\ALP\ALP_GSW\Config\AS_VHRP_serviceinfo.xml

---------------------------------------------------------------------------------------------------------------------------------------------------------------
3. Facade
 화일이름 : D:\Workspace\Project\ALP\ALP_GSW\JavaSource\alp\as\hkmc\vhrp\service\GrnRoWorkInpFacade.java

 public RoListCdto[] selectRoList(String startDt, String endDt, AdminSessionInfo baseInfo) throws BizException {
  LogonInfo logonInfo = LoginHelper.getLogonInfo(baseInfo);
  return GrnRoWorkInp.getInstance().selectRoList(startDt, endDt, logonInfo);
 }       

---------------------------------------------------------------------------------------------------------------------------------------------------------------
4. biz
 화일이름 : D:\Workspace\Project\ALP\ALP_GSW\JavaSource\alp\as\hkmc\vhrp\service\GrnRoWorkInp.java

 public RoListCdto[] selectRoList(String startDt, String endDt, LogonInfo logonInfo) throws BizException {
  return GrnRoMainDao.selectRoList(startDt, endDt, logonInfo);
 }

---------------------------------------------------------------------------------------------------------------------------------------------------------------
5. dao( DAO ) 
 화일이름 : D:\Workspace\Project\ALP\ALP_GSW\JavaSource\alp\as\hkmc\vhrp\dao\GrnRoMainDao.java

 public static RoListCdto[] selectRoList(String startDt, String endDt, LogonInfo logonInfo) throws BizException {
         RoListCdto[] resArrCdto   = null;
         PreparedStatementWrapper psw  = null;

  try { 
   StringBuffer sql = new StringBuffer();
   sql.append("\n   select ASN_CD     ");
   sql.append("\n             ,RO_NO     ");
   sql.append("\n            ,VIN      ");
   sql.append("\n           ,CSMR_NM     ");
   sql.append("\n           ,I_CDT      ");
   sql.append("\n   from t_ro_info     ");
   sql.append("\n   WHERE ASN_CD = ?    ");
   sql.append("\n         AND i_cdt between ? and ? ");

   psw = new PreparedStatementWrapper(logonInfo.getCoScnCd() + AsConstants.DATA_SOURCE_NAME, sql.toString());

   int index = 1;

   psw.setString(index++,"MA0D96");  
   psw.setString(index++,startDt);    
   psw.setString(index++, endDt);    

   DBManager db = new DBManager();
   List dbData = db.selectList(psw, RoListCdto.class.getName());

   if(dbData.size() > 0) {
   resArrCdto = (RoListCdto[]) dbData.toArray(new RoListCdto[dbData.size()]);
   }

  } catch(SQLException se) {
   logger.error(se.getMessage());
   throw new BizException(AsConstants.SYSTEM_ID, "AS0001");
  } finally {
   if(psw != null)
   psw.release();
  }
   return resArrCdto;
  } 

---------------------------------------------------------------------------------------------------------------------------------------------------------------
6. dto( VO )
 화일이름 : D:\Workspace\Project\ALP\ALP_GSW\JavaSource\alp\as\hkmc\vhrp\dto\RoListCdto.java

---------------------------------------------------------------------------------------------------------------------------------------------------------------
7. jsp 
 화일이름 : D:\Workspace\Project\ALP\ALP_GSW\WebSource\jsp\test_selectRoList.jsp

 
<%--
***************************************************************************************************
* JSP 페이지 태그 선언
***************************************************************************************************
--%>
<%@page contentType="text/xml; charset=EUC-KR"%>
<%@page import="alp.as.hkmc.vhrp.dto.RoListCdto"%>
<%@page import="alp.as.hkmc.util.XmlGenHelper"%>
<%@page import="com.ebstorm.jframework.foundation.message.MsgParameter"%>
<%--
***************************************************************************************************
* 변수 선언 및 선행 로직
***************************************************************************************************
--%>

<%
    XmlGenHelper xml = new XmlGenHelper(0);
    try {

 //메소드 이름을 작성합니다.
     RoListCdto[] result = (RoListCdto[]) request.getAttribute("test_selectRoList");
        
 // 컬럼 이름 작성(반환받는 곳의 이름)
        String[] column = {
      "asnCd"
       ,"roNo"
       ,"vin"
       ,"csmrNm"
       ,"iCdt"                
     };
 
        // 노드 스트림의 위치를 작성합니다. 
 int pNode = xml.add (0, "res", "");
        
 //소스가 있는 곳을 작성합니다.
        xml.setSourceClassName("alp.as.hkmc.vhrp.dto.RoListCdto");
        xml.genXml(pNode, "grid", column, result);

        MsgParameter param = new MsgParameter();

        param.add( result.length );
        xml.setMessage("AS0002", param);

    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        out.println(xml.getXmlString());
    }
%>

TrustForm 2.0 이 지원 하는 XForms 이벤트

※ select controls : radio, checkbox, listbox, combo

<script type="javascript" ev:event="onclick">
     <![CDATA[
      if(iviewer_myList.currentStyle.width < 630 ) {
       iviewer_myList.attribute("width") = "630px";
      }else {
       iviewer_myList.attribute("width") = "228px";
      }
      butCha.attribute("left") = iviewer_myList.currentStyle.left + iviewer_myList.currentStyle.width -2;
      changeGroup.attribute("left") = iviewer_myList.currentStyle.left + iviewer_myList.currentStyle.width + butCha.currentStyle.width;
      body.dispatch("onwindowresize");
     ]]>
    </script>
   </button>
  </group>
  <script type="javascript" ev:event="onwindowresize">
   <![CDATA[
   if(iviewer_myList.currentStyle.width < 630 ){
    changeGroup.attribute("width") = group_workspace.currentStyle.width - 255;
   }else{
    changeGroup.attribute("width") = group_workspace.currentStyle.width - 670;
   }
   switch1_change.attribute("height") = group_workspace.currentStyle.height - 390;
   ]]>
  </script>

//----------------------★그리드의 전체체크
<!--//</instance>밑에//-->

<script type="javascript" ev:event="xforms-ready">
 <![CDATA[
  //캡션 영역에 체크박스를 설정한다
  datagrid1.fixedcellcheckbox(0, datagrid1.colRef("save"), false) = true;
 ]]>
</script>

//그리드안의col도
<col ref="save" type="checkbox"/>

//----------------------★그리드의 컬럼,데이터들 문자열숨김
ellipsis = true;
//(CSS에 적용하려면 ellipsis : true;)

//----------------------★그리드의 마지막컬럼을 width에 딱맞게
extendlastcol = scroll;
//(CSS에 적용하려면 extendlastcol : scroll;)

//----------------------★radio컨트롤의 switch사용
<switch id="switch1" style="left:30px; top:30px; width:205px; height:70px; "> 
   <case id="case1" selected="true"> 
       <input id="input1" style="left:50px; top:25px; width:100px; height:20px; "/> 
   </case> 
   <case id="case2"> 
       <button id="button1" style="left:45px; top:25px; width:100px; height:20px; "> 
           <caption>button1</caption> 
       </button> 
   </case> 
</switch>

 <select1 id="select11" ref="/root/select" appearance="minimal" style="left:250px; top:35px; width:100px; height:20px; "> 
  <choices> 
      <item> 
          <label>case1</label> 
         <value>1</value> 
      </item> 
      <item> 
          <label>case2</label> 
          <value>2</value> 
      </item> 
  </choices> 
  <script type="javascript" ev:event="xforms-select"> 
      <![CDATA[ 
      if ( root.select.text == 1 ) 
      { 
          model.toggle("case1"); 
      } 
      else if ( root.select.text == 2 ) 
      { 
          model.toggle("case2"); 
      } 
      ]]> 
  </script> 
 </select1>

//----------------------★datagrid컨트롤의 핸드폰번호output의 출력방법(999-9999-999)
for(var i = 1 ;  i <= model.getValue("/dbio_total_count_") ;i++)
{ 
 //alert(model.getValue("/root/dis/data/dis_CnncIntMPatMultiDto/CnncIntMPatListDto/cnncIntMPatDTO["+i+"]/thmoRvnRt"));
 jc_datagrid.valueMatrix(i,col) = "";
}//for
 /*parseFloat(numstring) 
 numstring 인수는 부동 소수점 숫자를 포함한 문자열입니다.  
 parseFloat 메서드는 numstring에 포함되어 있는 숫자에 해당하는 숫자 값을 반환합니다. 
 numstring의 접두사를 부동 소수점 숫자로 구문 분석할 수 없으면 NaN(숫자 아님)이 반환됩니다. 
 parseFloat("abc")    // NaN을 반환합니다.
 parseFloat("1.2abc") // 1.2를 반환합니다.
 */

//----------------------★input컨트롤의 format을 정하고싶을때

 input1.attribute("format") = "999999-9999999";
 input1.refresh(); 
 

//----------------------★라디오버튼이바뀔때 초기화
<script type="javascript" ev:event="xforms-value-changed">
 <![CDATA[       
  if (radio1.value == 1) 
  { 
   model.resetInstanceNode("/root/dis/data/dis_CsSrchInListDTO/csSrchInDTO");
   model.refresh();
  } 
  else if (radio1.value == 2) 
  { 
   model.resetInstanceNode("/root/dis/data/dis_CsSrchInListDTO/csSrchInDTO");
   model.refresh();
  }   
 ]]>
</script> 
 
 
 
//----------------------★엔터키이벤트
<script type="javascript" ev:event="onkeyup">
 <![CDATA[
  if(event.keyCode == 13) 
  {
   model.setFocus("button1");
   button1.dispatch("DOMActivate");
  }
 ]]>
</script> 

<!-- 체크박스 라디오 이미지를 쓰시오 checkimage="checkedRadioImage.bmp" uncheckimage="unCheckedRadioImage.bmp"-->

//----------------------★그리드 저장버튼 클릭 시 빈 row 삭제 코드
var _grid = datagrid1;      //그리드 ID

for(var i=_grid.rows-_grid.fixedRows; i>=_grid.fixedRows; i--) 
{
 var nodePath = _grid.nodeset+"["+i+"]/*";
 if(model.getXPathValue("count-non-empty("+nodePath+")") == "0") 
 {
  _grid.deleteRow(i, false);
 }
}
_grid.refresh();

//----------------------★switch tab button
<!--//스위치//-->
<switch id="switch1" style="left:25px; top:25px; width:960px; height:500px; ">
 <case id="case1" selected="true">
  <iviewer id="iviewer1" src="JC60301_btn1.xrw" style="left:0px; top:0px; width:100%; height:600px; "/>
 </case>
 <case id="case2">
  <iviewer id="iviewer2" src="JC60301_btn2.xrw" style="left:0px; top:0px; width:100%; height:600px; "/>
 </case>
</switch>
<!--//스위치//-->

//----------------------★그리드의 체크
//save 하지 않을 행들을 확인한다 (체크되지 않은 행들)
var exportfalserows = "";
for(var i=datagrid1.fixedRows;i<datagrid1.rows;i++)
{
 if(datagrid1.valueMatrix(i, datagrid1.colRef("save")) == "false")
 {
  if(exportfalserows != "")
   exportfalserows += ","+i;
  else
   exportfalserows += i;
 }
}

//----------------------★콤보-공통코드 일부만 셋팅하기
combo1.nodeset="/root/comboData/masterNm/item[value='01' or value='02' or value='03']"

//01로 시작하는 item의 필터링 xpath식은 아래와 같이 해주시면 됩니다.
item[starts-with(value, '01')]

/*
위와 같이 해 주시면 01로 시작하는 item만을 가져올 수 있고, 
두번째 질문과 같이 시작하는 문자가 정해져 있지 않다면
위의 xpath식의 빨간 색 부분을 미리 변수에 담아두어서 콤보의 nodeset을 동적으로 바꿔주시면 됩니다.
*/

var str = "G";

combo1.choices.itemset.attribute("nodeset") = "/root/comboData/item[starts-with(value, '" + str + "')]";

//----------------------★데이터그리드 숫자row
rowheader="seq"

//----------------------★데이터그리드 merge하기(같은속성-데이터,컬럼,타이틀끼리)
mergecells="byrowrec"

/* bycol : 상하만 머지를 한다.
 byrow : 좌우만 머지를 한다.
 bycolrec : 상하좌우를 모두 머지한다. 상하 머지를 우선 적용한 후 좌우 머지를 한다.
 byrowrec : 상하좌우를 모두 머지한다. 좌우 머지를 우선 적용한 후 상하 머지를 한다.
 byrestriccol : 상하만 머지를 한다. 첫번째 열부터 순서대로 머지를 한다. 머지를 할 영역은 이전 열의 머지 결과에 의해 결정된다.
 byrestricrow : 좌우만 머지를 한다. 첫번째 행부터 순서대로 머지를 한다. 머지를 할 영역은 이전 행의 머지 결과에 의해 결정된다
*/

//----------------------★데이터그리드의 데이터의 내용에 따라 높이 자동조절(텍스트가 길어지면 다음줄로)
autoresize="true"
//셀 내용의 길이에 따라 행의 높이를 자동으로 조절하도록 설정하는 속성

//----------------------★데이터그리드 부분합계구하기
datagrid1.subtotalposition="below"; 
//추가된 행의 위치는 
   "above": 상단에 삽입
   "below": 하단에 삽입

//datagrid.subtotal(SubtotalType type, Integer groupColumn, Integer totalColumn, [String format], [String style], [Integer captionColumn], [String caption], [Boolean fillText]);

/*
SubtotalType type : sutotal 타입 
     - "average" : 평균 값
     - "clear" : 모든 subtotals를 클리어 한다.
     - "count" : 행의 갯수
     - "max" : 가장 큰 값
     - "min" : 가장 작은 값
     - "percent" : 모든 더해진 값의 퍼센트
     - "sum" : 더한 값
Integer groupColumn : subtotal 계산을 할 때 데이터를 분류하는 기준이 되는 열의 index 
Integer totalColumn : subtotal 을 수행할 값들이 있는 열의 index 
[String format] : subtotal 행의 포맷 
[String style] : subtotal 행의 스타일 
[Integer captionColumn] : subtotal 행의 제목을 표시할 열의 index. default 는 groupColumn 과 동일하다.
[String caption] : subtotal 행의 제목. default 는 groupColumn 의 이전행의 텍스트와 동일하다. 
[Boolean fillText] : 첫번째 열부터 그룹 열 전까지 이전 행의 텍스트를 subtotal 행에 복사할 지 여부. true 로 설정되면 이전 행의 데이터가 복사되어 merge 상태가 이어질 수 있다. default 는 false (이전행의 값을 복사하지 않음) 
     - true
     - false 
*/ 

//----------------------★탭버튼 그룹으로 관리하기
group="case1" 
//group이 같은 버튼들 중 하나가 선택 되면 다른 버튼들은 선택이 해제된다.

groupalign="user"   
/*그룹 버튼들의 모양을 지정하는 속성이다.
top 으로 설정하면 페이지의 위쪽에 적용할 수 있는 모양으로 자동으로 바뀌고, bottom 으로 설정하면 페이지의 아래쪽에 적용할 수 있도록 모양이 바뀌게 된다
*/

//----------------------★창 열때 윈도우사이즈 고정하기
//창 사이즈고정
window.width = "500";
window.height = "500";

//----------------------★데이터그리드 특정  컬럼만 이벤트 실행
<script type="javascript" ev:event="onclick">
 <![CDATA[
  if(datagrid1.isCell(event.target))  
  {
   if(datagrid1.col == "8")          
   {
    alert("팝업열기");
    
   }
  }
 ]]>
</script> 


//----------------------★데이터그리드 헤더 타이틀 줄바꿈
해당그리드의 col선택하고 Alt + Enter

단위&#xA;(원)
(Alt + Enter)치면 된다
//"\n"


//----------------------★데이터그리드 로딩시 설정
//컬럼체크박스bool
datagrid1.fixedcellcheckbox(0,0) = true;   
   
//로딩시그리드빈줄삭제
model.removeNodeset(datagrid1.nodeset);
//datagrid1.deleteRow(datagrid1.fixedRows);


//----------------------★컨트롤에 단축키 지정하기
accesskey="ctrl+a"
/*
지정된 컨트롤에 접근하기 위한 단축키를 설정할 수 있다.
기본적으로 accesskey 속성에 지정한 키를 누르면 해당 컨트롤에 onaccesskey 이벤트와 DOMActivate 이벤트가 순차적으로 발생한다.
형식 : [namedkey | keycode()] + …
* named key
insert, delete, home, pageup, pagedown, end, backspace, pause, print, enter, tab, escape, up, down, left, right, ctrl, alt, shift
f1..f12, 0..9, a..z  (a..z 는 대소문자 구분없이 사용하고, alt 키는 지원하지 않는다)
* keycode function
keycode(code) : 주의 keycode() 에서 keycode 와 ( 를 붙여 써야한다.
*/

//----------------------★그리드 컬럼 정렬하기
datagrid.colsort(0) = "asc";
/*"asc" : 오름차순으로 소팅되도록 설정
- "desc" : 내림차순으로 소팅되도록 설정
- "none" : 소팅대상에서 제외되도록 설정 
*/

//----------------------★그리드 정렬
explorerbar 
/* sort : 사용자가 열의 헤더를 클릭, 각 열의 데이터를 정렬 할 수 있다.
ㅁ move : 사용자가 열의 헤더를 드래그하여 위치를 재배열 할 수 있다.
ㅁ sortshow : sort 기능을 하며 헤더에 작은 화살표시로 정렬 방식을 표현 (오름차순, 내림차순)
ㅁ sortmove : sort, move 기능을 동시에 한다.
ㅁ sortshowmove : shortshow, move 의 기능을 동시에 한다.
*/


//----------------------★그리드 정렬후 이벤트
<script type="javascript" ev:event="onaftersort">
     <![CDATA[
      //정렬해도 인덱스 맞게 가져오는
      datagrid1.gridToInstance();  
     ]]>
</script>


//----------------------★후처리시 조건값에 따라 그리드 체크박스 disabled처리
for(var i=1; i<datagrid1.rows; i++)
{
 datagrid1.isReadOnly(i, 0, i, 0) = true;
 //datagrid.isReadOnly(row(줄시작점),col(컬럼시작점),row(줄끝점),col(컬럼끝점) = true; 
}



//----------------------★콤보에 선택된 인덱스 반환
var index = combo1.focusIndex;
/*리스트DTO의 값을 단일DTO로 value값을 넣어줘야할 때 유용하게 
현재 포커스를 가진 아이템의 인덱스를 반환한다.  초기에는 focusIndex가 -1로 셋팅 되어 있다. 
포커스가 다른 컨트롤로 이동하더라도 combo의 focusIndex는 마지막에 포커스가 간 아이템의 인덱스를 저장한다 
*/

ex)
<script type="javascript" ev:event="xforms-value-changed">
      <![CDATA[
       var index = companyCb.focusIndex + 1;
       //instance는 1부터 시작하니까

       msgNm.value = companyCb.label;       
       msgCtText.value = model.getValue("/root/dis/data/dis_ShmsMagListDTO/shmsMagDTO["+index+"]/msgCt");
       //msgCtText.value = companyCb.value;
       
       model.refresh();
      ]]>
     </script>


//----------------------★인스턴스 보기
// 인스턴스 보기
window.viewInstance();


//----------------------★그리드 타이틀 사이즈 셋팅
// 인스턴스 보기
datagrid1.rowHeight(1) = 40;
/*그리드 특정 행의 높이 값을 설정하거나 반환한다.
데이터 행과 fixed row 모두 제어가 가능하다.
rowHeightMax property 와 rowHeightMin property 에 설정되어 있는 최대 최소 값 범위 내에서 설정을 해야 하면, 
이 범위를 벗어났을 경우에는 최대 또는 최소 값으로 설정이 된다*/

1. 편집 창 공통 단축키  

copyNode 
src노드의 모든자식노드들은 des노드의 하위에 복사

노드를 복사하여 반영시키는 인스턴스의 노드들을 변경시키므로 refresh 함수를 사용하여 변경된 인스턴스를 반영시켜야한다


setValue
model.setValue(String ref, String value, [Boolean cdata]);

String ref            : node 에 해당하는 XPath 식 또는 노드 객체 
String value        : 값 
[Boolean cdata] : CDATA Section을 사용해서 값을 입력할지 여부를 설정 
     - true
     - false 

맵핑된 컨트롤에 데이터를 반영하기위해서는 setValue함수를 사용한 후에 refresh 함수를 사용하여 반영시켜야한다

  
XML
eXtensible Markup Language의 약자로 새로운 Markup 언어를 정의하기 위해 W3C에서 만든 메타 언어입니다. 
HTML과는 달리 새로운 태그를 정의하여 확장하고 데이터를 기술할 수 있는 특징을 가지고 있습니다.

XML 특징
 -유연하고 개방적인 표준 기반 형식을 채택함으로써 뛰어난 상호 운영성을 제공
 -기존 Web 기술(인터넷기반의 프로토콜 및 메커니즘)과 함께 사용 가능
 -프로그래밍 언어에 대해 독립적이고 여러 Application을 사용 가능하도록 지원
 -Unicode 기반

XML Document의 종류
 Well-formed document (잘 짜인 문서)
- XML 1.0 recommendation 스펙을 준수하여 작성된 문서를 의미
- TrustForm System에서는 Business Data를 저장하는 개념인 인스턴스를 구성하는 용도로 사용됨
 Valid document (유효한 문서)
- Well-formed document이면서 동시에 XML로 개발된 특정 Markup 언어에 맞게 작성된 문서를 의미
- TrustForm System에서는 XForms의 Host language 개념으로 XML 기반의 XHTML이 사용됨


XForms
HTML Form을 대체하기 위해 W3C에서 만든 XML 기반의 차세대 Form 기술입니다

XForms 특장점
 -Next generation of HTML forms
 -Richer and more flexible than HTML forms
 -Will be the forms standard in XHTML 2.0
 -Platform and device independent
 -Separates data and logic from presentation
 -Uses XML to define form data
 -Stores and transports data in XML documents
 -Contains features like calculations and validations of forms
 -Reduces or eliminates the need for scripting
 -W3C Recommendation

XForms 동작방식
 단독으로 수행되지 않고 다른 Markup 언어(Host language) 내부에 위치하여 사용됨
 Host language 내부에 XForms을 적용함으로써 다양한 클라이언트를 수용할 수 있음
 TrustForm System에서는 Host language로 XHTML이 사용됨

XForms 동작방식
 단독으로 수행되지 않고 다른 Markup 언어(Host language) 내부에 위치하여 사용됨
 Host language 내부에 XForms을 적용함으로써 다양한 클라이언트를 수용할 수 있음
 TrustForm System에서는 Host language로 XHTML이 사용됨

XForms 구성요소
 Model : Data section
- Form 내부에서 사용되는 데이터를 저장하고, 가공하거나 서버로 전달하는 역할
 UI controls : Presentation section
- User Interface를 구성하는 컨트롤
 Event handlers : Logic section
- User Interface에서 발생하는 이벤트를 처리하는 부분으로써 TrustForm System에서는 JavaScript나 VBScript 언어를 사용가능

XForms 문서구조
-HTML Form과 마찬가지로 화면을 구성하는 기본적인 컨트롤에 대한 정의가 있으며, XML 데이터를 서버와 통신하는 방법에 대한 정의도 함께 있습니다. XForms 문서는 크게 Data부분과 UI부분으로 구분됩니다.
 Head 영역
           -  Head 구간은 데이터와 관련된 객체들과 Global Script가 위치하게 됩니다
    Body 영역
           - Body 영역은 각 컨트롤 및 컨트롤의 이벤트를 처리하는 스크립트가 함께 오게 됩니다

XPath
XML 문서의 데이터 부분을 참조하기 위한 W3C의 표준 문법 규약으로 XML Element를 참조하기 위하여 파일 시스템에서 사용되는 개념과 유사한 경로(Path)를 사용합니다. 
XForms 스펙에서 분리된 데이터와 UI 컨트롤을 맵핑하기 위한 용도로 사용됩니다.

XPath 특장점
 -XML 문서의 특정 부분을 자유 자재로 접근할 수 있는 기능 제공
 -파일 시스템의 디렉터리 구조와 유사한 개념으로 절대경로와 상대 경로를 지원
 -Node, Date, Time, String, Number, Boolean 데이터타입과 관련된 Method들을 제공
 -XML DOM 트리를 구성하는 노드나 노드셋에 접근하기 위해 Location Path와 XPath Method로 구성된 XPath expression을 사용하여 데이터에 접근하거나 검색할 수 있음



XML 기본 문법
 
인스턴스는 처음에 설명한 것과 같이 XML 문법을 사용합니다. 따라서 인스턴스를 구성하기 위해서는 기본적인 XML 문법에 대해서 알아야 합니다. 
물론 TrustForm에서 제공하는 기능인 인스턴스 창을 이용하여서 구성하면 간단한 인스턴스는 XML 기본문법을 몰라도 사용가능합니다. 
그러나 좀 더 복잡하고 많은 데이터를 다루기 위해서는 기본적인 XML 문법을 이해하고 인스턴스를 설계해야합니다.

1. XML 기본문법

XML 문법 중 가장 기본문법은 “Well-Formed XML”입니다.

Well-Formed XML 이란 XML 1.0 Spec에 정의된 특정문법규칙을 따르는 XML입니다.

XML 1.0 Spec은 다음과 같습니다.

1. 모든 Start-Tags는 하나의 End-Tags와 짝으로 구성되어야만 합니다.

2. Tag는 겹쳐서 쓸 수 없습니다.

3. XML 문서는 하나의 Root Element만을 갖습니다.

4. Element 이름은 Element 이름 작성규칙을 따릅니다.

5. XML은 대소문자를 구분합니다.

6. XML은 Tag안의 공백을 유지합니다.

1 <root> 
2       <name> 
3               <first>John</first> 
4               <middle>Fitzgerald Johansen</middle> 
5               <last>Doe</last> 
6       </name> 
7 </root>

위의 XML 문서는 Well-Formed XML 문서입니다. 위의 XML 문서를 살펴보면서 Well-Formed XML에 대해서 알아보겠습니다.

XML 문서를 보면 “<”와 “>”로 이루어진 부분이 있습니다. 이 부분이 Element입니다. Element는 XML 문서 내에서 데이터를 표현하기 위한 태그정의와 데이터를 말합니다. 위의 XML 문서에서 Element는 <root>, <name>, <first>, <middle>, <last>가 있습니다. 각각의 Element는 Start-tag와 End-tag로 이루어져 있습니다. Start-tag에 ‘/’를 붙여주면 End-tag가 됩니다.

1 <root> <name> <first> <middle> <last> <- Start-tag 
2 </last> </middle> </first> </name> </root> <- End-tag

위와 같이 Start-tag와 End-tag는 겹쳐지지 않고 순서대로 사용됩니다. 만약 위의 소스에서 <first>와 <middle> 사이에 </name>가 온다면 위의 XML 문서는 Well-Formed XML이 아닙니다.(2번 위반)

1 <root> <name> <first> </name> <middle> <last> 
2 </last> </middle> </first> </root>

또 다음과 같이 <root> Element가 XML 문서의 모든 Element를 포함하고 있지 않는다면 Well-Formed XML이 아닙니다.(3번 위반)

1 <root> 
2 </root> 
3 <name> 
4   <first>John</first> 
5   <middle>Fitzgerald Johansen</middle> 
6   <last>Doe</last> 
7 </name>

위의 XML 문서는 Root Element가 <root>와 <name> 두개가 존재하고 있습니다. (Root Element는 대부분 <root>로 사용하지만 꼭 <root>를 사용할 필요는 없습니다.) 위의 XML 문서에서 <root></root>를 제거하면 Well-Formed XML 조건을 만족하게 됩니다.

마지막으로 Element는 사용자가 정의할 수 있습니다. 즉 사용자가 임의로 이름을 붙여서 작성할 수 있습니다. 그러나 Element를 작성하는 데는 일정한 형식이 있습니다. Element 이름 작성 규칙에 대해서는 다음 장에서 자세하게 알아보겠습니다.

이와 같이 기본적인 XML 문법을 만족해야만 XML 문서로 사용할 수 있습니다.

2. Element

XML 기본문법을 살펴보면서 간단하게 Element에 대해서 알아봤습니다. Element는 XML 문서 내에서 데이터를 표현하기 위한 태그정의와 데이터를 의미합니다. XML문서에서 Element의 이름은 사용자가 정의할 수 있습니다. 즉 <이름>, <나이>, <주소> 와 같은 것들이 XML 문서에서 모두 유효한 Element입니다. 그러나 Element를 정의할 때 Element 이름 작성규칙에 따라 정의해야만 합니다. 이를 위반하면 Well-Formed XML이 아니므로 XML 문서로 사용할 수 없습니다.

Element 이름 작성규칙은 다음과 같습니다.

1. 시작문자는 문자 또는 ‘_(Under Line)’만이 올 수 있습니다.

2. 첫 문자 다음에는 ‘-’, ‘.’, 숫자가 올 수 있습니다.

3. ‘:’ 문자를 포함할 수 없습니다.(NameSpace의 예약어임)

4. 대소문자 구분 없이 ‘XML’또는 ‘xml’로 시작할 수 없습니다.

5. ‘<’ 문자 뒤에 공백허용이 안됩니다. ‘>’앞에는 공백이 허용됩니다.

(주의! Empty Element인 ‘/>’ 사이에는 공백이 허용되지 않습니다.)

Element 이름 작성규칙에 대하여 올바르게 작성된 Element와 틀리게 작성된 Element의 간단한 예를 보면서 알아보겠습니다.

올바른 이름 작성규칙 적용의 예

<First.Name></First.name>

<First-Name></First-Name>

잘못된 이름 작성규칙 적용의 예

<XML-FirstName></XML-FirstName> (4번 규칙 위반)

<1.FirstName></1.FirstName> (1번 규칙 위반)

<First=Name></First=Name> (2번 규칙 위반)

<First Name></First Name> (5번 규칙 위반)

3. Empty Element

Empty Element란 내용이 없는 Element를 의미합니다.

1 <name> 
2   <first>John</first> 
3   <middle></middle> 
4   <last>Doe</last> 
5 </name>

위의 XML에서 <middle> Element와 같이 내용이 없는 Element인 경우

축약된 형태로 표현이 가능합니다.

다음의 두 XML은 동일한 의미를 갖습니다.

1 <middle></middle> 
2 <middle/>

4. Attribute

이번에는 Attribute에 대해서 알아보겠습니다. Attribute란 Element의 내용을 보충해 주는 속성입니다. 속성의 사용은 사용자가 정의하기에 따라서 달라질 수 있습니다. 다음 예를 살펴보면 속성의 사용이 어떤 의미를 갖는지를 알 수 있습니다.

1 <root> 
2   <cd serial="AB1102"> 
3       <title>CD1</title> 
4       <artist>Singer</artist> 
5       <date>20051215</date> 
6   </cd> 
7 </root>

위의 XML 문서는 CD의 정보를 보여주고 있습니다. <cd> Element를 살펴보면 Attribute로 “serial”을 포함하고 있습니다. 이 ‘serial' 속성은 특정 Application에서는 필요로 하지만 또 다른 Application에서는 필요로 하지 않을 수도 있습니다. 위의 ’serial'을 <cd> Element에 속한 다른 Element들과 같이 <serial> Element로 사용할 수 있지만 위와 같이 Attribute로 사용해서 ‘serial' 정보가 특정 Application에서만 사용되는 정보로 구분할 수가 있습니다.

Attribute도 Element와 같이 작성 규칙을 갖고 있습니다. Attribute의 작성규칙에 대해서 알아보겠습니다.

1. Start-Tag에 사용합니다.

2. 반드시 Name과 Value가 존재해야 합니다.

3. Element 이름 작성규칙을 따라야 합니다.

4. 하나의 Element안의 Attribute는 유일해야 합니다.

올바르게 작성된 Attribute와 틀리게 작성된 Attribute의 예를 살펴보면서 설명하겠습니다.

올바른 Attribute 예

<Name NickName="SmileMan">John</Name>

잘못된 Attribute 예

<Name>John</Name NickName="SmileMan"> (1번 규칙 위반)

<Name NickName>John</Name> (2번 규칙 위반)

<Name NickName="SmileMan" NickName="SuperMan">John</Name> (4번 규칙 위반)

잘못된 Attribute 예에 대해서 몇 가지만 살펴보겠습니다. 두 번째 예는 Attribute가 Attribute 이름만 있고 값이 존재하지 않는 경우입니다. 이렇게 값이 존재하지 않는 Attribute를 사용할 때는 Value 부분을 쌍 따옴표(“”) 또는 홀 따옴표(‘’)를 사용해서 값이 없는 Attribute라는 것을 명시해 줘야 합니다. 세 번째 예는 하나의 Element에 동일한 이름을 갖는 Attribute 두개가 동시에 사용된 경우입니다. 이런 경우 두개의 Attribute를 구분할 수 없게 되므로 에러가 발생하게 됩니다.

5. 주석

XML 문서에서도 주석을 사용할 수 있습니다. 주석 역시 간단한 작성규칙이 있습니다. 주석의 작성규칙은 다음과 같습니다.

1. <!-- 문자열로 시작해서 --> 문자열로 종결됩니다.

2. Tag 안에는 사용할 수 없습니다.

3. “--” 문자를 사용할 수 없습니다.

다음은 주석이 사용된 예입니다.

1 <root> 
2   <!-- 다음은 이름을 나타내는 Element입니다.--> 
3   <name> 
4       <first>John</first> 
5       <middle>Fitzgerald Johansen</middle> 
6       <last>Doe</last> 
7   </name> 
8 </root>

6. Element 내용(PCDATA와 CDATA)

PCDATA와 CDATA에 대해서 알아보겠습니다. 이 두 데이터 타입은 Element의 내용을 표시할 때 사용되는 개념입니다. 다음 예를 보면서 두 데이터 타입에 대해서 알아보겠습니다.

1 <name> 
2   <first>John</first> 
3   <middle>Fitzgerald Johansen</middle> 
4   <last>Doe</last> 
5 </name>

<first>John</first>는 하나의 Element입니다. 이 Element에서 Start-Tag와 End-Tag사이에 있는 ‘John’이 PCDATA입니다. 이와 PCDATA는 Element의 태그사이에 있는 문자열부분으로 파싱된 문자 데이터(Parsed Character DATA)입니다.

PCDATA에서 사용할 수 없는 예약된 문자들이 있습니다. 예를 들면 “<”와 “&과 같은 문자입니다.

1 <비교문>x < 7 && x > 5</비교문>

위의 <비교문> Element는 Well-Formed XML이 아닙니다. 그 이유는 <비교문> Element의 내용인 PCDATA가 올바르지 않게 작성되어 있기 때문입니다. XML 처리기는 Element의 내용인 ‘x<7 && x>5’ 부분을 처리하면서 “< 7 && x >”를 하나의 태그로 인식하려고 할 것입니다. 이 부분은 Element 이름 작성규칙 중 5번(공백문자를 포함)을 위반하고 있습니다. 또 이 부분을 넘어간다고 해도 ‘&&’에서 예약어를 사용해서 또 에러가 발생합니다.

이러한 데이터를 Element의 내용으로 사용하는 방법은 두 가지가 있습니다. 첫 번째 방법은 위의 문자들을 이스케이프 문자를 사용해서 표현해주는 방법입니다. 두 번째 방법은 CDATA를 사용하는 방법이 있습니다.

6.1. 이스케이프 문자

앞에서 본 것과 같이 두 문자가 발생시키는 오류를 피하려면 ‘<’ 문자를 ‘&lt;’로 바꿔 쓰고 ‘&’ 문자를 &amp;로 바꿔서 쓰면 됩니다. 이렇게 하면 위에서 작성한 XML이 Well-Formed XML이 됩니다.

1 <비교문>x &lt; 7 &amp;&amp; x > 5</비교문>

XML 처리기는 위에서 사용한 이스케이프문자를 화면에 보여줄 때는 ‘&lt;’와 ‘&amp;’를 ‘<’와 ‘&’ 문자로 바꿔서 보여주게 됩니다.

‘&lt;’와 ‘&amp;’는 엔터티 레퍼런스(entity reference)라고 합니다. XML에는 다음과 같은 엔터티들이 정의되어 있습니다.

‣ &amp;  - & 문자

‣ &lt;     - < 문자

‣ &gt;     - > 문자

‣ &apos;  - ' 문자

‣ &quot;  - " 문자

6.2. CDATA

만약 이스케이프 문자를 많이 사용하게 되면 문서가 이해하기 힘들어지게 됩니다. 이럴 경우에는 CDATA 섹션을 사용할 수 있습니다.

CDATA 섹션은 파싱되지 않는 데이터(Character DATA)를 의미합니다. 즉 CDATA 섹션에 작성된 텍스트는 XML 처리기가 파싱하지 않습니다.

위에서 작성한 XML 문서를 다음과 같이 CDATA 섹션을 사용하면 Well-Formed XML이 됩니다.

1 <비교문><!CDATA[x &lt; 7 &amp;&amp; x > 5]]></비교문>

CDATA 섹션은 "<![CDATA["로 시작해서 “]]>”로 끝납니다. 이 사이에 있는 문자열은 모두 사용자가 작성한 그대로 화면에 표시됩니다.

이 CDATA 섹션은 TrustForm을 사용하면서 자주 볼 수 있습니다. 스크립트를 작성할 때 스크립트의 처리부분을 CDATA 섹션을 사용해서 작성합니다.

1 <script type="javascript"> 
2   <![CDATA[ 
3   function myFunc(){ 
4       alert("이곳은 스크립트의 CDATA 섹션입니다"); 
5   } 
6   ]]> 
7 </script>

위와 같이 스크립트를 사용할 때는 XML 처리기가 스크립트를 파싱하지 않게 CDATA 섹션을 사용해서 분리시킵니다.

 
 
 
출처 : TrustForm4.0  Help

트러스트폼 시스템

컴스퀘어 (02-2051-2742, www.comsquare.kr)
● 종류 | X-인터넷 플랫폼 
● 특징 | UI가 미려하며 개발이 용이하다. 
● 평가 | ★★★★

X-인터넷의 개념이 세간에 발표된 지도 어느덧 10년이 다 됐다. 이 기간 동안 X-인터넷은 RIA와 같은 시장을 형성하면서 지속적으로 발전해 왔지만 초기 기대에 비해 시장의 반응은 훨씬 싸늘했다. 그 원인을 마케팅이 부족했기 때문이라고 분석하기도 한다. 그럼에도 국내에서는 금융, 공공을 비롯해 조금씩 시장이 확산되는 추세다. 국내 대표 X-인터넷 업체 중 하나인 컴스퀘어의 트러스트폼 시스템도 현대자동차, 행정자치부, LG카드 등 다양한 분야에서 사용되고 있다. 트러스트폼 시스템은 기존의 C/S 시스템 환경의 장점을 수용하고 새로운 웹 개발 환경에 능동적으로 대처하기 위한 X-인터넷 기반의 웹 개발 솔루션으로 복잡하고 난해한 기업용 애플리케이션 개발에 최상의 개발 환경을 제공하는 웹 개발 툴과 운영환경 솔루션이다.

트러스트폼 시스템의 활용 범위
트러스트폼 시스템은 복잡한 업무용 애플리케이션 UI의 신속한 개발과 유지보수를 위해 C/S와 WEB 아키텍처의 장점을 결합하여 만든 UI 개발 및 운영 솔루션으로 대용량 데이터 처리와 빈번한 트랜잭션이 요구되는 시스템, 복잡한 UI 기능과 로직 처리가 필요한 시스템, 다수의 Legacy 및 Backend 시스템 연동이 필요한 경우에 효과적이다. 이런 특징으로 인터넷을 통해 서비스 되는 업무시스템이나 금융/기업/공공기관 등 복잡한 UI 처리가 필요한 업무시스템, 보험청약서, 대출/카드신청서, 견적/발주서 등의 문서교환 업무시스템에서 주로 사용되고 있다.

특히 개발 및 운영 측면에서 개발 생산성 향상을 위한 Tool 도입이 필요한 경우 혹은 화면 개발과 Business Logic 개발 작업의 분리가 필요한 경우, 빈번한 시스템 변경 및 개선 작업이 예측되는 경우 등에 효과적이다.

트러스트폼은 서버 독립적인 솔루션으로 기존 WEB, WAS 서버 구성에 트러스트폼 서버 라이브러리만 탑재하는 것으로 운용이 가능해 서버 제품에 대한 추가 구입 비용이 들지 않는다. 또한 J2EE와 닷넷 서버에 대한 서버 라이브러리를 제공하고 멀티 벤더 브라우저와 독립 애플리케이션 뷰어도 제공한다.

자체 개발한 리포팅툴로 UI와 보고서 업무를 동시에 지원할 수 있으며, 트러스트폼과 동일한 구조로 즉시 개발에 적용할 수 있고, 뷰어의 크기도 가벼워 운영에 부담을 주지 않는다. 컴스퀘어는 연매출의 20% 이상을 지속적으로 연구개발비로 투자하면서 신뢰할 수 있는 품질을 확보하는 데 최선을 다하고 있다. 그 결과 매년 100% 이상 성장하고 있다. 뿐만 아니라 국제 표준규격 기반으로 UI와 데이터를 구조적으로 완벽하게 분리해 개발된 소스코드의 가독성이 탁월하여 생산성이 높고, 최적화된 소스 코드로 코드 사이즈 최소화했다는 점도 주목할 만하다.

강력한 UI와 개발 용이성
사용자 입장에서 X-인터넷을 선호하는 가장 큰 이유는 표현력이 풍부한 UI 때문이다. 또한 클라이언트의 리소스를 활용하여 가장 큰 효과를 볼 수 있는 부분도 화면을 제어하는 기술이다. 트러스트폼도 엑셀같은 스프레드시트와 유사한 Datagrid와 Multilinegrid를 제공하며, 임포트와 이뷰어 컴포넌트를 이용해 중복되는 UI 영역을 모듈화할 수도 있다. 차트를 활용한 분석화면과 미려한 리포트를 구현할 수 있는 환경도 특징적이다. 로우 및 컬럼을 추가, 삭제하거나 컬럼별 데이터 정렬 / 컬럼 이동 및 고정 / 입력 데이터의 길이에 따른 셀 크기 자동 변경 / 데이터 검색 / Row 또는 Column Cell Merge 등이 가능하다.

컴스퀘어는 X-인터넷은 실행적인 측면을 강조하고 있지만 트러스트폼은 편리한 개발환경을 제공하는 데에도 많은 연구개발을 진행해 왔다. 개발이 쉽고 빠르게 이루어져야 사용자의 요구사항이 신속하게 반영되고 유지보수도 원활하다는 점을 생각해 봤을 때 편리한 개발환경은 반드시 필요하다고 강조한다. 트러스트폼 기반의 UI개발은 서버로직과 관계없이 화면을 개발할 수 있다. 또한 Tech 설계에서의 산출물(IO정의서, 화면 요건정의서 등)을 기반으로 서버의 비즈니스 로직과 화면 개발을 완벽하게 분리, 병행하여 진행할 수 있어 수많은 JSP, Servlet 및 EJB로 이루어진 적용업무시스템 구현 생산성을 향상시켜 줄 수 있다고 강조했다.

네트워크 효율 향상

일각에서는 X-인터넷을 도입할 때 가장 적합한 방법과 기준으로 XML, MDI, Grid 등을 거론한다. 하지만 기술적 접근보다는 실행적 측면으로 접근하는 것이 낫다. 내가 필요로 하는 최종 애플리케이션의 성격을 고려하여 그에 대한 구현과 기능지원이 원활하게 이루어질 수 있고 추후 확장 가능한 구조가 최상인 것. 즉 기대 효과를 고려해야 한다는 의미다. 트러스트폼의 경우 HTML 방식 대비 개발/운영 비용이 획기적으로 개선되며, 응답속도와 네트워크 트래픽이 향상된다. 서버의 비즈니스 로직은 그대로 두고 화면부분만 Trustform을 적용하였을 때를 비교하면, DB 튜닝을 하였을 경우 평균 1.3초의 응답속도 개선에 불과하지만, 트러스트폼을 적용하였을 경우 평균 8.1초의 응답속도가 개선됐다. 벤치마크 테스트 결과 HTML & JAVA APPLET 기반 환경에서 트러스트폼 시스템 도입 후 도입 전에 비해 네트워크 트래픽은 약 69% 감소하고 패킷량은 약 79% 감소하는 결과를 얻었다.

또한 트러스트폼에서 만든 결과물을 프레젠테이션 부분과 데이터부분을 분리하여 운영할 수 있어 화면의 변경가 빈번하지 않지만 매일 사용하는 기업의 업무시스템은 화면의 프레젠테이션 부분을 사용자 PC에 내려놓고 서버와 데이터 트랙잭션만 발생시킴으로서 응답속도와 트래픽 사용량 등을 획기적으로 개선할 수도 있을 것이다.  조규희 기자 khcho@imaso.co.kr