7.프로젝트 및 파일 구조

Edit

넥사크로플랫폼에서 화면을 만들려면 먼저 프로젝트를 생성해야 합니다. 그리고 프로젝트에 필요한 컴포넌트, 스크린 정보, 환경 정보, 테마 또는 스타일 등의 파일을 생성하거나 기존 정보를 연결합니다. 화면은 앱 형태로 실행될 수 있으며 Form 화면 자체로 실행될 수 있습니다.

이번 장에서는 프로젝트나 Form 생성 시 작업 폴더에 생성되는 각 파일은 어떤 것이 있으며 어떤 기능을 수행하는지 설명합니다. 추가로 제너레이트 과정을 거치면서 변환되는 파일도 설명합니다.

7.1프로젝트 생성

프로젝트는 화면 개발을 위한 기본 설정 정보를 담고 있습니다. 프로젝트를 새로 만들면 프로젝트 설정 파일 뿐 아니라 프로젝트를 구성하기 위한 기본적인 파일이 해당 폴더에 생성됩니다.

일반적으로 프로젝트 생성 시 만들어지는 파일은 아래와 같습니다.

항목

확장자

설명

nexacroplatform project

XPRJ

프로젝트 설정 파일

[프로젝트명]+확장자

Application Info

XADL

Application 설정 파일

프로젝트 생성 시 설정한 스크린 정보와 기본 테마 정보를 속성값으로 지정합니다.

기본 생성되는 파일은 다음과 같은 형태입니다.

[프로젝트명]+확장자

Type Definition

XML

모듈, 컴포넌트, 서비스, 프로토콜, 업데이트 정보 설정 파일

생성되는 파일명은 typedefinition.xml 입니다.

Environment

XML

Screen 정보, Variable, Cookie, HTTP Header 정보를 관리합니다.

생성되는 파일명은 environment.xml 입니다.

AppVariables

XML

Application에서 공통으로 사용할 수 있는 Dataset, Variable 정보를 관리합니다. 해당 정보를 입력하지 않아도 파일은 생성됩니다.

생성되는 파일명은 appvariables.xml 입니다.

_resource_

폴더

Theme, InitValue, Image, font 관련 리소스를 관리합니다.

아래와 같은 하위 폴더를 생성합니다.

[_font_], [_images_], [_initvalue_], [_theme_], [_xcss_]

Base

폴더

서비스 폴더

프로젝트 생성 시 기본 form 타입 서비스를 지정합니다. 기본 생성되는 서비스 PrefixID는 [Base]입니다. 생성된 PrefixID나 폴더명은 다른 이름으로 수정하거나 삭제할 수 있습니다.

프로젝트 생성 시 [Frame] 항목 설정에 따라 서비스 폴더는 추가될 수 있습니다.

예를 들어 두 개 이상의 프레임을 가지는 화면을 설정했다면 Frame 서비스 폴더가 자동 생성됩니다.

7.1.1프로젝트 설정 파일 (XPRJ)

프로젝트 생성 시 자동으로 생성됩니다. Application 설정 파일 정보는 추가하거나 삭제할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<Project version="2.1">
  <EnvironmentDefinition url="environment.xml"/>
  <TypeDefinition url="typedefinition.xml"/>
  <AppVariables url="appvariables.xml"/>
  <AppInfos>
        <AppInfo url="[file name].xadl"/>
        <AppInfo url="[file name].xadl"/>
  </AppInfos>
</Project>

7.1.2Application 설정 파일 (XADL)

프로젝트 생성 시 자동으로 생성되며 필요에 따라 추가로 생성할 수 있습니다. 프로젝트는 하나 이상의 App Info를 포함해야 합니다. App Info가 하나인 경우 이를 삭제하려 하면 아래와 같은 경고 메시지를 보여주고 삭제하지 않습니다.

<?xml version="1.0" encoding="utf-8"?>
<ADL version="2.0">
  <Application id="[id]" screenid="[screen id]">
    <Layout>
      <MainFrame/>
    </Layout>
  </Application>
  <Script type="xscript5.1"><![CDATA[…]]></Script>
</ADL>

Application 설정 파일은 스크립트 코드를 추가할 수 있습니다. ADL 또는 각 프레임 오브젝트의 이벤트 처리나 Application 단위에서 처리할 스크립트를 관리합니다.

7.1.3Type Definition

모듈, 컴포넌트, 서비스, 프로토콜, 업데이트 정보 설정 파일 정보를 관리합니다. 각 항목은 프로젝트 생성 후 추가, 변경, 삭제할 수 있습니다. 프로토콜 정보와 배포 옵션은 빌드 과정에서 자동으로 편집되기도 합니다.


항목

설명

Modules

모듈 정보

자바스크립트로 개발된 모듈 정보를 담고 있습니다.

- 자체 개발된 모듈을 추가할 수 있습니다.

