12.샘플 프로젝트(등록 화면만들기-entry.xfdl)

등록화면은 고객 관리 시스템의 데이터를 추가, 수정 또는 삭제하는 화면입니다.
(샘플의 디자인은 사용하시는 테마에 따라 달라질 수 있습니다.)

12.1화면구성하기:데이터셋(Dataset) 연결 – Edit, Combo, Calendar

컴포넌트 별 데이터셋(Dataset) 연결에 대해 알아봅니다.

12.1.1화면(Form) 만들기

“6.1 프로젝트 생성하기”를 참조하여 Form을 만듭니다.

  1. 툴바에서 New 아이콘을 확장하여 Form을 선택합니다.

  1. “Create New Form Wizard”에 사용한 옵션을 다음과 같습니다.

속성

설명

Name

entry

Location

Base

Width

800

Height

600

Form의 titletext 속성의 값을 “고객 상세 조회”으로 지정합니다.

12.1.2조회, 추가, 삭제, 저장 버튼 만들기 - 버튼 : Button

그림과 같이 Static, Div, Button을 생성하여 화면(Form)에 배치합니다.
유사한 컴퍼넌트를 일렬로 배치하는 경우에는 복사/붙여넣기 기능과 화살표 버튼 이동을 이용하면 손쉽게 배치가 가능합니다.

버튼 영역에 배치되는 컴퍼넌트는 다음과 같습니다.

버튼 영역

Component Type

ID

Text

설명

Static

sttList

고객 상세 조회


Div

divCommand



Static

sttSearch

고객명


Edit

edtSearch



Button

btnSearch

조 회


Button

btnInsert

추 가


Button

btnDelete

삭 제


Button

btnSave

저 장


12.1.3데이터셋 복사하기

컴퍼넌트는 물론 데이터셋도 Form 간의 복사가 가능합니다.
조회화면(list.xfdl)에서 데이터셋을 복사하여 등록화면(entry.xfdl)에 붙여넣기를 합니다.

12.1.4컬럼 디자인하기

그리드를 추가하고, “화면 구성하기(2) : 그리드(Grid) - 컬럼 디자인"을 참조하여 추가된 그리드의 컬럼을 디자인합니다.

그리드(Grid)

속성

설명

id

grdCustomers


binddataset

dsCustomers


그리드 컬럼의 “직급” 컬럼은 "그리드의 콤보 만들기"를 참조하여 “displaytype”을 콤보 형식으로 지정합니다.

Grid Contents Editor(grdCustomers)

컬럼 순서

Head Cells : text

Body Cells : text

컬럼 크기

col0

ID

bind:id

60

col1

고객명

bind:name

120

col2

이메일

bind:email

150

col3

전화번호

bind:phone

120

col4

직장명

bind:company

150

col5

직 급

bind:jobtitle

120

12.1.5디비전 만들기 - 디비전 : Div

디비전(Div)은 하나의 화면에 여러 개의 부분화면을 구성할 때 사용하는 컴포넌트입니다. 이렇게 여러 개의 컴포넌트를 내부에 포함시킬 수 있는 컴포넌트를 컨테이너라고 합니다. 
이러한 컨테이너에는 Div 이외에 GroupBox, Tabpage, PopupDiv 등이 있습니다.
또한 디비전(Div)의 “url” 프로퍼티를 이용하여 다른 화면(Form)을 연결해서 출력할 수도 있습니다.
디비젼(Div) 위에서 바인딩(Binding) 기능을 확인합니다.
컴포넌트 툴바에서 를 선택하여 화면 위에 디비전(Div)을 만듭니다.

디비전(Div)

속성

설명

id

divDetail


12.1.6타이틀과 입력영역 만들기

컴포넌트 툴바에서 를 선택하여 디비전(Div) 위에 스테틱(Static)을 만들고, 를 선택하여 추가된 스테틱(Static) 옆에 디비전(Div)을 만듭니다.
스태틱(Static)을 좌표(0, 0)에 배치시키고, border 속성값을 “1px solid #808080ff”으로 설정합니다. 그리고, 바로 옆에 디비전(Div)를 배치시킵니다.

스태틱(Static)과 디비전(Div)을 동시에 선택한 후 복사와 붙여넣기를 반복합니다.

상세영역의 스태틱(Static)과 디비전(Div)의 id, text 속성값을 설정합니다.
상세영역에 배치되는 컴퍼넌트는 다음과 같습니다.

상세 영역

ID

Text

Component Type

설명

sttName

고객명

Static

안내 필드

divName


Div

고객명 출력 필드

sttEmail

이메일

Static

안내 필드

divEmail


Div

이메일 출력 필드

sttBirthday

생년월일

Static

안내 필드

divBirthday


Div

생년월일 출력 필드

sttPhone

전화번호

Static

안내 필드

divPhone


Div

전화번호 출력 필드

sttHomeAddr

주 소

Static

안내 필드

divHomeAddr


Div

주소 출력 필드

sttCompany

직장명

Static

안내 필드

divCompany


Div

직작명 출력 필드

sttJobTitle

직 급

Static

안내 필드

divJobTitle


Div

직급 출력 필드

sttBusiPhone

직장 전화번호

Static

안내 필드

divBusiPhone


Div

직장 전화번호 출력 필드

sttBusiAddr

직장 주소

Static

안내 필드

divBusiAddr


Div

직장 주소 출력 필드

12.1.7에디트 만들기 - 에디트 : Edit

[그림]과 같이 에디트(Edit)를 추가합니다.

에디트(Edit) 속성을 변경합니다.

에디트(Edit)

id

스크립트 에서 컴포넌트 id

배치한 스테틱(Static)

