Structure of the Nexacro Platform Application

The applications you develop, distribute and run will be based on the Nexacro Platform integrated framework. You will develop the applications on Nexacro Studio using the XML-based Nexacro Platform programming language and JavaScript. To test and distribute your applications, you will convert these project files into JavaScript.

This chapter describes the various files used during the development process.

Although distribution is part of the development process, it is not described in this guide. Instead, refer to the Administrator’s Guide, which is distributed separately.

Application Development Files

Files used to develop applications on Nexacro Platform include:

An additional file may be used when distributing files as mobile apps or using as an external application. However, this chapter describes the application files based on a default project.

The following table lists files created in Nexacro Studio and those generated and distributed.

엑스플랫폼 Language를 사용하는 주요 파일들

Nexacro Studio

Generated Files

Comment

A.xprj

Refer to this only when developing on Nexacro Studio

A.xadl

A.xadl.js

Build > Generate Application menu

default_typedef.xml

loadTypedefinition function within A.xadl.js

globalvars.xml

on_loadGlobalVariables function within A.xadl.js.

Form_A.xfdl

./Base/Form_A.xfdl.js

Individual generation on Build > Generate File menu

default.xtheme

./_theme_/default/theme.css.js

When executing a Nexacro Platform application, the initially called HTML file calls a generated A.xadl.js file and gets information about the remaining files through a loading process for each file.

ADL File

An ADL (Application Definition Language) file defines all the elements required for the application's components.

The main elements defined by an ADL file are as follows:

Element

Description

Object Distribution

(link)

Lists the objects (Dataset, Grid, etc.) required to run an application and registers their version information

Saved only in the Type Definition file, and the ADL manages only the URL link information

Theme Composition

(link)

Determines the detailed graphics shown on the application screen

A theme composed of image files and CSS

Saved in the Theme file, and the ADL manages only the URL link information

CSS

(link)

Defines CSS of the application

Used to register additional CSS besides CSS registered in Theme

Saved in CSS, and the ADL manages only URL link information

Global Variable

(link)

Registers the common variables used by multiple screens in an application

Common variable types are objects including variant variable, Dataset and images

Saved in Global Variable file, and the ADL manages only URL link information

Global Script

Defines the common functions used by the application

Implements the Event Function of the application

The ADL file is managed automatically by Nexacro Studio.

Most of the contents displayed in the Project Explorer window in Nexacro Studio are saved in the ADL file.

Callout

Description

1

Project name. One project can have several ADL

2

Type Definition information

3

Global Variable information

4

Name of ADL

5

Screen deployment. Since one ChildFrame is registered, it is a single frame model.

6

Screen composition

7

CSS composition

8

Theme composition

9

Forms

The contents listed in the Project Explorer are saved in several files with the ADL as the root.

The ADL file can also be edited directly by editing the source or the script.

Callout

Description

1

After right clicking on ADL, click Edit Source. Then the ADL contents can be edited.

2

After right clicking on ADL, click Edit Script. Then the Global Script of ADL can be edited.

A sample screen for editing the ADL contents follows:

TypeDefinition File

TypeDefinition files have information related to those files needed by Nexacro Platform applications. The components used on the Nexacro Platform are created with JavaScript.

JavaScript files that include logic are called modules. You can select module objects when developing applications. You can also define service groups and setup options related to the distribution.

The following screen capture shows the editing the TypeDefinition window.

Callout

Elements

Description

1

Module information

Contains information on modules developed through JavaScript.

- You can add self-developed modules

- It can be registered as a js or json file. If there is a dependency relationship between files, register the files in order.

2

Object information

Contains information on objects needed to run applications

- Designated objects are included in distribution

- Each object is assigned based on a module

3

Service group

Service groups are defined internally according to the project size

- Each service group can set the cache level individually

4

Distribution option

Information related to application distribution (Runtime version) is assigned

GlobalVariable File

GlobalVariable file registers common variables used by several screens in Nexacro Platform applications.

