Let's see how to configure a screen using a simple ViewSet template, View template, Model, and Action.
Term Definition
This is the term used by QuickCode.
Term | Necessity | Definition |
|---|---|---|
ViewSet Template | X | This is a type of Form template A Form template that includes a View component is called a ViewSet template. Templates are not used to create just one screen, but to quickly create multiple screens with the same layout. Individual screens where it is difficult to apply the ViewSet template can be created by placing the View component directly on the Form object instead of using the ViewSet template. |
View Template | O | This template automatically creates other components within the View component. The View template cannot be used independently. Select the View template after selecting the Model, and the appropriate component is automatically placed within the View component according to the Model information. Although the term ‘template’ is used, the screen is created dynamically differently depending on the Model information and the code within the View template. |
Model | O | Sets the data information to be handled on the screen. The View template places appropriate components within the View component according to Model information such as label and fieldtype. |
Action | X | Events such as screen loading, user input, and data communication are handled. After placing the screen within the View component, an event is set by connecting Action to the Form object or the created component or object. |
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 Creating and starting a new project step and proceed from the Importing ViewSet Template File step.
In versions 24.0.0.300 and later, the way QuickCode handles the viewdataset property has been changed.
The following document description and attached files only work properly in versions 24.0.0.300 and later.
Creating and starting a new project
Start by importing all the necessary items in an xpackage file
The xpackage file is created to share necessary resources between projects. By using the xpackage file for QuickCode labs, you can handle the following tasks in one step.
Adding service and creating the folder (SvcModelSample, Sample)
Importing model (ModelService.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 QuickCode panel
1
Download the xpackage file from the link below.
The xpackage file can be downloaded from the link below
Please refer to the link below for creating xpackage.
2
Create a project.
3
Select the menu [File > Import] and run the Import Wizard.
4
Select and enter the downloaded xpackage file in Package File.
5
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.
6
Select the TypeDefinition > Objects item in Project Explorer and then add the nexacro.View component.
7
If the QuickCode panel is not displayed, then select the menu [QuickCode > View > QuickCode] and display the QuickCode panel.
INCLUDE_ERROR(ELEMENT_REMOVED)
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 QuickCode panel and then check if the installed Action module is registered.
INCLUDE_ERROR(ELEMENT_REMOVED)
13
Continue proceeding with the task of Creating New Form.
Start by importing each of the necessary items separately
Imports each of the necessary items separately instead of using a xpackage file.
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 QuickCode panel is not displayed, then select the menu [QuickCode > View > QuickCode] and display the QuickCode panel.
4
Prepare the Model file (ModelService.xmodel).
You can download the xmodel file from the link below.
Please refer to the link below for creating Model.
5
Select the Model tab in the QuickCode panel and then select the "Import" item from the context menu.
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 QuickCode 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 > QuickCode].
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 QuickCode 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 > QuickCode > 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 QuickCode panel and then drag and drop it on the first View component.
Drag the Model (mdlSample_Search) over the View component and the area of the View component is displayed in black.
2
Select the field to use.
Use only the name field. Uncheck the company field.
3
Click the [Next] button and select viewSampleForm from the View Template List.
If you select View Template, you can check the UI image to be created in the Preview area on the right.
4
Click the [Next] button and check the field data.
You can modify fieldtype and datatype values, or set User Attribute provided by fn_GetFieldUserAttributeList in View Template.
5
Click the [Next] button and select true for the use_triggerbutton item.
6
Click the [Finish] button to create the screen.
7
Check the created View component information in the QuickCode Design Mode.
QuickCode Design Mode is activated by selecting [QuickCode > Design > QuickCode Design Mode] from the menu or selecting QuickCode Design Mode from the toolbar. The View Information panel is displayed on the right side of the Form screen and displays information about each View object.
Creating Grid UI
1
Select Model (mdlSample_Detail) from the QuickCode panel and drag it onto the second View component.
2
Select the field to use.
Keep both fields checked.
3
Click the [Next] button and select viewSampleGrid from the View Template List.
4
Click the [Next] button and check the field data.
5
Click the [Finish] button to create the screen.
Creating Detailed Information UI
1
Select Model (mdlSample_Detail) from the QuickCode panel and drag it onto the third View component.
2
Select the field to use.
Keep both fields checked.
3
Click the [Next] button and select viewSampleForm from the View Template List.
4
Click the [Next] button and check the field data.
5
Click the [Next] button and select the value false for the use_triggerbutton item.
6
Click the [Finish] button to create the screen.
Since the Grid UI and detailed information UI were created by selecting the same Model, they use the same Dataset object and an additional Dataset object is not created.
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 QuickCode panel and select the TestQueryAction item.
2
Drag and drop the selected TestQueryAction item onto the 'Search' Button component placed in the first View component.
3
When the context menu appears, select the 'Click' item.
4
Check the trigger type and target and click the [OK] button.
Clicking the Button component with the btn_Trigger id placed in View00 causes a trigger event to occur.
5
Enter action information and other related information to be processed when a trigger event occurs in the Controller Wizard.
Property | value | Description |
|---|---|---|
targetview | View01 | View component with Grid component placed on it |
samplefilename | sample | XML file name to query information |
alerttype | false | Properties to be passed to the action to be processed after data retrieval |
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.
6
Click the [Next] button and check the field information to be passed when a trigger event occurs.
7
Click the [Next] button and add User defined (extra) arguments.
In the example, the transmitted value is only displayed with the trace method.
8
Click the [Finish] button.
You can see that the Action has been added to the Invisible Object area.
If you select the button of the first View component in QuickCode Design mode, you can check the controller information added to the Controller Preview panel.
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_TEST_mdlSample_Detail">
<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 QuickCode panel and then select the TestAlertAction item.
2
Drag the selected TestAlertAction item onto the TestQueryAction00 item in the Invisible Object.
3
When the context menu appears, select the 'Action Success' item.
4
Check the trigger type and target, enter condition property values, and click the [OK] button.
The condition property is the condition under which the action operates. In the data search action, the condition is set to operate only when the alerttype property value is true.
triggerobj.alerttype == 'true'
5
Enter the message value in Controller Wizard.
The message is the parameter value to be transmitted when the alert is executed.
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.
6
Field information passed when an event occurs is not used. After clicking the [Next] button, without moving to the next step, click the [Finish] button to add an 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 [QuickCode > Design > Controller Chain Editor] from the menu.
2
Click the "Add Controller" button among the function buttons on the right side of the Controller Chain Editor.
3
Among the sub-items, select the "New Controller" item.
The "Add Next Controller" item becomes active when a controller is selected in the Controller Chain Editor.
4
Select Form from Trigger View, Trigger Object list.
5
With the controller selected, launch the context menu and select the "Add Next Controller" item.
6
Select "Form Init" for Trigger Type and "TestQueryAction00" for Target Action, and click the [OK] button.
Confirm that a new Controller has been added.
7
Click the "Show Perview" button among the function buttons on the right side of the Controller Chain Editor.
You can check the operation of all registered controllers in advance.
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.