MATLAB AppDesigner ListBox

Question

Good afternoon!

I'm currently trying to build an app with MATLAB using App Designer. The goal is to be able to plot data using multiple GPX files, which I have successfully done. I'm curious as to how I should go about populating my Listbox.

Is there a way for Listbox to get populated with filenames depending on the folder you select?

Answer 1

You can use dir to list folder's content, convert names list to cell array, and populate the ListBox Items with the cell array.

Assume you have a Button with ButtonButtonPushed callback, and you wish to let the user select a folder, and then populate the list box with all *.gpx files.

You can do it as follows:

% Button button pushed function
function ButtonButtonPushed(app)
    selpath = uigetdir(); %Open dialog box for selecting folder.
    gpx_files = dir(fullfile(selpath, '*.gpx')); %Dir all *.gpx in selected folder.
    %Populate listbox with file names:
    app.ListBox.Items = {gpx_files(:).name};
end

The statement app.ListBox.Items = {gpx_files(:).name}; populates the ListBox.

• gpx_files(:).name is a list of file names.
• {gpx_files(:).name} creates a cell array out of the list.
• app.ListBox.Items = {gpx_files(:).name}; Sets the Items property of the ListBox with the created cell array.

---

Getting the full path of the selected file:

1. Keep the selected folder:
   Add a private property named selpath (use the red P+ in the designer [code view] to add new property, and edit the name of the property):

   properties (Access = private)
       selpath % Store selected path
   end
   

2. Store the selected path in selpath property when button is pressed:

   % Button pushed function: Button
   function ButtonButtonPushed(app, event)
       app.selpath = uigetdir(); %Open dialog box for selecting folder.
       gpx_files = dir(fullfile(app.selpath, '*.gpx')); %Dir all *.gpx in selected folder.
   
       %Populate listbox with file names:
       app.ListBox.Items = {gpx_files(:).name};
   end
   

   Now selected path is stored in app.selpath.

3. Add "ListBoxChangeValue" Callback (right click the list box in design view).

4. Edit the code of ListBoxValueChanged function:
   The value returned value = app.ListBox.Value; is the name of the selected file (you don't need to use strcmpi).
   Use fullfile function to concatenate the path with the file name.

   % Value changed function: ListBox
   function ListBoxValueChanged(app, event)
       value = app.ListBox.Value;
       selected_file = fullfile(app.selpath, value); %Get the full path of selected file.
       disp(selected_file) %Change the code to load selected_file
   end
   

   The above code displays selected_file string in the Command Window.
   Replace the disp(selected_file) with you own code (loading and plotting the gpx file).

---

Here is the complete code of App1 (most of the code was generated automatically):

classdef App1 < matlab.apps.AppBase

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


    properties (Access = private)
        selpath % Store selected path
    end


    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function startupFcn(app)

        end

        % Button pushed function: Button
        function ButtonButtonPushed(app, event)
            app.selpath = uigetdir(); %Open dialog box for selecting folder.
            gpx_files = dir(fullfile(app.selpath, '*.gpx')); %Dir all *.gpx in selected folder.

            %Populate listbox with file names:
            app.ListBox.Items = {gpx_files(:).name};
        end

        % Value changed function: ListBox
        function ListBoxValueChanged(app, event)
            value = app.ListBox.Value;
            selected_file = fullfile(app.selpath, value); %Get the full path of selected file.
            disp(selected_file) %Change the code to load selected_file
        end
    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 = [101 101 640 480];
            app.UIFigure.Name = 'UI Figure';

            % Create Button
            app.Button = uibutton(app.UIFigure, 'push');
            app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonButtonPushed, true);
            app.Button.Position = [43 380 114 49];
            app.Button.Text = 'Select Folder';

            % Create LabelListBox
            app.LabelListBox = uilabel(app.UIFigure);
            app.LabelListBox.HorizontalAlignment = 'right';
            app.LabelListBox.VerticalAlignment = 'top';
            app.LabelListBox.Position = [300 412 44 15];
            app.LabelListBox.Text = 'List Box';

            % Create ListBox
            app.ListBox = uilistbox(app.UIFigure);
            app.ListBox.ValueChangedFcn = createCallbackFcn(app, @ListBoxValueChanged, true);
            app.ListBox.Position = [359 355 100 74];

            % 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)

            % Execute the startup function
            runStartupFcn(app, @startupFcn)

            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