3.등록화면 만들기(person_entry.xfdl)

등록화면은 명함관리 시스템의 데이터를 추가, 수정 또는 삭제하는 화면입니다.

XPLATFORM이 제공하는 여러 가지 컴포넌트를 사용하여 상세내용을 출력하는 화면을 구성합니다. 컴포넌트의 기본적인 특성을 이해하고 데이터셋(Dataset)과 연결하는 방법을 알아봅니다. 데이터셋(Dataset)에 담긴 데이터를 서버에 저장하는 스크립트를 배웁니다.

3.1화면(Form) 만들기

  1. “Form 만들기” 메뉴를 선택합니다.(File > New > Item > Form)

  1. “Create New Form Wizard” 창을 이용하여 파일명(Name), 저장위치(Location)를 지정합니다.

  1. “Create New Form Wizard” 창을 이용하여 상속(Inheritance)을 지정합니다.

  1. “Create New Form Wizard” 창을 이용하여 크기(Position)을 지정합니다.

  1. “Create New Form Wizard” 창을 이용하여 MLM기능 여부를 지정합니다.

  1. “Create New Form Wizard” 창을 이용하여 위젯(Widget)기능 여부를 지정합니다.

  1. “Form 만들기”가 완료되면 UX-Studio에 만들어진 화면(Form)이 열립니다.

3.2데이터셋(Dataset) 컬럼 디자인하기

데이터셋(Dataset) 컴포넌트는 서버로부터 데이터를 수신하고, 그리드(Grid) 에게 데이터를 공급합니다.
데이터셋(Dataset)은 데이터를 보관할 뿐만 아니라 데이터가 변경(추가/수정/삭제)된 상태를 알려줍니다. 수정된 데이터는 변경 전 원본 데이터를 보관합니다.
데이터셋(Dataset)은 2차원 테이블 형태로 데이터를 보관하므로 컬럼(Column) 구조를 가지며, 로우(Row, Record)단위로 데이터를 다루게 됩니다.
하나의 화면(From)에는 한 개 이상의 데이터셋(Dataset)을 가질 수 있습니다.
데이터가 전체 프로젝트에 공통되는 내용일 때는 데이터셋(Dataset)을 공통영역(Global Dataset)에 만들어 여러 화면(Form)에서 동시에 연결하여 사용할 수 있습니다.

3.2.1데이터셋 만들기 - 데이터셋 : Dataset

컴포넌트 툴바에서 을 선택합니다.

어느 부분을 클릭하든 데이터셋(Dataset)은 “Invisible Objects” 탭에 생깁니다.

데이터셋(Dataset)도 컴포넌트의 일종이므로 속성과 이벤트는 “Properties”창을 이용하여 조정합니다.

데이터셋(Dataset)

속성

설명

id

dsPerson

데이터셋 id

3.2.2데이터셋 컬럼(Column) 디자인하기

데이터셋은 2차원 테이블 형태로 데이터를 보관합니다.
테스트용 데이터를 직접 입력하여 디자인 할 때 활용할 수 있습니다.
데이터셋(Dataset)의 디자인은 “Dataset Contents Editor” 창을 사용합니다.
“Dataset Contents Editor” 창은 해당 데이터셋(Dataset)을 더블 클릭하여 호출합니다.

상단의 “Const Columns” 정보는 모든 레코드(Record, Row)에 공통으로 갖는 값인 경우 상수(Const Value)로 취급하여 “상수컬럼(Const Column)”을 만듭니다. 중앙의 “Columns” 정보는 레코드의 모양을 디자인하는 곳입니다. 하단의 “Rows”는 테스트용 데이터를 설정하는 부분입니다.

자세한 사용법은 “UX-Studio 사용방법”을 참조하시기 바랍니다.

