Introducing Nexacro Platform

In this chapter, you will create a simple app to demonstrate Nexacro Platform's development environment and Nexacro Studio. The app will display the message "Hello, nexacro platform!" When you click the message text, "nexacro platform 17" will be displayed on the alert box.

Starting Nexacro Studio

Start Nexacro Studio by:

Immediately after installation, the Nexacro Studio UI displays the following screen without an open project.

nexacro studio Screen

Callout

Component

Description

1

Project Explorer

List of components for the open project

2

Form Design

Place for designing an app screen and editing a script

3

Properties

Properties of the Form, component, and Dataset component. You can edit them in this sector.

4

Output

List of output messages (such as error messages), generated messages, and messages set up with trace() method

5

Error List

Displays errors on a real time basis while the user writes a script

Creating a Project

Before creating a Nexacro Platform-based app, you must create a project. The project defines how the app will appear and run on the user’s screen. You can create a new project or reuse an existing template project. In this chapter, you will learn how to create a project.

Select the New Project Wizard from the menu:

[Menu] File > New > Project

1 Type the project's name in the "Name" field. 2 Set the location where the file will be saved in the "Location" field.

In this example, the settings will be as follows.

Field

Description

Predetermined value

1

Project name

Hello

2

Location

[Your desired folder]\Hello

For the next step, define a screen and specify detailed information of the screen. In this chapter, we are going to use the default values as they are. That is, the screen will be a "Desktop," and the screen details are comprised of the settings that are automatically generated by the wizard

Choose "Full" as a frameset template to create a basic frame structure and Form. You can change the settings related to screens or frames after creating a project. So, click the [Finish] button to complete the creation of the project.

As the project is created, the elements of the project will be displayed in the Project Explorer. In this chapter, you will skip detailed explanations about those elements to get straight to "Creating an App".

The paths explained in this chapter are based on the Windows 10 operating system. The paths may differ depending on the operating system.

The file will be saved automatically to this location if you don't specify an alternative:

C:\Users\[User]\Documents\nexacro\[Install Version]\projects\

Creating an App

Nexacro Platform-based apps run based on Forms. While a project presents the "stage" for an app, you can decorates the stage, arrange movements, and add effect through a Form.

Component Arrangement

Double-click Form_Work, which has been created in the Project Explorer, to open the Form Design panel.

Toolbars on display can vary according to the settings. [View > Toolbars]

The interfaces of Nexacro Studio's menu are divided into a ribbon and command bar. This chapter follows the command bar interface.

Form Area

Description

1 Project Explorer

List of project objects

2 Design/Source/Script tabs

Panel for editing design, source code, and scripts for a Form

3 Properties/Style Property Editor tabs

Panel for modifying the Form properties and styles

4 Ribbon

Common commands

Write Letters

You can use Static components to write text in Nexacro Platform-based apps. Click the Static component on the "Objects" toolbar, and then click where you want it placed in the Form Design window. The Static component is displayed in the default size.

Create a Component in a Different Size

You can place a component to the Form Design window in a different size compared to the default. Select the component from the Objects toolbar and then press and drag the left mouse button to the size you want, instead of just clicking the place where you want it to be placed. You can select the component and resize it even after it is placed.

Revise Static Component Text

To revise a static component’s text, select the component in the Form Design window, press the F2 key to switch to edit mode, and make your changes.

To modify a component's properties, select it in the Form Design window, then edit the properties in the Properties window.

If you know the name of the property that you seek, enter it to the 1 input box. Then, the Properties pane will show every item that includes your input text. In this sample, we entered "text."

If you want to edit the text of a component directly in the Form Design pane, first click the component to select it and then click it second with a little interval to activate the edit mode. If you make the two clicks too shortly, it will be considered a double-click, thus leading to the Script pane for editing the onclick event.

Generate Path

Nexacro Platform-based apps are not executed directly with the codes written in Nexacro Studio. Those will be converted into JavaScript codes through the process called "generate." Generation is automatically conducted every time a Form is created or saved after change. Otherwise, you can generate a current project manually by accessing the below menu.

Using QuickView for Generation

Access QuickView:

[Menu] Generate > Quick View

Using Options Menu to Specify Generate Path

Another way to specify the Generate Path is by accessing: [Menu] Tools > Options > Project > Generate Path

A new folder with the project name is created under the designated folder, and the JavaScript files will be created.

Options[Environment - General]

The followings are default set-ups of Working Folder, Generate Path, and Base Lib Path.

Working Folder

C:\Users\[User]\Documents\nexacro\[Install Version]\projects

Generate Path

C:\Users\[User]\Documents\nexacro\[Install Version]\outputs

Base Lib Path

C:\[Program Files]\nexacro\[Install Version]\nexacro17lib

Generating the JavaScript Code

Nexacro Studio creates the JavaScript files and stores them at the Generate Path location.

[_resource_/_theme_]
[FrameBase]
[nexacro17lib]
environment_xml.js
Application_Desktop.xadl.js
Application_Desktop.xadl.quickview.js
index.html
launch.html
popup.html
quickView.html
start.json

File names and folder names can vary according to the versions of Nexacro Platform.

As the converted JavaScript files are created, you can see QuickView executed.

Adding Events

Let's create an event that displays an Alert window when the user double-clicks the Static component, "Hello, Nexacro Platform."

Choose the Static component in the Design pane, click the 1[Event] icon on the Properties window, and then double-click the 2 input field of the onclick event.

Double-click the component on the Form Design window to add the onclick event. The event function will be created automatically as soon as the design window switches to the Form Script window, as shown here:

this.Static00_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	
};

Declare a task in this function by adding code that displays "Nexacro Platform 14" in the Alert window.

this.alert("nexacro platform 17");

The corresponding code of the Form we have designed here (Form_Work.xfdl) is listed below. In the process of developing a Nexacro Platform-based app, you barely need to change source code. By looking at the code, however, you can grasp a picture of the structure of an app.

$r_title(Form_Work.xfdl)

<?xml version="1.0" encoding="utf-8"?>
<FDL version="2.1">
  <Form id="Form_Work" width="1280" height="720" titletext="Form_Work">
    <Layouts>
      <Layout width="1280" height="720" screenid="Desktop_screen">
        <Static id="Static00" taborder="0" text="Hello, nexacro platform!" left="51" top="42" width="179" height="68" onclick="Static00_onclick"/>
      </Layout>
    </Layouts>
    <Script type="xscript5.1"><![CDATA[
this.Static00_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	this.alert("nexacro platform 17");
};
]]></Script>
  </Form>
</FDL>