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

Frame Object

ChildFrame

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

FrameSet, HFrameSet, VFrameSet

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

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

MainFrame

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

Frame Template

애플리케이션 구성

기본작업

데이터 생성

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

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

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

<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 데이터셋을 드래그앤드롭하여 바인드 합니다.

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

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

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

상단 메뉴 구성

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

SDI 애플리케이션

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

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

프레임 구조

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

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

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

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

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

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

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

스크립트 작성

화면을 오픈하는 스크립트를 작성합니다.
좌측 영역 화면의 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 아이콘을 이용하여 결과를 확인합니다.

MDI 애플리케이션

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

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

애플리케이션 생성

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

[Menu] File > New > Application

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

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

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

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

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

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

스크립트 작성

화면을 오픈하는 스크립트를 작성합니다.
좌측 영역 화면의 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 아이콘을 이용하여 결과를 확인 합니다.

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();
	}
};