데이터셋(Dataset)에 컬럼정보와 테스트용 데이터를 추가하는 과정은 다음과 같습니다.

  1. “Dataset Contents Editor” 창을 열고 중간부분인 “Columns”부분에 (Column)을 하나 만듭니다. 컬럼의 추가는 “Columns” 툴바에 위치한 버튼을 클릭하면 만들어 집니다.

  2. 추가된 컬럼 정보에 “id”, ”type”, “size”를 설정합니다.

    “id”는 같은 Dataset 내에서 중복되지 않는 값을 갖도록 지정합니다.

    한글 컬럼id도 허용됩니다만, 인코딩이 맞지 않는 경우에 인식이 어려울 수 있으므로 가급적 한글 컬럼id는 권장되지 않습니다.

    “type”는 문자열(STRING), 정수형(INT), 실수형(FLOAT/BIGDECIMAL), 날짜형(DATE/DATETIME/TIME), 바이너리형(BLOB)등이 있습니다.

    “size”는 지정은 자유로우나 type에 따라 허용치가 다르므로 type이 허용하는 길이만큼만 지정하는 것이 좋습니다. 허용치를 넘는 데이터가 들어오는 경우는 허용범위의 데이타만 인정되고 나머지는 짤리거나 무시됩니다.

Dataset Contents Editor(dsPerson)

id

type

size

내용

pid

String

5

일련번호

person_name

String

10

성명

company

String

20

회사명

dept

String

20

부서명

company_telno

String

14

회사전화번호

mobile

String

14

휴대폰

email

String

20

Email

home_telno

String

14

집 전화번호

home_address

String

20

집주소

company_address

String

20

회사주소

company_fax

String

14

회사팩스번호

jikgub

String

20

직급

remark

String

256

비고

완성된 모습은 다음과 같습니다.

  1. 테스트용 데이터는 디자인 할 때 서버와의 연결 없이도 화면의 출력내용을 점검할 수 있도록 합니다. 데스트용 데이터를 추가하려면 Rows”부분의 버튼을 클릭하여 레코드를 추가한 후 데이터를 집접 등록할 수 있습니다.

  2. 위와 같은 방법으로 department 전용 데이터셋 “ds_dept”를 추가 생성합니다.

3.3그리드(Grid) 구성하기

그리드(Grid) 컴포넌트는 데이터셋(Dataset)을 연결(Bind)하여 데이터를 화면에 출력합니다. 그리드(Grid)를 데이터셋에 연결하면 출력뿐만 아니라 그리드(Grid)를 통한 입력도 가능하므로 데이터셋의 데이터를 수정할 수 있습니다.
모든 작업은 연결된 데이터셋을 중심으로 이루어지고 실시간 데이터셋으로 반영됩니다.
만일, 데이터셋에 레코드를 추가하면 그리드(Grid)에 추가된 레코드가 출력됩니다.
그리드(Grid)를 통해 데이터를 수정하면 연결된 데이터셋의 데이터가 바로 수정됩니다. 그리드(Grid)는 데이터를 출력하거나 입력할 때 Format을 줄 수 있습니다. 사용자가 데이터를 보다 쉽게 인식할 수 있도록 “-“ 문자 등을 출력 시에 보여주도록 설정이 가능합니다. 날짜를 입력할 때는 유효범위를 넘지 않도록 날짜형 입력형태를 선택할 수 있습니다.

3.3.1컬럼 디자인하기

컴포넌트 툴바에서 을 선택하여 화면에 그립니다.

만들어진 그리드(Grid)에 데이터셋(Dataset)을 연결(Bind)하고자 할 때는 해당 그리드(Grid)를 선택하고 컴포넌트 속성을 지정할 수 있는 “Properties”창에서 “binddataset”을 찾아 선택 항목을 클릭합니다. 화면에 디자인된 데이터셋과 공통데이터셋 목록이 열리면 연결(Bind)하기를 원하는 데이터셋을 선택합니다.

그리드(Grid)를 디자인 했을 때 최초 모습은 위에서 보여준 것처럼 공간표시만 보입니다. 연결할 데이터셋을 드래그하여 그리드 위로 끌어다 놓습니다.

그리드를 더블 클릭하면 데이터셋의 모든 컬럼이 그리드에 디자인된 것을 확인할 수 있습니다.

