13.샘플 프로젝트 (메뉴만들기-menu.xfdl)

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

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

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

13.1.1전체화면 만들기

13.1.2화면(Form) 만들기

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

속성

설명

Name

Menu

Location

Base

Width

1024

Height

768

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

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

디비전(Div)

속성

설명

id

divLeft


디비전(Div)

속성

설명

id

divMain


메뉴(Menu)

속성

설명

id

mnuTop


13.1.3메뉴 구성

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

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

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

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

데이터셋(Dataset) - dsMenu

id

caption

level

url

form

화 면

0


list

고객목록조회

1

Base::list.xfdl

entry

고객상세조회

1

Base::entry.xfdl

split

|

0


help

도움말

0


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

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

Inner Bind Dataset(mnuTop)

속성

설명

captioncolumn

caption


idcolumn

id


levelcolumn

level


메뉴(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메뉴를 이용한 실행화면입니다.

13.2.2좌측 메뉴 만들기

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

버튼(Static)

속성

설명

id

sttList

Onclick=”divLeft_sttList_onclick”

text

고객 목록 조회


버튼(Static)

속성

설명

id

sttEntry

Onclick=”divLeft_sttList_onclick”

text

고객 상세 조회


스태틱(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";
    }
}

13.3컴파일 및 실행

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