Etc

JSON서비스 호출방법

넥사크로 플랫폼은 다양한 통신방식 등을 제공하고 있습니다. 
이번 장에서는 JSON형태의 데이타를 호출하는 방법에 대해 기술합니다.

json1

주요 소스 코드

화면 코드

this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
  var strInDS = "";
  var strOutDS = "Dataset00=dsDetailMain";
  var strParams = "";
  var strCallback = "fn_init_callback";
  this.transaction("load", "Svc::json.jsp", strInDS, strOutDS, strParams, strCallback);
}
  
this.fn_init_callback = function (sid, errcd, errmsg)
{   
  if (errcd == 0) {
    this.Grid00.createFormat();
  }            
}

JSON데이타 포멧을 처리하기 위한 주요 소스 코드

// Data.js 내의 TransactionItem._deserializeData 함수를 대체한다.
_pTransactionItem._deserializeData = function (strRecvData, bPending) 
{     
 if (!strRecvData)
  return [-1, "Stream Data is null!"]; 
 strRecvData = strRecvData.trim();
 var fstr = strRecvData.substring(0, 3);
 
 if (fstr == "SSV") // SSV Type (HEX:53,53,56)
 { 
  return this.__deserializeSSV(strRecvData);
  
 }
 else if (fstr == "CSV") // CSV Type (HEX:43,53,56)
 { 
  return this.__deserializeCSV(strRecvData);
 }
 else if (fstr == "PPX") // PPX Type : Runtime only
 { 
  return this.__deserializeJSON(strRecvData);
 } 
 // JSON 처리를 위한 추가 코드
 else if (fstr == "JSN") {
 }
 //<< JSON 처리를 위한 추가 코드
 else // XML Type (HEX:3C,3F)
 {   
  //return this.__deserializeXML(strRecvData);
  return this.__deserializeJSON(strRecvData);
 }
}
// transaction 시 데이터를 받았을 때 JSON 처리
_pTransactionItem.__deserializeJSON = function(strRecvData) 
{
 var code = 0;
 var message = "SUCCESS";
 
 var outDatasets = this.outputDatasets;
 if (outDatasets && outDatasets.length)
 {
  var revcJsonObj = JSON.parse(strRecvData);
  if (!revcJsonObj) 
  {
   code = -1;
   message = "Fail JSON.parse";
  }
  var outDataCnt = outDatasets.length;
  for (var i = 0; i < outDataCnt; i++)
  {
   // this.context: access form object
   var ds = this.context._getDatasetObject(outDatasets[i].lval);
   if (ds) {
    ds.clear();
    this.context.createDatasetColInfo(ds);
    this.context.addData(ds, revcJsonObj);
   }
  }
 }
 return [code, message];
}   
// dataset 초기화
this.createDatasetColInfo = function(ds) 
{
 var nIndex = ds.addColumn( "name", "string" );
 nIndex = ds.addColumn( "surname", "string", 120 );
}
// data processing
this.addData = function(ds, jsonObj) 
{
 for (var j = 0 ; j < jsonObj.length ; j++) 
 {
  jObj = jsonObj[j];
  var rIdx = ds.addRow();
  ds.setColumn(rIdx, "name", jObj.name);
  ds.setColumn(rIdx, "surname", jObj.surname);
 }
}

DataSet의 컬럼명에 따라 해당 명칭을 변경해 주어야 함

예) name, surname

서비스(JSP)

<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%
  JSONArray users = new JSONArray();
  JSONObject obj=new JSONObject();
  obj.put("name","Ambarish");
  obj.put("surname","Aura"); 
  users.add(obj);
  obj=new JSONObject();
  obj.put("name","bmbarish");
  obj.put("surname","Bura"); 
  obj=new JSONObject();
  obj.put("name","Cmbarish");
  obj.put("surname","Cura"); 
  users.add(obj);
  response.getWriter().print(users);
%>

서비스 실행결과

[{"surname":"Aura","name":"Ambarish"},{"surname":"Cura","name":"Cmbarish"}]
소스 위치

