The most basic item used in tasks when creating an application is the inquiry screen. This chapter discusses using the Grid and Dataset components on a form to create a simple customer list inquiry screen .
This section assumes that you have already created the project and form, and have the form open.
Dataset Component
The Dataset component provides data management support for a Nexacro Platform application. 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 data management inside applications, it is shown in the UI as an Invisible Objects item.
You can change the following Dataset properties from the Form Properties panel. For further dataset properties, use the Dataset Contents Editor. Check this.
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 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 | STRING | 32 | ||
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.
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.
Set the overall layout and place components by using the guideline, which can be shown or hidden by double-clicking the screen over the graduated ruler.
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 20 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.
Existing formats can be deleted to edit in a new format. Select the head and body on the grid content editor and deletes designated formats by selecting the delete item on the context menu. This is confusing. Needs to be checked.
The newly edited columns are composed of four columns with two head rows and two body rows.
Add head rows by clicking the right mouse button on the Grid Content Editor and choosing Add Head Row .
Adding the head row also adds one column. By selecting Add Column, you can add additional columns.
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.
Because the col0 and col1 columns connect to only one data source, the cells must be combined. You must select the cells on the col0 head rows, followed by selecting the Merge Cells item on the context menu. When selecting multiple cells simultaneously, drag the mouse after selecting a cell, or select other cells with the Shift key pressed.
If you try a cell combination, you are prompted if you want to retain the current cells' properties. As you will not use the sub-cell properties here, select No.
Combine cells in the body rows in col0 and col1.
If you select several cells with the Ctrl key pressed, the Merge Cells item on the context menu will not be activated.
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 | bind:email | 200 | |
Phone | bind:phone | ||
col3 | Company | bind:comp_name | 320 |
Department | bind:department |
Specify cell values by selecting the cell and entering the value in the properties window on the right side.
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 a click event to the btnSearch button:
Select btnSearch button.
Right-click properties.
When prompted, add an onclick event 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:Button, e:nexacro.ClickEventInfo)
{
var row = this.dsCustomers.addRow();
this.dsCustomers.setColumn(row, "id", "TC-001");
this.dsCustomers.setColumn(row, "name", "Dustin Kim");
this.dsCustomers.setColumn(row, "email", "ceo@tobesoft.com");
this.dsCustomers.setColumn(row, "phone", "6987-6543");
this.dsCustomers.setColumn(row, "comp_name", "TOBESOFT");
this.dsCustomers.setColumn(row, "department", "0");
this.dsCustomers.setColumn(row, "comp_phone", "6506-7000");
this.dsCustomers.setColumn(row, "comp_addr", "Seoul");
}Generate the Javascript
To implement your new application on a web browser, convert the current code into a JavaScript file by selecting:
[Menu] Build > 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.)
When you execute QuickView on a web browser for the first time, you must type in a path in which the QuickView.html file is located. This path may differ from the Generate path.
While the designated web browser is running, you can check Nexacro Platform applications that are processing by clicking the Search button to display data added from the script to the Grid.