- js 또는 json 파일 형태로 등록할 수 있습니다. 각 파일 간에 의존성을 가질 때에는 순서에 맞게 등록해야 합니다.

Components

오브젝트 정보

앱 실행에 필요한 오브젝트 정보를 담고 있습니다.

- 지정된 오브젝트가 배포에 포함됩니다.

- 각 오브젝트는 모듈을 기반으로 지정됩니다.

Services

서비스 그룹

프로젝트 규모에 따라 내부적으로 서비스 그룹을 정의합니다.

- 각 서비스 그룹은 개별적으로 캐시 수준을 설정할 수 있습니다.

Protocols

프로토콜 정보

프로토콜을 등록/삭제하고 장치 타입에 맞게 편집합니다.

Update

배포 옵션

앱 배포 관련 정보를 지정합니다.

<?xml version="1.0" encoding="utf-8"?>
<TypeDefinition version="2.3">
  <Modules>
    <Module url="CompBase.json"/>
    <Module url="ComComp.json"/>
    <Module url="Grid.json"/>
    <Module url="DeviceAPI.json"/>
  </Modules>
  <Components>
    <Component type="JavaScript" id="Button" classname="nexacro.Button"/>
    <Component type="JavaScript" id="Combo" classname="nexacro.Combo"/>
    <Component type="JavaScript" id="Edit" classname="nexacro.Edit"/>
    ...
  </Components>
  <Services>
    <Service prefixid="theme" type="resource" url="./_resource_/_theme_/" version="0" communicationversion="0"/>
    <Service prefixid="initvalue" type="resource" url="./_resource_/_initvalue_/" version="0" communicationversion="0"/>
    <Service prefixid="xcssrc" type="resource" url="./_resource_/_xcss_/"/>
    <Service prefixid="imagerc" type="resource" url="./_resource_/_images_/"/>
    <Service prefixid="font" type="resource" url="./_resource_/_font_/" version="0" communicationversion="0"/>
    <Service prefixid="Base" type="form" cachelevel="session" url="./Base/" version="0" communicationversion="0"/>
  </Services>
  <Protocols/>
  <Update/>
</TypeDefinition>

7.1.4Environment

Screen 정보, Variable, Cookie, HTTP Header 정보를 관리합니다. 프로젝트는 하나 이상의 Screen 정보를 포함해야 합니다. Screen 정보가 하나인 경우 이를 삭제하려 하면 아래와 같은 경고 메시지를 보여주고 삭제하지 않습니다.

<?xml version="1.0" encoding="utf-8"?>
<ENV version="2.1">
  <Environment themeid="theme::default">
    <ScreenDefinition>
      <Screen id="[Screen id]" type="[type property value]"/>
    </ScreenDefinition>
    <Variables/>
    <Cookies/>
  </Environment>
</ENV>

7.1.5AppVariables

App에서 공통으로 사용할 수 있는 Dataset, Variable 정보를 관리합니다.

<?xml version="1.0" encoding="utf-8"?>
<AppVariables version="2.0">
  <Datasets>
    <Dataset id="[Dataset id]">
      <ColumnInfo/>
      <Rows/>
    </Dataset>
  </Datasets>
  <Variables>
    <Variable id="[Variable id]" initval="[init value]"/>
  </Variables>
</AppVariables>

7.2리소스

7.2.1initValue

프로젝트 생성 시에는 폴더만 생성하고 파일을 만들지는 않습니다. initValue 설정값을 저장할 XML 파일을 생성하고 해당 파일에 필요한 오브젝트의 속성 정보를 지정합니다. 파일을 생성하면 오브젝트를 선택하고 initValue를 추가할 수 있습니다. XML 파일 형식이지만 확장자는 .xiv입니다.

<?xml version="1.0" encoding="utf-8"?>
<GlobalPropInitvalueDefinition>
    <nexacro.Button>
        <initvalueid id="[initvalueid ]" ...  />
    </nexacro.Button>
    <nexacro.Edit>
        <initvalueid id="[initvalueid ]" ... />
    </nexacro.Edit>
</GlobalPropInitvalueDefinition>

7.2.2테마 (XTHEME)

프로젝트 생성 후 넥사크로 스튜디오 [Resource Explorer] 창을 확인해보면 기본 설치 테마가 포함된 [Nexacro Theme] 항목과 새로운 테마를 추가할 수 있는 [Theme] 항목이 표시됩니다. [Theme] 항목에는 기존 테마를 복사해 넣거나 새 테마를 만들 수 있습니다.

기본 테마는 스타일 설정 파일(theme.xcss)과 이미지 파일 집합으로 구성됩니다.

[Nexacro Theme] 항목 아래에 표시되는 테마 파일은 별도 캐시 공간에 저장되어 관리됩니다. 기본 테마 파일은 수정할 수 없습니다.

7.2.3ImageResource

