Normally, an application used for business does not manage the data locally. Typically, the application gets and modifies data, but the data is stored on the server.
This chapter discusses how code data is managed in Nexacro Platform applications, fetched from the server, and viewed on a web browser.
Grid Combo
Database schema often include such data as country, department and rank. If these data are entered as character strings, users may enter them differently. To avoid this, the data are managed by creating separate code tables.
As you can see in the example below, the Department item is managed not by its name but by its code in the database. However, the item should show users its name. So, in the grid component, you can determine a displaytype according to data forms.
Dataset
Create a dataset first, and then enter properties and column values.
Property | Value | Explanation |
---|---|---|
id | dsDepartment | Dataset id |
No. | id | type | size | Explanation |
---|---|---|---|---|
1 | code | STRING | 32 | Department code |
2 | value | STRING | 32 | Department name |
Grid
Execute the Grid content editor by double-clicking the Grid. Select the data cell of Department and revise the following items in the properties window. The combodataset item can be entered manually or selected from the list. Once the combodataset item is entered, you can manually enter items on combocodecol and combodatacol or select from the list.
Property | Value | Explanation |
---|---|---|
displaytype | combo | Data indication format for the cell |
combodataset | dsDepartment | Dataset to be linked with a combo component when displaytype or edittype is combo |
combocodecol | code | Code column |
combodatacol | value | Data column |
Generate
When you revise a form which is not ADL, simply create another file with a relevant file format. You can select Generate File, not Generate Application on menu.
[Menu] Build > Generate File
When you execute QuickView again, you can see the Department item shown as a name instead of a code name.
Transaction
Now, let's fetch data from a server using the transaction method. The test will fetch the XML file created with a data format used in Nexacro Platform applications.
Test data is used in this example to retrieve the data. For that reason, in an application operating environment, you have to import the data stored in a specific place for data storing.
sample.xml
The XML file to be used in the example is as follows. It is assumed that there are four records and that retrieval has been successful.
<?xml version="1.0" encoding="utf-8"?> <Root xmlns="http://www.nexacroplatform.com/platform/dataset" ver="5000" > <Parameters> <Parameter id="ErrorCode" type="int">0</Parameter> <Parameter id="ErrorMsg" type="string">SUCC</Parameter> </Parameters> <Dataset id="customers"> <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> <Rows> <Row> <Col id="id">TC-001</Col> <Col id="name">Dustin Kim</Col> <Col id="email">ceo@tobesoft.com</Col> <Col id="phone">6987-6543</Col> <Col id="comp_name">TOBESOFT</Col> <Col id="department">0</Col> <Col id="comp_phone">6506-7000</Col> <Col id="comp_addr">Seoul</Col> </Row> <Row> <Col id="id">TC-002</Col> <Col id="name">Sean Oneal</Col> <Col id="email">ibero.Donec.consectetuer@ac.ca</Col> <Col id="phone">7357-3715</Col> <Col id="comp_name">AC</Col> <Col id="department">0</Col> <Col id="comp_phone">7357-7000</Col> <Col id="comp_addr">Lansing</Col> </Row> <Row> <Col id="id">TC-003</Col> <Col id="name">ieter Valenzuela</Col> <Col id="email">ornare@Maecenasmifelis.com</Col> <Col id="phone">9025-0645</Col> <Col id="comp_name">Maecenasmifelis</Col> <Col id="department">0</Col> <Col id="comp_phone">9025-7000</Col> <Col id="comp_addr">Coral Springs</Col> </Row> <Row> <Col id="id">TC-004</Col> <Col id="name">Mark Contreras</Col> <Col id="email">vitae.posuere@consectetueripsumnunc.ca</Col> <Col id="phone">7026-3815</Col> <Col id="comp_name">consectetueripsumnunc</Col> <Col id="department">0</Col> <Col id="comp_phone">7026-7000</Col> <Col id="comp_addr">Elmira</Col> </Row> </Rows> </Dataset> </Root>
Button click event
Add code fetching the data by accessing the sample.xml file instead of adding the data manually to a button click event (divCommand_btnSearch_onclick).
The revised code is as follows. Specify parameters needed for the transaction method and call the method. The transaction method downloads data by accessing a service (or a file) to update a certain dataset value and calls up the CallBack function once the task is completed.
this.divCommand_btnSearch_onclick = function(obj:Button, e:nexacro.ClickEventInfo) { var id = "search"; var url = "http://localhost:8080/CustomerList/sample.xml"; var reqDs = ""; var respDs = "dsCustomers=customers"; var args = ""; var callback = "received"; this.transaction(id, url, reqDs, respDs, args, callback); }
The parameters used in the transaction method are as follows:
Parameter | Type | Explanation |
---|---|---|
id | String | ID distinguishing transactions |
url | String | URL of a service or a file requesting transaction |
reqDs | String | This is a value that designates the dataset changed when the dataset data used in the application are revised. The transmission format is as follows: (Dataset designated in a service or a file) = (Dataset revised in the application). Multiple values may be designated separately. |
respDs | String | Value designated when receiving transaction processing results. The transmission format is as follows: (Dataset revised in the application) = (Dataset designated in a service or a file). Multiple values may be designated separately. |
args | String | Value that designates the parameters transmitted when requesting transaction. The transmission format is as follows: parameter_name = value. Multiple values maybe designated separately. |
callback | String | This is a value that designates the CallBack function that processes transaction results. |
The transaction method has three more parameters including asynchronous, binary and compressed communication. If you omit the parameter, the default value will be applied.
Callback Function
Access a service or a file by transaction method, and then execute the designated CallBack function. The CallBack function is created as follows:
this.received = function(id, code, message) { if (code == 0) { this.alert(this.dsCustomers.rowcount + " numbers of data have been found."); trace(this.dsCustomers.rowcount + " numbers of data have been found."); } else { this.alert("Error["+code+"]:"+message); trace("Error["+code+"]:"+message); } }
As the XML file used in the example always sends a successful message, the result is as below. It shows data on the Grid.
If a transaction URL is not on the same server as Nexacro Platform applications, you may experience an Access-Control-Allow-Origin error.
Log
The error messages occurring in Nexacro Platform applications and those messages processed in the trace method differ slightly depending on the Runtime or web browser. You can check the error messages occurring in Form Design and Generate in the Nexacro Studio Output window.
However, in the Runtime version, you can check errors or messages that occur while running applications in the Nexacro Studio Output window. In the HTML5 version, visibility of errors in the log depends on the configuration of the web browser.
The following section is based on web browser versions listed below. It is subject to change depending on the version in use.
- Google Chrome 34.x
- Firefox 20.x
- Internet Explorer 10.x
Google Chrome
The JavaScript console can be accessed via the menu below.
[Menu] Tools > JavaScript Console
Firefox
The JavaScript console can be accessed via the menu below. Firefox provides more features and information than Google Chrome.
[Menu] Web Developer > Web Console
Internet Explorer
The JavaScript console can be accessed via the menu below. Developer tools can be accessed directly via the F12 function key.
[Menu] Tools > developer tools > Console