6.메인화면 구성 방식

Edit

넥사크로플랫폼의 메인화면을 구성하는 Frame Object의 종류와 이것을 이용한 SDI, MDI 형태의 애플리케이션을 구성해 봅니다.

6.1Frame Object

6.1.1ChildFrame

ChildFrame은 Form을 실행 할 수 있는 기본 프레임 입니다. formurl 속성에 Form경로를 링크하여 실행합니다.
상단 titlebar와 하단 statusbar로 구성됩니다.

그림 6-101_화면예

6.1.2FrameSet, HFrameSet, VFrameSet

애플리케이션 화면 배열을 위한 프레임 입니다. MainFrame을 제외한 모든 프레임을 반복적으로 가질 수 있습니다.

FrmaSet은 하위 프레임을 자유롭게 배열 할 수 있는 프레임 입니다.
VFrameSet은 하위 프레임을 수직 방향으로 배열 할 수 있는 프레임 입니다.
HFrameSet은 하위 프레임을 수평 방향으로 배열 할 수 있는 프레임 입니다.

그림 6-201_화면예

그림 6-301_화면예

그림 6-401_화면예

6.1.3MainFrame

애플리케이션을 구성하는 최상위 프레임 입니다. 
MainFrame 하위에는 FrameSet, VFrameSet, HFrameSet, ChildFrame 중 하나의 프레임만 위치할 수 있습니다.

그림 6-501_화면예

6.1.4Frame Template

그림 6-601_화면예

그림 6-701_화면예

그림 6-801_화면예

그림 6-901_화면예

6.2애플리케이션 구성

6.2.1기본작업

데이터 생성

메뉴를 표현하기 위한 샘플 데이터를 구성 합니다. 
Project Explorer의 App Information > AppVariables에 전역 Dataset을 추가하고 id속성을 gds_menu로 변경 합니다.

그림 6-1002_컴포넌트

메뉴를 표현할때 필요한 최소 데이터는 다음과 같습니다.

컬럼ID

컬럼명

설명

MENU_ID

메뉴 Key


MENU_NAME

메뉴명


MENU_LEVEL

메뉴 레벨

0부터 시작하는 메뉴 레벨값

FORM_URL

화면경로

메뉴 선택시 오픈 할 화면의 경로

메뉴에 필요한 컬럼과 데이터를 직접 입력하거나 아래의 샘플 데이터를 이용합니다.

그림 6-1102_컴포넌트

<ColumnInfo>
  <Column id="MENU_ID" type="STRING" size="256"/>
  <Column id="MENU_NAME" type="STRING" size="256"/>
  <Column id="MENU_LEVEL" type="STRING" size="256"/>
  <Column id="FORM_URL" type="STRING" size="256"/>
</ColumnInfo>
<Rows>
  <Row>
    <Col id="MENU_NAME">Main Menu1</Col>
    <Col id="MENU_LEVEL">0</Col>
    <Col id="MENU_ID">1</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Sub Menu1</Col>
    <Col id="MENU_LEVEL">1</Col>
    <Col id="MENU_ID">2</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Form Hello</Col>
    <Col id="MENU_LEVEL">2</Col>
    <Col id="MENU_ID">3</Col>
    <Col id="FORM_URL">Base::Hello.xfdl</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Form Emp</Col>
    <Col id="MENU_LEVEL">2</Col>
    <Col id="MENU_ID">4</Col>
    <Col id="FORM_URL">Form::Form_Emp.xfdl</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Sub Menu2</Col>
    <Col id="MENU_LEVEL">1</Col>
    <Col id="MENU_ID">5</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Form 1</Col>
    <Col id="MENU_LEVEL">2</Col>
    <Col id="MENU_ID">6</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Main Menu2</Col>
    <Col id="MENU_LEVEL">0</Col>
    <Col id="MENU_ID">7</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Sub Menu1</Col>
    <Col id="MENU_LEVEL">1</Col>
    <Col id="MENU_ID">8</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Form 1</Col>
    <Col id="MENU_LEVEL">2</Col>
    <Col id="MENU_ID">9</Col>
  </Row>
  <Row>
    <Col id="MENU_NAME">Form 2</Col>
    <Col id="MENU_LEVEL">2</Col>
    <Col id="MENU_ID">10</Col>
  </Row>