Variables that can be registered as common variables are objects, such as the variant variable, dataset and images.

The following table lists variables defined by the GlobalVariable file.

Element

Description

Dataset variables

Registers dataset and sets up the elements

Variable variables

Registers variant type variables

Image variables

-Registers images for common use

The following menu option and screen capture shows the screen to register a dataset among GlobalVariables.

Project > GlobalVariable > Insert GlobalVariables Item > Dataset

To edit global variable files in bulk, open the source files using the menu below.

Project > GlobalVariable > Edit Source

The below script shows you how to access the global variables—which are illustrated in the underneath picture—through a script.

// Variable
var test = application.all["var_sample"];
var test = application.var_sample;

// Dataset
var objDs = application.all["dsSample"];
objDs.setColumn(1,"cust_zip","078543"); 
application.dsSample.setColumn(1,"cust_zip","078543");

If you declare a variable in the scope of an application, you cannot access the variable with the all property. If you want to apply the all property to access such a variable, you need to use the setVariable method.

application.aaa = "TEST";
trace(application.aaa); // TEST
trace(application.all["aaa"]); // undefined

// setVariable
application.setVariable("aaa", "TEST");
trace(application.aaa); // TEST
trace(application.all["aaa"]); // TEST

Theme/Style File

The style and theme on define the design of UI elements that are displayed on the screen. For a button, the style and theme can be specifying the button's transparency, font, color, shadow and effects, such as smearing and tilt.

For images, the theme is the style. A theme that uses images is more flexible to design the UI, as compared to style.

FDL File

The FDL file defines the form of the user’s screen. It contains not only the screen deployment shown to the user but additional information such as the script to perform UI logic.

The FDL file is the most important file for the Nexacro Platform application.

The main elements are listed in the following table.

Element

Description

Component Deployment

Includes the information to deploy a visible object component

Sets up component properties and events

Object Set-up

Sets up properties and events of an invisible object, such as a dataset and etc

Script

Writes the event function of all of the objects, including the form, as a script

Writes the required functions, in addition to the event function, as a script

Style

Registers a style used in a form

The style has priority over the style registered in the ADL

BindItem

Sets up the bindItem object, which connects a dataset with a form, a component and an invisible object

Application Launching Scenario

This section describes the process of launching a Nexacro Platform application.

bootstrap

Bootstrap refers to the process of verifying related information and fetching necessary resources to load an application.


HTML5

Runtime

1

index.html

start.json

start_android.json

start_ios.json

2

get bootstrap info

3


update engine

4

update resource (data)

5

load framework files

6

load component modules

7

load application

In general parlance, bootstrapping usually refers to a self-starting process that is supposed to proceed without external input. In computer technology the term (usually shortened to booting) usually refers to the process of loading the basic software into the memory of a computer.

https://en.wikipedia.org/wiki/Bootstrapping

In relation to Nexacro Platform, bootstrap means a preparatory process for launching an application.

Application Loading

The below sequence is the process of loading an application and connected forms.

  1. Loading an ADL file

  2. Executing the ADL file

  3. Parsing a TypeDefinition file

  4. Registering a service

  5. Saving a class list

  6. Downloading and executing subfiles

  7. Initializing an application

  8. Registering basic classes

  9. Setting the properties of the application

  10. Creating and initializing a MainFrame

  11. Creating frames within the MainFrame

  12. Loading forms

  13. Registering the event handlers of the application, MainFrame and frames

  14. Event occurrence: Application.onloadtypedefinition

  15. Creating GlobalVariables

  16. Event occurrence: Application.onloadingglobalvariables

  17. Method calling: MainFrame.createComponent

  18. Method calling: MainFrame.on_created

  19. Event occurrence: Application.onload

  20. Event occurrence: Form.onload

A subfile refers to a file that is connected through the include directive. (eg. a script file)

Because of the loading sequence, you cannot use objects that are not loaded yet.

For example, if you access to GlobalVariables within the even handler of the onloadtypedefinition event, "undefined" will be returned.


