matlab.ui.componentcontainer.ComponentContainer Class

Namespace: matlab.ui.componentcontainer

Base class for developing custom UI component objects

Since R2020b

Description

matlab.ui.componentcontainer.ComponentContainer is a class you build on to make your own classes of custom UI component objects. When you define a subclass of this base class, you can use the ComponentContainer properties and methods to build your UI component objects. Specify this syntax on the first line of your class definition file to directly inherit from the ComponentContainer class, where MyComponent is the name of your object:

classdef MyComponent < matlab.ui.componentcontainer.ComponentContainer

The matlab.ui.componentcontainer.ComponentContainer class is a handle class.

Class Attributes

Abstract	true
ConstructOnLoad	true
HandleCompatible	true

For information on class attributes, see Class Attributes.

Properties

Color and Styling

BackgroundColor — Background color

[0.94 0.94 0.94] (default) | RGB triplet | hexadecimal color code | 'r' | 'g' | 'b' | ...

Background color, specified as an RGB triplet, a hexadecimal color code, or one of the color options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

• An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example, [0.4 0.6 0.7].

• A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes "#FF8800", "#ff8800", "#F80", and "#f80" are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color Name	Short Name	RGB Triplet	Hexadecimal Color Code	Appearance
"red"	"r"	[1 0 0]	"#FF0000"
"green"	"g"	[0 1 0]	"#00FF00"
"blue"	"b"	[0 0 1]	"#0000FF"
"cyan"	"c"	[0 1 1]	"#00FFFF"
"magenta"	"m"	[1 0 1]	"#FF00FF"
"yellow"	"y"	[1 1 0]	"#FFFF00"
"black"	"k"	[0 0 0]	"#000000"
"white"	"w"	[1 1 1]	"#FFFFFF"

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB^® uses in many types of plots.

RGB Triplet	Hexadecimal Color Code	Appearance
[0 0.4470 0.7410]	"#0072BD"
[0.8500 0.3250 0.0980]	"#D95319"
[0.9290 0.6940 0.1250]	"#EDB120"
[0.4940 0.1840 0.5560]	"#7E2F8E"
[0.4660 0.6740 0.1880]	"#77AC30"
[0.3010 0.7450 0.9330]	"#4DBEEE"
[0.6350 0.0780 0.1840]	"#A2142F"

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
GetObservable	true
SetObservable	true

Interactivity

Visible — State of visibility

'on' (default) | on/off logical value

State of visibility, specified as 'on' or 'off', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

• 'on' — Display the object.

• 'off' — Hide the object without deleting it. You still can access the properties of an invisible UI component.

To make your app start faster, set the Visible property to 'off' for all components that do not need to appear at startup.

Changing the size of an invisible container triggers the SizeChangedFcn callback when it becomes visible.

Changing the Visible property of a container does not change the values of the Visible properties of child components. This is true even though hiding the container causes the child components to be hidden.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
GetObservable	true
SetObservable	true

ContextMenu — Context menu

empty GraphicsPlaceholder array (default) | ContextMenu object

Context menu, specified as a ContextMenu object created using the uicontextmenu function. Use this property to display a context menu when you right-click on an area of the component that does not contain any underlying UI components or graphics objects.

To display a context menu when you right-click on any portion of the custom UI component, write code to set the ContextMenu property of all underlying UI components and graphics objects whenever the ContextMenu property of your custom component is set.

Example: Component With Context Menu

This code creates a simple custom UI component with a label and a button in a grid layout manager. Whenever a user creates an instance of the SimpleComponent class and assigns a context menu to the component, the code in the update method then assigns that same context menu to the underlying GridLayout, Button, and Label objects.

classdef SimpleComponent < matlab.ui.componentcontainer.ComponentContainer

    properties (Access = private, Transient, NonCopyable)
        GridLayout matlab.ui.container.GridLayout
        Button matlab.ui.control.Button
        Label matlab.ui.control.Label
    end
    
    methods (Access=protected)
        function setup(obj)
            % Set component size
            obj.Position = [100 100 220 50];
            % Create grid
            obj.GridLayout = uigridlayout(obj,[1 2]);
            % Create components
            obj.Label = uilabel(obj.GridLayout,...
                "Text","My component");
            obj.Button = uibutton(obj.GridLayout);
        end
        
        function update(obj)
            obj.GridLayout.ContextMenu = obj.ContextMenu;
            obj.Label.ContextMenu = obj.ContextMenu;
            obj.Button.ContextMenu = obj.ContextMenu;
        end
    end