edtName

divDetail.divName.edtName

고객명

edtEmail

divDetail.divEmail.edtEmail

이메일

edtPhone

divDetail.divPhone.edtPhone

전화번호

edtHomeAddr

divDetail.divHomeAddr.edtHomeAddr

주 소

edtCompany

divDetail.divCompany.edtCompany

직장명

edtBusiPhone

divDetail.divBusiPhone.edtBusiPhone

직장 전화번호

edtBusiAddr

divDetail.divBusiAddr.edtBusiAddr

직장 주소

12.1.8달력 만들기 - 달력 : Calendar

그림과 같이 달력(Calendar)을 추가합니다.

달력(Calendar)

속성

설명

id

calBirthday


dateformat

yyyy-MM-dd


12.1.9콤보 만들기 - 콤보 : Combo

여러 개의 예시값을 보여주는 선택목록 형태에는 콤보(Combo)를 사용합니다. 컴포넌트 툴바에서 를 선택하여 화면에 콤보(Combo)을 만듭니다. 
콤보(Combo)의 속성을 다음과 같이 변경합니다.

콤보(Combo)

속성

설명

id

cmbJobTitle


innerdataset

dsJobTitle

아래의 설명으로 자동 설정

codecolumn

code

아래의 설명으로 자동 설정

datacolumn

value

아래의 설명으로 자동 설정

데이터셋과 콤보의 innerdataset을 바인드시키기 위해 연결할 데이터셋을 드래그하여 콤보 위로 끌어다 놓습니다.

12.1.10컴포넌트별 데이터셋 연결하기

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

바인드될 컴퍼넌트의 Property와 데이터셋을 바인드될 컬럼 ID를 지정합니다.

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

12.2스크립트 작성하기 – 추가/수정/저장 작성하기

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

12.2.1조회, 추가, 저장 버튼 스크립트 작성하기

조회 버튼을 클릭하면 데이터셋(Dataset)에 새로운 데이터를 생성하도록 스크립트를 작성합니다. 먼저 조회 버튼을 클릭하고 “Properties”창 이벤트(Event) 항목 중에서 “onclick”을 선택합니다. 연결할 함수를 등록합니다.

구현해야 할 스크립트의 내용은 다음과 같습니다.
<조회 버튼>의 “onclick”에 등록되는 “divCommand_btnSearch_onclick”함수의 내용
function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
    var id = "search";
    var url = "http://127.0.0.1:8080/xplatform9-ajax/search.jsp?keyword="
        +divCommand.edtSearch.text;
    var reqDs = "";
    var respDs = "dsCustomers=customers";
    var args = "";
    var callback = "received";
    transaction(id, url, reqDs, respDs, args, callback);
}

function received(id, code, message)
{
    if (code == 0) {
        alert(dsCustomers.rowcount + "건의 데이터가 조회되었습니다.");
    }else{
        alert("Error["+code+"]:"+message);
    }
}

<추가 버튼>의 “onclick”에 등록되는 “divCommand_btnInsert_onclick”함수의 내용

function divCommand_btnInsert_onclick(obj:Button, e:ClickEventInfo)
{
    var row = dsCustomers.addRow();
    divDetail.divCommand.edtSearch.setFocus();
}

<삭제 버튼>의 “onclick”에 등록되는 “divCommand_btnDelete_onclick”함수의 내용

function divCommand_btnDelete_onclick(obj:Button, e:ClickEventInfo)
{
    var row = dsCustomers.rowposition;

    if (row >= 0) {
        var id = dsCustomers.getColumn(row, "id");

        if (id == undefined) {
            id = "";
        }

        if (confirm("고객 ID " + id + "의 데이터를 삭제하시겠습니까 ?")) {
            dsCustomers.deleteRow(row);
        }
    }
}

<저장 버튼>의 “onclick”에 등록되는 “divCommand_btnSave_onclick”함수의 내용

function divCommand_btnSave_onclick(obj:Button, e:ClickEventInfo)
{
    var id = "save";
    var url = "http://localhost:8080/xplatform9-ajax/save.jsp";
    var reqDs = "customers=dsCustomers:A";
    var respDs = "";
    var args = "";
    var callback = "received";
    transaction(id, url, reqDs, respDs, args, callback);
}

function received(id, code, message)
{
    if (id == "search") {
        if (code == 0) {
            alert(dsCustomers.rowcount + "건의 데이터가 조회되었습니다.");
        } else{
            alert("Error["+code+"]:"+message);
        }
    } else if (id == "save") {
        if (code == 0) {
            alert("정상적으로 데이터가 저장되었습니다.");
        } else{
            alert("Error["+code+"]:"+message);
        }
    }
}

12.3컴파일 및 실행

HTML5메뉴 중 Compile File 및 QucickView메뉴를 클릭하여 테스트합니다.

데이터를 조회하면 그리드(Grid)에 나타나는 데이터가 상세내역에 표시되며, 그리드를 이용하여 Row를 이동하면 상세내역의 데이터도 현재 RowPosition에 해당하는 데이터로 바뀌어 표시됩니다.

추가 버튼을 클릭하여 새로운 데이터를 추가합니다. 그리드에 Row가 추가되며 상세내역에 데이터를 입력할 수 있습니다.

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

추가로 추가된 데이터와 삭제 처리된 데이터는 저장 버튼을 클릭하여 서비스를 호출하여야 작업내용이 서버에 반영됩니다.
하지만 현재는 save.jsp가 작성되어 있지 않으므로 transaction 에러가 발생하게 됩니다.
저장 버튼을 클릭하여 서비스를 호출하고 다음과 같은 오류 메세지를 확인합니다.