XPLATFORM 101

[엑스플랫폼] 쇼케이스 따라하기 (1)

엑스플랫폼 쇼케이스
투비소프트 고객지원센터 사이트에 가면 엑스플랫폼 쇼케이스를 제공합니다.
별도의 로그인 없이도 쇼케이스에 접근이 가능합니다.

해당 사이트에 들어가시면 2가지 옵션을 제공하게 됩니다.


'확인'을 하게 되면 엑스플랫폼 전용브라우저에서 쇼케이스를 실행합니다.
그렇지 않고 '취소'를 하게 되면 해당 브라우저에서 쇼케이스가 실행됩니다.
여기서는 구글 크롬을 사용하고 있습니다.


겉으로 보기에는 큰 차이는 없습니다만...
일부 관리 기능의 차이가 있고 성능을 볼때에도 브라우저의 경우에는 브라우저 자원에 의존하게 되지만
전용 브라우저를 사용하게 되면 일관성있는 관리가 가능하게 됩니다.
기업용 애플리케이션이라면 이런 부분이 큰 차이를 가져올 수 있죠.



각 예제는 MDI 형식으로 보여집니다. 하단의 탭을 통해 이동할 수도 있고 우측 하단의 콘트롤 바를 활용해도 됩니다.


쇼케이스가 단순한 보여주기가 아니라 주요 기능을 잘 정리한 내용이기 때문에
각 기능별로 자세히 살펴보도록 하겠습니다.

* 쇼케이스에 대한 소스를 제공하고 있습니다.
전체 프로젝트 소스는 고객지원센터에 등록된 회원만 제공받을 수 있네요.
하지만 기본적인 xfdl 파일은 쇼케이스와 같이 제공되어 바로 확인할 수 있습니다.


쇼케이스에는 다음과 같은 내용을 다루고 있습니다.
아마 연재 순서가 되지 않을까 싶습니다. 


- Application
- Grid
- DataSet
- ProgressBar
- Calendar
- Static & TextArea
- TabPage
- System
- ExportObject
- 3rd Party
- ImageViewer
- Chart
- UserObject
- AppletLoader
- Form
- Shape
- Object Reference
- Div / PopupDiv
- CheckBox
- Button
- Edit
- ListBox
- MaskEdit
- Radio
- Combo
- Spin
XPLATFORM 101

[엑스플랫폼] 프레임 밑바닥부터 만들어보기 (3/3)

엑스플랫폼 기초
이제 좀 정리가 되어야 할듯 해서..
메뉴에서 항목을 클릭하면 콘텐츠가 바뀌는것까지 정리하겠습니다. ㅠㅠ

일단 콘텐츠를 만들어야 겠죠.

1. 프로젝트 탐색기에서 TypeDefinition 을 클릭해서 서비스를 추가합니다.
그냥 기본 (Base) 에 추가해도 되지만 분류를 해놓는 것이 좋겠죠.


서비스 ID를 지정하고 Type을 정한후에 url (폴더)를 지정합니다.
여기에서는 Contents 라는 서비스를 추가했습니다.

이렇게 하고 나면 폼을 만들때 원하는 서비스를 선택할 수 있습니다.


2. 적당하게 3개의 폼을 추가합니다. 모양은 별 상관없구요.

3. 글로벌 변수로 추가했던 Dataset에서 form 항목의 값을 추가한 폼 ID로 지정해줍니다.


4. LeftMenuFrm 에서 oncellclick 이벤트를 추가하고
필터링된 데이터셋에서 선택한 메뉴의 form 항목값을 가져올 수 있게 합니다.
var formName = FilteredDataset00.getColumn(e.row, "form");
5. 이제 선택된 폼을 ContentFrame의 formurl로 대입하게 합니다.
ContentFrame.formurl = "Contents::"+formName+".xfdl";
6. TopFrame 과 MenuFrame 에 상단메뉴와 좌측메뉴를 연결해줍니다.
해당 프레임의 formurl을 TopMenuFrm과 LeftMenuFrm에 연결하면 됩니다.
그리고 각 프레임을 감싸고 있는 VFrameSet 과 HFrameSet의 레이아웃 비율을 지정해줍니다.
이때에는 separatesize 속성을 지정해주면 됩니다.
예를 들어 50,* 이라고 지정을 해주면 숫자로 지정한 부분은 고정폭이 되는 것이고
* 로 지정된 부분은 나머지 값을 분할하게 됩니다.
예제처럼 2개의 하위 프레임만 있는 경우에는 어렵지 않지만 하위 프레임이 많을 경우에는 좀 골치아파질 수 있죠.

7. 각 프레임 속성에서 showtitlebar 를 false 로 지정합니다.
이건 옵션이고 일반적으로 메뉴 영역에서는 타이틀바가 보일 필요가 없으니 지워줍니다.

* 이렇게 만들어진 화면을 테스트할때에는 개별 폼이 아니기 때문에
퀵뷰로 확인할 수는 없습니다. 메뉴에서 Launch Project 를 실행합니다.
모양이 이쁘지는 않지만 아래와 같은 결과가 나왔습니다.


메뉴를 선택할때마다 콘텐츠 영역의 데이터가 바뀌게 됩니다.
애플리케이션 구현시에는 MDI를 사용하거나 탭뷰 형식을 쓰기 때문에
구현 방식은 달라질 수 있습니다.

* 첨부파일은 진행된 프로젝트 파일입니다.
그냥 샘플이니 참고로만 사용하세요.

* 상단메뉴 클릭시 좌측 메뉴가 변경되는 이벤트를 추가하려 했는데
이건 숙제로 남겨드립니다. ㅎㅎ

http://cafe.naver.com/xplatform101/143 
XPLATFORM 101

[엑스플랫폼] 프레임 밑바닥부터 만들어보기 (2/3)

엑스플랫폼 기초
상단 메뉴까지는 어떻게 만들어보았습니다.
이제는 우측 메뉴를 만들 차례입니다.

업무용 시스템의 경우에는 대메뉴가 있고 그 아래 들어오는 하위 메뉴의 숫자가
무모하게 많기 때문에 상단 메뉴에서 드릴다운 형식으로 표기하기에는 네비게이션이 복잡해집니다.
그래서 대메뉴를 상단에 배치하고 상세 메뉴는 왼쪽에 트리 형식으로 처리해줍니다.

일반적으로 메뉴는 폼화면 단위가 아닌 전체 애플리케이션 단위에서 사용되기 때문에
관련된 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으로 설정합니다.


그럼 다음과 같은 결과가 나올겁니다.


오호 그리드가 저런 모양으로 나오는군요. 
의외의 반전이네요.

콘텐츠까지 가려고 했더니...또 너무 길어졌네요.
이벤트와 콘텐츠에 대한 처리는 다음 시간에...~~

http://cafe.naver.com/xplatform101/134 

티스토리툴바