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

화면 구성

넥사크로플랫폼 애플리케이션을 만드는 일반적인 방법은 프로젝트와 폼을 만들고 폼 안에 필요한 컴포넌트를 배치하는 과정입니다.

프로젝트(Project)

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

[Menu] File > New > Project

항목	설정값	설명
Name	CustomerList	프로젝트 이름
Location	D:\XP\PJ\CustomerList	프로젝트 파일 저장 위치

폼(Form)

만들어진 프로젝트에 고객사 목록을 표시할 폼을 추가합니다. 아래와 같이 새로운 폼을 만듭니다. 폼의 너비와 높이는 폼을 만든 후에 속성 창에서 수정할 수 있습니다.

[Menu] File > New > Form

항목	설정값	설명
Name	frm_list	폼 이름
Location	Base	서비스 그룹 (기본값은 Base)
Width	800	폼 너비 (기본값은 1024)
Height	600	폼 높이 (기본값은 768)

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

속성	값	설명
titletext	Customer List Search	폼 제목

데이터셋(Dataset)

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

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

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

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

속성	값	설명
id	dsCustomers	데이터셋 id

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

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

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

데이터셋에서 데이터를 관리하기 위해서는 사용할 컬럼을 추가해주어야 합니다. Columns 항목에서 Add a new Column 을 클릭해 컬럼을 추가합니다.

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

No.	id	type	size	설명
1	id	STRING	4	일련번호
2	name	STRING	16	이름
3	email	STRING	32	이메일
4	phone	STRING	16	전화번호
5	comp_name	STRING	32	회사
6	department	STRING	32	부서
7	comp_phone	STRING	16	회사 전화번호
8	comp_addr	STRING	256	회사 주소

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

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

컴포넌트 배치

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

전체적인 레이아웃을 가이드라인을 사용해 지정해주고 가이드라인에 맞게 필요한 컴포넌트를 배치합니다. 가이드라인은 넥사크로 스튜디오 화면에서 원하는 위치의 눈금자 위에 마우스를 클릭하면 나타나고 더블클릭하면 제거됩니다.

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

컴포넌트	속성	값	설명
1 Static	id	sttList
	text	Customer List Search	표시할 문자열
	font	bold 20 Verdana	글꼴 속성
2 Div	id	divCommand
3 Edit	id	edtSearch
4 Button	id	btnSearch
4 Button	text	Search	버튼에 표시할 문자열
5 Grid	id	grdCustomers

Div 컴포넌트는 여러 개의 컴포넌트를 감싸주는 역할을 합니다. Div 컴포넌트를 먼저 배치하고 안에 들어갈 컴포넌트를 배치해야 합니다.

예제에서 Div 컴포넌트 안에 들어가는 Edit, Button 컴포넌트는 Div 컴포넌트를 먼저 화면에 배치하고 그 위에 컴포넌트를 추가해주어야 합니다.

그리드

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

데이터 바인딩

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

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

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

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

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

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

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

새로운 형식을 편집하기 위해 기존 설정된 내용을 삭제합니다. 그리드 콘텐츠 에디터에서 head와 body를 선택하고 컨텍스트 메뉴에서 Delete 항목을 선택해 지정된 형식을 삭제합니다.

새로 편집되는 컬럼은 아래와 같은 구조로 만듭니다. 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키를 누른 채 다른 셀을 선택합니다.

셀 합치기를 시도하면 기존 셀의 속성을 그대로 유지할 것인지를 물어봅니다. 여기에서는 subcell 속성을 사용하지 않기 때문에 'No'를 선택합니다.

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

Ctrl키를 누른 상태에서 여러 셀을 선택하면 컨텍스트 메뉴에서 Merge Cells 항목이 활성화되지 않습니다.

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

컬럼	Head Cell: text	Body Cell: text	Column: size
col0	ID	bind:id	80
col1	Name	bind:name	150
col2	Email	bind:email	200
col2	Phone	bind:phone	200
col3	Company	bind:comp_name	320
col3	Department	bind:department	320

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

데이터 테스트

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

버튼 클릭 이벤트

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

속성	값	설명
onclick	divCommand_btnSearch_onclick	버튼 클릭 이벤트

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

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

Generate

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

[Menu] Build > Generate Application

Quick View

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

처음 웹브라우저로 Quick View를 실행하게 되면 QuickView.html 파일이 있는 경로를 입력해야 합니다. Generate 경로와 다를 수도 있기 때문에 따로 항목이 관리됩니다.

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