end

Create a SimpleComponent object and specify a context menu. Right-click on the empty space in the component and on the label. The context menu appears.

fig = uifigure;
cm = uicontextmenu(fig);
m1 = uimenu(cm);
SimpleComponent(fig,"ContextMenu",cm);

Attributes:

GetAccess	public
SetAccess	public
NonCopyable	true
Transient	true
GetObservable	true
SetObservable	true

Position

Position — UI component size and location, excluding margins

[100 100 100 100] (default) | [left bottom width height]

UI component size and location, excluding the margins for decorations such as axis labels and tick marks. Specify this property as a vector of form [left bottom width height].

Note

Setting this property has no effect when the parent of the UI component is a GridLayout.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true

Units — Units of measurement

'pixels' (default)

Units of measurement, specified as 'pixels'.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
GetObservable	true
SetObservable	true

Layout — Layout options

empty LayoutOptions array (default) | GridLayoutOptions object

Layout options, specified as a GridLayoutOptions object. This property specifies options for components that are children of grid layout containers. If the component is not a child of a grid layout container (for example, it is a child of a figure or panel), then this property is empty and has no effect. However, if the component is a child of a grid layout container, you can place the component in the intended row and column of the grid by setting the Row and Column properties of the GridLayoutOptions object.

For example, this code places an image component in the third row and second column of its parent grid.

g = uigridlayout([4 3]);
im = uiimage(g);
im.ImageSource = 'peppers.png';
im.ScaleMethod = 'fill';
im.Layout.Row = 3;
im.Layout.Column = 2;

To make the image span multiple rows or columns, specify the Row or Column property as a two-element vector. For example, this image spans columns 2 through 3.

im.Layout.Column = [2 3];

Attributes:

GetAccess	public
SetAccess	public

Callbacks

SizeChangedFcn — Size change callback

'' (default) | function handle | cell array | character vector

Size change callback, specified as one of these values:

• A function handle.

• A cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

• A character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

The SizeChangedFcn callback executes when:

• The component becomes visible for the first time.

• The component is visible while its size changes.

• This component becomes visible for the first time after its size changes. This situation occurs when the size changes while the component is invisible, and then it becomes visible later.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
AbortSet	true
GetObservable	true
SetObservable	true
NonCopyable	true

CreateFcn — Creation function

'' (default) | function handle | cell array | character vector

Object creation function, specified as one of these values:

• Function handle.

• Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

• Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB creates the object. MATLAB initializes all property values before executing the CreateFcn callback. If you do not specify the CreateFcn property, then MATLAB executes a default creation function.

Setting the CreateFcn property on an existing component has no effect.

If you specify this property as a function handle or cell array, you can access the object that is being created using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
AbortSet	true
GetObservable	true
SetObservable	true
NonCopyable	true

DeleteFcn — Deletion function

'' (default) | function handle | cell array | character vector

Object deletion function, specified as one of these values:

• Function handle.

• Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

• Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB deletes the object. MATLAB executes the DeleteFcn callback before destroying the properties of the object. If you do not specify the DeleteFcn property, then MATLAB executes a default deletion function.

If you specify this property as a function handle or cell array, you can access the object that is being deleted using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
AbortSet	true
GetObservable	true
SetObservable	true
NonCopyable	true

Callback Execution Control

Interruptible — Callback interruption

'on' (default) | on/off logical value

Callback interruption, specified as 'on' or 'off', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

This property determines if a running callback can be interrupted. There are two callback states to consider:

• The running callback is the currently executing callback.

• The interrupting callback is a callback that tries to interrupt the running callback.

Whenever MATLAB invokes a callback, that callback attempts to interrupt the running callback (if one exists). The Interruptible property of the object owning the running callback determines if interruption is allowed.

• A value of 'on' allows other callbacks to interrupt the object's callbacks. The interruption occurs at the next point where MATLAB processes the queue, such as when there is a drawnow, figure, uifigure, getframe, waitfor, or pause command.

  • If the running callback contains one of those commands, then MATLAB stops the execution of the callback at that point and executes the interrupting callback. MATLAB resumes executing the running callback when the interrupting callback completes.

  • If the running callback does not contain one of those commands, then MATLAB finishes executing the callback without interruption.

• A value of 'off' blocks all interruption attempts. The BusyAction property of the object owning the interrupting callback determines if the interrupting callback is discarded or put into a queue.

Note

Callback interruption and execution behave differently in these situations:

• If the interrupting callback is a DeleteFcn, CloseRequestFcn or SizeChangedFcn callback, then the interruption occurs regardless of the Interruptible property value.

