업무에 사용되는 화면 중 가장 기본적인 항목이 조회 화면입니다. 이번 장에서는 간단한 고객사 목록 조회 화면을 만들면서 그리드(Grid) 컴포넌트와 데이터셋(Dataset)을 다루는 방법을 살펴봅니다.

화면 구성

넥사크로 앱을 만드는 기본적인 방법은 프로젝트와 폼을 만들고 폼 안에 필요한 컴포넌트를 배치하는 과정입니다.

프로젝트(Project)

아래와 같이 새로운 넥사크로 프로젝트를 만듭니다.

[Menu] File > New > Project

폼(Form)

프로젝트 생성 시 프레임셋 설정으로 만들어진 Form_Work 폼을 사용합니다. 폼의 너비와 높이는 폼을 만든 후에 속성 창에서 수정할 수 있습니다.

속성창에서 폼의 titletext 속성값을 수정합니다. titletext 속성값은 웹브라우저에 표시되는 제목으로 적용됩니다.

데이터셋(Dataset)

데이터셋 컴포넌트는 넥사크로 앱 내에서 데이터를 관리하는 기능을 제공합니다. 사용자가 입력하거나 서버에서 가져온 데이터를 보관하고 데이터의 변경(추가/수정/삭제) 상태를 관리합니다.

데이터셋은 2차원 테이블 형태로 데이터를 관리합니다. 컬럼(Column) 구조로 로우(Row, Record) 단위로 데이터를 다룰 수 있습니다. 하나의 폼에는 여러 개의 데이터셋을 가질 수 있으며 GlobalVariables로 데이터셋을 만들어 여러 폼에서 공동으로 사용할 수도 있습니다.

넥사크로 스튜디오 툴바에서 데이터셋 을 선택한 상태에서 디자인 영역 아무 곳이나 클릭하면 데이터셋이 추가됩니다. 데이터셋은 화면에 보이는 컴포넌트가 아니라 내부에서 데이터 관리를 위해 사용되는 컴포넌트이기 때문에 Invisible Objects 항목으로 관리됩니다.

속성창에서 추가한 데이터셋 속성을 아래와 같이 수정합니다.

데이터셋 콘텐츠 에디터(Dataset Contents Editor)

일반적인 컴포넌트는 속성창에서 관련된 속성을 수정하지만 데이터셋은 데이터를 다루기 위한 추가적인 도구로 데이터셋 콘텐츠 에디터가 제공됩니다.

데이터셋 콘텐츠 에디터는 2차원 테이블 형태로 데이터를 관리하기 위해 컬럼을 디자인하고 데이터를 직접 추가할 수 있는 기능을 제공합니다. 데이터셋을 더블클릭하면 데이터셋 콘텐츠 에디터가 나타납니다.

데이터셋에서 데이터를 관리하기 위해서는 사용할 컬럼을 추가해주어야 합니다. Columns 항목에서 [Add column to the dataset] 버튼을 클릭해 컬럼을 추가합니다.

예제에서 사용하는 컬럼은 아래와 같습니다.

Rows 항목에서 테스트를 위한 데이터를 추가할 수 있습니다. 데이터를 추가하는 방법은 컬럼을 추가하는 방법과 같습니다.

추가된 항목은 데이터셋 콘텐츠 에디터에서 소스 코드로 확인할 수 있습니다. 소스 코드를 직접 수정해도 데이터셋 컬럼에 반영됩니다.

<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>

컴포넌트 배치

고객사 목록 조회 화면은 제목, 검색창, 검색버튼, 그리드로 구성됩니다. 전체적인 화면 구성은 아래와 같습니다.

화면 구성에 사용한 컴포넌트와 수정한 속성값은 아래와 같습니다.

그리드

데이터를 다루는 화면을 구성한다면 가장 많이 사용하는 컴포넌트가 그리드입니다. 그리드는 컴포넌트 혼자서 사용하기보다는 데이터를 관리하는 데이터셋과 연결해 사용합니다.

데이터 바인딩

화면에 배치된 그리드에 데이터를 보여주기 위해서는 데이터셋을 연결해주어야 합니다. 이런 연결 작업을 데이터 바인딩(Binding)이라고 합니다. 그리드뿐 아니라 데이터를 화면에 보여줄 수 있는 모든 컴포넌트는 데이터셋과 연결할 수 있습니다.

그리드에 데이터셋을 연결하면 데이터를 보여주는 것뿐 아니라 그리드 내에서 직접 데이터를 수정하거나 입력할 수 있으며 변경된 데이터는 데이터셋에 바로 반영됩니다.

그리드에 데이터셋을 연결하는 방법은 binddataset 속성값에 데이터셋 id값을 지정해주거나 넥사크로 스튜디오 화면 위에서 데이터셋 컴포넌트를 마우스로 클릭하고 그리드 컴포넌트 위로 드래그해서 옮겨줍니다.

데이터셋을 드래그해서 그리드 컴포넌트 위에 가져다 놓으면 binddataset 속성값이 해당 데이터셋 id로 지정되면서 formats 속성에 데이터셋 컬럼을 기준으로 값이 만들어집니다. 그리고 화면 위에서도 데이터셋 컬럼을 기준으로 그리드 모양이 바뀐 것을 확인할 수 있습니다.

그리드 콘텐츠 에디터(Grid Contents Editor)

그리드와 데이터셋을 연결하면서 자동으로 formats 속성값이 만들어졌지만 다른 형식으로 데이터를 표기하기를 원한다면 그리드 콘텐츠 에디터에서 원하는 형식을 만들 수 있습니다. 그리드를 더블클릭하거나 속성창에서 formats 속성과 연결된 버튼을 클릭하면 그리드 콘텐츠 에디터가 실행됩니다.