</Rows>

메뉴 화면 구성

메인화면의 상단과 좌측에 위치할 화면을 구성합니다.
최초 프로젝트를 만들때 자동으로 생성된 폼을 이용합니다.
소스참고
nexacro17_Education_Materials\Sample\EduProject\FrameBase\Form_Left.xfdl
nexacro17_Education_Materials\Sample\EduProject\FrameBase\Form_Top.xfdl

좌측 메뉴 구성

좌측 영역에 표현할 화면을 트리 형식으로 메뉴를 구성 합니다.
FrameBase>Form_Left 폼에 적용합 니다.
트리 형태로 표현하기 위해 그리드 컴포넌트를 생성하고 gds_menu 데이터셋을 드래그앤드롭하여 바인드 합니다.

그림 6-1202_컴포넌트

Grid를 더블 클릭하여 컬럼을 편집합니다. 
메뉴명을 표현하는 컬럼을 제외한 나머지 컬럼과 헤더영역를 삭제합니다.

그림 6-1302_컴포넌트

트리 형태로 표현하기 위해 셀의 속성을 수정합니다.

그림 6-1402_컴포넌트

컴포넌트

설명

속성

속성값

Grid > Cell

셀에 표시되는 형식

displaytype

treeitemcontrol

셀의 편집 형식

edittype

tree

메뉴 레벨 컬럼 바인드

treelevel

bind:MENU_LEVEL

Grid의 속성도 다음과 같이 설정합니다.

그림 6-1502_컴포넌트

컴포넌트

설명

속성

속성값

Grid

트리의 상태

treeinitstatus

expand,all

체크박스 사용여부

treeusecheckbox

false

상단 메뉴 구성

상단 영역에 표현할 화면을 풀다운 메뉴 형태로 구성 합니다.
FrameBase>Form_Top 폼에 적용합니다.

그림 6-1602_컴포넌트

컴포넌트

설명

속성

속성값

1 ImageViewer


image

theme://images/img_WF_Nexacro.png

2 Menu

메뉴로 표현할 데이터셋

levelcolumn

gds_menu

메뉴명 컬럼

captioncolumn

MENU_NAME

메뉴아이디 컬럼

idcolumn

MENU_ID

메뉴레벨 컬럼

levelcolumn

MENU_LEVEL

6.2.2SDI 애플리케이션

SDI는 Single Document Interface의 약어로 애플리케이션 형태가 Single Frame 형태를 의미합니다. 하나의 애플리케이션에 하나의 화면이 표현되는 형태입니다.

소스참고
nexacro17_Education_Materials\Sample\EduProject\App_Desktop_SDI.xadl

그림 6-1701_화면예

프레임 구조

Project Explorer > App Infomation > Apps > App_Desktop 항목을 더블클릭하여 프레임 편집창을 오픈합니다.

최초 "sampleProject"를 프로젝트 생성할때 프레임 템플릿 유형을 선택하고 만든 경우 자동으로 프레임이 구성 됩니다. 그리고 그 안에 포함되는 화면까지도 자동으로 생성됩니다.

그림 6-1802_컴포넌트

그림 6-1902_컴포넌트

1 상단 메뉴화면이 들어가는 영역입니다.
2 좌측 트리 형태의 메뉴화면이 들어가는 영역입니다.
3 메뉴에 대한 업무화면이 들어가는 영역입니다.

프레임 템플릿 유형에 따라 프레임 속성이 아래와 같이 자동 지정 됩니다.

표 6-1프레임 오브젝트 기본 설정 속성(자동 지정)

프레임

설명

속성

속성값

mainframe

애플리케이션의 너비

width

1024

애플리케이션의 높이

height

768

VFrameSet00

자식 프레임의 높이

separatesize

50,* (상단 50px 나머지 전체영역)

HFrameSet00

자식 프레임의 너비

separatesize

200,* (좌측 200px 나머지 전체영역)

TopFrame

해당영역에 위치할 화면의 경로

formurl

FrameBase::Form_Top.xfdl

LeftFrame

해당영역에 위치할 화면의 경로

formurl

FrameBase::Form_Left.xfdl

WorkFrame

해당영역에 위치할 화면의 경로

formurl