변경을 원하는 컬럼을 선택하여 오른쪽에 보이는 속성창을 이용하여 수정합니다.
삭제를 원하는 컬럼은 선택하고 마우스 오른쪽 버튼을 클릭할 때 보여지는 팝업메뉴를 이용하여 작업합니다. 컬럼의 순서를 변경하려면 “Cut”, “Paste”메뉴를 활용하십시오. 위치를 바꿀 컬럼을 선택 후 “Cut”을 하고 바꿀 위치의 컬럼을 선택한 뒤 “Paste"를 하면 팝업으로 " Append /insert” 가 나옵니다. Append는 Cut한 컬럼을 맨 뒤로, insert는 선택한 위치 바로 뒤로 이동시킵니다.
XPLATFORM 프로그램에서 데이터는 데이터셋에 보관되고, 그리드(Grid)는 데이터셋을 연결하여 사용하므로 보여주고자 하는 컬럼만 디자인합니다.
그리드의 컬럼과 데이터셋의 컬럼을 연결할 경우, 사전에 그리드의 binddataset값을 설정한 상태에서만 작업이 가능합니다.
연결한 그리드의 컬럼을 선택합니다. 그러면 “Grid Contents Editor”오른쪽에 선택한 컬럼의 속성창이 보여집니다. “Binding”그룹의 “text”항목에서 연결할 데이터셋의 컬럼을 선택합니다. 예제에서 사용할 그리드는 다음과 같이 컬럼을 디자인합니다.

추가할 컬럼정보는 다음과 같습니다.

Grid Contents Editor(grd_PersonList)

컬럼 순서

Head Cells : text

Body Cells : text

col0

name

bind:person_name

col1

company

bind:company

col2

dept

bind:dept

col3

comp tel

bind:company_telno

col4

mobile

bind:mobile

col5

email

bind:email

col6

home_tel

bind:home_telno

col7

home_address

bind:home _address

Col8

company address

bind:company_address

Col9

company fax

bind:company_fax

col10

jikgub

bind:jikgub

col11

remark

bind:remark

모든 작업이 끝나면 “OK”버튼을 클릭하여 완성합니다.

3.3.2그리드에 특정 데이터셋 연결하기

그리드에서 특정 컬럼만 다른 데이터셋의 정보를 불러오고 싶다면 그리드 에디터를 통해 연결할 수 있습니다.
그리드 에디터를 열어 department 컬럼 선택 후 우측에서 Action영역의 displaytype과 edittype을 combo로 설정합니다.
GridCombo영역에서 combodataset에 앞서 만든 ds_dept 를 바인딩한 후, combocodecol에 codecolumn을, combodatacol에 datacolumn을 바인딩합니다.
이렇게 연결하게 되면 실행 시 부서컬럼에 코드가 아닌 부서명이 나옵니다.

실제 Data가 있을 경우 다음과 같이 화면에 Grid가 나타납니다.

3.4조회,작업영역(Div,Button,Edit,Static) 구성하기

기본등록 프로그램에 조건조회 기능 및 추가, 저장기능을 추가해 보도록 하겠습니다.
컴포넌트는 Div, Button, Edit, Static을 사용합니다.

3.4.1디비전(Div) 만들기

컴포넌트 툴바에서 를 선택하여 디비전(“Div”)를 만듭니다.

디비전(“Div”)의 속성을 다음과 같이 변경합니다.

디비전(Div)

속성

설명

id

div_top

디비전의 id

bordertype

round 10 10

디비전의 border round 처리

3.4.2스테틱(Static) 만들기

컴포넌트 툴바에서 를 선택하여 스테틱(“Static”)을 만듭니다.

스테틱(“Static”)의 속성은 다음과 같이 변경합니다.

스테틱(Static)

속성

설명

id

st_name

스테틱의 id

text

Name

스테틱의 text

3.4.3에디트(Edit) 만들기

컴포넌트 툴바에서 를 선택하여 화면에 에디트(“Edit”)를 만듭니다.

에디트(“Edit”)의 속성을 다음과 같이 변경합니다.

에디트(Edit)

속성

설명

id

ed_search

에디트의 id

3.4.4버튼(Button) 만들기

컴포넌트 툴바에서 를 선택하여 화면에 버튼(Button)을 만듭니다.

각각의 버튼(Button)의 속성은 다음과 같이 변경합니다.

버튼(Button)

속성

설명

Id

btn_search,

btn_save,

btn_delete,

btn_insert

버튼의 id

Text

Search,

Save,

Delete,

Insert

버튼의 text

background

#808080ff

버튼의 배경 색상

bordertype

round 5 5

버튼의 테두리 타입

Color

white

버튼의 글자 색상