그리드 콘텐츠 에디터는 그리드에 데이터를 어떻게 보여줄지를 편집할 수 있는 공간입니다. 데이터를 보여주는 형식만 다루며 실제 데이터셋에 영향을 주지는 않습니다.

새로운 형식을 편집하기 위해 기존 설정된 내용을 삭제합니다. 그리드 콘텐츠 에디터에서 row0 항목을 선택하고 키보드 Shift 키 또는 Ctrl 키를 누른 상태에서 row1 항목을 선택하고 에디터 상단 툴바에서 Delete를 선택해 자동 생성된 포맷을 삭제합니다.

8개 컬럼을 2개의 행에서 보여주도록 수정합니다. 수정된 포맷은 4개의 컬럼을 가지고 컬럼에 따라 2개의 머리(Head) 행과 본문(Body) 행을 가집니다.

먼저 머리 행을 추가합니다. 그리드 컨텐츠 에디터 상단 툴바에서 [Add Head Row] 항목을 선택합니다.

그리고 4개의 컬럼을 추가합니다. 머리 행을 추가하고 나면 기본적으로 1개의 컬럼이 만들어지면서 Add Column 항목이 활성화됩니다. Add Column 항목을 선택해 3개의 컬럼을 추가합니다.

col2와 col3 컬럼에 2가지 데이터를 표기하기 위해 머리 행과 본문 행을 2개씩 추가합니다. 본문 행은 Add Body Row 항목을 선택해 추가할 수 있습니다.

col0과 col1 컬럼은 하나의 데이터만 연결해주기 때문에 셀을 합쳐주어야 합니다. col0의 머리 행에 있는 셀을 선택하고 에디터 툴바에서 [Merge Cells] 항목을 선택합니다. 여러 개의 셀을 선택할 때는 하나의 셀을 선택한 후에 마우스를 드래그하거나 Shift키를 누른 채 다른 셀을 선택합니다.

[Merge Cells] 항목은 2가지 옵션이 있습니다. [Merge Cells(A big cell)]은 각 셀 속성을 모두 삭제하고 하나의 셀로 합치는 것이고 [Merge Cells(Having child cells)]는 개별 셀 속성을 그대로 유지한 상태에서 하나의 셀처럼 보이도록 합치는 것입니다. 이번 예제에서는 각 셀 속성을 유지할 필요가 없으니 [Merge Cells(A big cell)] 항목을 선택합니다.

col0, col1의 본문 행의 셀도 하나로 합쳐줍니다.

아래와 같이 각 컬럼에 해당하는 값을 지정합니다. 해당하는 셀을 선택하고 오른쪽에 보이는 속성 창에서 값을 입력할 수 있습니다.

Grid 컴포넌트와 바인딩된 Dataset이 있는 경우 Dataset에 설정된 컬럼 목록을 에디터에서 확인할 수 있습니다. text 속성에 직접 "bind:id"라는 값을 입력하거나 목록에서 "id" 항목을 선택할 수 있습니다.

값을 입력하고 OK 버튼을 클릭하면 창이 닫히면서 그리드에 수정된 컬럼 형식이 반영됩니다.

데이터 테스트

서비스 운영 단계에서는 데이터베이스에 있는 데이터를 가져와 화면에 보여주지만, 테스트 단계에서는 기능 구현 여부만 확인할 때도 있습니다. 간단한 스크립트로 데이터를 데이터셋에 추가해주고 연결된 그리드에 데이터를 표시합니다.

버튼 클릭 이벤트

btnSearch 버튼에 클릭 이벤트를 추가하고 데이터를 처리하는 스크립트를 작성합니다. btnSearch 버튼 컴포넌트를 선택하고 속성창에서 onclick 이벤트를 추가합니다. 이벤트 속성값을 추가하고 속성창을 더블클릭하거나 엔터키를 입력하면 해당 이벤트 함수를 생성합니다.

이벤트 스크립트는 아래와 같습니다. 데이터셋에 1건의 데이터 행을 추가하고 값을 지정해줍니다.

this.divCommand_btnSearch_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
     var row = this.dsCustomers.addRow();
     this.dsCustomers.setColumn(row, "id", "TC-001");
     this.dsCustomers.setColumn(row, "name", "Tzuyu");
     this.dsCustomers.setColumn(row, "email", "ceo@twice.com");
     this.dsCustomers.setColumn(row, "phone", "6987-6543");
     this.dsCustomers.setColumn(row, "comp_name", "TWICE");
     this.dsCustomers.setColumn(row, "department", "0");
     this.dsCustomers.setColumn(row, "comp_phone", "6506-7000");
     this.dsCustomers.setColumn(row, "comp_addr", "Seoul");
};

Generate

이제 만들어진 앱을 웹브라우저에서 실행합니다. 먼저 작성된 코드를 자바스크립트 파일로 변환해줍니다. Output 창에서 정상적으로 자바스크립트 파일이 생성되고 있는지 확인할 수 있습니다.

[Menu] Generate > Application

Quick View

웹서버를 실행하고 넥사크로 스튜디오에서 Quick View 를 실행합니다. 웹브라우저에서 Quick View를 실행하려면 빌드 툴바를 활성화하고 브라우저 옵션을 변경해주어야 합니다. 웹브라우저 옵션에는 PC에 설치된 웹브라우저를 선택할 수 있습니다.

지정된 웹브라우저가 실행되면서 실행된 넥사크로 앱을 확인할 수 있습니다. Search 버튼을 클릭하면 스크립트에서 추가한 데이터가 그리드에 표시됩니다.