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

Starting Nexacro Studio

Start Nexacro Studio by:

• Double-clicking the Nexacro Studio icon on your Windows desktop. or

• Double-clicking on the Nexacro Studio executable in the installation directory. The default installation path is C:\[Program Files]\TOBESOFT\Nexacro N\Tools\nexacrostudio.exe

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

Creating a Project

Before creating a Nexacro-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.

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".

Creating an App

Nexacro-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.

Write Letters

You can use Static components to write text in Nexacro-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 are aware of the property name to be edited, you can find the item you want right away by entering the string you want to find in the search box. The string entered in this example is 'text'. Then change the text property value to "Hello, Nexacro N".

Form is selected by clicking on the area of the design screen, excluding static components. Change the width and height property values to 300, 200 in the property window and save.

Running apps in Nexacro Runtime Environment (NRE)

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

A window for setting the execution options is displayed. Click the [Run] button with the default settings.

Adding Events

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

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 N" in the Alert window.

this.alert("Nexacro N");

Select [Generate > Quick View], click [Run] in the settings window to run the app, and click the text area "Hello, Nexacro N" to display the warning window as follows.

Running apps in the Web Runtime Environment (WRE)

Select [Generate > Quick View] and select a web browser to run in the Browser item in the setting window.

Click [Run] to launch the selected web browser (Chrome) and then the screen is displayed.

If you click the text area "Hello, Nexacro N", an alert window will appear as follows.

The following are the content of this chapter.

• Creating a new project

• Placing static components and changing text properties

• Changing the form size (width, height)

• Execute the created screen in NRE

• Adding a feature for handling events when the mouse is clicked to the Staitc component

• Execute the created screen in a web browser