3.4.5입력영역(Div, Edit, Combo, Static) 만들기

컴포넌트 툴바에서 각각의 컴포넌트를 선택하여 화면에 배치시킵니다.
각각의 버튼(Button)의 속성은 다음과 같이 변경합니다.

컴포넌트

이름

설명

Div

input_div

입력영역의 구성을 위한 디비전

Static

name ~ remarks

각 입력항목의 Title

Edit

name ~ remarks

각 입력값의 입력, 수정을 위한 에디트

Combo

department

부서명을 표시하기 위한 콤보

3.4.6콤보(Combo) 만들기

ds_dept 를 innderdataset에 바인딩한 후 codecolumn에 codecolumn을 datacolumn에 datacolumn을 바인딩합니다.
이렇게 연결하게 되면 실행 시 부서컬럼에 코드가 아닌 부서명이 나옵니다.

3.4.7입력영역의 컴포넌트 별 데이터셋 연결하기

디비전(Div) 위에 그린 컴포넌트는 id앞에 디비전(Div) 이름이 붙어 구별이 됩니다.
데이터셋(Dataset)을 드래그하여 연결할 컴포넌트에 넣으면 “Bind Item”창이 열립니다.

“Property”, “Column ID” 컬럼값을 선택합니다.

Bind Item(person_entry.xfdl)

Bind ID

Component

Property

Dataset

Column ID

Item0

div_input.ed_name (Edit)

value

dsPerson

person_name

Item1

div_input.ed_phone (Edit)

value

dsPerson

home_telno

Item2

div_input.ed_cell (Edit)

value

dsPerson

mobile

Item3

div_input.ed_mail (Edit)

value

dsPerson

email

Item4

div_input.ed_add (Edit)

value

dsPerson

home_address

Item5

div_input.ed_com (Edit)

value

dsPerson

company

Item6

div_input.ed_comphone (Edit)

value

dsPerson

company_telno

Item7

div_input.ed_fax (Edit)

value

dsPerson

company_fax

Item8

div_input.cbo_dept (Combo)

value

dsPerson

dept

Item9

div_input.ed_position (Edit)

value

dsPerson

jikgub

Item10

div_input.ed_remark (Edit)

Value

dsPerson

remark

“Bind Item”창은 “Project Explorer”창에서 작업할 화면명을 찾아 마우스 오른쪽 버튼을 클릭하면 보이는 팝업메뉴에서도 확인이 가능합니다.

3.5스크립트 작성하기

데이터를 조회한 후 필요한 데이터를 조회해서 추가하거나 변경, 삭제하는 기능을 만듭니다.

3.5.1서비스 조회 이벤트 만들기

스크립트를 작성하기 위하여 “Search”버튼을 선택하고 “Properties”창의 이벤트 목록에서 “onclick”이벤트를 찾아 입력에 연결할 함수명을 넣고 <Enter>키를 누릅니다. 또는 공란상태에서 마우스를 더블클릭하면 자동으로 함수명을 등록하고 작업영역(Work Area) 스크립트(script)탭으로 이동합니다. 이때 자동으로 등록되는 함수는 “[이벤트명]_[컴포넌트명]”으로 만들어지며 이미 같은 이름의 함수가 있는 경우에는 스크립트(Script)탭의 해당 함수 위치로 입력커서가 이동됩니다. 만일 같은 이름의 함수가 없을 때는 스트립트에 함수를 만들고 해당 위치로 이동합니다.

3.5.2서비스 호출 스크립트 작성하기

서비스를 호출하는 기능은 데이터셋의 “load”를 사용하였습니다.
작성할 스크립트 내용은 다음과 같습니다.
function btn_search_onclick(obj:Button, e:ClickEventInfo)
{
    dsPerson.url = "datasvc::search.jsp"
    dsPerson.load();
}

3.5.3데이터셋(Dataset) 이벤트(onload)스크립트 작성하기

데이터셋의 “load” 메소드로 서버서비스를 호출하는 경우 호출이 정상 또는 비정상적인 상황 모두 호출한 데이터셋의 “onload”이벤트를 발생시킵니다. 스크립트를 구현하기 위해 데이터셋(Dataset)의 “onload”이벤트를 찾아 적당한 함수명을 등록합니다. 함수명을 등록하는 방법은 "서비스 조회 이벤트 만들기"를 참조하십시오.

