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

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

프로젝트 생성

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

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

프로젝트 설정 파일 (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>

Application 설정 파일 (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 단위에서 처리할 스크립트를 관리합니다.

Type Definition

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

<?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>

Environment

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>

AppVariables

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>

리소스

initValue

프로젝트 생성 시에는 폴더만 생성하고 파일을 만들지는 않습니다. 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>

테마 (XTHEME)

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

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

ImageResource

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

UserFont

프로젝트 내에서 사용할 폰트 파일을 관리합니다. 폰트 파일(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'),
}

기타

Form (XFDL)

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

<?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>

스크립트 (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";

스타일 설정 파일 (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;
}