Creating a Customer List Inquiry Screen

The most basic application used in business tasks is an inquiry screen. This chapter discusses using the Grid and Dataset components on a Form to create a simple customer list inquiry screen.

Laying Out Screen

Roughly speaking, developing an app with Nexacro is about creating a project and Form and then arranging components in the Form.

Project

Access the below menu to create a new Nexacro project.

[Menu] File > New > Project

Configuration item

Setting value

Description

Name

CustomerList

Project name

Location

E:\88_TEST\01_PROJECT\CustomerList

Location for saving the project file

Frameset Template

Full

Designate a frame set

Form

Use the "Form_Work" Form, which was created in the process of setting the frame set template. You can change the width and height of the Form later by changing the relevant properties after creating the Form.

Configuration item

Setting value

Description

Name

Form_Work

Form name

Location

FrameBase

Service group

Width

800

Form width (the default value is 1280)

Height

600

Form height (the default value is 720)

Change the value of the Form's titletext, a property that represents the title displayed in a web browser's title bar.

Property

Value

Description

titletext

Customer List Search

Form title

Dataset

The Dataset component provides data management support for a Nexacro-based app. It stores data fetched from the server and manages the data change status (add/revise/delete).

This component manages the data in a two-dimensional table format and manipulates the data in a column or row record format. A form can have several Datasets and multiple Forms can utilize multiple Datasets by using Global Variables.

You can add a Dataset to a Form by selecting the Dataset icon on the Nexacro Studio toolbar and clicking anywhere on the Form. Because a Dataset is an invisible component used for internal data management, it is shown in the UI as an invisible object item.

You can change the following Dataset properties from the Form Properties panel. For further Dataset properties, use the Dataset Contents Editor.

Property

Value

Explanation

id

dsCustomers

Dataset id

Dataset Contents Editor

For general form components, the associated properties can be changed in the properties window. However, to manage Dataset properties, you need to use the Dataset Contents Editor. Using the Editor, you can also design columns and add data directly to a two-dimensional table form.

Double-click the Dataset to display the Dataset Content Editor.

To add columns to the Dataset, click the [Add column to the dataset] icon in the Columns section.

This example uses the following columns.

No.

id

type

size

Explanation

1

id

STRING

4

Series No.

2

name

STRING

16

Name

3

email

STRING

32

Email

4

phone

STRING

16

Phone No.

5

comp_name

STRING

32

Company

6

department

STRING

32

Department

7

comp_phone

STRING

16

Company Phone No.

8

comp_addr

STRING

256

Company Address

In the Rows section, you can add data in the same way you add columns.

Review the items that have been added. They are displayed as source code in the editor. If you make any change directly to the source code, it is immediately reflected in the Dataset columns.

<ColumnInfo>
  <Column id="id" type="STRING" size="4"/>
  <Column id="name" type="STRING" size="16"/>
  <Column id="email" type="STRING" size="32"/>
  <Column id="phone" type="STRING" size="16"/>
  <Column id="comp_name" type="STRING" size="32"/>
  <Column id="department" type="STRING" size="32"/>
  <Column id="comp_phone" type="STRING" size="16"/>
  <Column id="comp_addr" type="STRING" size="256"/>
</ColumnInfo>

Component Assignment

The customer list inquiry screen is composed of a title, a search window, a search button and a Grid, as illustrated in the picture below.

The components and revised property values used for this sample screen composition are as follows:

Component

Property

Value

Explanation

1 Static

id

sttList


text

Customer List Search

Character string to be shown

font

bold 20px/normal "Verdana"

Font properties

2 Div

id

divCommand


3 Edit

id

edtSearch


4 Button

id

btnSearch


text

Search

Character string to be shown on button

5 Grid

id

grdCustomers


The Div component plays the role of wrapping several components. Assign the Div component first, and then other components to be wrapped inside it such as the Edit and Button components.

Linking the Grid to the Data

Often when composing a screen that includes a Dataset, it is convenient to use the Grid component to bind the data. This will allow display of the data on the screen as well as entering and revising data directly on the Grid. The changes are reflected immediately in the Dataset.

Binding the Data

Bind the data by designating a Dataset id value for the binddataset property, or by clicking the Dataset component on Nexacro Studio and dragging it onto the Grid component.

The Grid form is changed based on the Dataset columns.

Formatting the Data in the Grid