프로젝트 내에서 공통으로 사용할 수 있는 이미지 파일을 관리합니다. Image 리소스로 추가한 이미지 파일은 Form 작성 시 이미지 파일이 필요한 속성을 지정할 때 속성창에 노출되며 해당 이미지 파일을 속성값으로 지정할 수 있습니다.

7.2.4UserFont

프로젝트 내에서 사용할 폰트 파일을 관리합니다. 폰트 파일(woff, ttf, off)과 폰트를 정의한 UserFont 파일을 관리합니다. UserFont 파일은 xfont 확장자로 저장되며 아래와 같은 형식으로 작성합니다.

@font-face {
    font-family : 'NanumGothic';
    font-style : normal;
    font-weight : 400;
    src : local("NanumGothic"),
            url(NanumGothic.ttf) format('truetype'),
            url(NanumGothic.eot),
            url(NanumGothic.eot?#iefix) format('embedded-opentype'),
            url(NanumGothic.wpff2) format('woff2'),
            url(NanumGothic.woff) format('woff'),
}

7.3기타

7.3.1Form (XFDL)

사용자가 업무를 수행하기 위해 접하는 화면을 정의하고 화면 내에서 보이지 않게 처리되는 연산이나 서버와 데이터 통신을 위한 프로그래밍 코드를 담고 있습니다.

요소

설명

컴포넌트 배치

Visible Object인 컴포넌트를 배치하는 정보를 갖고 있습니다.

컴포넌트의 속성 및 이벤트를 설정합니다.

오브젝트 설정

Dataset 등 Invisible Object의 Property 및 Event를 설정합니다.

Script

Form을 포함한 모든 오브젝트의 Event Function을 스크립트로 작성합니다.

Event Function 외에도 필요한 Function들을 스크립트로 작성합니다.

BindItem

Form, 컴포넌트, Invisible Object들과 Dataset을 연결하는 BindItem Object를 설정합니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="2.0">
    <Form>
        <Layouts>
            <Layout>
                <Button/>
            </Layout>
        </Layouts>
        <Script type="xscript5.1"><![CDATA[]]></Script>
        <Objects>
            <Dataset/>
        </Objects>
        <Bind>
            <BindItem/>
        </Bind>
    </Form>
</FDL>

Form에서 스타일 설정 파일을 별도 지정할 수는 없습니다.

스타일 설정 파일은 Application 단위로만 지정할 수 있습니다.

7.3.2스크립트 (XJS)

특정 Form에만 필요한 스크립트는 Form 파일에 같이 작성하지만, Application 내 전체 화면에서 사용하는 스크립트는 별도 작성하고 각 Form에서 이를 참조하도록 합니다.

작성된 스크립트는 Form에서 다음과 같이 참조할 수 있습니다.

include "lib::comLib.xjs"

공통으로 참조하는 스크립트가 많은 경우 여러 파일로 분리해 관리할 수도 있습니다. 참조하는 파일이 많은 경우에는 스크립트 코드 안에서 다시 다른 코드를 참조하도록 합니다. 예를 들어 comLib.xjs 스크립트 파일을 다음과 같이 구성할 수 있습니다. 이렇게 구성하면 참조할 파일이 늘어나더라도 업무에서 사용하는 Form 파일은 건드리지 않고 comLib.xjs 파일만 수정해 기능을 추가할 수 있습니다.

include "lib::comConstants.xjs";
include "lib::comService.xjs";
include "lib::comForm.xjs";
include "lib::comGrid.xjs"; 
include "lib::comUtil.xjs";
include "lib::comDataset.xjs";

7.3.3스타일 설정 파일 (XCSS)

CSS 표준이 있지만, 여전히 웹브라우저마다 적용되는 방식이 다릅니다. 그래서 개발 과정에서 특정 브라우저마다 필요한 CSS 속성을 지정해주어야 합니다. 넥사크로플랫폼은 CSS 표준에 따라 하나의 코드만 작성해주면 빌드 과정에서 각 브라우저에 맞는 CSS 코드를 자동으로 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<XCSS type="xcss1.0"><![CDATA[.Button
{
    background : #c0504d;
    -nexa-text-align : left;
}
]]></XCSS>

스타일 설정 파일에 위의 예제처럼 표준 CSS 속성과 넥사크로플랫폼에서 추가 지원하는 속성이 같이 지정된 경우 빌드 과정에서 아래와 같은 CSS 코드가 생성됩니다.

.Button
{
    background        :        #c0504d;
}
.Button .nexacontentsbox
{
    text-align        :        left;
}

스타일 설정 파일은 XML 형식으로 작성합니다. 또한, 내부에서 사용하는 코드가 표준 CSS를 준수하는 것이지 모든 CSS 속성을 지원하는 것은 아닙니다.

스타일 설정 파일은 Application 단위로만 지정할 수 있습니다.

전체 프로젝트 스타일은 테마, Application 단위 스타일은 스타일 설정 파일을 사용합니다.