Data Binding
You can connect the data of the Dataset object to the component to display text or set the property value of the component. Then, the value edited in the component is reflected as the data of the Dataset object. Connecting data to components is called data binding. Like the Grid component, you can connect all data of the Dataset object, or you can connect only the specific column data corresponding to the selected Row as with the Edit component.
Configuring Data Binding
Data can be bound by dragging and dropping the Dataset object created when designing the form onto the component or by selecting the binding-related property in the property window.
When the Dataset object is dragged and dropped onto a component, the format property value setting, Bind InnerDataset, or Bind Item Editor function is called according to the component type. You can specify the properties and column information to be connected in each setting window.
formats Property Value Setting
Components with binddataset, formats properties like Grid, ListView components automatically set the formats property value according to the Dataset object when dragging and dropping the Dataset object or setting the binddataset property value in the property window.
The formats property value can be modified in the desired format in the Grid Contents Editor or the ListView Contents Editor.
Bind InnerDataset
When a Dataset is bound to components that can display data in a list form, such as List Box or Combo, the Bind InnerDataset is accessed because it can designate the Dataset column to use in a list.
Properties | Description |
---|---|
codecolumn | Designates column that is used internally |
datacolumn | Designates column that is displayed to the user in the component |
The columns that can be set may vary depending on the component. Please refer to the table below.
Component | Properties Connected to Columns |
---|---|
Combo, ListBox, Radio | codecolumn, datacolumn |
Calendar | backgroundcolumn, bordercolumn, datecolumn, textcolorcolumn |
DateField, DateRangePicker, PopupDateRangePicker | backgroundcolumn, bordercolumn, datecolumn, hintingcolumn, readonlycolumn, textcolorcolumn |
Menu, PopupMenu, TrayPopupMenu | captioncolumn, checkboxcolumn, enablecolumn, hotkeycolumn, iconcolumn, idcolumn, levelcolumn, userdatacolumn |
TrayPopupMenu does not use the Bind InnerDataset window, but rather it sets innerdataset in the Tray setting screen and sets each column connection property.
Bind Item Editor
For components that have the innerdataset property when dragging and dropping the Dataset object, you can select Bind InnerDataset or Bind Item. For components without the innerdataset property, Bind Item Editor is executed immediately.
Properties | Description | |
---|---|---|
1 | Bind ID | User classification ID |
2 | Object | ID of component that Dataset is bound to |
3 | Property | Component property that Dataset is bound to |
4 | Dataset | Dataset that is bound to the component |
5 | Column ID | The Dataset Column ID that is bound to the component |
When a Dataset is bound to a Form or component, it is displayed in the Project Explorer window on the item for easy verification, as shown below:
When a Dataset object is bound to the innerdataset property of a component that has an innerdataset property, the icon of that component is not displayed differently in the Project Explorer. Binding status icon display is only applicable when set to Bind Item Editor.
Bind Dataset Editor
If you select a Form object or component on the design screen and select "Bind Dataset" from the context menu, you can configure multiple Dataset objects and binding settings.
property | Description | |
---|---|---|
1 | Target Component | When a component is selected and the Bind Dataset function is executed, the selected component is displayed. You can select another component or select "Create Component" and create a new one. |
2 | Dataset | A list of available Datset objects. The Dataset object in the Form and the Dataset object set as Global Dataset are displayed. |
3 | Bind Type | Depending on the target component, selectable Bind Types are activated. |
4 | Property | A list of properties that can be set according to the Bind Type is displayed. Column ids are displayed in black if they are bound to a Dataset object that is currently selected, and items bound to an unselected Dataset object are displayed in red. |
Adding & Editing Bind Item
Create Component & Bind Item Editor
Like the Bind Item editor, this editor is also used to bind a Dataset to a component. However, the difference is that it is used when you want to bind a Dataset while creating the target component. Through the Bind Item editor, in contrast, you can bind a Dataset only to existing components .
If you drag and drop a Dataset object onto the Form area while pressing the Ctrl key, you can open the edit window.
The items in the Bind Item List represent the values you added through the Bind Item Editor. Those items are provided only for information so that you cannot modify those through the Create Component & Bind Item editor.
Displaying & Editing Bind State Icon
You can see the state of Dataset binding by right-clicking the Form design pane to open the context menu and selecting [State View > Bind]. In this mode, you can identify to which components Datasets are bound.
For the bound component, the Dataset icon is displayed in the lower right corner, and when you click the icon, Bind Item Editor is displayed.
Editing in the Property Window
You can add or edit the Bind Item for each property by selecting the component and clicking the [Bindable] icon in the property window.
Checking Data Binding Information
Invisible Objects Pane
Nexacro Studio provides the Invisible Object area where you can manage invisible objects, which you cannot see physically but use in developing an app. The Invisible Object area is provided in the form of a dockable window.
If the Invisible Object window is not displayed, open the design menu and select [Show Invisible Object Area].
You can change the icon display types by opening the context menu from the Invisible Object window.
If there are many items in the Invisible Object window, a filtering function is provided to find the desired item immediately. Displays objects whose id matches the input text for filtering in a drop-down list. The list is sorted alphabetically by the id property value.
When you select the desired object from the list, the object becomes selected.
You can use multiple filtering entries using separators (spaces, commas, semicolons).
Binding Components List Pane
This pane shows the components that are bound to the selected Dataset in the Invisible Object pane. If you bring a mouse cursor over a certain component listed in the pane, a tooltip will appears, telling you the information on the relevant binding. Double-click the component item or select "Edit" from the context menu to run the Bind Dataset editor.
Contents Editor
Grid Contents Editor
The Grid Contents Editor is used to edit the Grid’s contents properties. There are many cell unit properties besides the properties that can be seen in the Properties window.
Access the Grid Contents Editor by double-clicking the Grid component on the Design Window.
The Grid Contents Editor is composed of the main editor window and the Design Source window.
In the main edit window, you can add or delete a cell by using the popup menu and shortcut keys, or can edit properties. The main edit window displays the column index at the top, followed by the head, body, and summary.
Main Editor
You can also find the same features at the context menu opened from the Grid Contents Editor.
Icon | Description | |
---|---|---|
1 | Format | Adds or deletes a format |
2 | Add Column | Adds a column. While the default function is to add a body column, you can also add a left or right column. |
3 | Add Head Row | Adds a head row |
4 | Add Body Row | Adds a body row |
5 | Add Summary Row | Adds a summary row |
6 | Add | Adds same ones after the selected rows or columns. If cells are selected, you need to choose either columns or rows. |
7 | Insert | Adds same ones before the selected rows or columns. If cells are selected, you need to choose either columns or rows. |
8 | Delete | Removes the selected rows or columns. If cells are selected, you need to choose either columns or rows. |
9 | Merge Cells | Combines two or more cells. While the default function is to integrate cells, you can also combine cells with individual properties of the selected remain intact. |
10 | Split Cell | Separates merged cells |
11 | Same Width | Adjusts the width of the selected columns. You can specify the value on your own or adjust the value to the width of the last-selected column. |
12 | Same Height | Adjusts the height of the selected rows. You can specify the value on your own or adjust the value to the height of the last-selected row. |
13 | Properties pane | Shows the list of properties that a selected object has When selecting a cell in the head, body, or summary row, you can add or delete user properties from the context menu. |
If there are too many rows, double-click one of the row category areas, which are located on the left end of the editor. The first double-clicking will single out the relevant band, and the following double-clicking will return to displaying all the bands.
Format
Sometimes, you need to look at the same data from various perspectives or hide some part of data due to the authorization issue. In these cases, you can set multiple formats for one Grid.
You can either add a new format or modify an existing one after copying it. You are required to specify the formatid property of a Grid object in order to devise settings specific to a certain format.
Design Source
The Design Source tab of the Grid Contents Editor shows the structure of a Grid in the form of XML. You can change source codes directly here.
ListView Contents Editor
A ListView component has more properties than what we can see in the Properties pane, and those additional properties are affiliated with each band or cell. The ListView Contents Editor is used to edit such additional properties.
You can open the ListView Contents Editor by double-clicking a ListView on the design pane.
The ListView Contents Editor is composed of the main editor, band editor, properties pane and Design Source pane. With the main editor, you can add/delete the body or detail band or can edit properties by using the context menu or shortcuts. The column on the left side of the main editor can be divided into the body and detail bands. The properties pane on the right side presents property values for each band or cell.
Main Editor
You can also find the same features at the context menu opened from the ListView Contents Editor.
Call-out | Description | |
---|---|---|
1 | Format | Adds or deletes a format |
2 | Toolbar | This toolbar features icons for adding or deleting the body and detail bands. The toolbar changes its menu when the editor switches to the band editing mode. You can select the same features from the context menu. Append Body (or Detail): adds the body (or detail) band. These menu items will be inactive if relevant bands have been added already. Delete Body (or Detail): deletes the body (or detail) band Edit Body(Detail): Switches to the mode for editing the body (or detail) band. You can edit cells in each band. |
3 | Properties pane | Shows the properties of a selected band (body or detail) and allows you to edit them |
Band Editing Mode
You can enter the band editing mode from the main editor by selecting the menu item [Edit Body] or [Edit Detail].
Call-out | Description | |
---|---|---|
1 | Toolbar (Cell) | This toolbar features icons for selecting cells, moving the canvas and adding a cell. Select: selects one or more cells Move: moves the position of the background canvas Cell: adds a cell Exit Editor: switches back to the main editing mode |
2 | Toolbar (Align) | This toolbar features icons for aligning cells. See Align to learn how to use those features. |
3 | Editing pane | You can arrange cells on the canvas and change their sizes, just like you do with components on the Form design pane. You can also use the functionality employed to edit a Form: position-related properties, tracker, Fit to Content, PositionBase and guides. See Form Designing | Positions and Guides to learn how to use those features. |
4 | Properties pane | Shows the properties of a selected cell and allows you to edit them You can add or delete user properties from the context menu. |
Format
Sometimes, you need to look at the same data from various perspectives or hide some part of data due to the authorization issue. In these cases, you can set multiple formats for one ListView.
You can either add a new format or modify an existing one after copying it. You are required to specify the formatid
property of a ListView object in order to devise settings specific to a certain format.
Design Source
The Design Source tab of the ListView Contents Editor shows the structure of a ListView in the form of XML. You can change source codes directly here.
Json Contents Editor
DataObject 오브젝트처럼 contents 속성값이 true이고 메타인포에서 ContentsInfo 태그 contentsformat 설정값이 "json"인 오브젝트의 관련 속성 선택 시 편집할 수 있습니다.
속성 | 설명 | |
---|---|---|
1 | URL | URL 입력 후 [Get] 버튼을 클릭하면 해당 JSON 리소스를 받아와 표시합니다. |
2 | Json Contents | JSON 리소스를 편집합니다. type 설정값에 따라 하위 아이템을 추가할 수 있습니다. |
3 | 보기 모드 | Contents 탭 선택 시 트리 형태로 데이터를 표시합니다. Source 탭 선택 시 코드 형태로 데이터를 표시합니다. |
Source 탭에서 코드 수정 시 오류가 발생한 경우 오류 발생 위치를 표시합니다.
Data Path Editor
Dataset 오브젝트에서 binddataobject 속성값으로 DataObject 오브젝트를 선택하고 속성창에서 dataobjectpath 속성 선택 시 편집할 수 있습니다.
속성 | 설명 | |
---|---|---|
1 | Target Source | binddataobject 속성값으로 선택한 DataObject를 표시합니다. DataObject 오브젝트가 contents 속성값을 가진 경우에는 해당 contents를 표시하고 그렇지 않은 경우에는 URL 항목값을 입력하고 데이터를 가져올 수 있습니다. |
2 | DataObject Path | Dataobject Root Path를 설정합니다. Json Contents 결과에서 항목을 선택해 지정할 수 있습니다. Path 설정 후 [Refresh] 버튼을 클릭하면 [Filtered Contents] 탭에 필터링한 결과값을 표시합니다. |
3 | Json Contents | [Contents] 탭 선택 시 트리 형태로 데이터를 표시합니다. [Filtered Contents] 탭 선택 시 트리 형태로 필터링한 데이터를 표시합니다. |
4 | Columns | Json Contents 데이터에서 항목을 선택해 컬럼 datapath 값으로 설정합니다. |
XML Contents Editor
This is a content editor that can add basic XML code. It can be edited when the contents property value is true like the Plugin component, and when the related property of the object whose ContentsInfo tag contentsformat setting value is "xml" in meta-info is selected.
Basic Contents Editor
This is a content editor that can generate the XML code according to the specified format. It can be edited when the contents property value of the object is true and the related property of the object whose ContentsInfo tag contentsformat setting value is "ObjectItem" in meta-info is selected.
The type and number of items that can be added depend on the typename, maxoccurs, and minoccurs setting values defined in the object.
Property | Description | |
---|---|---|
1 | Object Tree | Can add sub-items according to maxoccurs, minoccurs setting values. |
2 | Property Window | Can display and edit the property that can be set in the selected item. Displays the property corresponding to the class set as typename. |
3 | View Mode | Displays the data in the tree format when selecting the Contents tab. Displays the data in the code format when selecting the Source tab. |
Adding Events
You can add an event to a component by selecting the component, and then Event Edit Mode from the Properties Window. You can enter the event directly, or create it automatically by double-clicking the relevant event listed in the Properties.
Double-clicking a certain component in a Form will generate a designated event automatically. The component will generate the onclick event if it has one. If it does not have onclick, it will generate another designated event.
The below-mentioned rules for creating an event handler will be applied if you first select a component or multiple components.
Component selection | Rules for creating handler name |
---|---|
One component is selected. | [Component ID]_[Event name] |
Multiple components of the same type are selected. | [Component Type]_[Event name] |
Multiple components of different types are selected. | Common_[Event name] |
The below picture shows an example of creating an event handler. As seen in the below picture, first select two button components. Then, double-click either component on the Design panel or double-click a certain event in the Properties pane. Eventually, you will see an event handler created.