this.application_onloadtypedefinition = function(obj:Application, e:nexacro.LoadEventInfo)

{

trace(application.all['Variable0']); //undefined

}

Form Loading

The below sequence is the elaboration of the process between 12. Loading forms and 20. Event occurrence: Form.onload, as in the above Application Loading.

  1. Loading a form

  2. Executing the form

  3. Downloading and executing sub-files

  4. Initializing the form

  5. Setting style properties of the form

  6. Setting non-style properties of the form

  7. Creating objects, components and BindItems

  8. Performing scripts that are processed inside the engine

  9. Registering event handlers

  10. Calling the methods of the objects and components: Object.createComponent

  11. Event occurrence: Form.oninit

  12. Method calling: Form.on_created

  13. Calling the methods of the objects and components: Object.on_created

  14. Loading images and processing transactions

  15. Event occurrence: Form.onload

The objects and components included in a form are created according to the specified Z-order.

The loading times for Div and Tab components may vary according to network speeds if those components are designed to load forms connected through the url property.

Main Screen Element

Nexacro Platform applications contain a variety of elements to create application UI that users can manipulate easily. This chapter describes the basic screen elements.

Screen Deployment by Using Frame

Nexacro Platform applications provide a basic frame structure to process screens. The screen is positioned under the ChildFrame under the top-level MainFrame. Frames are similar to stage settings that show forms to the viewer. Even though forms are separate, they can share different elements by overlaying commonly used elements.

The basic frames can be categorized into two types: MainFrame and ChildFrame.

The FrameSet, VFrameSet, HFrameSet and TileFrameSet can be added, depending on the screen layouts.

The following table summarizes information about frames.

Frame Type

Frame

Description

Root Frame

MainFrame

Top-level frame (relevant to root frame)

Can have a subordinate node frame or ChildFrame

When there is a ChildFrame, it cannot add frames

Terminal

Frame

ChildFrame

Cannot have subordinate frames

Can have only one subordinate form

Node Frame

FrameSet

Deploys sub-frames regardless of forms:

  • When more than two sub-frames are added, they will be arranged in tiers.

  • When they have location values, they will shall be placed in the relevant spots

  • It can have Node Frame or ChildFrame below

VFrameSet

Deploys sub-frames vertically

Designates the deployment ratio for sub-frames by using the separatesize property

Can have subordinate node frame or ChildFrame

HFrameSet

Deploys sub-frames horizontally

Designates the deployment ratio for sub-frames by using separatesize property

Can have subordinate node frame or ChildFrame

TileFrameSet

Deploys sub-frames in the grid form

Designates sub-frames to be deployed on the left and right using separatetype, separatecount property

Can have subordinate node frame or ChildFrame

SDI (Single Document Interface)

When creating a project, if you select a default template and there is no additional option, the project will be composed of one frame.

MDI (Multi Document Interface)

When you compose a screen with the top menu, the bottom menu, contents and the toolbar, you need to arrange the entire layout structure in an appropriate manner to your desired form. You can compose MDI by selecting a default template and adding frames, if necessary, or by choosing an HFrame template, a VFrame template or a user-designated project template on Nexacro Platform.

You can add frames by choosing MainFrame or NodeFrame on Project Explorer and clicking [Insert Frame] item on the context menu or by double-clicking MainFrame or Node Frame and clicking [Add] on the context menu of the following edit screen.

Form Composition

Form composition composes the practical screen UI. A form is layed on a frame on the screen so that you can manipulate the form.

The form is composed of three areas: visible, invisible and logic:

Data Linkage with Server

Nexacro Platform applications show images on the screen so that enterprise users can easily manipulate data. To enable this, the server that handles the data must be linked to the applications.

X-API

X-API is a library that creates data forms linked to the Nexacro Platform applications. Without X-API, you can link service data to Nexacro Platform applications when data services are developed by following specific guidelines.

X-API is provided based on the Java development environment. For details, refer to the documents included in the X-API library.