Sample\ListBox\np_Transaction_JSON.xfdl

DomParser

XML형태의 데이타를 사용하기 위해서는 XML형태의 문서를 파싱해서 사용해야 합니다. 
이때 DomParser를 이용하여 XML문서에 접근하는 방법에 대해 간략히 기술합니다.

domparser1

주요 소스 코드

Node List

var domDoc;
var domPar = new DomParser;
domDoc = domPar.parseFromString(this.TextArea00.value);

var domElement1, domElement2;  
var i, j;
var msg="";
for( i = 0 ; i < domDoc.childNodes.length ; i++ )
{
  domElement1 = domDoc.childNodes[i];
  msg += "Node1["+i+"] = " + domElement1.nodeName + "\n";
  for( j = 0 ; j < domElement1.childNodes.length ; j++ )
  {
    domElement2 = domElement1.childNodes[j];
    msg += "    Node2["+j+"] = " + domElement2.nodeName + "\n";   
  }
 }  
 this.TextArea01.set_value(msg);

Node Value

// Parsing
 var domDoc;
 var domPar = new DomParser;
 domDoc = domPar.parseFromString(this.TextArea00.value);
 // Node값 보기
 var domElement;  
 var msg="";
 
 domElement = domDoc.getElementsByTagName("Dataset");
 msg += "Dataset TAG의 id값 = " + domElement[0].getAttribute("id") + "\n";
 
 domElement = domDoc.getElementsByTagName("Column");
 msg += "첫번째 Column TAG의 id값 = " + domElement[0].getAttribute("id") + "\n";
 msg += "두번째 Column TAG의 id값 = " + domElement[1].getAttribute("id");
     
 this.TextArea01.set_value(msg);
소스 위치

Sample\Etc\np_DomParser.xfdl

대부분의 브라우저에서는 DOMParser 객체를 이용해 XML 문자열을 파싱하며, IE 브라우저에서는 ActiveXObject 객체를 이용해 XML 문자열을 파싱한다.

jQuery사용방법

사전준비

jQuery관련 모듈 복사

jQuery를 사용하기 위해서는 jquery lib파일을 nexacro platform의  엔진폴더 경로에 복사해야 합니다.
1) 디렉토리 위치에 ExtApi.json 파일 복사 
예) C:\Program Files (x86)\nexacro\14\nexacro14lib\component\ExtAPI.json
2) 디렉토리 위치에 ExtAPI 디렉토리 생성
예) C:\Program Files (x86)\nexacro\14\nexacro14lib\component\ExtAPI 디렉토리를 만든다.
3) 디렉토리 위치에 jquery-1.10.2.js 파일 복사
예) C:\Program Files (x86)\nexacro\14\nexacro14lib\component\ExtAPI\jquery-1.10.2.js

참고) 해당 ExtAPI및 파일은 아래 경로 참고하세요.

Sample\Etc\jQuery

jQuery_0

위의 작업은 WAS에 동일하게 복사를 해 주어야 합니다.

jQuery_1

nexacro studio의 TypeDefinition에 ExtAPI.jsp 모듈 등록

jQuery_2

jQuery_3

jQuery_4

위와 같이 ExtAPI.json을 등록 후 OK버튼을 선택합니다.

JQuery를 사용하여 애니메이션 구현하기

jQuery_animation_0

jQuery의 애니메이션 기능을 사용하여 움직이는 효과를 구현하였습니다.
소스 위치

Sample\Etc\np_jQuery_animate.xfdl

Local DB사용방법

기본

Local DB를 구현하는 방법에 대해 설명합니다.

  1. LiteDB 생성방법

  2. 데이터 정의 (DDL)

  3. 데이터 조작언어 (DML)

LiteDB 생성방법

localdb_new1

datasource의 위치는 개발환경에 맞도록 설정하면 됩니다.

localdb_new31

localdb_new1

localdb_new1

데이터 정의 (DDL)

localdb_new1

