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
4 Button	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.

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.

Add a head row

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

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.

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.

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.

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
col2	Phone	bind:phone	200
col3	Company	bind:comp_name	320
col3	Department	bind:department	320

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:

Select btnSearch button.
Click the editable field of the onclick event in the Properties pane.
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:

Activate the build toolbar.
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.