정상과 비정상 상황에 대한 스크립트 구현은 다음과 같습니다.

function dsPerson_onload(obj:Dataset, e:DSLoadEventInfo)
{
    if (e.errorcode < 0) {
        alert(e.errorcode + ":" + e.errormsg);
        return;
    }
    if (e.reason == 0){
        trace("data searched : count ("+dsPerson.rowcount+")");
    }
}

이벤트 정보(EventInfo) 객체 속성 보는 방법

XPLATFORM의 이벤트는 모두 동일한 인자(Argument)구조를 갖습니다.

첫번째 인자는 “obj”로 이벤트를 발생시킨 오브젝트(Object)를 전달합니다.

오브젝트의 종류에 따라 접근 가능한 프로퍼티 리스트가 달라집니다.

오브젝트의 종류는 “obj”뒤에 “.”을 붙이면 오브젝트 종류가 기술됩니다.

두번째 인자는 “e”로 이벤트에 전달되는 여러 가지 정보를 관리하는 객체입니다.

이벤트 정보(EventInfo)객체의 프로퍼티는 이벤트정보의 종류에 따라 달라집니다.

LoadEventInfo의 프로퍼티로는 eventid(Event ID 문자열), fromobject(Event 발생 Object), fromreferenceobject, url(Load된 url) 등이 있습니다. 접근 가능한 프로퍼티 리스트를 확인하려면 “도움말(Help)”를 참조하십시오.

Quick View 메뉴를 이용하여 실행테스트를 하면 화면을 다음과 같은 모습으로 실행됩니다.

3.5.4추가 이벤트 만들기

스크립트를 작성하기 위하여 “Insert”버튼을 선택하고 “Properties”창의 이벤트 목록에서 “onclick”이벤트를 찾아 입력에 연결할 함수명을 넣고 <Enter>키를 누릅니다. 또는 공란상태에서 마우스를 더블클릭하면 자동으로 함수명을 등록하고 작업영역(Work Area) 스크립트(script)탭으로 이동합니다. 이때 자동으로 등록되는 함수는 “[이벤트명]_[컴포넌트명]”으로 만들어지며 이미 같은 이름의 함수가 있는 경우에는 스크립트(Script)탭의 해당 함수 위치로 입력커서가 이동됩니다. 만일 같은 이름의 함수가 없을 때는 스트립트에 함수를 만들고 해당 위치로 이동합니다.

3.5.5추가 스크립트 작성하기

추가 기능은 데이터셋의 “addRow”를 사용하였습니다.
작성할 스크립트 내용은 다음과 같습니다.
function div_top_btn_insert_onclick(obj:Button, e:ClickEventInfo)
{
    dsPerson.addRow();
    grd_PersonList.setCellPos(0);
    div_input.ed_name.setFocus();
}

3.5.6삭제 이벤트 만들기

스크립트를 작성하기 위하여 “Delete”버튼을 선택하고 “Properties”창의 이벤트 목록에서 “onclick”이벤트를 찾아 입력에 연결할 함수명을 넣고 <Enter>키를 누릅니다. 또는 공란상태에서 마우스를 더블클릭하면 자동으로 함수명을 등록하고 작업영역(Work Area) 스크립트(script)탭으로 이동합니다. 이때 자동으로 등록되는 함수는 “[이벤트명]_[컴포넌트명]”으로 만들어지며 이미 같은 이름의 함수가 있는 경우에는 스크립트(Script)탭의 해당 함수 위치로 입력커서가 이동됩니다. 만일 같은 이름의 함수가 없을 때는 스트립트에 함수를 만들고 해당 위치로 이동합니다.

3.5.7삭제 스크립트 작성하기

삭제 기능은 데이터셋의 “deleteRow”를 사용하였습니다.
작성할 스크립트 내용은 다음과 같습니다.
function div_top_btn_delete_onclick(obj:Button, e:ClickEventInfo)
{
    if (confirm("do you want to delete data ?")) {
        dsPerson.deleteRow(dsPerson.rowposition);
    }
}

3.5.8저장 이벤트 만들기