• If the running callback is currently executing the waitfor function, then the interruption occurs regardless of the Interruptible property value.

• Timer objects execute according to schedule regardless of the Interruptible property value.

When an interruption occurs, MATLAB does not save the state of properties or the display. For example, the object returned by the gca or gcf command might change when another callback executes.

Attributes:

GetAccess	public
SetAccess	public
GetObservable	true
SetObservable	true

BusyAction — Callback queuing

'queue' (default) | 'cancel'

Callback queuing, specified as 'queue' or 'cancel'. The BusyAction property determines how MATLAB handles the execution of interrupting callbacks. There are two callback states to consider:

• The running callback is the currently executing callback.

• The interrupting callback is a callback that tries to interrupt the running callback.

Whenever MATLAB invokes a callback, that callback attempts to interrupt a running callback. The Interruptible property of the object owning the running callback determines if interruption is permitted. If interruption is not permitted, then the BusyAction property of the object owning the interrupting callback determines if it is discarded or put in the queue. These are possible values of the BusyAction property:

• 'queue' — Puts the interrupting callback in a queue to be processed after the running callback finishes execution.

• 'cancel' — Does not execute the interrupting callback.

Attributes:

GetAccess	public
SetAccess	public
GetObservable	true
SetObservable	true

BeingDeleted — Deletion status

on/off logical value

Deletion status, returned as an on/off logical value of type matlab.lang.OnOffSwitchState.

MATLAB sets the BeingDeleted property to 'on' when the DeleteFcn callback begins execution. The BeingDeleted property remains set to 'on' until the component object no longer exists.

Check the value of the BeingDeleted property to verify that the object is not about to be deleted before querying or modifying it.

Attributes:

GetAccess	public
SetAccess	protected
GetObservable	true
SetObservable	true

Parent/Child

Parent — Parent container

Figure object (default) | Panel object | Tab object | GridLayout object

Parent container of the component, specified as a Figure, Panel, Tab, or GridLayout object.

Attributes:

GetAccess	public
SetAccess	public
Transient	true
Dependent	true
NonCopyable	true
GetObservable	true
SetObservable	true

Children — UI component children

empty GraphicsPlaceholder array

UI component children, returned as an empty GraphicsPlaceholder array. Custom UI components have no children. Setting this property has no effect.

Attributes:

GetAccess	public
SetAccess	public
Transient	true
Dependent	true
NonCopyable	true

HandleVisibility — Visibility of object handle

'on' (default) | 'callback' | 'off'

Visibility of the object handle, specified as 'on', 'callback', or 'off'.

This property controls the visibility of the object in its parent's list of children. When an object is not visible in its parent's list of children, it is not returned by functions that obtain objects by searching the object hierarchy or querying properties. These functions include get, findobj, clf, and close. Objects are valid even if they are not visible. If you can access an object, you can set and get its properties, and pass it to any function that operates on objects.

HandleVisibility Value	Description
'on'	The object is always visible.
'callback'	The object is visible from within callbacks or functions invoked by callbacks, but not from within functions invoked from the command line. This option blocks access to the object at the command-line, but allows callback functions to access it.
'off'	The object is invisible at all times. This option is useful for preventing unintended changes to the UI by another function. Set the HandleVisibility to 'off' to temporarily hide the object during the execution of that function.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
GetObservable	true
SetObservable	true

Identifiers

Type — Type of UI component object

character vector

Type of UI component object, returned as character vector containing the component name.

Attributes:

GetAccess	public
SetAccess	protected
NonCopyable	true
Transient	true

Tag — Object identifier

'' (default) | character vector | string scalar

Object identifier, specified as a character vector or string scalar. You can specify a unique Tag value to serve as an identifier for an object. When you need access to the object elsewhere in your code, you can use the findobj function to search for the object based on the Tag value.

Attributes:

GetAccess	public
SetAccess	public
Dependent	true
GetObservable	true
SetObservable	true

UserData — User data

[] (default) | array

User data, specified as any MATLAB array. For example, you can specify a scalar, vector, matrix, cell array, character array, table, or structure. Use this property to store arbitrary data on an object.

If you are working in App Designer, create public or private properties in the app to share data instead of using the UserData property. For more information, see Share Data Within App Designer Apps.

Attributes:

GetAccess	public
SetAccess	public
Transient	true
GetObservable	true
SetObservable	true

Methods

Protected Methods

Abstract Methods

