Chap05_01_01_Application-SDI
Application의 프로그램의 메인 화면
SDI(Single Document Interface)는 Application Model이 Single Frame 형태를 의미.
하나의 Application에 하나의 초기화면이 표현되는 형태
SDI 구성 개념
MainFrame : 메인 화면을 표현할 수 있는 개체
- XPLATFORM으로 만들어진 응용프로그램의 기본 화면을 구성.
- Titlebar, Statusbar를 가지고 있음
- 하위 구성 요소 : ChildFrame, FrameSet, HFrameSet, VFrameSet, TitleFrameSet, TabFrame, ApplicationMenu
ChildFrame : 화면을 표현할 수 있는 개체
- MainFrame 또는 FrameSet 하위에 올 수 있는 Frame
- Form 정보를 URL로 갖고 있어 해당 Form의 화면을 로딩하여 보여줌
- 기본적으로 Form이 로딩될 수 있는 기본단위화면
프로젝트를 실행할 때 chlidframe의 화면을 연결하는 속성
Appearance>formurl
화면 크기 지정 - MainFrame>Position>position> 1024 768로 변경
Chap05_02_01_Application-MDI1
MDI(Multiple Document Interface)는 Application Model이 Multi Frame 형태
하나의 Main Application에 복수 Frame이 표현되는 형태, 복수의 Frame은 고정, 비고정으로 생성할 수 있음
set : 복수 개념
VFrameSet
MainFrame의 하위에 오는 Frame으로써, 응용프로그램의 화면 배열을 위한 기본 단위 화면
하위에 FrameSet, HFrameSet, VFrameSet, TitleFrameSet, ChildeFrame, TabFrame을 반복적으로 갖을 수 있음
수직 방향으로 자동으로 하위 Frame들을 배열할 수 있는 기능
HFrameSet
MainFrame의 하위에 오는 Frame으로써, 응용프로그램의 화면 배열을 위한 기본 단위 화면
하위에 FrameSet, HFrameSet, VFrameSet, TitleFrameSet, ChildeFrame, TabFrame을 반복적으로 갖을 수 있음
수평 방향으로 자동으로 하위 Frame들을 배열할 수 있는 기능
FrameSet
MainFrame의 하위에 오는 Frame으로써, 응용프로그램의 화면 배열을 위한 기본 단위 화면
하위에 FrameSet, HFrameSet, VFrameSet, TitleFrameSet, ChildeFrame, TabFrame을 반복적으로 갖을 수 있음
자유롭게 하위 Frame들을 배열할 수 있는 기능
MDI 구성 개념
MDI 만들기
1) 새로운 프로젝트 생성
2) MainFrame아래 childframe이 하나만 있으면 SDI로 표현되므로 childframe을 선택하여 우클릭하고 삭제합니다.
3) MainFrame하위에 그림과 같이 Frame과 FrameSet을 생성합니다.
(1) MainFrame 우클릭> InsertFrame>VFrameSet
(2) VFrameSet 우클릭> InsertFrame>ChildFrame
(3) VFrameSet 우클릭> InsertFrame> HFrameSet
(4) HFrameSet 우클릭> InsertFrame> ChildFrame
(5) HFrameSet 우클릭> InsertFrame> FrameSet
4) 속성창에서 다음 설정을 하여 MainFrame설정을 완료합니다.
-MainFrame선택하고 position 속성값 변경 ex) absolute 0 0 1024 768
-VFrameSet0선택하고 separatesize 변경 ex) 100,*
-HFrameSet0선택하고 separatesize 변경 ex) 200,*
-VFrameSet0>ChildFrame0선택하고 다음 속성 변경 ex) showtitlebar - false, 색깔 변경
-HFrameSet0> ChildFrame0선택하고 다음 속성 변경 ex) showtitlebar - false, 색깔 변경
-VFrameSet0>ChildFrame0, HFrameSet0> ChildFrame0선택하고 다음 속성 변경 ex) showtitlebar - false
사이즈 분할 : VFrameSet에서 Misc.>separatesize>100,*
*는 나머지 사이즈
프레임 고정 : Misc>showtitlebar>false
Chap05_02_02_Application-MDI2
Frame만 사용할 Service Group 생성
frmTop, frmLeft 제목으로 Form을 만들어 VFrameSet의 ChildFrame의 formurl에 frmTop연결, HFrameSet>ChildeFrame>formurl에 frmLeft 연결
Menu 만들기 : frmTop에는 menu 아이콘 선택
Tree 만들기 : frmLeft에는 tree, Tree는 컴포넌트가 없기 때문에 Grid로 만들어야 함
GlobalVariables에서 DataSet 만들기, 공통으로 써야할 데이터가 있기 때문에
컬럼 작성
menu_id : 고유값, 개체 만들때
menu_nm : 텍스트값 입력 위해서
menu_lv : 최상위 Root Node, 자식 Node가 있기 때문에 tree Node의 갯수를 기록,
0이 최상위 Root Node로 인식, 하위 메뉴는 한단계씩 더해준다.
menu_st : state, tree에서 사용하는 개념, 자주보는 기능은 열려있고, 자주 사용하지 않는 기능은 닫힘
menu_url : 화면 정보를 담는 기능
frmTop : Dataset을 Grid영역으로 드래그 한다. Bind inner dataset with“gds_menu”로 선택
Chap05_02_03_Application-MDI3
기본이벤트 Function만들기
lookup() : 위치를 내부적으로 꺼낼 수 있는 기능
첫번째 인자 : 비교하고자 하는 컬럼
두번째 인자 : 비교하는 컬럼
세번째 인자 : 실제로 꺼내고 싶은 컬럼
new ChildFrame(sID,0,0,800,600)
첫번째 인자 : 객체 ID
두번쨰 인자 : 화면의 첫번째 x 좌표값
세번째 인자 : 화면의 첫번째 y 좌표값
네번째 인자 : 화면의 마지막번째 x 좌표값
다섯번쨰 인자 : 화면의 마지막번째 y 좌표값
frmTop.xfdl의 script
function Menu00_onmenuclick(obj:Menu, e:MenuClickEventInfo)
{
var sID = e.id;
//필요한 화면정보와 이름을 DataSet에서 꺼내야하기 때문에 변수 지정
//lookup() : 위치를 내부적으로 꺼낼 수 있는 기능
//첫번째 인자 : 비교하고자 하는 컬럼, 두번째 인자 : 비교하는 컬럼, 세번째 인자 : 실제로 꺼내고 싶은 컬럼,
var sURL = gds_menu.lookup("menu_id", e.id, "menu_url"); //위치 꺼내오기
var sTitle = gds_menu.lookup("menu_id", e.id, "menu_nm");
//화면 정보가 없는 컬럼 선택시
if(sURL.length < 1)
{
return;
}
//화면 띄우는 기능
gfn_open(sID, sURL, sTitle);
}
function gfn_open(sID, sURL, sTitle)
{
//긴 경로 호출,
var oFS = application.mainframe.VFrameSet0.HFrameSet0.FrameSet0;
// 화면이 여러개 띄울때 반드시 필요한 ChildFrame
// 첫번째 인자 : 객체 ID, 두번쨰 인자 : 화면의 첫번째 x 좌표값, 세번째 인자 : 화면의 첫번째 y 좌표값,
// 네번째 인자 : 화면의 마지막번째 x 좌표값, 다섯번쨰 인자 : 화면의 마지막번째 y 좌표값
var oCF = new ChildFrame(sID, 0, 0, 800, 600);
oCF.formurl = sURL;
oCF.titletext = sTitle;
//FrameSet에 ChildFrameSet을 꺼내올 때
//첫번째 인자 : MDI에 떠다니는 객체의 ID값, 두번째 인자 : 실제 객체
oFS.addChild(sID, oCF);
oCF.show();
}
Chap05_02_04_Application-MDI4
XPLATFORM의 Tree 만들기
Grid를 변형시켜서 만든다.
1. 그리드를 그린다.
2. dataset을 드래그해서 그리드로 가져온다.
3. 그리드를 편집창에서 속성값을 수정한다.
3-1) 필요없는 id, level, state, url 항목은 삭제하고, name만 남겨둔다.
3-2) header도 필요없으니 삭제한다.
3-3) Action - displaytype = tree, 사용자에게 어떤 타입으로 보여줄거냐;
edittype = tree, 사용자가 이 셀에 포커스를 입력했을 때 어떤 컴포넌트로 보여줄꺼냐
3-4) GrideTree - treelevel = bind:menu_lv
treestartlevel = bind:ment_st
3-5) Style - background - color = transparent // 우리는 배경색은 필요 없다.
background2 - color = transparent
4. attribute의 속성값을 수정한다.
4-1) Action - autofittype = col, Grid 사이즈를 자동으로 맞춰주는 것
4-2) GridTree - treeinitstatus = expand,all
treeusecheckbox = false
treeuseline = false
4-3) Style - lineType = onlyvert
기본이벤트 Function만들기
oncelldblclick 이벤트
frmLeft.xfdl
function Grid00_oncelldblclick(obj:Grid, e:GridClickEventInfo)
{
//e.row : 몇번째 값을 선택했는지 검색
var sID = gds_menu.getColumn(e.row, "menu_id"); //값을 꺼낼 때 사용하는 Method
var sURL = gds_menu.getColumn(e.row, "menu_url");
var sTitle = gds_menu.getColumn(e.row, "menu_nm");
if(sURL.length < 1)
{
return;
}
gfn_open(sID, sURL, sTitle);
}
전역 function 사용하기ADL 우클릭>Edit Script>소스 작성gds_open() 메소드 옮기기
Chap05_03_01_Application-Widget
Widget 이란?
컴퓨터에서 운영체제 위에 동작시키는 작은 응용프로그램
Windows에서 제공하는 시계, 달력, 메모장처럼 작은 화면으로 구성되는 형태, 웹브라우저의 보조 기능뿐 아니라 업무용 화면을 작성하는 많이 활용
야후 위젯, 네이버 위젯, Windows7 기능이 대표적이다.
위젯은 틀을 가두고 있는 틀이 없어 바탕화면에서 사이즈 상관없이 돌아다닐 수 있다.
//메인 위젯 만들기
1. 이미지 등록하기
GlobalVariables - insert GlobalVariables Item - Image 선택
프로젝트 폴더 안에 도넛, 아이스크림 이미지 선택.
2. 화면 만들기
new - form - frmWG1 - Widget 단계에서 A form for creating an widget 체크 - widget image를 도넛으로 선택 - 완료
화면 사이즈는 의미가 없다. 이미지 크기가 화면 사이즈가 되기 때문에
3. 스타일 속성 변경
Style - border - width 0px로 변경
4. 버튼 그리기
텍스트 이름 : 종료
이벤트 : onclick - 종료하는 버튼, 위젯은 종료할 수 있는 기능이 없기 때문에
function Button00_onclick(obj:Button, e:ClickEventInfo) { exit(); }
5. 프로젝트 실행
//자식 위젯 만들기
1. 화면 만들기
new - form - frmWG2 - Widget 단계에서 A form for creating an widget 체크 - widget image를 아이스크림으로 선택 - 완료
2. 스타일 속성 변경
Style - border - width 0px로 변경
3. 버튼 그리기
텍스트 이름 : 닫기
이벤트 : onclick - 위젯을 숨기는 기능
function Button00_onclick(obj:Button, e:ClickEventInfo)
{
Widget1.visible = false;
}
메인 위젯이 먼저 화면에 나타나고 자식 위젯이 나중에 나타나게 하는 방법
Widgets에서 위젯 더블클릭 - 위젯 속성 - visible : Widget0 = true, Widget1 = false
메인 위젯에서 자식 위젯을 나타낼 수 있도록 버튼 하나 생성
텍스트 이름 : 하나더
이벤트 : onclick - 자식 위젯 나타내는 기능
function Button01_onclick(obj:Button, e:ClickEventInfo) { Widget1.visible = true; }
Widget 속성의 topmost는 최상위에 위치 true
'IT 지식' 카테고리의 다른 글
| [XPLATFORM] Chap06_Animation (0) | 2025.04.13 |
|---|---|
| [XPLATFORM] 페이지 만들기 (0) | 2025.04.13 |
| [XPLATFORM] Chap04_Design (0) | 2025.04.13 |
| [XPLATFORM] Chap03_02_서버서비스개발 (0) | 2025.04.13 |
| [XPLATFORM] Chap03_01_화면Design (0) | 2025.04.13 |