간단한 ViewSet 템플릿, View 템플릿, Model, Action을 가지고 화면을 구성하는 방법을 살펴봅니다.
용어 설명
QuickCode에서 사용하는 용어입니다.
용어 | 필수 여부 | 설명 |
|---|---|---|
ViewSet 템플릿 | X | Form 템플릿의 일종입니다. View 컴포넌트가 포함된 Form 템플릿을 ViewSet 템플릿이라고 합니다. 템플릿은 화면 1개만 만드는 용도가 아니라 같은 레이아웃을 가지는 화면을 빠르게 만드는 용도로 사용합니다. ViewSet 템플릿을 적용하기 어려운 개별 화면은 ViewSet 템플릿을 사용하지 않고 직접 Form 오브젝트에 View 컴포넌트를 배치해 만들 수 있습니다. |
View 템플릿 | O | View 컴포넌트 내에 다른 컴포넌트를 자동으로 생성해주는 템플릿(규칙)입니다. View 템플릿만 독립적으로 사용할 수는 없고 Model 선택 후 View 템플릿을 선택하면 Model 정보에 따라 적절한 컴포넌트가 View 컴포넌트 내에 자동으로 배치합니다. 이름은 템플릿이지만 주로 Model 정보와 View 템플릿에 작성된 코드에 따라 화면이 동적으로 다르게 만들어집니다. |
Model | O | 화면에서 다룰 데이터 정보를 설정합니다. Model에서 설정한 label, fieldtype 등의 정보에 따라 View 템플릿에서 적절한 컴포넌트를 View 컴포넌트 내에 배치합니다. |
Action | X | 화면 로딩, 사용자 입력, 데이터 통신 등의 이벤트를 처리합니다. View 컴포넌트 내에 화면 배치 후 Form 오브젝트 또는 생성된 컴포넌트, 오브젝트에 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 새로운 프로젝트 만들고 시작하기 step and proceed from the Importing ViewSet Template File step.
21.0.0.1700 이후 버전부터 QuickCode에서 viewdataset 속성을 처리하는 방식이 변경됐습니다.
아래 문서 설명과 첨부 파일은 21.0.0.1700 이후 버전에서만 정상적으로 동작합니다.
새로운 프로젝트 만들고 시작하기
xpackage 파일로 한 번에 필요한 항목 가져와서 시작하기
xpackage 파일은 프로젝트에서 필요한 리소스를 공유할 수 있게 만든 파일입니다. QuickCode 실습을 위한 xpackage 파일을 사용하면 아래 작업을 한 번에 처리할 수 있습니다.
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.
아래 링크에서 xmodel 파일을 내려받을 수 있습니다.
Please refer to the link below for creating xpackage.
2
프로젝트를 생성합니다.
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.
필요한 항목 각각 가져와서 시작하기
xpackage 파일을 사용하지 않고 필요한 파일을 각각 가져와서 처리합니다.
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.
Model(mdlSample_Search)을 마우스로 드래그해서 View 컴포넌트 위로 이동하면 검은색으로 View 컴포넌트의 영역을 표시해줍니다.
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
QuickCode 패널에서 Model(mdlSample_Detail)을 선택하고 두 번째 View 컴포넌트에 끌어다 놓습니다.
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
QuickCode 패널에서 Model(mdlSample_Detail)을 선택하고 세 번째 View 컴포넌트에 끌어다 놓습니다
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.
Grid UI와 상세 정보 UI는 같은 Model을 선택해서 생성했기 때문에 Dataset 오브젝트를 추가로 만들지 않고 같은 Dataset 오브젝트를 사용합니다.
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.