If you want to modify how the data in the Grid is formatted, you can modify the format property value in the databind properties. The value in the Binding formats property is initially created based on the columns in the Dataset.

Double-click the Grid, or click the button linked to formats on the Properties window to open and display the Grid Content Editor.

The Grid Content Editor modifies the data formats shown on a Grid but does not affect the Dataset itself.

1

Delete the default format created upon the binding of a Dataset

Select "row0" and "row1" by clicking one by one with the Shift or Ctrl key pressed. Then, click the Delete icon on the toolbar to remove the automatically-created default format.

You need to modify the Grid structure so that the eight items of data will be displayed in two rows. The new Grid format will have four columns as well as two head rows and two body rows.

2

Add a head row

To begin, add head rows. Click the Add Head Row icon on the toolbar.

3

Add four columns

Then add four columns. Adding the head row results in one column. By clicking Add Column, you can add additional three columns.

4

Add head rows and body rows

To show two types of data on col2 and col3, add two head rows and two body rows. You can add body rows by selecting Add Body Row.

5

Merge Cells

Only one set of data will be linked to col0 and col1 each, so the rows in the two columns should be merged. Choose one cell of col0 in the head band and select the [Merge Cells] icon on the tool bar. If you want to select multiple cells, click one cell and drag the mouse pointer to the other. In another way, choose one cell and select another cell with the Shift button pressed.

The [Merge Cells] feature has two options. The first one is [Merge Cells(A big cell)], which removes all the individual properties of existing cells. The other one is [Merge Cells(Having child cells)], which maintains the individual properties of existing cells while making the relevant cells appear to be merged into one. In this sample, you should choose [Merge Cells(A big cell)] since there is no need to maintain the properties of the existing cells.

Combine cells in the body rows in col0 and col1.

You can select multiple cells with the Ctrl key. However, the [Merge Cells] menu will not be activated unless the selected cells form a rectangle. For instance, you cannot merge cells in the the case illustrated below.


6

Setting columns (column binding, importantly)

The following table lists the cell values illustrated in this example.

Column

Head Cell: text

Body Cell: text

Column: size

col0

ID

bind:id

80

col1

Name

bind:name

150

col2

Email

bind:email

200

Phone

bind:phone

col3

Company

bind:comp_name

320

Department

bind:department

If a Grid has its bound Dataset, you can call the Dataset columns directly through the Grid Contents Editor. Therefore, you can enter "bind:id" to the text property of col0 in the body band or select the "id" column from the drop-down list, as illustrated in the below picture.

Click OK after entering the value to show the new value on the Grid.

Data Test

To test the functionality of the Grid, we will add data using a simple script.

Button Click Event

To process data, add the onclick event to the btnSearch button:

  1. Select btnSearch button.

  2. Click the editable field of the onclick event in the Properties pane.

  3. Create the onclick event by double-clicking or pressing the Enter key with the value divCommand_btnSearch_onclick.

The event script is as follows. It adds a data row to the Dataset and designates a value.

this.divCommand_btnSearch_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
     var row = this.dsCustomers.addRow();
     this.dsCustomers.setColumn(row, "id", "TC-001");
     this.dsCustomers.setColumn(row, "name", "Tzuyu");
     this.dsCustomers.setColumn(row, "email", "ceo@twice.com");
     this.dsCustomers.setColumn(row, "phone", "6987-6543");
     this.dsCustomers.setColumn(row, "comp_name", "TWICE");
     this.dsCustomers.setColumn(row, "department", "0");
     this.dsCustomers.setColumn(row, "comp_phone", "6506-7000");
     this.dsCustomers.setColumn(row, "comp_addr", "Seoul");
};

If a TypeError occurs in the process of the onclick event, there may be a problem with the ID of a component or another object. For instance, the below error occurs if you enter this.dsCustomer.addRow() in the above sample.


TypeError: Cannot read property 'addRow' of undefined

Generate the Javascript

To implement your new app on a web browser, convert the current code into a JavaScript file by selecting:

[Menu] Generate > Application

The Output window should show the JavaScript being created.

Quick View

After executing the web server on Nexacro Studio, QuickViewis executed.

If you want to execute QuickView on a web browser:

  1. Activate the build toolbar.

  2. Change the browser option. (You can use the web browser on your desktop computer.)

Once the designated web browser is opened, you can check a Nexacro-based app in operation by clicking the Search button to display the data added by the script to the Grid.