The path of the backend-field where the item should store its data. For Example:

Stores the data in data.myField of the data-record object. It is also possible to specify paths like:

In the above example the data is written into data.myField.mySubField of the data-record object. If myField doesn't exist it will be automatically created an initialized with an empty object. It is also possible to specify paths to array values like:

In the above example the data is written into data.myField.mySubArray[4] of the data-record object. If the array or the index doesn't exist it it automatically created. In our example, the values from index 0 to 3 are initializes with null.

Bindings are used to bind an item's attribute to another item's attribute. A good example is a color-selection where you have three sliders for the red, green and blue color-component and a GSColorView for the preview and want to update the color-view whenever a slider is changed. The value attribute of each slider would be bound to the corresponding color-component of the GSColorView in that case.

Bindings are defined using the following format:
"bindings": [ { "source": "value", "to": "colorView", "target": "red" } ]

• source - The source-value from the current item to bind.
• to - The identifier of the target-item
• target - The target-attribute where the source-value should be bound to.
.
• asImageFromFolder - Name of a resource folder. If defined, the source-value will be treated as an image name and automatically converted to a native image before written to the target.
• asDataFromFolder - Name of a resource folder. If defined, the source-value will be treated as a name of a Live2D model and automatically converted to a native Live2D model before written to the target.

Whenever the source-value changes it will be automatically written to the target-attribute of the target-item. Bindings are used very often to let multiple items work together.

Indicates if the item should have a border. The color and size of the border depends on the current UI theme.

The item's default value if the backend-object is new created.

Delegates are used to delegate user actions to a specified item-controller routine. An good example is a GSButton item which adds a new item to a GSTable or GSCollectionView if clicked. That button just delegates the click to a routine of the table-view's internal controller. Each item has an internal controller managing the logic of the item. Many controllers offering public routines which can be called using delegates to trigger a certain action.

Delegates are defined using the following format:

"delegates": [
    { "identifiers": ["myTable"], "selector": "addItemUsingDialog" }
]

• identifiers - Array of items where the specified selector should be called on.
• selector - The action/routine to call.

When delegates are triggered depends on the item.

The position & size of the item as array of coordinates like [0, 0, -1, 200]. The position coordinates are not in pixels. It depends on the layout how it interprets the coordinates. But for the most common and standard layout, the "dynamicGrid", the position is a [column, row] pair. So to show items in a way like this:

item1 item2
item3 item4

the position of these items would be: [0, 0], [1, 0], [0, 1] and [1, 1]

The size is optional for most items. Exceptions are multiline text-fields, table-views, document-trees, etc. In regular the size is calculated automatically depending on the layout. It is also possible to specify -1 for a size-value to let the layout handle it. For example, to only specify the height for an item you can just specify [0, 0, -1, 200] to set the height to 200px while the width is still automatically calculated by the layout.

The size is in pixels for all layouts.

Assigns the item to the specified group. How the group association is handled depends on the item. For example: A radio-button uses the group to disable all other radio-buttons in that group on click while a label uses the group to resize itself to the label with higest width-value in the group.

A unique name/identifier for the item. That identifier can be used in bindings, delegates and other places whenever it is necessary specify an item. An item without an identifier cannot be used in combination bindings, delegates.

A formula to calculate the size of the item at runtime. It needs to return a size-object like { w, h }. The formula doesn't have any parameters.

A tooltip/help-text which is displayed if the user places the cursor above the item and waits 1-2 seconds. The behavior of the tooltip-box depends on the OS.

A value-translator can be used to convert the item's value before written or after read. It has the following format:

valueTranslator: { read: "return ROUND(v * 100)", write: "return v / 100" }

• read - A formula is used to convert the value after read but before transferring it to the item. It has one parameter "v" which is the original value.
• write - A formula is used to convert the value before it is written to the backend. It has one parameter "v" which is the original value.

In the above example the value is stored as a factor between 0.0 and 1.0 but displayed as a percentage between 0 and 100.