화면 프레임을 구성하는 방법은 두가지가 있습니다.
템플릿에서 시작하는 것과 밑바닥(기본)에서 시작하는거죠.
이번에는 처음부터 프레임을 만들어보겠습니다.
상단 메뉴와 좌측 메뉴, 콘텐츠가 나오는 기본적인 화면 배치입니다.
1. 새로운 프로젝트를 만듭니다.
File > New > Project
Frame Template 는 Default 값을 그대로 사용합니다.
주의 할 점은 Add to Current Project 가 아니라 Create a new Project 를 사용합니다.
2. 생성된 프로젝트의 프레임 구조를 만들어줍니다.
ADL 에서 MainFrame 아래 기본적으로 생성되어 있는 childframe을 삭제해줍니다.
그리고 필요한 FrameSet을 추가합니다.
이렇게만 만들어놓으면 각 프레임이 어떤 역할인지 혼란스러울 수 있으니
id 값을 변경해주어도 됩니다.
각 프레임의 id 속성을 변경하면 됩니다.
프레임을 정의했으면 각 프레임에 해당하는 폼을 생성합니다.
먼저 상단 메뉴에 해당하는 폼을 만들어보겠습니다.
Menu 컴포넌트를 사용하고 폼의 크기는 메뉴의 크기와 동일하게 설정할 겁니다.
화면에 Menu 컴포넌트를 배치하고 높이를 45로 설정합니다.
Dataset은 id, title, form, level 4개의 컬럼을 가지도록 하고 데이터를 채워넣습니다.
Menu에 바인딩은 inner dataset 으로 설정합니다.
이때 3가지 항목은 필수적으로 설정을 해주어야 합니다.
captioncolumn, idcolumn, levelcolumn
그 외에 iconcolumn, enablecolumn 의 경우에는 옵션입니다.
앞에서 설정한 title, id, level 을 설정해주면 됩니다.
그리고 나면 바인딩된 데이터를 UX 스튜디오에서 확인할 수 있습니다.
* 이것은 예제이니 크기나 타입 따위는 신경쓰지 않았다는..ㄷㄷ
* 디자인 역시 신경쓰지 않았다는.. 그냥 blue 테마 사용
* 상단메뉴에 스크립트도 붙이지 않았는데 너무 내용이 길어졌네요. 메뉴랑 콘텐츠랑 상단메뉴 스크립트는 다음시간에..ㅠㅠ
http://cafe.naver.com/xplatform101/130
http://cafe.naver.com/xplatform101/130