bindable

Superclass for data binding between object properties and MATLAB UI components — ideal for implementing MVVM patterns.

Bindable – Superclass for UI Data Binding in MATLAB

The bindable class provides a lightweight superclass that enables two-way data binding between model properties and MATLAB UI components (uifigure, uicontrol). By inheriting from bindable, you can connect object properties to UI controls with minimal setup, automatically synchronizing values between the model and the UI.

Features

• Value binding: Synchronize scalar or array properties with UI controls (e.g., sliders, edit fields, checkboxes). Supports forward (model→UI), reverse (UI→model), or bidirectional binding.
• Enumeration binding: Map enumeration-like structures (struct with Name and SelectedIdx) to dropdowns or listboxes, keeping selection states in sync.
• Enable state binding: Tie logical properties to UI component enable/disable state.
• Subscripted property binding: Directly bind array elements or struct fields using subscript notation (Prop(2), Prop.Field).
• Automatic listener management: Internally stores and handles listeners for property changes and UI callbacks.

Dependencies

• str2subs

Examples

• demo_bindable.m

How to use

• To enable data binding, create your own model class that inherits from bindable.
• Any property you want to bind must be declared with the SetObservable attribute, so that changes can be detected and propagated to the UI.

classdef MyModel < bindable
    properties (SetObservable)
        MyValue = 5
    end
end

• Once defined, instances of MyModel can be bound to MATLAB UI components (uidropdown, uilistbox, uislider, etc.) using methods such as bindValue, bindEnum, and bindEnabledState.
• Binding callbacks can be programmatically triggered using binding.execute

% Binding MyValue and slider
[fwdBinding, revBinding] = MyModel.bindValue('MyValue',sliderHandle);

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%% Here, try moving the slider or edit MyModel.MyValue %%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

% also, programmatically triggering bindingcallbacks is possible
fwdBinding.execute % this updates UI (sliderHandle)
revBinding.execute % this updates MyModel

Methods

bindValue

[FWB, RVB] = obj.bindValue(propname, targetObjects, options)

Bind a model property to one or more UI components. Keeps values synchronized between the object and UI controls.

• Inputs
• propname : Name of the property (property should be SetObservable. supports subscripted syntax, e.g. 'Values(2)').
• targetObjects : Handle(s) to UI controls (uicontrol, uifigure components).
• options (name-value pairs):
• direction : 'forward', 'reverse', 'bidirectional' (default).
• forwardConverter : Function handle to transform value (model → UI).
• reverseConverter : Function handle to transform value (UI → model).
• Outputs
• FWB : Binding handles for forward direction (model → UI).
• RVB : Binding handles for reverse direction (UI → model).

Example:

bindableObj.MyValue = 3;

% Bidirectional binding of numeric property 'MyValue' with slider UI
bindableObj.bindValue('MyValue',sliderHandle);

% Can bind multiple UI objects
[fw, rv] = bindableObj.bindValue('MyValue',[sliderHandle, editboxHandle], ...
    forwardConverter=@round, ...
    reverseConverter=@double);

bindEnum

[FWB, RVB] = obj.bindEnum(propname, targetObjects, options)

Bind an enumeration-like property (struct with fields Name, SelectedIdx) to list-type controls (uidropdown, uilistbox).

• Inputs
• propname : Name of enumeration property. (property should be SetObservable)
• targetObjects : Dropdown or listbox handles.
• options.direction : 'forward', 'reverse', or 'bidirectional' (default).
• Outputs
• FWB : Forward binding handles (model → UI).
• RVB : Reverse binding handles (UI → model).

Example:

bindableObj.Choices = struct('Name',{{'Red','Green','Blue'}},'SelectedIdx',2);

% Synchronize enum struct to dropdown
bindableObj.bindEnum('Choices',dropdownHandle);

bindEnabledState

H = obj.bindEnabledState(propname, targetObjects, options)

Bind a logical property to the 'Enable' state of one or more UI controls.

• Inputs
• propname : Logical property name. (property should be SetObservable)
• targetObjects : UI component handles.
• options.forwardConverter : Function handle mapping property value to logical (default = identity).
• Output
• H : Binding handle for forward direction (model → UI).

Example:

bindableObj.MyLogical = false;

% Enable or disable a button based on model.MyLogical
bindableObj.bindEnabledState('MyLogical',buttonHandle);


bindableObj.MyNumber = 3;

% Enabled state (logical) can be derived from non logical value using forwardConverter
bindableObj.bindEnabledState('MyNumber',buttonHandle, ...
    forwardConverter=@(x) x > 2);