FrameBase::Form_Work.xfdl

프로젝트 생성시 프레임 구조 선택하지 않았거나, 수정이 필요한 경우

프레임 편집창의 마우스 우클릭 메뉴 또는 상단의  아이콘을 이용하여 직접 편집합니다.
상단, 좌측 영역에 포함 할 화면도 직접 생성하여 설정 합니다.

1

mainframe 선택 > 마우스 우클릭 > Add Frame > VFrameSet

그림 6-2002_컴포넌트

2

VFrameSet00 선택 > 마우스 우클릭 > Add Frame > ChildFrame

그림 6-2102_컴포넌트

3

다시 VFrameSet00 선택 > 마우스 우클릭 > Add Frame > HFrameSet

그림 6-2202_컴포넌트

4

HFrameSet00 선택 > 마우스 우클릭 > Add Frame > ChildFrame

그림 6-2302_컴포넌트

5

다시 HFrameSet00 선택 > 마우스 우클릭 > Add Frame > ChildFrame

그림 6-2402_컴포넌트

6

3개의 ChildFrame을 각각 선택하여 id 속성값을 변경

VFrameSet00 > ChildFrame00의 id 속성 TopFrame
HFrameSet00 > ChildFrame00의 id 속성 LeftFrame
HFrameSet00 > ChildFrame01의 id 속성 WorkFrame

그림 6-2502_컴포넌트

스크립트 작성

화면을 오픈하는 스크립트를 작성합니다.
좌측 영역 화면의 Grid 컴포넌트 oncelldblclick(셀 더블클릭) 이벤트에 적용 합니다.
this.Grid00_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
    var objApp = nexacro.getApplication();
    var strID  = objApp.gds_menu.getColumn(e.row, "MENU_ID");
    var strURL = objApp.gds_menu.getColumn(e.row, "FORM_URL");
    
    this.fn_openForm(objApp, strID, strURL);
};

this.fn_openForm = function(pObj, pID, pURL)
{
    if(pID.length <= 0) return;    
    pObj.mainframe.VFrameSet00.HFrameSet00.WorkFrame.set_formurl(pURL);
};
상단 영역 화면의 Menu 컴포넌트 onmenuclick 이벤트에 적용 합니다.
좌측 영역 화면에서 선언한 "fn_openForm" 함수를 호출 하는 방식으로 작성합니다.
this.Menu00_onmenuclick = function(obj:nexacro.Menu,e:nexacro.MenuClickEventInfo)
{
    var objApp = nexacro.getApplication();
    var strID  = e.id;    
    var strURL = objApp.gds_menu.lookup("MENU_ID", strID, "FORM_URL");

    objApp.mainframe.VFrameSet0.HFrameSet0.LeftFrame.form.fn_openForm(objApp, strID, strURL);    

};

결과 확인

전체 애플리케이션을 실행하는 Launch 아이콘을 이용하여 결과를 확인합니다.

그림 6-2602_컴포넌트

그림 6-2702_컴포넌트

6.2.3MDI 애플리케이션

MDI는 Multiple Document Interface의 약어로 애플리케이션 형태가 Multi Frame 형태를 의미합니다. 하나의 애플리케이션에 여러개의 화면이 표현되는 형태입니다.

소스참고
nexacro17_Education_Materials\Sample\EduProject\App_Desktop_MDI.xadl

그림 6-2801_화면예

애플리케이션 생성

MDI 형태의 애플리케이션을 신규로 생성합니다.
상단의 메뉴 또는 Project Explorer 의 Apps 항목 우클릭 메뉴를 이용 합니다.
[Menu] File > New > Application

그림 6-2902_컴포넌트

desktop 애플리케이션을 추가로 생성합니다.
애플리케이션 크기와 Screen ID, App ID를 지정 합니다.

그림 6-3002_컴포넌트

Frameset Template 에서 SDI 애플리케이션과 동일한 형태인 TopLeft 프레임으로 구성합니다.

그림 6-3102_컴포넌트

하나의 프로젝트에 여러개의 스크린과 애플리케이션이 생성됩니다.

그림 6-3202_컴포넌트

