How To Add an EditField Component in MATLAB?

An EditField component in MATLAB is a user interface control that allows you to input and edit text. It is a useful tool for creating user-friendly GUI (Graphical User Interface) applications. In this article, we will explain how to add an EditField component to a GUI and show some examples of its use.

Steps

Step 1: To add an EditField component to a GUI, you need to have a GUI already created. If you don’t have a GUI, you can create one by following the steps in the official MATLAB documentation.

Step 2: Once you are done with creating a GUI, It looks like this.

Step 3: You can add an EditField component to it by dragging the “Edit Field” icon from the “Palettes” pane on the right-hand side of the GUI editor. (We have an edit field component for text and numeric you can pick based on your requirement)

Step 4: After you have added the EditField component to your GUI, you can resize it and move it to the desired location.

Step 5: To customize the EditField component, you can use the “Properties” pane on the right-hand side of the GUI editor. From the “Properties” pane, you can change the text displayed in the edit field, the font size, the background color, and other properties.

The Code for the above generated EditField Component in Matlab is given below:

Matlab

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure        matlab.ui.Figure
        EditField       matlab.ui.control.EditField
        EditFieldLabel  matlab.ui.control.Label
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create EditFieldLabel
            app.EditFieldLabel = uilabel(app.UIFigure);
            app.EditFieldLabel.HorizontalAlignment = 'right';
            app.EditFieldLabel.Position = [141 189 56 22];
            app.EditFieldLabel.Text = 'Edit Field';

            % Create EditField
            app.EditField = uieditfield(app.UIFigure, 'text');
            app.EditField.FontSize = 14;
            app.EditField.FontWeight = 'bold';
            app.EditField.Position = [212 134 323 132];
            app.EditField.Value = 'Hema Hariharan Samson @gfg';

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app1

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

 Here are some examples of how you can use an EditField component in your GUI:

1. Input validation: You can use an EditField component to input a numerical value and validate the input using the “isnumeric” function. If the input is not numeric, you can display an error message using a “Static Text” component.
2. Filtering a list: You can use an EditField component to filter a list of items displayed in a “Listbox” component. As the user types in the EditField, you can use the “String” property to update the list displayed in the “Listbox” based on the entered text.
3. Text input: You can use an EditField component to input a string of text and use it in your code. For example, you can use it to input a file name and read the file using the “fopen” function.

Method 2: 

There are other ways to input text in a GUI, such as using a “Textbox” component or an “Input Dialog” function. The “Textbox” component allows you to input multi-line text, while the “Input Dialog” function displays a modal dialog box that prompts the user to input a value. You can choose the method that best suits your needs.