nexacro platformで画面を作成するには、まず、プロジェクトを作成する必要があります。そしてプロジェクトに必要なコンポーネント、スクリーン情報、環境情報、テーマやスタイルなどのファイルを作成したり、既存の情報に接続します。画面は、アプリの形で実行されることができ、Form画面自体で実行されることもできます。

この章では、プロジェクトやFormの作成時の作業フォルダに作成される各ファイルは、どんなものがあり、どんな機能を実行するかについて説明します。さらにジェネレートプロセスを経て、変換されるファイルについても説明します。

プロジェクト作成

プロジェクトは、画面の開発のための基本的な設定情報が含まれています。プロジェクトを新規作成すると、プロジェクトの設定ファイルだけでなく、プロジェクトを構成するための基本的なファイルが該当フォルダに作成されます。

一般的に、プロジェクトの作成時に作成されたファイルは、以下の通りです

プロジェクト設定ファイル

プロジェクトの作成時に自動的に作成されます。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が1つの場合、これを削除しようとすると、以下のような警告メッセージを表示して削除しません。

<?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情報が1つの場合、これを削除した場合、下記のような警告メッセージを表示し、削除しません。

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

プロジェクトの作成後、nexacro studio[Resource Explorer]ウィンドウにデフォルトインストールテーマ（default.xtheme）が含まれた[Nexacro Theme]項目と、新しいテーマを追加することができる[Theme]項目が表示されます。[Theme]項目には、既存のテーマをコピーして貼り付けるか、新しいテーマを作成することができます。

デフォルトテーマは、スタイルの設定ファイル(theme.css)とイメージファイルのセットで構成されます。

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標準の規格が存在しますが、現状ではWebブラウザごとに適用されるコードが異なっており、開発工程でブラウザごとに必要なCSSプロパティを指定する必要があります。nexacro platformは、CSS標準に基づいて1つのコードだけを作成すれば、ビルドプロセスで各ブラウザに該当するCSSコードを自動的に生成します。

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

スタイル設定ファイルに、上記の例のように標準CSSプロパティとnexacro platformで追加的にサポートするプロパティが一緒に指定された場合、ビルドプロセスで、次のようなCSSコードが生成されます。

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