App_Desktop_MDI 항목을 더블 클릭하여 프레임 편집기 창을 오픈 합니다.
화면이 오픈되는 영역(WorkFrame)의 프레임 ChildFrame형태 입니다. 이 영역에 여러개의 화면화면을 오픈할 수 있도록 구성 합니다.
ChildFrame형태인 WorkFrame영역을 삭제 하고, 여러개의 화면을 띄울 수 있는 FrameSet형태를 추가 합니다.

그림 6-3302_컴포넌트

HFrameSet00 항목을 선택하고 마우스 우클릭 메뉴를 이용하여 FrameSet 오브젝트를 추가하고, WorkFrame 항목은 삭제 합니다.

그림 6-3402_컴포넌트

아래와 같이 FrameSet형태로 프레임을 구성 합니다.

그림 6-3502_컴포넌트

스크립트 작성

화면을 오픈하는 스크립트를 작성합니다.
좌측 영역 화면의 Grid 컴포넌트 oncelldblclick(셀 더블클릭) 이벤트에 적용 합니다.
this.Grid00_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
    var objApp = nexacro.getApplication();
    var strID  = objApp.gds_menu.getColumn(e.row, "MENU_ID");
    var strURL = objApp.gds_menu.getColumn(e.row, "FORM_URL");
    
    this.fn_openForm(objApp, strID, strURL);
};

this.fn_openForm = function(pObj, pID, pURL)
{
    if(pID.length <= 0) return;
    
    var arrObj = pObj.mainframe.VFrameSet00.HFrameSet00.FrameSet00.all;
    for(var i=0; i<arrObj.length; i++)
    {
        if(arrObj[i].name == pID){
            arrObj[i].setFocus();
            return;
        }
    }

    var objChildFrame = new ChildFrame(pID, 0, 0, 800, 600);    
    objChildFrame.set_formurl(pURL);
    objChildFrame.set_resizable(true);
    objChildFrame.set_openstatus("normal");
    objChildFrame.set_border("1px solid #5d6468");
    pObj.mainframe.VFrameSet00.HFrameSet00.FrameSet00.addChild(pID, objChildFrame);
    objChildFrame.show();
};
상단 영역 화면의 Menu 컴포넌트 onmenuclick 이벤트에 적용 합니다.
좌측 영역 화면에서 선언한 "fn_openForm" 함수를 호출 하는 방식으로 작성합니다.
this.Menu00_onmenuclick = function(obj:nexacro.Menu,e:nexacro.MenuClickEventInfo)
{
    var objApp = nexacro.getApplication();
    var strID  = e.id;    
    var strURL = objApp.gds_menu.lookup("MENU_ID", strID, "FORM_URL");

    objApp.mainframe.VFrameSet0.HFrameSet0.LeftFrame.form.fn_openForm(objApp, strID, strURL);    

};

결과 확인

상단 툴바에서 실행 할 스크린을 먼저 선택한 후 전체 애플리케이션을 실행하는 Launch 아이콘을 이용하여 결과를 확인 합니다.

그림 6-3602_컴포넌트

그림 6-3702_컴포넌트

좌측 영역에 위치한 트리 형태의 화면을 SDI, MDI 애플리케이션에서 동시에 사용할 경우 "fn_openForm" 함수를 아래와 같이 적용하면 공통으로 사용 할 수 있습니다.

this.fn_openForm = function(pObj, pID, pURL)
{
    if(pID.length <= 0) return;
    
    if(pObj.id == "App_Desktop"){
        pObj.mainframe.VFrameSet00.HFrameSet00.WorkFrame.set_formurl(pURL);
    }
    else if(pObj.id == "App_Desktop_MDI"){
        var arrObj = pObj.mainframe.VFrameSet00.HFrameSet00.FrameSet00.all;
        for(var i=0; i<arrObj.length; i++)
        {
            if(arrObj[i].name == pID){
                arrObj[i].setFocus();
                return;
            }
        }
        var objChildFrame = new ChildFrame(pID, 0, 0, 800, 600);    
        objChildFrame.set_formurl(pURL);
        objChildFrame.set_resizable(true);
        objChildFrame.set_openstatus("normal");
        objChildFrame.set_border("1px solid #5d6468");
        pObj.mainframe.VFrameSet00.HFrameSet00.FrameSet00.addChild(pID, objChildFrame);
        objChildFrame.show();
    }
};