업무에 사용되는 애플리케이션은 특별한 경우를 제외하고는 데이터를 개별 PC에서 관리하지 않습니다. 데이터를 관리하는 서버에서 조회된 데이터를 애플리케이션에서 편집하고 그 결과를 다시 데이터 서버에 관리하도록 합니다.

이번 장에서는 넥사크로플랫폼 애플리케이션에서 코드 데이터를 어떻게 다루고 서버에 있는 데이터를 어떤 식으로 가져오는지 살펴보고 웹브라우저에서 로그를 확인하는 방법까지 알아봅니다.

그리드 콤보

데이터베이스에 관리되는 항목 중 국가, 부서, 직급과 같은 데이터는 여러 번 반복해서 사용되는 항목입니다. 이런 데이터를 문자열 그대로 입력하면 입력하는 사용자마다 다르게 입력할 수도 있고 데이터베이스에서 불필요하게 공간을 차지할 수 있습니다. 그래서 이런 데이터는 별도의 코드 테이블을 만들어 관리합니다.

예제에서도 Department 항목은 부서 이름이 아닌 코드만 데이터베이스에서 관리하고 있습니다. 하지만 사용자에게 보여줄 때는 부서 이름을 보여주어야 합니다. 그리드 컴포넌트에는 데이터 형식에 따라 displaytype 속성을 선택할 수 있습니다.

데이터셋(Dataset)

먼저 데이터셋을 새로 만들고 속성과 컬럼값을 아래와 같이 입력합니다.

그리드(Grid)

그리드를 더블클릭해 그리드 콘텐츠 에디터를 실행합니다. Department 항목의 데이터 셀을 선택하고 속성창에서 다음 항목을 수정합니다. combodataset 항목은 직접 입력하거나 목록에서 선택할 수 있으며 combodataset 항목이 입력되면 combocodecol, combodatacol 항목도 직접 입력하거나 목록에서 선택할 수 있습니다.

Generate

ADL이 아닌 폼을 수정한 경우에는 수정된 폼에 해당하는 파일만 다시 만들면 됩니다. 메뉴에서 Generate Application이 아닌 Generate File을 선택합니다.

[Menu] Build > Generate File

Quick View로 다시 실행하면 Department 항목이 코드 대신 부서 이름으로 표기되는 것을 확인할 수 있습니다.

트랜잭션

이번에는 transaction 메소드를 사용해 실제 서버에서 데이터를 가져옵니다. 넥사크로플랫폼 애플리케이션에서 사용하는 데이터 형식에 따라 만들어진 XML 파일을 가져오는 방식으로 테스트를 진행합니다.

단순 데이터 조회를 위한 테스트 데이터를 작성한 것이며 실제 애플리케이션 운영 환경에서는 데이터 저장소에 저장된 데이터를 가져오는 형식으로 개발해야 합니다.

sample.xml

예제에 사용하는 XML 파일은 아래와 같습니다. 4개의 레코드를 가지고 있으며 조회가 성공된 것을 전제로 작성했습니다.

<?xml version="1.0" encoding="utf-8"?>
<Root xmlns="http://www.nexacroplatform.com/platform/dataset" ver="5000" >
     <Parameters>
          <Parameter id="ErrorCode" type="int">0</Parameter>
          <Parameter id="ErrorMsg" type="string">SUCC</Parameter>
     </Parameters>
     <Dataset id="customers">
          <ColumnInfo>
               <Column id="id" type="STRING" size="4"/>
               <Column id="name" type="STRING" size="16"/>
               <Column id="email" type="STRING" size="32"/>
               <Column id="phone" type="STRING" size="16"/>
               <Column id="comp_name" type="STRING" size="32"/>
               <Column id="department" type="STRING" size="32"/>
               <Column id="comp_phone" type="STRING" size="16"/>
               <Column id="comp_addr" type="STRING" size="256"/>
          </ColumnInfo>
          <Rows>
               <Row>
                    <Col id="id">TC-001</Col>
                    <Col id="name">Dustin Kim</Col>
                    <Col id="email">ceo@tobesoft.com</Col>
                    <Col id="phone">6987-6543</Col>
                    <Col id="comp_name">TOBESOFT</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">6506-7000</Col>
                    <Col id="comp_addr">Seoul</Col>
               </Row>
               <Row>
                    <Col id="id">TC-002</Col>
                    <Col id="name">Sean Oneal</Col>
                    <Col id="email">ibero.Donec.consectetuer@ac.ca</Col>
                    <Col id="phone">7357-3715</Col>
                    <Col id="comp_name">AC</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">7357-7000</Col>
                    <Col id="comp_addr">Lansing</Col>
               </Row>
               <Row>
                    <Col id="id">TC-003</Col>
                    <Col id="name">ieter Valenzuela</Col>
                    <Col id="email">ornare@Maecenasmifelis.com</Col>
                    <Col id="phone">9025-0645</Col>
                    <Col id="comp_name">Maecenasmifelis</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">9025-7000</Col>
                    <Col id="comp_addr">Coral Springs</Col>
               </Row>
               <Row>
                    <Col id="id">TC-004</Col>
                    <Col id="name">Mark Contreras</Col>
                    <Col id="email">vitae.posuere@consectetueripsumnunc.ca</Col>
                    <Col id="phone">7026-3815</Col>
                    <Col id="comp_name">consectetueripsumnunc</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">7026-7000</Col>
                    <Col id="comp_addr">Elmira</Col>
               </Row>
          </Rows>
     </Dataset>