localdb_new1

Table정보에 대한 생성/수정작업이 끝났다고 하여 키보드 ctrl + s로 저장되지 않으니 반드시 Execute SQL버튼을 클릭하여 반영되었는지 확인하시기 바랍니다.

localdb_new1

localdb_new1

브라우저(Fire Fox)의 부가기능 중 SQLite Manager를 이용하여 테이블 작업이 가능합니다.

제세한 내용은 SQLite Manger 사용방법을 확인하시기 바라며, 해당 유틸에 대해서는 별도 설명을 하지 않습니다.

localdb_new11

localdb_new11

SQL Manager를 이용하여 넥사크로에서 생성된 Table정보를 확인할 수 있습니다.

localdb_new11

SQL Manager를 이용하여 Table 관리가 가능하므로 유용하게 사용할 수 있습니다.

SQL Manager 사용을 권장합니다.

데이터 조작 언어(DML)

insert, update, delete, select 문을 구현하기 위한 준비작업

Insert

첫번째로 insert 작업에 대한 설정입니다.
Ex)
insert into department values('100','CS Team','Gangnam-Gu, Seoul, Korea','135-873','1588-7895')

localdb_new11

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.LiteDBStatement00.executeUpdate();
}

localdb_new17

localdb_new11

Select

Table에 저장된 데이타를 조회하는 방법을 기술합니다.

localdb_new17

localdb_new31

this.Button03_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.SelectStatement.executeQuery();
}
Ex)
select code, name, address, zipcode, telno from department

localdb_new31

this.SelectStatement_onsuccess = function(obj:LiteDBStatement,  e:nexacro.LiteDBEventInfo)
{
    if(e.reason == 7) // Select
   {
        this.dsDepartment.copyData(e.returnvalue);
   }
}

localdb_new31

Update

입력된 데이타를 수정하는 방법에 대해 알아봅니다. 
수정 또한 마찬가지로 버튼을 만들고 LiteDBStatement를 새로 만들어 update에 맞는 구문을 작성해 주면 됩니다.

localdb_new35

this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.UpdateStatement.executeUpdate();
}
Ex)
update department set name = 'Support Team' where code = '100'

localdb_new35

Delete

입력된 정보를 삭제하는 방법에 대해 기술합니다.

localdb_new35

this.Button02_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.DeleteStatement.executeUpdate();
}
Ex)
delete from department where code = '100'

기타

  1. LocalDB는 서버에 위치 할경우 동작을 하지 않습니다. 항상 로컬에 위치시킨 뒤 사용하시기 바랍니다.

  2. localDB 샘플은 오픈소스인 SQLite 을 연동한것으로 SQL 쿼리나 쿼리 사용법에 대한 기술지원은 하지 않습니다.

  3. 본문에 언급 했듯이 해당 DB 파일은 SQLite edit 프로그램 등을 사용하여 컬럼 수정 등 작업을 하실 수 있습니다.

  4. 추가 적으로 DB 작업을 하실 경우 해당 프로그램을 사용하시면 수월하게 컬럼명 을 재정의 할 수 있습니다.

DataSet을 연동한 Local DB샘플

위에서 설명한 Local DB 기본내용을 숙지하였다면 이제 Dataset과 그리드를 이용하여 사용하는 샘플을 참고하여 프로젝트에 적용해 보시기 바랍니다.

localdb_new38

준비사항

  1. 아래 링크에서 소스를 다운로드 받아 PC 디렉토리에 압축을 해제합니다.

  2. 압축을 해제하면 DB폴더에 localDB.s3db파일을 내문서 폴더에 복사합니다.

  3. 넥사크로 스튜디오를 실행하여 LocalDB폴더의 샘플 프로젝트를 오픈하여 확인합니다.

관련내용은 이미 설명이 된 내용이므로 소스에 대한 별도 설명은 하지 않습니다.

관련소스

Local DB 샘플소스

http://www.xplatform.co.kr/Next_JSP/Docs/LocalDB.zip