상단 메뉴까지는 어떻게 만들어보았습니다.
이제는 우측 메뉴를 만들 차례입니다.
업무용 시스템의 경우에는 대메뉴가 있고 그 아래 들어오는 하위 메뉴의 숫자가
무모하게 많기 때문에 상단 메뉴에서 드릴다운 형식으로 표기하기에는 네비게이션이 복잡해집니다.
그래서 대메뉴를 상단에 배치하고 상세 메뉴는 왼쪽에 트리 형식으로 처리해줍니다.
일반적으로 메뉴는 폼화면 단위가 아닌 전체 애플리케이션 단위에서 사용되기 때문에
관련된 Dataset은 글로벌 변수로 설정하는 것이 좋습니다.
그럼 이전에 만든 Dataset을 글로벌 변수로 옮겨보겠습니다.
프로젝트 탐색기에서 GlobalVariables 컨텍스트 메뉴를 확인하고
Insert GlobalVariables Item > Dataset 을 선택합니다.
그럼 일반 Dataset 에서 보았던 것과 비슷한 설정화면을 만날 수 있습니다.
다른 Dataset을 그대로 옮겨오면 좋겠지만 그렇게는 안되는것 같고 앞에서 작성한 소스를
가져와서 붙여넣기는 할 수 있습니다.
그리고 상단 메뉴에 연결된 Dataset을 아래와 같이 바꾸어줍니다.
innerdataset="@Dataset0"
속성창에 나오는 목록에서 선택할 수도 있습니다.
이제 왼쪽 메뉴를 만들어보죠.
그리드를 사용할거구요. 트리 형식으로 배치할 겁니다.
그리고 대메뉴에서 선택된 항목의 하위 메뉴를 배치할 것이기 때문에
dataset 대신에 FilteredDataset 을 사용할 겁니다.
1. 그리드 컴포넌트를 화면에 가져다 놓습니다.
2. FilteredDataset 을 Invisible Objects 영역에 가져다 놓습니다.
그리고 그리드에 바인딩 시켜줍니다.
level 이 1 이하인 데이터를 가져오며 대메뉴에서 선택된 항목에 해당하는 메뉴만 보여줄 것이기 때문에
filterstr을 다음과 같이 정의합니다.
해당 부분은 나중에 스크립트에서 재정의할겁니다. 일단 테스트로..
level > 0 && (id.value).substring(0,2) == 01
3. 그리드 속성을 수정합니다.
다음 항목처럼 수정해줍니다.
selecttype : treecell (이 부분은 선택 영역에 대한 설정입니다. treecell은
binddataset : FilteredDataset00
treeinitstatus : expand, null
treecheckbox : false
4. 그리드를 더블클릭해서 Grid Contents Editor 로 이동한 다음
헤더 Row와 바디 Row를 추가해줍니다.
5. 바디 셀을 선택하고 다음 항목을 수정해줍니다.
displaytype : true tree
edittype : true tree
text : bind:title
treelevel : bind:level
treestrartlevel : 1
6. 바디 영역의 라인을 보이지 않게 하기 위해
body 항목을 클릭하여 cellline 항목의 style을 none으로 설정합니다.
그럼 다음과 같은 결과가 나올겁니다.
오호 그리드가 저런 모양으로 나오는군요.
의외의 반전이네요.
콘텐츠까지 가려고 했더니...또 너무 길어졌네요.