화면 만들기 (트랜잭션)

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

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

그리드 콤보

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

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

데이터셋(Dataset)

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

속성

값

설명

id

dsDepartment

데이터셋 id

No.

id

type

size

설명

1

code

STRING

32

부서 코드

2

value

STRING

32

부서 이름

아래 코드를 [Dataset Editor > Source] 탭에 입력할 수도 있습니다.

<ColumnInfo>
  <Column id="code" type="STRING" size="32"/>
  <Column id="value" type="STRING" size="32"/>
</ColumnInfo>
<Rows>
  <Row>
    <Col id="code">0</Col>
    <Col id="value">Boardroom</Col>
  </Row>
  <Row>
    <Col id="code">1</Col>
    <Col id="value">Accounting</Col>
  </Row>
  <Row>
    <Col id="code">2</Col>
    <Col id="value">Personal</Col>
  </Row>
  <Row>
    <Col id="code">3</Col>
    <Col id="value">Human resources</Col>
  </Row>
  <Row>
    <Col id="code">4</Col>
    <Col id="value">Sales</Col>
  </Row>
  <Row>
    <Col id="code">5</Col>
    <Col id="value">Marketing</Col>
  </Row>
  <Row>
    <Col id="code">6</Col>
    <Col id="value">Engineering</Col>
  </Row>
</Rows>

그리드(Grid)

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

속성

값

설명

displaytype

combotext

해당 셀의 데이터 표시 형식

combodataset

dsDepartment

displaytype이 combotext, combocontrol 일 때 콤보 컴포넌트와 연결될 데이터셋

combocodecol

code

코드 컬럼

combodatacol

value

데이터 컬럼

Generate

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

[Menu] Generate > File

특정 파일을 수정하고 저장하는 경우 해당 파일을 자동으로 다시 생성합니다. 위의 설명처럼 직접 메뉴를 선택해서 다시 생성하지 않아도 수정된 내용을 확인할 수 있습니다.

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

트랜잭션

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

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

sample.xml

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

$r_title(sample.xml)
<?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">Tzuyu</Col>
                    <Col id="email">ceo@twice.com</Col>
                    <Col id="phone">6987-6543</Col>
                    <Col id="comp_name">TWICE</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">Kei</Col>
                    <Col id="email">kei@lovelyz.ca</Col>
                    <Col id="phone">7357-3715</Col>
                    <Col id="comp_name">Lovelyz</Col>
                    <Col id="department">4</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">Choa</Col>
                    <Col id="email">choa@aoa.com</Col>
                    <Col id="phone">9025-0645</Col>
                    <Col id="comp_name">AOA</Col>
                    <Col id="department">2</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">Zhou Jieqiong</Col>
                    <Col id="email">zhou.jieqiong@ioi.ca</Col>
                    <Col id="phone">7026-3815</Col>
                    <Col id="comp_name">I.O.I</Col>
                    <Col id="department">3</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:nexacro.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 메소드에 사용한 파라미터는 아래와 같습니다.

파라미터

타입

설명

id

String

트랜잭션 구분하는 ID

url

String

트랜잭션을 요청하는 서비스 또는 파일의 URL

reqDs

String

앱에 사용된 데이터셋 데이터가 변경되었을 때 변경된 데이터셋을 지정하는 값입니다.

(서비스 또는 파일에 지정된 데이터셋) = (앱에서 수정된 데이터셋) 형식으로 전달하며 1개 이상의 값을 빈칸으로 구분해 지정할 수 있습니다.

respDs

String

트랜잭션 처리 결과를 받을 때 지정하는 값입니다.

(앱에서 수정된 데이터셋) = (서비스 또는 파일에 지정된 데이터셋) 형식으로 전달하며 1개 이상의 값을 빈칸으로 구분해 지정할 수 있습니다.

args

String

트랜잭션 요청 시 전송되는 파라미터를 지정하는 값입니다.

parameter_name = value 형식으로 전달하며 1개 이상의 값을 빈칸으로 구분해 지정할 수 있습니다.

callback

String

트랜잭션의 결과를 처리할 콜백 함수를 지정하는 값입니다.

transaction 메소드는 비동기통신, 바이너리통신, 압축통신을 지정하는 3개의 파라미터가 더 있으며 해당 파라미터는 생략하면 기본값이 적용됩니다.

콜백 함수

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 파일은 항상 성공 메시지만 보내기 때문에 아래와 같은 결과를 보여주며 그리드에 데이터를 표시합니다.

트랜잭션 url이 넥사크로플랫폼 앱과 같은 서버에 있지 않다면 Access-Control-Allow-Origin 오류가 발생할 수 있습니다.

오류가 발생하는 경우 code 값은 -1을 반환하고 message 값은 오류의 상태를 반환합니다. 상황에 따라 code값만 반환하고 message 값이 반환되지 않는 경우도 있는데, 서버의 예외적인 처리라 어떤 상황이라고 특정할 수 없습니다.

로그

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

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

아래 내용은 특정 시점의 웹브라우저 버전에서 확인한 내용입니다. 사용하는 버전에 따라 일부 내용이 변경될 수 있습니다.

- 구글 크롬 61.x

- 파이어폭스 55.x

- 인터넷 익스플로러 11.x

구글 크롬

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

[Menu] More tools > Developer tools

파이어폭스

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

[Menu] Web Developer > Web Console

인터넷 익스플로러

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

[Menu] Tools > developer tools > Console

마이크로소프트 Edge 브라우저 자바스크립트 콘솔 설정은 인터넷 익스플로러와 같습니다.