setup	Set up instance of component container subclass
update	Update instance of UI component container subclass after setting properties

Examples

IP Address Input

Define a class called IPAddressComponent that creates a custom component for inputting four values to form an IP address.

To define the class, create a file called IPAddressComponent.m that contains the following class definition with these features:

• A Value public property that stores the IP address.

• NumericField and GridLayout private properties that place four numeric edit fields in a horizontal row.

• A setup method that initializes NumericField and GridLayout.

• An update method that updates the NumericField values when the IP address changes.

• A handleNewValue method that sets the Value property based on the values of the 4 numeric edit fields.

classdef IPAddressComponent < matlab.ui.componentcontainer.ComponentContainer
    % IPAddressComponent a set of 4 edit fields for IP Address input
    properties
        Value (1,4) {mustBeNonnegative, mustBeInteger, mustBeLessThanOrEqual(Value, 255)} = [192 168 1 2];
    end
    
    events (HasCallbackProperty, NotifyAccess = protected)
        ValueChanged % ValueChangedFcn callback property will be generated
    end

    
    properties (Access = private, Transient, NonCopyable)
        NumericField (1,4) matlab.ui.control.NumericEditField
        GridLayout matlab.ui.container.GridLayout
    end
    
    methods (Access=protected)
        function setup(obj)
            % Set the initial position of this component
            obj.Position = [100 100 150 22];
            
            % Layout
            obj.GridLayout = uigridlayout(obj,[1,4], ...
                'RowHeight',{22},'ColumnWidth',{'1x','1x','1x','1x'},...
                'Padding',0,'ColumnSpacing',2);
            
            % Building blocks
            for k = 1:4
                obj.NumericField(k) = uieditfield(obj.GridLayout, 'numeric',...
                    'Limits', [0 255], 'RoundFractionalValues', true, ...
                    'FontName', 'Courier New', 'FontWeight', 'bold', ...
                    'ValueChangedFcn',@(src,event) obj.handleNewValue());
            end
          
        end
        
        function update(obj)
            % Update view
            for k = 1:4
                obj.NumericField(k).Value = obj.Value(k);
            end
        end
    end
       
    methods (Access=private)
        function handleNewValue(obj)
            obj.Value = [obj.NumericField.Value];  
            
            % Execute the event listeners and the ValueChangedFcn callback property
            notify(obj,'ValueChanged');
        end
    end
end

Next, create the component by calling the IPAddressComponent constructor method, which is provided by the ComponentContainer class, and return the object as h. Specify a function that displays the new IP address in the Command Window when the component value changes.

 h = IPAddressComponent;
 h.ValueChangedFcn = @(src,event) disp("Value changed to: " + num2str(h.Value));

Enter the IP Address 192.168.1.10 into the edit fields. MATLAB® displays the updated IP address in the Command Window.

More About

Enabling User-Defined Callbacks for Your UI Component

When defining your class, you optionally can add a block for events that the UI component fires.

To create such an event block, give your class an events block with the HasCallbackProperty attribute. When you do this, MATLAB creates a public property for each event in the block. The public property stores the user provided callback to execute when the event fires. The name of the public property is the name of the event appended with the letters Fcn. For example, a UI component might define the public event ValueChanged and generate the corresponding public property ValueChangedFcn. Use the notify method to fire the event and execute the callback in the property.

For example, here is the event block for a UI component that allows a user to pick a color value.

events (HasCallbackProperty, NotifyAccess = protected) 
    ValueChanged 
end 

Call the notify method to fire the ValueChanged event and execute the callback in the ValueChangedFcn property when a user picks a color value.

function getColorFromUser(obj)
    c = uisetcolor(obj.Value);
    if (isscalar(c) && (c == 0))
        return;
    end
    % Update the Value property
    oldValue = obj.Value;
    obj.Value = c;
    % Execute user callbacks and listeners
    notify(obj,'ValueChanged');
end

When a user creates an instance the UI component, they can specify a callback to execute when the color value changes using the generated public property.

f = uifigure; 
c = ColorSelector(f,'ValueChangedFcn',@(o,e)disp('Changed'))

For more information about specifying callbacks to properties, see Create Callbacks for Apps Created Programmatically.

Component Object Creation Behavior

After you define your class, when a user creates an instance of your UI component and adds it to their app, MATLAB performs these steps in order:

1. If the user did not specify a parent, create a new UI figure and parent the component to it.

2. Call the class setup method.

3. Set any component properties that the user specified as name-value arguments.

4. Call the class update method.

Version History

Introduced in R2020b