You can create the Model, View templates, and Action provided by the Easy UI core function and use them to create the UI function that searches and changes information.
Place components based on the data (Model) and code auto-creation template (View template), or create the code that forms the Dataset object and connect the screen and the execution script (Action) to trigger events under user input operations or specific conditions.
In this chapter, we first will create a simple screen to explain the functions. Place the search UI at the top, the result list using the Grid component in the middle, and the detailed information to be displayed at the bottom when the Grid component is clicked. How to use the previously created Model, View templates, and Action is explained.
Also, we will examine how to create the Model, View templates, and Action used when configuring the screen.
Easy UI Tutorial Wizard
Easy UI Tutorial Wizard gives you a quick look at how to configure the screen using Easy UI, configures the necessary development environment, and installs the sample file.
Running Easy UI Tutorial Wizard
When creating a project, select [Use 'Easy UI' > Start Tutorial] or select the menu [Easy UI > Let's Try Easy UI] with the project opened to run the Easy UI Tutorial Wizard.
Selecting Use 'Easy UI' in Project Wizard
Select the [Use 'Easy UI' > Start Tutorial] item in the Easy UI step and then click the [Finish] button to run the Easy UI Tutorial Wizard.
If you click the [Cancel] button while the Easy UI Tutorial Wizard is running, then you can create a project without setting the Easy UI.
Selecting the Let's Try Easy UI Item from Menu
Select the menu [Easy UI > Let's Try Easy UI] to run the Easy UI Tutorial Wizard. Configure the development environment in the currently open project and then install the sample file.
Easy UI Tutorial Wizard Execution Screen
The Easy UI Tutorial Wizard does not have a screen to enter the setting values and only consists of a simple function introduction screen. You can browse the contents by clicking the [Next] or [Prev] buttons.
Description | |
|---|---|
1 | After checking the function introduction content, the [Finish] button is enabled in the final introduction step. When you click the [Finish] button, the development environment is configured and the sample file is installed. |
2 | If you click the [Cancel] button, then the Wizard execution is ended. |
Easy UI Tutorial Wizard Execution Results
After running the Easy UI Tutorial Wizard and clicking the [Finish] button, the following results are reflected in the project.
Configures the View component to be available for use and displays it on the toolbar.
Registers the model-type service and 3 model samples.
Registers 3 View Templates.
Installs and registers 2 Action objects.
Registers 4 Viewset Templates.
Also creates the EasyUITutorialForm.xfdl file with sample_SingleDetail Viewset Template.
EasyUITutorialForm.xfdl
This file is created as a result of running the Easy UI Tutorial Wizard and you can search the data by clicking the [Search] button after running QuickView.
The entire screen consists of 2 Views. You can check the View information by enabling Easy Design Mode and clicking the [i] button at the bottom right of each View.
Configuring Screen Using Model, View Templates, & Action
Let’s take a look at how to configure the screen with the previously created ViewSet template, View template, Model, and Action.
Configuring Development Environment
Let’s take a look at how to configure the screen with the previously created ViewSet template, View template, Model, and Action. If you are using the created product, then skip the Start from New Project step and proceed from the Importing ViewSet Template File step.
Step | Description |
|---|---|
Model File | Add the model Type service and import the xmodel file. [Project Path]\[Model Service PrefixID] |
Action | Install the xmodule file. [Project Path]\_extlib_ |
ViewSet Template | Copy the ViewSet template file to the path specified in the directory structure.
|
View Template | Copy the View template file.
|
Starting by Importing the xpackage File to a New Project
If you use the xpackage, then you can process the following tasks at once.
Adding service and creating the folder (SvcModelSample, Sample)
Importing model (SvcModelSample.xmodel)
Importing the View template (viewSampleForm.xviewgen, viewSampleGrid.xviewgen)
Importing the ViewSet template (viewTemplateSample.xtemplate)
Creating the sample XML file (sample.xml)
The following steps must be configured.
Adding the nexacro.View component in TypeDefinition
Installing the Action module
Displaying the Easy UI panel
1
Download the xpackage file from the link below.
You can download the xmodel file from the link below.
Please refer to the link below for creating xpackage.
2
Select the menu [File > Import] and run the Import Wizard.
3
Select and enter the downloaded xpackage file in Package File.
4
Select all the items that can be selected in the FileList and then click the [Import] button.
If the file is the same as the existing item, then it is displayed as overwriting. You can select the option above the Preview screen to change and add the to a different name.
5
Select the TypeDefinition > Objects item in Project Explorer and then add the nexacro.View component.
6
If the Easy UI panel is not displayed, then select the menu [Easy UI > View > Easy UI] and display the Easy UI panel.
7
Prepare the Action module installation file (SampleActions.xmodule).
You can download the xmodule file from the link below.
Please refer to the link below for creating Action.
8
Select the menu [File > Install Module] and then run Install Module Wizard.
9
Check "Module Package" for Install Type and then select the xmodule file to import.
10
Check the Action information included in the module and then click the [Install] button.
INCLUDE_ERROR(ELEMENT_REMOVED)
Refresh the project when installing the module.
11
Select the Action tab in the Easy UI panel and then check if the installed Action module is registered.
12
Continue proceeding with the task of Creating New Form.
Start from New Project
1
Select the TypeDefinition > Objects item in Project Explorer and then add the nexacro.View component.
2
Select the TypeDefinition > Services item in Project Explorer and then add the Model service with the name "SvcModelSample".
3
If the Easy UI panel is not displayed, then select the menu [Easy UI > View > Easy UI] and display the Easy UI panel.
4
Select the Model tab in the Easy UI panel and then select the "Import" item from the context menu.
5
Prepare the Model file (SvcModelSample.xmodel).
You can download the xmodel file from the link below.
Please refer to the link below for creating Model.
6
Select the xmodel file to import from the file explorer.
7
Check that Model has been added. You can check the information by double-clicking the Model item.
8
Prepare the Action module installation file (SampleActions.xmodule).
You can download the xmodule file from the link below.
Please refer to the link below for creating Action.
9
Select the menu [File > Install Module] and then run Install Module Wizard.
10
Check "Module Package" for Install Type and then select the xmodule file to import.
11
Check the Action information included in the module and then click the [Install] button.
Refresh the project when installing the module.
12
Select the Action tab in the Easy UI panel and then check if the installed Action module is registered.
Importing ViewSet Template File
1
Prepare the ViewSet template file.
You can download the xtemplate file from the link below.
After extracting, copy the entire folder and then move it under the project Viewset path.
Please refer to the link below for creating the Viewset template.
2
Copy the ViewSet template file to the folder.
The default folder where the ViewSet template file is saved is in the viewset folder under the Form Template path in the menu [Tools > Options > Easy UI].
You need to create a category folder (sample) and the ViewSet template folder (viewTemplateSample) under the viewset folder and copy the xtemplate file.
The _preview.xfdl.js file is the preview file that is automatically created when you select the ViewSet template file for creating a new Form. It is okay to import them together when copying the ViewSet template file.
Importing View Template File
1
Prepare the View template file.
You can download the xviewgen file from the link below.
Please refer to the link below for creating the View template.
2
Open the View Template tab in the Easy UI panel, and then click the top menu button and select the [Open Containing Folder] item to open the folder.
As with the ViewSet template file, the saved default folder can be found in the menu [Tools > Options > Easy UI > View Template]. If you click the Setting button above the Location link in the View Template tab, then it will direct you to the corresponding option.
3
Copy the View template file to the folder.
4
After copying the file, click the top menu button in the View Template tab and then select the [Refresh All] item to display the copied View template list.
Creating New Form
1
Select the menu [File > New > Form] and run Form Wizard.
2
Select the Viewset Templates item from the Template list on the left and then select the ViewSet template added earlier.
In the example, the design of the View component is not included. If properties such as border or background are set on the View component according to the screen design, then they can be added to the theme and reflected.
3
Enter the Form name and then click the [Finish] button.
Creating Screen UI with Model & View Template
After selecting Model and dragging it onto the View component, select the View template and additional properties. The screen UI is created according to the selected item.
Creating Search UI
1
Select Model from the Easy UI panel and then drag and drop it on the first View component.
If you drag the Model with the mouse and move it over the View component, then the area of the View component is displayed in black.
2
Select viewSampleForm in the View Generation Wizard.
3
Select only the name item in the filed value selection step.
4
For the use_triggerbutton item, select the true value.
5
Click the [Finish] button to create the screen.
6
Check the created View component information in the Easy Design Mode.
If you click the [Easy Design Mode] button on the design screen, then Easy Design Mode is enabled. If you click the [i] button at the bottom right of the View component, then the connected Model information and the View Template information are displayed.
Creating Grid UI
1
Select Model from the Easy UI panel and then drag and drop it on the second View component.
2
Select viewSampleGrid in View Generation Wizard.
3
Select both name, company items in the filed value selection step.
4
Click the [Finish] button to create the screen.
Creating Detailed Information UI
1
Select Model from the Easy UI panel and then drag and drop it on the third View component.
2
Select viewSampleForm in View Generation Wizard.
3
Select both name, company items in the filed value selection step.
4
For the use_triggerbutton item, select the false value.
5
Click the [Finish] button to create the screen.
6
Select the View component and then set the sourceview property value to the second View component (View01) in the property window.
When the sourceview property value is changed, it is changed to the state bound to the same Dataset as the Grid component, and the value selected in the Grid component is displayed in the third View component.
Adding Data Search Function Using Action
Add a function so that Action operates when the Button component is clicked. In order to implement the data search function without the server connection, create the XML file to search data.
Connecting Action
1
Select the Action tab in the Easy UI panel and select the TestQueryAction item.
2
Drag and drop the selected TestQueryAction item to the Grid component placed in the second View component.
3
Check the Target information in Controller Wizard and then enter the samplefilename, alerttype values, and Trigger related information.
For samplefilename, enter the XML file name to search for information. In the example, the "sample.xml" file was created. Alerttype is the property to be transmitted to Action to be processed after data search and the default value of false is maintained here.
Trigger is a task similar to adding events. In the example, "Click" was selected as the type property value, "View00" with the search UI was selected for view, and "btn_Trigger" as the Button component was selected for the object to make the Action operate when the Button is clicked. You need to select type, view, object in order to have the corresponding list to the next input item to be displayed, and then select the property value from the list.
The condition property is the condition under which Action operates, but it is not used here.
Please refer to the link below for the description of the items that can be selected for the Trigger type.
Item Information Available for the Trigger Type
Please refer to the link below for the description of the items that can be added as the Trigger condition.
4
Check the field information to be transmitted when the Button is clicked.
5
Add User defined (extra) arguments.
In the example, the transmitted value is only displayed with the trace method.
6
Click the [Finish] button.
You can see that the Action has been added to the Invisible Object area.
If you select the first View component in the Easy UI Design mode, then you can see that the Controller information has been added.
Creating sample XML File
Place the XML file for simple testing in the local environment.
1
Select the TypeDefinition > Services item in Project Explorer and then add the File service with the name "Sample".
2
Select the menu [File > New > XML] and then enter the file name as "sample".
3
Write the XML code with the following contents in the folder.
<?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="ds_viewdataset">
<ColumnInfo>
<Column id="name" type="STRING" size="80"/>
<Column id="company" type="STRING" size="80"/>
</ColumnInfo>
<Rows>
<Row>
<Col id="name">john</Col>
<Col id="company">1dollar</Col>
</Row>
<Row>
<Col id="name">donald</Col>
<Col id="company">EBOT</Col>
</Row>
</Rows>
</Dataset>
</Root>Executing Screen
1
Click the Quick View button and then execute the screen in the browser.
2
Enter any value in the Name field and click the [Search] button.
When changing the Row selected in the Grid component, check whether the information displayed in the third View component also changes.
Adding Action Processed when Data Search Action is Successful
You can specify the Action that should be connected and processed when the required function in the specific Action succeeds or fails. When data search is successful in the previous step, Add Action that displays the Alert message.
Connecting Action
1
Select the Action tab in the Easy UI panel and then select the TestAlertAction item.
2
Drag and drop the selected TestAlertAction item on one of the placed components on the screen.
Since targetview is not used, the component where you drag and drop is not important.
For consistency though, drag and drop the Action item on targetobj when adding Action.
3
Enter the message value and Trigger related information in Controller Wizard.
The message is the parameter value to be transmitted when the alert is executed.
Trigger is a task similar to adding events. In the example, the type property value is set to "Action Success" to make Action operate when the onsucess event occurs in the specified Action. For the view property value, select the Form object, not the View component. If you select the Form object only, then the Action list is displayed in the object item.
The condition property is the condition under which Action operates and the condition is set to operate only when the alerttype property value is true in the data search Action.
condition: triggerobj.alerttype == 'true'
Please refer to the link below for the description of the items that can be selected for Trigger type.
Item Information Available for the Trigger Type
Please refer to the link below for the description of the items that can be added as the Trigger condition.
4
The filed information transmitted when the event occurs is not used. Click the [Finish] button without going to the next step to add Action.
You can see that Action has been added to the Invisible Object area.
Changing Data Search Action Property Value
1
Double-click the TestQueryAction00 item in the Invisible Object area.
2
Change the alerttype property value to true.
Executing Screen
1
Click the Quick View button and execute the screen in the browser.
2
Enter any value in the Name field and then click the [Search] button.
Check that the data is searched and the Alert dialog box is displayed.
Adding Only Trigger to Action
Previously, we added the function to search data when the button is clicked. Add the function to search data when Form is loaded as well as when the button is clicked.
Connecting Action
1
Select the Action tab in the Easy UI panel and then select the TestQueryAction item.
2
Drag and drop the selected TestQueryAction item to the Grid component placed in the second View component.
In Adding Data Search Function Using Action, the Controller Wizard was executed immediately, but since the Action object has already been added, you can choose whether to create a new Action object or just add the trigger.
3
Select the [Add Trigger] item from the pop-up menu.
Trigger Item Editor is run instead of Controller Wizard.
4
Configure the added item value as follows.
The Trigger Item Editor can be checked and modified in the menu [Easy UI > Design > Trigger Editor].
Executing Screen
1
Click the Quick View button and execute the screen in the browser.
When the Form onload event occurs, the trigger operates and data is searched. You can see that the data is searched without clicking the button.
The following describes how to create Model, View template, and Action.
Creating Model
Model sets the data that must be processed on the screen. Components can be placed according to the Model field value and data can be represented by binding with the Grid component by registering it as the column of the Dataset object. The Model is not used alone and it is used in connection with the View template. When connecting the Model to the View component, the View template is selected and the content is created according to the logic written in the View template.
Registering Model Service
1
Select the [TypeDefinition> Services] item in Project Explorer.
2
Add the service to the User Service item. Select "model" for the Type item and set the PrefixID.
Displaying Easy UI Panel
To create a new Model, the Easy UI panel must be enabled.
1
Select the menu [Easy UI > View > Easy UI] item.
2
Select the Model tab when the Easy UI panel is displayed.
3
Run the context menu by right-clicking the Model service item and then select the [Add] item to run Model Wizard.
Creating Model in Model Wizard
Select the Model tab in the Easy UI panel and then run Model Wizard. You can also run Model Wizard by selecting the menu [File > New > Model] item without opening the Easy UI panel.
1
Enter Model Name.
The Location item is set to the model service created earlier. When you enter the Model Name value, the Service ID is entered in the same value as Model Name. If you are accessing the external service to receive the data, then you can set the Service URL.
If the model service has not been registered in advance, then you can click the button next to the Location item to run the [Add New Service] window and add the model service.
2
Click the [Next] button and add the property (Field Attribute) information to be added.
You can all so add and set the property by clicking the [+] button or using the [Add User Attribute] function. In the example, the [Add User Attribute] function is used.
3
Click the setting button to run the [Add User Attribute] window and add a new property.
In the example, the property called uselabel is selected and added. Select "Predefined" from the [Target List] item and then check "uselabel" from the [Attribute List] item to move it to [User Attribute List].
4
Click the [Next] button and the [+] button to add the Field List item.
The Field Type value can be modified after adding the item. The Field Type value does not have a function by itself, but rather refers to which component or function to apply to the corresponding field value when configuring the screen in the View template.
5
Click the [Finish] button and create the Model. The created Model can be checked in the Easy UI panel Model tab.
Importing User Attribute List from View Template
1
Click the [+] button when checking the field information and then select the [Add From View Template] item.
2
Select the View Template to import the User Attribute list.
Only the list of View Template for which the fn_GetFieldUserAttributeList function was written is displayed.
3
Check only the User Attribute items to be added to the Attribute List.
You can check detailed information by clicking the button next to the User Attribute item.
4
Check that the selected User Attribute item has been added.
Modifying Model Information
Double-click the model item or select [Edit] from the context menu to move to the edit screen.
Click the [Edit Attribute] button in the edit screen to move to the [Edit Field Attribute] window.
The id, serviceid, serviceurl item values can be edited in the property window.
Creating View Template
Creating View Template in View Template Wizard
When creating a project, two sample View templates are copied to the View template folder as shown below. You can check the script by double-clicking the View template item. In the example, we will create a new View template without using the sample View template.
1
Select the [Add] item in the Easy UI menu to run View Template Wizard. You can also run View Template Wizard by selecting the menu [File > New > View Template] item without opening the Easy UI panel.
2
Enter Name.
3
Select or enter View Type.
There are two types of default provided which are "FreeForm", "GridView", and you can also add other values by directly entering them. The View Type value directly added is displayed as a list when View Template Wizard is executed. Enter the View Type item value as "ViewSample" so that it can be distinguished from the sample.
4
Click the [Finish] button and then create the View template. The created View template can be checked in the Easy UI panel View Template tab.
Editing View Template Script
When you create the View template in View Template Wizard or double-click the View template item in the Easy UI panel, a file called [File Name].xviewgen is opened in the edit window. You can edit the script to implement the desired function.
Basic interface functions are written and the necessary information is provided in comments.
In the View template, you need to create 2 functions. The fn_GetViewAttributeList function is used to check whether additional supported functions are processed, regardless of the Model information. In the example, it asks whether to create the button and creates the button UI according to the user’s choice. The fn_GetViewGenerationResult function returns information to form the screen UI for 3 types of information, including the Model selected by the user in the Nexacro Studio.
The following describes what parameters are received from the fn_GetViewAttributeList function and the fn_GetViewGenerationResult function, as well as what types of values should be returned.
fn_GetViewGenerationResult
This is the function that returns the View contents object created based on the values of parameters (fieldarray, contents, generationattr). The parameters used and values returned by the fn_GetViewGenerationResult function use the JSON-formatted object.
Syntax
fn_GetViewGenerationResult(fieldarray, contents, generationattr)
Parameters
Parameter | Type | Description |
|---|---|---|
fieldarray | Object | Model Field information |
contents | Object | View information |
generationattr | Object | View Generation property information |
Return
Type | Description |
|---|---|
String | Returns the contents-type object excluding referenceinfo as the character string. |
Please refer to fn_GetViewGenerationResult Return Value JSON Format for a detailed description of the return value JSON format.
fieldarray Parameter JSON Format
This is the selected Model information. The default value is the field value when creating the model, and it is transmitted along when Attribute such as "uselabel" is added.
modelinfoserviceid- Model name (Service ID)serviceurl- Service URL
fieldcount- fields countfieldsid- Model Field IDlabeltext- Model Field Labelfieldtype- Model Field Field Typedatatype- Model Field Data Typedatasize- Model Field Data Sizeuselabel- Added Attribute
{
"modelinfo": {
"serviceid": "mdlSample",
"serviceurl": ""
},
"fieldcount": "2",
"fields": [
{
"id": "name",
"label": "Name",
"fieldtype": "FreeText",
"datatype": "STRING",
"datasize": "80",
"uselabel" : "true"
},
{
"id": "company",
"label": "Company",
"fieldtype": "FreeText",
"datatype": "STRING",
"datasize": "80",
"uselabel" : "true"
}
]
}contents Parameter JSON Format
This is the View component information to connect Model. You can place the component based on the actual width and height (referenceinfo) at which the component can be placed, excluding the Border area of the View component. The component is placed in consideration of the actual size and spacing of each component and font size.
If the View component already has the model information connected or if there is another component, then the Model information is added, and if the Dataset object is included, then the Objects information is added. Other information related to the View component is transmitted together.
Viewtag- Tag Name (View)referenceinforealwidth- Width of the View component, excluding the Border arearealheight- Height of the View component, excluding the Border area
attribute- Properties set in the View componentidtabordertextviewdatasetlefttopwidthheight
ModelObjectsBindInitValueScript
{
"View": {
"tag": "View",
"referenceinfo": {
"realwidth": "490",
"realheight": "90"
},
"attribute": {
"id": "View00",
"taborder": "0",
"text": "View00",
"viewdataset": "viewdataset",
"left": "0",
"top": "0",
"width": "500",
"height": "100",
"border":"5px solid darkkhaki"
},
"Model": [],
"Objects": [
{}
],
"Bind": [
{}
],
"InitValue": [
{}
],
"Script": {}
}
}generationattr Parameter JSON Format
This is the ViewAttribute setting information. Each item is the value returned from the fn_GetViewAttributeList function, and the item value is the set value in the View Template Attributes step when connecting Model.
attributes[attribute name]- ViewAttribute Setting Value
{
"attributes": {
"use_triggerbutton": "true"
}
}Return Value JSON Format
This is the View contents value created based on the values of parameters (fieldarray, contents, generationattr) in the View template.
Viewtag- Tag Name (View)attribute- Properties set in the View component (the Contents parameter value if not modified)Model- Sets the component list for each field as an arrayfieldid- When referencing multiple fields, like the Grid component, enter them separated by commas (,), and then enter the empty value for components without field information.Components
InitValueObjectsBindScript
{
"View": {
"tag": "View",
"attribute": {
"id": "View00",
"taborder": "0",
"text": "View00",
"viewdataset": "viewdataset",
"left": "85",
"top": "43",
"width": "437",
"height": "110"
},
"Model": [
{
"fieldid": "name",
"Components": [
{
"tag": "Static",
"attribute": {
"id": "Static0",
"text": "Name",
"left": 0,
"top": 0,
"width": 60,
"height": 20,
"font": "normal bold 15pt/normal"
}
},
{
"tag": "Edit",
"attribute": {
"id": "Edit0",
"left": "Static0:5",
"top": 0,
"width": 100,
"height": 20,
"font": "normal bold 15pt/normal"
}
}
]
},
{
"fieldid": "company",
"Components": [
{
"tag": "Static",
"attribute": {
"id": "Static1",
"text": "Company",
"left": 0,
"top": 30,
"width": 60,
"height": 20,
"font": "normal bold 15pt/normal"
}
},
{
"tag": "Edit",
"attribute": {
"id": "Edit1",
"left": "Static1:5",
"top": 30,
"width": 100,
"height": 20,
"font": "normal bold 15pt/normal"
}
}
]
},
{
"fieldid": "",
"Components": [
{
"tag": "Button",
"attribute": {
"id": "btn_Trigger",
"right": 0,
"top": 0,
"width": 70,
"height": 20,
"text": "Search"
}
}
]
}
],
"Objects": [
{
"tag": "Objects",
"Objects": [
{
"tag": "Dataset",
"attribute": {
"id": "viewdataset"
},
"Dataset": [
{
"tag": "ColumnInfo",
"ColumnInfo": [
{
"tag": "Column",
"attribute": {
"id": "name",
"type": "STRING",
"size": "80"
}
},
{
"tag": "Column",
"attribute": {
"id": "company",
"type": "STRING",
"size": "80"
}
}
]
},
{
"tag": "Rows",
"Rows": [
{
"tag": "Row"
}
]
}
]
}
]
}
],
"Bind": [
{
"tag": "Bind",
"Bind": [
{
"tag": "BindItem",
"attribute": {
"id": "item0",
"compid": "Edit0",
"propid": "value",
"datasetid": "viewdataset",
"columnid": "name"
}
},
{
"tag": "BindItem",
"attribute": {
"id": "item1",
"compid": "Edit1",
"propid": "value",
"datasetid": "viewdataset",
"columnid": "company"
}
}
]
}
]
}
}fn_GetViewAttributeList
This is the function that returns the property information required to create View.
Syntax
fn_GetViewAttributeList()
Return
Type | Description |
|---|---|
String | Returns the View Template Attributes list object as the character string. When returning the null value, the additional property setting is not processed in View Generation Wizard. |
Return Value JSON Format
attributecount- Number of attributesattributesid- Value displayed as the View Template Attributes item in View Generation Wizardedittype- Boolean/String/Number/Enum/ViewObjListdefaultvalue- Default value when edittype is Enumenumlist- Array of values when edittype is Enumdescription- Description displayed when the item is selected in View Generation Wizard
{
"attributecount": 1,
"attributes": [
{
"id": "use_triggerbutton",
"edittype": "Boolean",
"defaultvalue": "true",
"description": "Create a button for data inquiry (true/false)"
}
]
}When the edittype value is "Enum", it can be processed as follows.
{
"attributecount": "1",
"attributes": [
{
"id": "gridtype",
"edittype": "Enum",
"defaultvalue": "Single Line",
"enumlist": [
"Single Line",
"Multi Line"
],
"description": "Specifies the generation type of grid."
}
]fn_GetFieldUserAttributeList
This is the function that returns the User Attributes information to be added as the Model field when creating Model.
The View template that did not define the fn_GetFieldUserAttributeList function is not displayed in the View Template List when adding the Model field.
Syntax
fn_GetFieldUserAttributeList()
Return
Type | Description |
|---|---|
String | Returns the User Attributes list object to be added as the Model field as the character string. When returning the null value, the Attribute List is not displayed. |
Return Value JSON Format
attributecount- Number of attributesattributesid- Value displayed as the User Attributes itemedittype- Boolean/String/Number/Enum/ViewObjListdescription- Description displayed when selecting the Model field item
{
"attributecount": 1,
"attributes": [
{
"id": "editable",
"edittype": "Boolean",
"defaultvalue": "true",
"description": "Sets whether the field data can be edited."
}
]
}View Template Sample
In the example, we create two View templates. viewSampleForm creates the search condition UI according to the Model information or UI that represents detailed information of the item selected in the Grid component. viewSampleGrid represents the Grid component according to the Model information.
In the sample below, Object, Array are used to create the JSON return value format, and you can write the code with only the strings as shown below.
...
var strDataset1 = "{";
strDataset1 += "\"tag\": \"Dataset\",";
strDataset1 += "\"attribute\": {\"id\": \"viewdataset\"},";
strDataset1 += "\"Dataset\": [";
strDataset1 += "{\"tag\": \"ColumnInfo\",";
strDataset1 += "\"ColumnInfo\": [";
...In the sample code, all the codes were added inside the function, but the method of creating a separate function by dividing each object included in the return value and combining the result values may be slightly cleaner.
viewSampleForm
Create the Edit component according to the field information, and if the uselabel additional property is "true", then place the Static component in front of the Edit component. The fn_GetViewAttributeList function returns the item called use_triggerbutton and determines whether to create Button.
Create the Dataset object with the id of viewdataset and then bind it to the Edit component value property.
fn_GetViewGenerationResult = function (fieldarray, contents, generationattr) {
var vResult = "";
var json_contents = JSON.parse(contents);
var json_fieldarray = JSON.parse(fieldarray);
var json_generationattr = JSON.parse(generationattr);
var View = new Object(); // JSON Object
var tempInfo;
var tempPostion;
var ModelArray = new Array();
var ModelInfo;
var ComponentArray;
var ObjectsArray = new Array();
var ObjectArray = new Array();
var DatasetArray = new Array();
var ColumnArray = new Array();
var BindsArray = new Array();
var BindArray = new Array();
for (var i in json_fieldarray.fields) {
ModelInfo = new Object();
ComponentArray = new Array();
ModelInfo.fieldid = json_fieldarray.fields[i].id;
tempInfo = new Object();
tempInfo.tag = "Column";
tempInfo.attribute = new Object();
tempInfo.attribute.id = json_fieldarray.fields[i].id;
tempInfo.attribute.type = json_fieldarray.fields[i].datatype;
tempInfo.attribute.size = json_fieldarray.fields[i].datasize;
ColumnArray.push(tempInfo);
if(json_fieldarray.fields[i].uselabel == "true") {
tempInfo = new Object();
tempInfo.tag = "Static";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "Static"+i;
tempInfo.attribute.text = json_fieldarray.fields[i].label;
tempInfo.attribute.left = 0;
tempInfo.attribute.top = i*30;
tempInfo.attribute.width = 60;
tempInfo.attribute.height = 20;
tempInfo.attribute.font = "normal bold 15pt/normal";
ComponentArray.push(tempInfo);
}
tempInfo = new Object();
tempInfo.tag = "Edit";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "Edit"+i;
tempInfo.attribute.left = "Static"+i+":5";
tempInfo.attribute.top = i*30;
tempInfo.attribute.width = 100;
tempInfo.attribute.height = 20;
tempInfo.attribute.font = "normal bold 15pt/normal";
ComponentArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "BindItem";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "item"+i;
tempInfo.attribute.compid = "Edit"+i;
tempInfo.attribute.propid = "value";
tempInfo.attribute.datasetid = "viewdataset";
tempInfo.attribute.columnid = json_fieldarray.fields[i].id;
BindArray.push(tempInfo);
ModelInfo.Components = ComponentArray;
ModelArray.push(ModelInfo);
}
tempInfo = new Object();
tempInfo.tag = "ColumnInfo";
tempInfo.ColumnInfo = ColumnArray;
DatasetArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Rows";
tempInfo.Rows = new Array();
var RowInfo = new Object();
RowInfo.tag = "Row";
tempInfo.Rows.push(RowInfo);
DatasetArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Dataset";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "viewdataset";
tempInfo.Dataset = DatasetArray;
ObjectArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Objects";
tempInfo.Objects = ObjectArray;
ObjectsArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Bind";
tempInfo.Bind = BindArray;
BindsArray.push(tempInfo);
if(json_generationattr.attributes.use_triggerbutton == "true") {
ModelInfo = new Object();
ComponentArray = new Array();
ModelInfo.fieldid = "";
tempInfo = new Object();
tempInfo.tag = "Button";
var buttonwidth = 70;
tempInfo.attribute = new Object();
tempInfo.attribute.id = "btn_Trigger";
tempInfo.attribute.right = 0;
tempInfo.attribute.top = 0;
tempInfo.attribute.width = buttonwidth;
tempInfo.attribute.height = 20;
tempInfo.attribute.text = "Search"
ComponentArray.push(tempInfo);
ModelInfo.Components = ComponentArray;
ModelArray.push(ModelInfo);
}
tempInfo = new Object();
tempInfo.tag = "View";
tempInfo.attribute = json_contents.View.attribute;
tempInfo.Model = ModelArray;
tempInfo.Objects = ObjectsArray;
tempInfo.Bind = BindsArray;
View.View = tempInfo;
var vResult = JSON.stringify(View);
return vResult;
};
fn_GetViewAttributeList = function () {
var attrArray = new Array();
var attrObj = new Object();
attrObj.id = "use_triggerbutton";
attrObj.edittype = "Boolean";
attrObj.defaultvalue = "true";
attrObj.description = "Create a button for data inquiry (true/false)";
attrArray.push(attrObj);
var attr = new Object();
attr.attributecount = attrArray.length;
attr.attributes = attrArray;
var strJson = JSON.stringify(attr);
trace("RE : "+strJson);
return strJson;
};viewSampleGrid
Create the Grid component and the Dataset object according to the field information and then bind the Dataset object to the Grid component. The fn_GetViewAttributeList function is not used.
fn_GetViewGenerationResult = function (fieldarray, contents, generationattr) {
var vResult = "";
var json_contents = JSON.parse(contents);
var json_fieldarray = JSON.parse(fieldarray);
//var json_generationattr = JSON.parse(generationattr);
var View = new Object(); // JSON Object
var tempInfo;
var ModelArray = new Array();
var ModelInfo = new Object();
ModelInfo.fieldid = "";
var ComponentArray = new Array();
var ObjectsArray = new Array();
var ObjectArray = new Array();
var DatasetArray = new Array();
var ColumnArray = new Array();
var GridColumnsArray = new Array();
var GridRowsArray = new Array();
var GridBandHeadArray = new Array();
var GridBandBodyArray = new Array();
for (var i in json_fieldarray.fields) {
if(ModelInfo.fieldid != "") {
ModelInfo.fieldid += ",";
}
ModelInfo.fieldid += json_fieldarray.fields[i].id;
tempInfo = new Object();
tempInfo.tag = "Column";
tempInfo.attribute = new Object();
tempInfo.attribute.id = json_fieldarray.fields[i].id;
tempInfo.attribute.type = json_fieldarray.fields[i].datatype;
tempInfo.attribute.size = json_fieldarray.fields[i].datasize;
ColumnArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Column";
tempInfo.attribute = new Object();
tempInfo.attribute.size = "80";
GridColumnsArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Cell";
tempInfo.attribute = new Object();
tempInfo.attribute.col = i;
tempInfo.attribute.text = json_fieldarray.fields[i].label;
GridBandHeadArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Cell";
tempInfo.attribute = new Object();
tempInfo.attribute.col = i;
tempInfo.attribute.text = "bind:"+json_fieldarray.fields[i].id;
tempInfo.attribute.edittype = "text";
GridBandBodyArray.push(tempInfo);
}
var GridInfo = new Object();
GridInfo.tag = "Formats";
GridInfo.Formats = new Array();
var formatInfo = new Object();
formatInfo.tag = "Format";
formatInfo.attribute = new Object();
formatInfo.attribute.id = "default";
formatInfo.Format = new Array();
tempInfo = new Object();
tempInfo.tag = "Columns";
tempInfo.Columns = GridColumnsArray;
formatInfo.Format.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Row";
tempInfo.attribute = new Object();
tempInfo.attribute.band = "head";
tempInfo.attribute.size = "24";
GridRowsArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Row";
tempInfo.attribute = new Object();
tempInfo.attribute.size = "24";
GridRowsArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Rows";
tempInfo.Columns = GridRowsArray;
formatInfo.Format.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Band";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "head";
tempInfo.Columns = GridBandHeadArray;
formatInfo.Format.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Band";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "body";
tempInfo.Columns = GridBandBodyArray;
formatInfo.Format.push(tempInfo);
GridInfo.Formats.push(formatInfo);
tempInfo = new Object();
tempInfo.tag = "Grid";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "Grid"+i;
tempInfo.attribute.left = 0;
tempInfo.attribute.top = 0;
tempInfo.attribute.right = 0;
tempInfo.attribute.bottom = 0;
tempInfo.attribute.binddataset = "viewdataset";
tempInfo.Grid = new Array();
tempInfo.Grid.push(GridInfo);
ComponentArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "ColumnInfo";
tempInfo.ColumnInfo = ColumnArray;
DatasetArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Rows";
tempInfo.Rows = new Array();
var RowInfo = new Object();
RowInfo.tag = "Row";
tempInfo.Rows.push(RowInfo);
DatasetArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Dataset";
tempInfo.attribute = new Object();
tempInfo.attribute.id = "viewdataset";
tempInfo.Dataset = DatasetArray;
ObjectArray.push(tempInfo);
tempInfo = new Object();
tempInfo.tag = "Objects";
tempInfo.Objects = ObjectArray;
ObjectsArray.push(tempInfo);
ModelInfo.Components = ComponentArray;
ModelArray.push(ModelInfo);
tempInfo = new Object();
tempInfo.tag = "View";
tempInfo.attribute = json_contents.View.attribute;
tempInfo.Model = ModelArray;
tempInfo.Objects = ObjectsArray;
View.View = tempInfo;
var vResult = JSON.stringify(View);
return vResult;
};
fn_GetViewAttributeList = function () {
return null;
};Creating Action
This step is to set the function that will actually operate on the screen created using the Model and the View template. When a specific event occurs in the object specified as Trigger, the specified action is processed. In the example, when the button is clicked in the search window, the data is displayed in the Grid component. According to the Action property value for data search, the Alert dialog box is displayed if the specific property value is selected when the data search is successful.
Action is created in the form of the user module and is then installed in Nexacro Studio.
You can create the Action module by creating the Invisible Object project in the Nexacro module developer beta.
Creating Action Module Project
1
Run the Nexacro module developer beta.
If you did not create the shortcut when installing Nexacro Studio, then run the "nexacromoduledeveloper17.exe" file in the installation folder.
2
Select the menu [File > New > Project] to run Project Wizard.
3
Select Invisible Object from the Module item.
4
Enter Project Name and click the [Next] button.
5
Enter Object ID. Object ID is set to the Action object name.
In the example, "TestQueryAction" is entered as Object ID. ClassName is automatically populated when Object ID is entered.
6
Click the [Finish] button.
The project is created. Detailed option settings are not set in this example. The detailed properties of the object can be set at any time after project creation.
Adding Action Object
When creating the project, one default object is created and the object to deploy in the same module must be added.
1
Select the menu [File > New > Invisible Object] to run Invisible Object Wizard.
2
Enter Object ID.
The name of the Action object to add is "TestAlertAction".
3
Click the [Finish] button.
Editing Action Object Property
1
Select the TestQueryAction object MetaInfo item in Project Explorer and then modify the following property value in the property window.
subgroup: Action registration: allow contents: true
2
Set the contents property value to true and then open the [ContentsInfo Editor] setting window to change the "Contents Format" property value to "json".
In versions later than 17.1.2.300, the contents property value is set to true when creating the Action object.
Please refer to it only in earlier versions.
3
Select the TestAlertAction object MetaInfo item in Project Explorer and then modify the property value with the same value.
Editing Action Object Script
1
Double-click the Action object script file to be edited in Project Explorer or select the [Edit] item from the context menu.
2
Modify the script file according to the Action object.
The Action script inherits and implements nexacro.Action. The basic structure is as follows and the run function is executed when the event occurs. The necessary information is collected and processed within the run function.
The information needed in the script can be accessed using the Action object property and method.
(function(nexacro) {
"use strict";
if (!nexacro)
return;
if (nexacro.TestQueryAction)
return nexacro.TestQueryAction;
var TestQueryAction = function(id, parent)
{
nexacro.Action.call(this, id, parent);
};
var _pTestQueryAction = nexacro._createPrototype(nexacro.Action, TestQueryAction);
TestQueryAction.prototype = _pTestQueryAction;
_pTestQueryAction._type_name = "TestQueryAction";
_pTestQueryAction.uservalue = null;
_pTestQueryAction.destroy = function ()
{
nexacro.Action.prototype.destroy.call(this);
this.uservalue = null;
};
_pTestQueryAction.set_uservalue = function (v)
{
if (v && this.uservalue!== v)
{
this.uservalue= v;
}
};
_pTestQueryAction.run = function ()
{
};
nexacro.TestQueryAction = TestQueryAction;
return TestQueryAction;
}) (nexacro);The script used for TestQueryAction, TestAlertAction is as follows.
TestQueryAction Script
When the trigger occurs (when the button is clicked) the run function is called. By calling the _getArgumentList function, the sum of the Contents information transmitted as the parameter and the column value saved in the viewdataset object are returned, and after checking the XML file for data loading with the value entered in samplefilename, the transaction method is executed. In the example, since the XML file is called directly, the value transmitted to the parameter is output using the trace method and not used.
$r_title(TestQueryAction.js)
(function(nexacro) {
"use strict";
if (!nexacro)
return;
if (nexacro.TestQueryAction)
return nexacro.TestQueryAction;
var TestQueryAction = function(id, parent)
{
nexacro.Action.call(this, id, parent);
};
var _pTestQueryAction = nexacro._createPrototype(nexacro.Action, TestQueryAction);
TestQueryAction.prototype = _pTestQueryAction;
_pTestQueryAction._type_name = "TestQueryAction";
_pTestQueryAction.samplefilename = ""; // XML file name
_pTestQueryAction.alerttype = false; // TestAlertAction condition
_pTestQueryAction.targetobj = null;
_pTestQueryAction.destroy = function ()
{
nexacro.Action.prototype.destroy.call(this);
this.samplefilename = null;
this.alerttype = null;
this.targetobj = null;
};
_pTestQueryAction.set_samplefilename = function (v)
{
if (v && this.samplefilename !== v)
{
this.samplefilename = v;
}
};
_pTestQueryAction.set_alerttype = function (v)
{
if (v && this.alerttype !== v)
{
this.alerttype = v;
}
};
_pTestQueryAction.set_targetobj = function (v)
{
if (v && this.targetobj !== v)
{
this.targetobj = v;
}
};
_pTestQueryAction._getArgumentList = function (strType)
{
var argumentlist = this.getContents(strType);
if (!argumentlist) {
return;
}
if(strType == "model")
{
for (var i = 0; i < argumentlist.length; i++)
{
var tempDataset = this.parent.lookup(argumentlist[i].viewid).getViewDataset();
argumentlist[i].value = tempDataset.getColumn(tempDataset.rowposition, argumentlist[i].fieldid);
}
}
return argumentlist;
};
_pTestQueryAction.run = function ()
{
var targetview = this.getTargetView();
var viewdataset = targetview.viewdataset;
var argumentlist = "";
var modellist = this._getArgumentList ("model");
var extralist = this._getArgumentList ("extra");
var outdataset = viewdataset + "=ds_" + viewdataset;
var callbackfn = "fn_callback";
if (modellist)
{
for (var i = 0; modellist.length > i; i++)
{
if (modellist[i].value)
{
argumentlist += modellist[i].name + "=" + modellist[i].value;
argumentlist += " ";
}
}
}
if (extralist)
{
for (var i = 0; extralist.length > i; i++)
{
if (extralist[i].value)
{
argumentlist += extralist[i].name + "=" + extralist[i].value;
argumentlist += " ";
}
}
}
// transaction callback function (onsuccess, onerror event)
var targetaction = this;
targetview.form[callbackfn] = function (strSvcID, nErrorCode, strErrorMag)
{
if (nErrorCode >= 0)
{
targetaction.error = "callback-success";
targetaction.on_fire_onsuccess();
}
else
{
targetaction.error = "callback-error";
targetaction.on_fire_onerror();
}
}
argumentlist += "dsname=" + viewdataset + " ";
argumentlist.trim();
var serviceurl = "Sample::"+this.samplefilename+".xml";
trace("argumentlist: "+argumentlist);
trace("outdataset: "+outdataset);
trace("serviceurl: "+serviceurl);
targetview.form.transaction("TEST", serviceurl, "", outdataset, argumentlist, callbackfn);
};
nexacro.TestQueryAction = TestQueryAction;
return TestQueryAction;
}) (nexacro);TestAlertAction Script
In the TestAlertAction script, the message property value is included as the alert method parameter and is then executed when the run function is executed.
$r_title(TestAlertAction.js)
(function(nexacro) {
"use strict";
if (!nexacro)
return;
if (nexacro.TestAlertAction)
return nexacro.TestAlertAction;
var TestAlertAction = function(id, parent)
{
nexacro.Action.call(this, id, parent);
};
var _pTestAlertAction = nexacro._createPrototype(nexacro.Action, TestAlertAction);
TestAlertAction.prototype = _pTestAlertAction;
_pTestAlertAction._type_name = "TestAlertAction";
_pTestAlertAction.message = "";
_pTestAlertAction.destroy = function ()
{
nexacro.Action.prototype.destroy.call(this);
this.message = null;
};
_pTestAlertAction.set_message = function (v)
{
this.message = v;
};
_pTestAlertAction.run = function ()
{
alert(this.message);
};
nexacro.TestAlertAction = TestAlertAction;
return TestAlertAction;
}) (nexacro);Editing Action Object Meta-Info Property
To deploy and use Action as the module, the meta-info file must be created.
1
Double-click the Action object MetaInfo item to be edited in Project Explorer or select the [Edit] item from the context menu.
2
Modify the details of the targetview property.
The parent, targetview properties are the default properties of nexacro.Action and are displayed as default values in meta-info when creating the Action object. Select the targetview item and then modify the information in the property window.
Group: Action Edit Type: ViewObjList
3
Click the [+] button in the [Property] tab to add the property of the Action object.
When editing the Action script, if you use the Add menu to add the property, then the information is also added to meta-info, but if you directly edit the script, then you need to add it to the meta-info information.
For the TestQueryAction object, add three properties as shown below.
Name: targetobj Group: Action Edit Type: ViewChildObjList Name: samplefilename Group: Misc. Edit Type: String Name: alerttype Group: Misc. Edit Type: Boolean Default Value: false
For the TestAlertAction object, add one property as shown below.
Name: message Group: Misc. Edit Type: String
The targetview property is not used in the TestAlertAction object. Select the property and then change the Unused item to true.
The contents set in the meta-info file are processed as follows in Controller Wizard when connecting Action.
group
You can specify the group name shown in Controller Wizard. This is auxiliary information that is provided so that the user can easily recognize the property.
edittype
In the ObjectInfo tag, set edittype to "action".
<ObjectInfo ... edittype="action" ...
You can set the user input type by specifying edittype when setting each property. The function to select from the list without entering the value as the text is also supported. The types of edittype that can be used in Action are as follows.
edittype | Description |
|---|---|
String | Enters character strings. |
Number | Enters numbers. |
Boolean | Selects true, false values. |
ModelServiceID | Provides the Model list. |
ViewObjList | Provides the list of the View components that can be used in the current Form. Setting the refreshinfo item together will affect sub-items when the selected list is changed. |
ViewChildObjList | Provides the list of components or objects contained in the View component selected in ViewObjList. |
Adding & Applying Action Object Meta-Info RefreshInfo
If two properties are connected to each other, causing the other property value to be changed when one property is changed, then it can be registered and managed as the RefreshInfo information. In the example, when the targetview property value is changed, the targetobj list is changed.
1
With the targetview property selected among the TestQueryAction properties, select the Refresh Properties item, click the [+] button, and then select the [New] item.
2
When the [Add Refresh Information] window opens, enter the ID as "targetview", and then select "targetobj" in the Refresh Item below to add it.
Refresh Item can be selected from the properties of the Action object.
The added item can be checked in the Refresh tab of the Edit Common Information window by clicking the edit icon on the right side of the TestQueryAction meta-info edit window.
Creating Action Module File
1
Select [Deploy > Module Package] from the menu.
2
Check the path to create the module file and then click the [Next] button.
Enter information such as the Version as necessary.
3
Select the target item to be included in the module.
4
Click the [Deploy] button to create the xmodule file.
References
Action Object Properties, Methods, & Events
Properties
Property Name | Description |
|---|---|
targetview | This is the property that sets the View component to perform Action. |
Methods
Method Name | Description |
|---|---|
getContents | Returns the contents object transmitted when Action is executed or the value object corresponding to the key.
- If the strKey parameter is not set, then the contents object is returned. - The strKey parameter can be set to either "model" or "extra". |
getTargetView | Returns the View component corresponding to the targetview property value.
|
run | Executes Action.
|
Events
Event Name | Description |
|---|---|
onsuccess | This is the event for processing Trigger callback when the run method execution is successful.
|
onerror | This is the event for processing Trigger callback when the run method execution fails.
|
Item Information Available for the Trigger Type
In the example, the "click" item was selected so that the trigger is enabled when Button is clicked. Selecting the "click" item is similar to writing the onclick event function of the Button component. The list below shows the trigger types that can be used.
type | event | Description |
|---|---|---|
Click | onclick | Occurs when the target object (component) mouse is clicked. |
Row Change | onrowposchanged | Occurs when the rowposition of the viewdataset object of the target View component is changed. When selecting the View component, the Object item is automatically selected and cannot be changed. |
Value Change | oncolumnchanged | Occurs when the column value of the viewdataset object of the target View component is changed. When selecting the View component, the Object item is automatically selected and cannot be changed. |
Action Success | onsuccess | Occurs when the execution of the selected Action object is successful. The View item selects the Form object and the Object item selects the Action object. |
Action Fail | onerror | Occurs when the execution of the selected Action object fails. The View item selects the Form object and the Object item selects the Action object. |
Model Load Success | onmodelloadsuccess | Occurs when loading data of the viewdataset object of the target View component. When selecting the View component, the Object item is automatically selected and cannot be changed. |
Model Load Fail | onmodelloadfail | Occurs when loading data of the viewdataset object of the target View component fails (also occurs when there is no data). When selecting the View component, the Object item is automatically selected and cannot be changed. |
Form init | onload | Occurs when loading the Form object. |
External Input | onextendedcommand | Occurs when the event is transmitted from the device defined in DeviceAdaptors. |
Trigger Condition Reserved Words & Samples
You can set the Trigger occurring condition when Action is connected. The reserved words that can be used are as follows.
Reserved Word | Description |
|---|---|
triggerview | This is the object set as triggerview of the Trigger item when setting Action. |
triggerobj | This is the object set as triggerobj of the Trigger item when setting Action. |
form | This is the parent Form object that contains Trigger. |
It can be applied in the following manner.
triggerview.name=='view_search' && triggerobj.name == 'btn_Trigger00_00' && form.name == 'sample_MasterDetail_V'
A certain property of triggerobj can be applied as the condition. For example, if Type is "Action Success", then the triggerobj is Action. When the corresponding Action is processed, whether or not to process the next Action according to the property value can be determined.
triggerobj.alerttype == 'true'
fn_GetViewGenerationResult Return Value JSON Format
The contents parameter transmitted when calling the fn_GetViewGenerationResult function or the value returned after calling the function is processed in JSON format as shown below. The contents parameter converts the XML code of the current screen to JSON and then transmits it, and the JSON code returned after calling the function is converted to the XML code in Nexacro Studio to be reflected on the screen.
The contents parameter is converted inside Nexacro Studio, but the JSON code to be returned must be written within the fn_GetViewGenerationResult function according to the format.
Basic Format
The returned JSON code configures the screen within the View component and then sets the Dataset object, binding item information, and script. The basic format is as follows.
XML | JSON |
|---|---|
<View> <Layouts> <Layout/> </Layouts> <InitValue/> <Objects/> <Bind/> <Script/> </View> | {
"View": {
"Model": [
{
"fieldid": "",
"Components": [
{}
]
}
],
"InitValue": [
{}
],
"Objects": [
{}
],
"Bind": [
{}
],
"Script": {
}
}
} |
You can exclude items that are not in use. For example, if the structure has only one Dataset object, then the JSON code can be processed as follows.
{
"View": {
"Objects":[
{}
]
}
}View Template only supports the Default layout.
If the View Template is used in the Form to which the layout has been added, then the fn_GetViewGenerationResult function may not be able to process the information.
In the XML file created after calling the fn_GetViewGenerationResult function, tags such as ModelInfo and ViewTemplateInfo are additionally created. The area is the code that manages the information related to the connected Model, View Template, and if it is arbitrarily modified, then the previous setting information may not be imported when the screen UI is created with the Model and View template.
Conversion Rules
What the fn_GetViewGenerationResult return value JSON code needs to create is the XML tag to be used in Nexacro Studio. Write the JSON code that is connected to each tag according to the rules below.
Configure under the component Model property placed in the top-level View component.
One tag is configured with one JSON object.
Child tags are configured with the same JSON array as the Tag name of the parent tag.
Configure under the component Model property placed in the top-level View component.
Components placed in the View component have the connected fieldid information. Therefore, they have the fieldid property and the Components property under the Model property, and the actual component is configured under the Components property.
If there is no fielded connected to the component, then the Model property has only one JSON object and lists the components under the Components property. If there are two or more connected fieldids, then the related information is created under ModelInfo when creating XML with JSON objects with as many as the number of fielded as shown below.
XML | JSON |
|---|---|
<View> <Layouts> <Layout> <Button id="Btn01"/> <Button id="Btn02"/> </Layouts> <ModelInfo> <Components> <Component id="Btn01" fieldid="ID"/> <Component id="Btn02" fieldid="DATA"/> </Components> </ModelInfo> </View> | {
"View": {
"Model": [
{
"fieldid": "ID",
"Components": [
{
"tag": "Button",
"attribute": {
"id": "Btn01"
}
}
]
},
{
"fieldid": "DATA",
"Components": [
{
"tag": "Button",
"attribute": {
"id": "Btn02"
}
} ]
} ]
}
} |
One tag is configured with one JSON object.
The tag name is processed as the tag property of the JSON object and the tag property is processed as the attribute property.
<Tag Name Property1="Property 1 Value" Property 2="Property 2 Value "Property 3="Property 3 Value"/>
{
"tag": " Tag Name ",
"attribute": {
"Property1": "Property1 Value",
"Property2": "Property2 Value",
"Property3": "Property3 Value"
}
}As shown below, one tag is processed as one JSON object, regardless of the component or object.
XML | JSON |
|---|---|
<Dataset id="Dataset00"/>
| {
"tag":"Dataset",
"attribute":{
"id":"Dataset00"
}
} |
<Button id="Button00" taborder="0" text="Button00" left="209" top="12" width="90" height="30" onclick="View00_Button00_onclick"/> |
{
"tag": "Button",
"attribute": {
"id": "Button00",
"taborder": "0",
"text": "Button00",
"left": "209",
"top": "12",
"width": "90",
"height": "30",
"onclick": "View00_Button00_onclick"
}
} |
<BindItem id="item0" compid="Button00" propid="text" datasetid="Dataset00" columnid="Column0"/> |
{
"tag": "BindItem",
"attribute": {
"id": "item0",
"compid": "Button00",
"propid": "text",
"datasetid": "Dataset00",
"columnid": "Column0"
}
} |
Child tags are configured with the same JSON array as the Tag name of the parent tag.
In the case of the container component including the child component, it has the same name as the component name at the same level as the tag and the attribute properties, and the property value is processed as the JSON array.
Even if it is not the container component, then it is processed in the same manner when it has the child tag structure like the Grid component.
<Parent Tag Name>
<Child Tag Name Property 1="Property1 Value" Property2="Property2 Value" Property3="Property3 Value"/>
</Parent Tag Name>{
"tag": "Parent Tag Name",
"attribute": {
},
"Parent Tag Name": [
{
"tag": "Child Tag Name",
"attribute": {
"Property1": "Property1 Value",
"Property2": "Property2 Value",
"Property3": "Property3 Value"
}
}
}In the example code below, some properties of the component have been excluded to help you understand more clearly.
XML | JSON |
|---|---|
<Div id="Div00" text="Div00"> <Layouts> <Layout> <Button id="Button00" text="Button00"/> </Layout> </Layouts> </Div> | {
"tag": "Div",
"attribute": {
"id": "Div00"
},
"Div": [
{
"Components": [
{
"tag": "Button",
"attribute": {
"id": "Button00",
"text": "Button00"
}
}
]
}
]
}
|
<Bind> <BindItem id="item0" compid="Button00" propid="text" datasetid="Dataset00" columnid="Column0"/> <BindItem id="item1" compid="Button01" propid="text" datasetid="Dataset00" columnid="Column0"/> </Bind> |
{
"tag": "Bind",
"Bind": [
{
"tag": "BindItem",
"attribute": {
"id": "item0",
"compid": "Button00",
"propid": "text",
"datasetid": "Dataset00",
"columnid": "Column0"
}
},
{
"tag": "BindItem",
"attribute": {
"id": "item1",
"compid": "Button01",
"propid": "text",
"datasetid": "Dataset00",
"columnid": "Column0"
}
}
]
}
|
<Dataset id="Dataset00"> <ColumnInfo> <Column id="Column0" type="STRING" size="256"/> </ColumnInfo> <Rows> <Row/> </Rows> </Dataset> |
{
"tag": "Dataset",
"attribute": {
"id": "Dataset00"
},
"Dataset": [
{
"tag": "ColumnInfo",
"ColumnInfo": [
{
"tag": "Column",
"attribute": {
"id": "Column0",
"type": "STRING",
"size": "256"
}
}
]
},
{
"tag": "Rows",
"Rows": [
{
"tag": "Row"
}
]
}
]
}
|
In the case of the Grid component, a few steps of child tags are included to specify the format to be displayed on the screen.
XML | JSON |
|---|---|
<Grid id="Grid00" binddataset="Dataset00"> <Formats> <Format id="default"> <Columns> <Column size="80"/> </Columns> <Rows> <Row size="24" band="head"/> <Row size="24"/> </Rows> <Band id="head"> <Cell text="Column0"/> </Band> <Band id="body"> <Cell text="bind:Column0"/> </Band> </Format> </Formats> </Grid> | {
"tag": "Grid",
"attribute": {
"id": "Grid00",
"binddataset": "Dataset01"
},
"Grid": [
{
"tag": "Formats",
"Formats": [
{
"tag": "Format",
"attribute": {
"id": "default"
},
"Format": [
{
"tag": "Columns",
"Columns": [
{
"tag": "Column",
"attribute": {
"size": "80"
}
}
]
},
{
"tag": "Rows",
"Rows": [
{
"tag": "Row",
"attribute": {
"size": "24",
"band": "head"
}
},
{
"tag": "Row",
"attribute": {
"size": "24"
}
}
]
},
{
"tag": "Band",
"attribute": {
"id": "head"
},
"Band": [
{
"tag": "Cell",
"attribute": {
"text": "Column0"
}
}
]
},
{
"tag": "Band",
"attribute": {
"id": "body"
},
"Band": [
{
"tag": "Cell",
"attribute": {
"text": "bind:Column0"
}
}
]
}
]
}
]
}
]
}
|
As the Grid component has child tags in several steps, the JSON code may look complicated, but the conversion rules are the same. If the Grid component in the above table is separated by tag, then it is as follows.
XML | JSON |
|---|---|
<Grid id="Grid00" binddataset="Dataset00"> <Formats> </Formats> </Grid> | {
"tag": "Grid",
"attribute": {
"id": "Grid00",
"binddataset": "Dataset01"
},
"Grid": [
{
"tag": "Formats"
}
]
} |
<Formats>
<Format id="default">
</Format>
</Formats> | {
"tag": "Formats",
"Formats": [
{
"tag": "Format"
}
]
} |
<Format id="default"> <Columns> </Columns> <Rows> </Rows> <Band id="head"> </Band> </Format> | {
"tag": "Format",
"attribute": {
"id": "default"
},
"Format": [
{
"tag": "Columns"
},
{
"tag": "Rows"
},
{
"tag": "Band",
"attribute": {
"id": "head"
}
}
]
} |
<Columns>
<Column size="80"/>
</Columns> | {
"tag": "Columns",
"Columns": [
{
"tag": "Column",
"attribute": {
"size": "80"
}
}
]
} |
You can also create and use the function that creates the JSON object or the array of JSON objects for each tag unit as shown below. For areas that need to be processed based on field information, such as the Grid or Dataset object, the code readability can be improved by transmitting the field information to a separate function.
{
"tag": "Dataset",
"attribute": { "id": "viewdataset" },
"Dataset": [
{
"tag": "ColumnInfo",
"ColumnInfo": fn_GetDsColumns(oFieldArray)
},
{
"tag": "Rows",
"Rows": fn_GetDsRows(oFieldArray)
}
]
}Conversion Rule Exception (Container Component)
View Template only supports the Default layout. Therefore, the container component supports one property called Components instead of the Layouts, Layout tags.
XML | JSON |
|---|---|
<Div id="Div00" text="Div00"> <Layouts> <Layout> <Button id="Button00" text="Button00"/> </Layout> </Layouts> </Div> | {
"tag": "Div",
"attribute": {
"id": "Div00"
},
"Div": [
{
"Components": [
{
"tag": "Button",
"attribute": {
"id": "Button00",
"text": "Button00"
}
}
]
}
]
}
|
You can also follow the basic conversion rules of configuring one tag as one JSON object, as shown below. Instead of Components property, use Layouts and Layout properties.
XML | JSON |
|---|---|
<Div id="Div00" text="Div00"> <Layouts> <Layout> <Button id="Button00" text="Button00"/> </Layout> </Layouts> </Div> | {
"tag": "Div",
"attribute": {
"id": "Div00"
},
"Div": [
{
"tag": "Layouts",
"Layouts": [
{
"tag": "Layout",
"Layout": [
{
"tag": "Button",
"attribute": {
"id": "Button00",
"text": "Button00"
}
}
]
}
]
}
]
}
|
Processing Event
The event can be processed through Action, but it can also be processed by adding the Script tag to the return value. In this case, you need to configure to call the script included in the View component.
When processing the event in Nexacro Studio, it is differentiated from being registered in the Form script in that it is processed as the innerform script of the View component. Therefore, when writing the onclick event, you need to access the ID of the corresponding View component.
"Event Name": {View Component ID}.form.{Event Function Name}"onclick": "View00.form.btnAdd_onclick"{
"View":{
"tag":"View",
"attribute":{
"id": "View00"
},
"Model": [
{
"fieldid": "",
"Components": [
{
"tag": "Button",
"attribute": {
"id": "Button00",
"text": "Button00",
"onclick": "View00.form.btnAdd_onclick"
}
}
]
}
],
"Script": {
"tag": "Script",
"attribute": {
"type": "xscript5.1"
},
"value": "this.btnAdd_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo) {}"
}