Binding Data, Creating Events and Editing Contents

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.

Bind Global Dataset

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.

Inner Bind Dataset

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.

Inner Bind Dataset

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.

Bind Item Editor

Bind Item Editor


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 Mark

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.

Bind Item Editor


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

Grid Contents Editor[Formats]

You can also find the same features at the context menu opened from the Grid Contents Editor.

Bind Item 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.

Grid Contents Editor[Design Source]

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

Grid Contents Editor[Formats]

You can also find the same features at the context menu opened from the ListView Contents Editor.

Bind Item 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].

Bind Item Editor

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.

Grid Contents Editor[Design Source]

Json Contents Editor

DataObject 오브젝트처럼 contents 속성값이 true이고 메타인포에서 ContentsInfo 태그 contentsformat 설정값이 "json"인 오브젝트의 관련 속성 선택 시 편집할 수 있습니다.

Bind Item Editor


속성

설명

1

URL

URL 입력 후 [Get] 버튼을 클릭하면 해당 JSON 리소스를 받아와 표시합니다.

2

Json Contents

JSON 리소스를 편집합니다.

type 설정값에 따라 하위 아이템을 추가할 수 있습니다.

3

보기 모드

Contents 탭 선택 시 트리 형태로 데이터를 표시합니다.

Source 탭 선택 시 코드 형태로 데이터를 표시합니다.

Source 탭에서 코드 수정 시 오류가 발생한 경우 오류 발생 위치를 표시합니다.

Data Path Editor

Dataset 오브젝트에서 binddataobject 속성값으로 DataObject 오브젝트를 선택하고 속성창에서 dataobjectpath 속성 선택 시 편집할 수 있습니다.

Bind Item Editor


속성

설명

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.

Bind Item Editor


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.

Create Event Function

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.