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

• 실습목적

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

  데이터셋과 그리드 생성은 "샘플 프로젝트 (조회화면 만들기-list.xfdl)"를 참조하십시오.

• 구현기능

  다음의 단계에 따라 화면을 구성하고, 컴포넌트를 생성하여 데이터셋(Dataset)과 연결합니다..

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

  • 스크립트 작성하기 : 버튼(Button) – 추가/수정/저장 작성하기

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

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

화면(Form) 만들기

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

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

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

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

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

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

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

데이터셋 복사하기

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

컬럼 디자인하기

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

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

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

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

타이틀과 입력영역 만들기

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

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

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

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

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

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

달력 만들기 - 달력 : Calendar

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

콤보 만들기 - 콤보 : Combo

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

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

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

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

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

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

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

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

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

조회 버튼을 클릭하면 데이터셋(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);
		}
	}
}

컴파일 및 실행

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

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

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

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

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