전체 화면 구성을 위한 Div와 상단메뉴, 좌측메뉴를 만듭니다.
(샘플의 디자인은 사용하시는 테마에 따라 달라질 수 있습니다.)

• 실습목적

• 구현기능

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

  • 화면구성하기(1) : 전체화면구성 및 메뉴구성

  • 화면구성하기(2) : Menu, Div 구현

화면 구성하기(1) : 전체화면 구성 및 메뉴구성

전체 화면 구성을 위한 Div를 만들고 상단 메뉴의 기능을 확인합니다.

전체화면 만들기

화면(Form) 만들기

“프로젝트 생성하기”를 참조하여 Form을 만듭니다.
“Create New Form Wizard”에 사용한 옵션을 다음과 같습니다.

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

좌측메뉴와 화면영역의 2개의 디비전(Div)을 [그림] 처럼 배치하고 속성을 변경합니다.

메뉴 구성

고객 관리 시스템을 실행하면 상단에 전체 메뉴와 좌측에 폼메뉴가 나옵니다. 
상단 메뉴와 좌측에 있는 폼메뉴는 등록, 조회 화면 불러오기 기능을 가지고 있습니다.

화면 구성하기(2) : Menu 구현

상단메뉴만들기 - 메뉴 : Menu

메뉴(Menu)는 깊이를 가지는 계층적 Menu를 구성할 수 있습니다. 메뉴(Menu)의 각 item은 Enabel/Disable 을 지정할 수 있으며, Check상태의 표현도 가능합니다. 컴퍼넌트 툴바에서 을 선택하여 div_top 위에 만들고 연결할 데이터셋(Dataset) dsMenu를 추가합니다. dsMenu 컬럼의 내용은 다음과 같습니다.

메뉴와 데이터셋을 연결하면 메뉴속성을 지정할 수 있는 “Inner Bind Dataset” 창이 뜹니다.

지정된 메뉴 속성은 다음과 같습니다.

메뉴(Menu)를 클릭하고 “Properties”창 이벤트(Event) 항목 중에서 “onmenuclick”을 선택합니다. 연결할 함수를 등록합니다.

mnuTop의 “onmenuclick”에 등록되는 “mnuTop_onmenuclick”함수의 내용

function mnuTop_onmenuclick(obj:Menu, e:MenuClickEventInfo)
{
	if (e.id == "list") {
		var row = findRow(dsMenu, "id", e.id);
		var url = dsMenu.getColumn(row, "url");
		divMain.url = url;
	} else if (e.id == "entry") {
		var row = findRow(dsMenu, "id", e.id);
		var url = dsMenu.getColumn(row, "url");
		divMain.url = url;
	}
}
function findRow(ds, columnName, value)
{
	var count = ds.rowcount;
	for (var i = 0; i < count; i++) {
		if (ds.getColumn(i, columnName) == value) {
			return i;
		}
	}
	return -1;
}

HTML5의 QucickView메뉴를 이용한 실행화면입니다.

좌측 메뉴 만들기

좌측 디비전(Div)위에 스태틱(Static)을 생성합니다. text가 있는 2개의 스태틱(Static)과 더불어 빈 스태틱(Static)을 추가로 3개 더 만듭니다.
각각의 속성은 다음과 같습니다.

스태틱(Static)을 클릭하고 “Properties”창 이벤트(Event) 항목 중에서 “onclick”을 선택합니다. 연결할 함수를 등록합니다.

“고객 목록 조회” 스태틱과 “고객 상세 조회” 스태틱의 “onclick”에 등록되는 “divLeft_sttList_onclick”함수의 내용

function divLeft_sttList_onclick(obj:Static, e:ClickEventInfo)
{
	if (obj.name == "sttList") {
		divMain.url = "Base::list.xfdl";
	} else if (obj.name == "sttEntry") {
		divMain.url = "Base::entry.xfdl";
	}
}

컴파일 및 실행

HTML5메뉴 중 Compile File 및 QucickView메뉴를 이용한 실행화면입니다.