스크립트를 작성하기 위하여 “Save”버튼을 선택하고 “Properties”창의 이벤트 목록에서 “onclick”이벤트를 찾아 입력에 연결할 함수명을 넣고 <Enter>키를 누릅니다. 또는 공란상태에서 마우스를 더블클릭하면 자동으로 함수명을 등록하고 작업영역(Work Area) 스크립트(script)탭으로 이동합니다. 이때 자동으로 등록되는 함수는 “[이벤트명]_[컴포넌트명]”으로 만들어지며 이미 같은 이름의 함수가 있는 경우에는 스크립트(Script)탭의 해당 함수 위치로 입력커서가 이동됩니다. 만일 같은 이름의 함수가 없을 때는 스트립트에 함수를 만들고 해당 위치로 이동합니다.

3.5.9저장 스크립트 작성하기

저장 기능은 Application의 “transaction”을 사용하였습니다.
작성할 스크립트 내용은 다음과 같습니다.
function div_top_btn_save_onclick(obj:Button, e:ClickEventInfo)
{
    var svcURL = "datasvc::save_list.jsp";
    var inDS = "dsPerson=dsPerson";

    transaction("save", svcURL, inDS, " ", "", "fn_callBack");
}
“8.4장”에서 save_list.jsp에 대해서 설명합니다.
Application의 “transaction”은 결과에 대한 처리를 위하여 callback 함수를 함께 사용합니다.
작성할 스크립트 내용은 다음과 같습니다.
이때 함수명(fn_callBack)은 transaction 의 인자 중 하나인 callback 인자와 동일해야 합니다.
function fn_callBack(svcid,strErrCode,strErrMsg) 
{
    if (strErrCode != 0) {
        alert(strErrCode + " : " + strErrMsg);
        return;
    }
    if (svcid == "save"){
        alert("data has been saved");
        return;
    }
}

3.5.10조건검색 이벤트 만들기

스크립트를 작성하기 위하여 에디트를 선택하고 “Properties”창의 이벤트 목록에서 “ontextchanged”이벤트를 찾아 입력에 연결할 함수명을 넣고 <Enter>키를 누릅니다. 또는 공란상태에서 마우스를 더블클릭하면 자동으로 함수명을 등록하고 작업영역(Work Area) 스크립트(script)탭으로 이동합니다. 이때 자동으로 등록되는 함수는 “[이벤트명]_[컴포넌트명]”으로 만들어지며 이미 같은 이름의 함수가 있는 경우에는 스크립트(Script)탭의 해당 함수 위치로 입력커서가 이동됩니다. 만일 같은 이름의 함수가 없을 때는 스트립트에 함수를 만들고 해당 위치로 이동합니다.

3.5.11조건검색 스크립트 작성하기

검색기능은 데이터셋(Dataset)의 “filter”를 사용하였습니다.
작성할 스크립트 내용은 다음과 같습니다.
function ed_search_ontextchanged(obj:Edit, e:TextChangedEventInfo)
{
    if (div_top.ed_search.value)
    {
        var kkk = "person_name == '"+div_top.ed_search.value+"'";
        dsPerson.filter(kkk);
    }
    else
    {
        dsPerson.filter("");
    }
}

Quick View 메뉴를 이용하여 실행테스트를 하면 화면을 다음과 같은 모습으로 실행됩니다.

3.6등록 실행 테스트

Quick View 메뉴를 클릭하여 테스트합니다.
데이터를 조회하면 그리드(Grid)에 나타나는 데이터가 상세내역에 표시되며, 그리드를 이용하여 Row를 이동하면 상세내역의 데이터도 현재 RowPosition에 해당하는 데이터로 바뀌어 표시됩니다. “Insert”버튼을 클릭하여 새로운 데이터를 추가합니다. 그리드에 Row가 추가되며 상세내역에 데이터를 입력할 수 있습니다.

삭제하려는 데이터를 그리드(Grid)에서 선택하면 상세내역에 데이터가 보여집니다.
“Delete”버튼을 클릭하여 데이터를 화면에서 지웁니다.

“Insert”로 추가된 데이터와 “Delete”처리된 데이터는 “Save”버튼을 클릭하여 서비스를 호출하여야 작업내용이 서버에 반영됩니다.
“Save”버튼을 클릭하여 서비스를 호출하고 서비스가 정상적으로 수행되었는지 오류 메세지를 확인합니다.