If you want to develop a Form running on the Nexacro, you must create a project first. Then, you need to create files or link existing data to prepare the constituents necessary for the project, including components, screens, environments and themes (or styles). The form can be executed in the form of either an app or a Form itself.

This chapter explains what types of files are created in the working folder as a result of creating a project or form and what role each file performs. In addition, this chapter touches upon the files that are created as a result of generation.

Creating Project

A project contains basic information on settings for developing a Form. Creating a new project accompanies the creation of basic files—including settings files—that comprise the project.

The below table describes such files.

Project Settings File (XPRJ)

This file is created automatically when you create a project. The information on application settings can be added or deleted.

<?xml version="1.0" encoding="utf-8"?>
<Project version="2.1" nexacrosdk="Latest Version" sdkversion="">
  <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 Settings File (XADL)

An App Info file is created automatically when you create a project, and you can add more files. A project must include at least one App Info file. Therefore, if you attempt to delete a sole App Info file, Nexacro Studio will not remove it while opening the below alert message.

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

You can add a script to an .xadl file. An App Info file manages a script that affects the entire scope of the application, such as an event for the application or a certain frame.

Type Definition

This settings file contains information on modules, components, services, protocol and updates. You can add, change or delete information for each item. In the build process, Nexacro Studio may automatically edit the information on protocols and deployment options.

<?xml version="1.0" encoding="utf-8"?>
<TypeDefinition version="3.0">
  <Modules>
    <Module url="CompBase.json"/>
    <Module url="ComComp.json"/>
    <Module url="Grid.json"/>
    <Module url="ListView.json"/>
    <Module url="DeviceAPI.json"/>
    <Module url="MobileComp.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_/"/>
    <Service prefixid="initvalue" type="resource" url="./_resource_/_initvalue_/"/>
    <Service prefixid="xcssrc" type="resource" url="./_resource_/_xcss_/"/>
    <Service prefixid="imagerc" type="resource" url="./_resource_/_images_/"/>
    <Service prefixid="font" type="resource" url="./_resource_/_font_/"/>
    <Service prefixid="stringrc" type="resource" url="./_resource_/_stringrc_/"/>
    <Service prefixid="extlib" type="resource" url="./_extlib_/"/>
    <Service prefixid="Base" type="form" cachelevel="session" url="./Base/"/>
  </Services>
  <Protocols/>
  <DeviceAdaptors/>
  <Update/>
</TypeDefinition>

Environment

This settings file contains the information on screens, variables, cookies and HTTP headers. A project must include one screen at least. If you try to delete a sole screen, the below alert will appear and Nexacro Studio will not remove it.

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

AppVariables

This settings file contains the information on Datasets and variables that can be used globally by any application in a project.

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

Resources

initValue

When you create a project, an initValue folder is created rather than an initValue file. Later on, you can add an XML file to save initial settings values. After creating a file, select an object and then specify initial values for the object. Although the file format is XML. the file extension is .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

If you see the Resource Explorer of Nexacro Studio immediately after creating a project, you will find two roots of themes: one is Nexacro Theme and the other is Theme. The Nexacro Theme root includes basic theme files including default.xtheme while the Theme root is empty at its inception. You can add new themes only to the Theme root, not Nexacro Theme. You can copy existing themes into or create new themes in the Theme root.

Basically a theme is a combination of a style file (theme.xcss) and a group of image files.

ImageResource

This segment manages image files that can be globally used within a project. The added image files will be exposed in the Properties pane when you need to specify an image file as the value of a certain property in the process of developing a Form.

UserFont

This segment manage font files, which are largely divided into a conventional type (.woff, .ttf, .off) and UserFont type. UserFont files are saved with the extension .xfont, and their codes are written as described below.

@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'),
}

Others

Form (XFDL)

A form is the definition of a screen that users actually handle to do their jobs. A form contains program codes to conduct various invisible tasks such as data transaction with a server or calculations.

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

Script (XJS)

You can write a script in a Form file if the script is necessary only to the Form. If a script applies a whole application, however, it should be written separately. Then, you should program each form to refer to the script.

You can make a Form refer to a separate script by writing a code as written below.

include "lib::comLib.xjs"

If a script file is too long, you can divide it into several portions. In such a case where multiple .xjs files comprise one script file, you can include a specific reference rather than one big inclusive reference when writing source codes. For example, You can divide the foregoing example comLib.xjs into the below script files. Afterwards, you can add new features just by modifying comLib.xjs without changing the whole form file, even if the number of reference files increases.

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

Style Settings File (XCSS)

Although CSS has its official standards, the ways it applies to each web browser are different from each other. Therefore, in the process of developing web apps, you need to specify several CSS properties that are necessary only to specific browsers. However, Nexacro makes it easy: once you write a single source based on the CSS standards, the platform will automatically create CSS codes appropriate to each browser during the process of building an application.

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

The above example XCSS codes include both a CSS standard property and a Nexacro-only property. In this case, the platform will produce CSS codes like the below one as a result of building an application.

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