</Root>

버튼 클릭 이벤트

앞에서 작성한 버튼 클릭 이벤트(divCommand_btnSearch_onclick)에 수작업으로 데이터를 추가하는 코드 대신에 sample.xml 파일에 접근해서 데이터를 가져오는 코드를 추가합니다.

수정된 코드는 아래와 같습니다. transaction 메소드에 필요한 파라미터를 지정하고 메소드를 호출합니다. transaction 메소드는 특정 데이터셋의 값을 갱신하기 위한 서비스(또는 파일)에 접근해 데이터를 내려받고 작업이 완료되면 콜백(CallBack) 함수를 호출하는 메소드입니다.

this.divCommand_btnSearch_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
	
     var id = "search";  
     var url = "http://localhost:8080/CustomerList/sample.xml";
     var reqDs = "";
     var respDs = "dsCustomers=customers";
     var args = "";
     var callback = "received";
	
     this.transaction(id, url, reqDs, respDs, args, callback);	
}

예제에서 transaction 메소드에 사용한 파라미터는 아래와 같습니다.

콜백 함수

transaction 메소드로 서비스 또는 파일에 접근한 이후에 지정된 콜백 함수를 실행합니다. 콜백함수는 아래와 같이 작성합니다.

this.received = function(id, code, message)
{
     if (code == 0) {
          this.alert(this.dsCustomers.rowcount + " numbers of data have been found.");
          trace(this.dsCustomers.rowcount + " numbers of data have been found.");
     } else {
          this.alert("Error["+code+"]:"+message);
          trace("Error["+code+"]:"+message);
     }
}

예제에서 사용된 xml 파일은 항상 성공 메시지만 보내기 때문에 아래와 같은 결과를 보여주며 그리드에 데이터를 표시합니다.

로그

넥사크로플랫폼 애플리케이션에서 발생하는 오류 메시지나 trace 메소드에서 처리되는 메시지는 런타임과 웹브라우저에 따라 조금씩 다릅니다. 폼 디자인이나 Generate 과정에서 발생하는 오류 메시지는 넥사크로 스튜디오 Output 창에서 확인할 수 있습니다.

하지만 애플리케이션 실행 중에 발생하는 오류나 메시지는 런타임일 경우에는 넥사크로 스튜디오 Output 창에서 확인할 수 있으며 HTML5 버전으로 실행할 때는 각 웹브라우저 설정에 따라 확인 방법이 달라집니다.

구글 크롬

아래 메뉴에서 자바스크립트 콘솔을 보이게 할 수 있습니다.

[Menu] Tools > JavaScript Console

파이어폭스

아래 메뉴에서 자바스크립트 콘솔을 보이게 할 수 있습니다. 구글 크롬보다 좀 더 많은 기능과 정보를 제공하고 있습니다.

[Menu] Web Developer > Web Console

인터넷 익스플로러

아래 메뉴에서 자바스크립트 콘솔을 보이게 할 수 있습니다. 인터넷 익스플로러는 메뉴를 사용하지 않고 설정 아이콘을 클릭해도 바로 developer tools 항목으로 접근할 수 있습니다.

[Menu] Tools > developer tools > Console