Try Xenarius Free

Binding Editors to Data

Binding Basics

The Xenarius application designer follows basic principles defined by the MVVM (Model-View-View Model) pattern. A Model is your application’s stored data (local storage or remote server) accessed via data providers. A View is an application view. A View Model - an object that prepares data for the View by adding properties, parameters and data sources that receive data from data providers (Models).

One of the MVVM principles, declarative data binding, is worth special consideration when using Xenarius.

Every property exposed by a view or an editor can be bound to a view model property - even another view model property. This means that once a bound property is updated, the view model property gets updated as well - and vice versa - the view model property immediately updates the view, all bound properties. This is called two-way binding.

You can bind multiple properties to a single view model property thus making them work in sync.

The application as a whole contains a model as well - a global model. You can bind properties to it.

Data-aware editor properties can also be bound to data source fields. See the Binding List Editors to Data help topic for more information.

The scheme below allows you to imagine the process of interaction between views, global model, view model and data providers.

Scheme

View Data or View Model

A view model is an object that holds properties for data representation on the view. You can bind editor properties to view model properties or use the view properties within event handlers.

To create a property, open the View Data and Commands tab. Expand the Properties section, and click Add.

Properties expose the following settings:

  • Name – the property name.

  • Calculated – if selected, the property’s value is calculated each time it is read and written; if it’s unselected, the value is stored.

  • Track changes – if selected, any changes in the property value should update the user interface; if it’s unselected, changing the property value has no effect on the user interface.

For calculated properties, additional settings are available.

  • Getter – a function that returns the property value. It is executed each time a property value is read.

  • Setter – a function that writes the property value. It is executed each time a value is assigned to this property.

Non-calculated properties expose the following settings:

  • Persistent – if selected, the property’s value is retained between application starts.

The view model can also include view parameters.

Global Model

A global model contains application-level properties. You can use these properties to share data between views.

To create a property in the global scope, click the Application Options button, expand the Global Data section and click Add.

All properties that must be specified for an application-level property are the same as those of a standard view model.

How to Set up Binding

To bind a property, click a property marker displayed to the right of the property and select Set up binding.

Setting up Binding

Next, select or enter the property to which you wish to bind.

  • To refer to a View model property, use $model (for instance, $model.allowEdit, $model.isAdmin).

  • The Global model is accessed via the $global prefix.

  • Data source fields are referenced via $data (for instance, $data.EmployeeID, $data.Revenue).

A property marker is gray when the property has a default value, black when it has a different value and orange when it is bound to a view model.

To remove binding, click the property marker and select Remove Binding.

Binding Expressions

Binding expressions allow you to perform calculations when binding widgets your view model. For example, if your data object contains fields firstName and lastName you can join them in an expression and display the result in a single label.

To specify a binding expression, set-up a binding and write an expression starting from = (equals) sign. For example,

=$model.client.firstName + ' ' + $model.client.lastName

Xenarius will automatically re-calculate the value if the firstName or lastName properties change.

You may use any valid JavaScript-expression after the = (equals) sign. Expressions are available when specifying view, widget and data provider settings. Certain business logic operations like Log, Show Alert or Show Web Page also allow you to use expressions instead of simple values.

Binding List Editors to Data

To bind a list editor to a data source:

  1. Switch to the Widget Properties tab and select the editor in the components list. The Widget Properties tab will display editor properties.

  2. In the Provider or Array property field, select the desired data source.

Data sources expose the following settings:

  • Provider or Array (required) – an underlying data provider used to access data or data property with array.

  • Refresh On View Shown (optional) - specifies whether the data source is refreshed when the view is displayed. The following values are available: Always, Never and When Changes (by default).

  • Calculated Fields – a set of calculated fields for the data source.

  • Filter (optional) – specifies data filter conditions. Refer to the Filter Expressions help topic for more information.

For calculated fields, the following settings are available:

  • Name – a field name.

  • Getter – a function that returns the field value. It is executed each time a field value is read.

  • Setter – a function that writes the field value. It is executed each time a value is assigned to this field.

To bind editor properties to data source fields:

  1. Select an editor in the Widget Properties tab;

  2. Select the desired property, click the property marker and select Set up binding.

Select or enter a data source field. Data source fields are referenced by using $data (for example, $data.Description).