Created tabbed GUI in GUIDE

Is there any way to lay out and design a GUI with tabs using GUIDE? I don't see any place to insert uitabgroup panels with GUIDE. I fear I may have to go back to basics and program everything from scratch. Yikes!

[Joseph Cheng]

what do you have now that would make you go back to scratch?

[Justin Solomon]

I haven't actually started making the GUI, but I know that I will want to use tabs. When I said "from scratch" I meant that I will have to make the GUI programmatically instead of using GUIDE.

Answer 1

[Image Analyst]

No, GUIDE doesn't do that now, unfortunately. Hopefully in the next release, because you can do it from scratch, in code, like you said. However if you have dozens of other widgets on your UI, creating them all would be a major pain. One workaround is to use buttons as tabs and put all the controls that you would have placed on a tab into a panel. Put the buttons into a button group so that when you press one, it "unpresses" the others and makes the appropriate panel visible and the others invisible. Kind of kludgy but it works.

Answer 2

[Charles]

I have discovered the same issue. I primarily do my GUI's with Guide, and would like to continue. Here is my workaround:

1. Make a GUIDE figure large enough to hold all of your tabs side-by-side
2. Create panels side-by-side on the GUIDE page. Tag them P1, P2, etc. Make the panels all the same size, set the border to "none", and clear the title (if desired)
3. Place panel 1 where you want all the panels to be. Be sure to leave room on the left if you are using left tabs. the location of the rest of the panels does not matter. Make sure panel 1 is the same size or larger than all of your other panels. The remaining panels should leave some space away form panel 1 so that you will be able to grab and drag the figure corner when editing later.
4. Lay out all of your buttons, text boxes, and other features within each panel.
5. When done with the layout, shrink the overall window in GUIDE to just show panel 1. the other panels continue to exist, off the page.
6. Edit the corresponding .m file, OpeningFCN, adding a version of the following code:

%Create tab group
handles.tgroup = uitabgroup('Parent', handles.figure1,'TabLocation', 'left');
handles.tab1 = uitab('Parent', handles.tgroup, 'Title', 'My Tab Label 1');
handles.tab2 = uitab('Parent', handles.tgroup, 'Title', 'My Tab Label 2');
handles.tab3 = uitab('Parent', handles.tgroup, 'Title', 'My Tab Label 3');

%Place panels into each tab
set(handles.P1,'Parent',handles.tab1)
set(handles.P2,'Parent',handles.tab2)
set(handles.P3,'Parent',handles.tab3)

%Reposition each panel to same location as panel 1
set(handles.P2,'position',get(handles.P1,'position'));
set(handles.P3,'position',get(handles.P1,'position'));

Now all of the controls end up on the correct tabs within hidden panels. To edit panel content, in GUIDE expand the figure to see all the panels, edit, then shrink again.

This approach allows the use of GUIDE and has minimal programming to arrange your GUIDE elements into the tabs.

Hope this helps!

Chuck

[Kent]

This works! Thank you

[Valarie]

Thank you!

[Yegor Sinelnikov]

Elegant and simple. Thanks.

[yogesh jain]

Thank you very much :)

[Carlos Eduardo Santos]

Congratulations!! The best answer.

[Jeffery Devereux]

Wonderful! Thank you

[Stijn Bonte]

This works really well, thank you! I was just wondering, is it possible to switch to a next panel when pressing a button in the GUI?

[Tien Tran]

Good job!

[Stephania Vaglica]

If you want to create a switch, place a guidata(hObject, handles); command at the very end of that start up function. Then you can create a uicontrol (like a button) that will allow you to access the property SelectTab from the uitabgroup. I hope this helped!

[Sullivan]

This is a good solution and it works well. However, the size of the tabbed panels are limited by the canvas in the layout editor of GUIDE. Interactively its not possible to make the canvas size bigger than the layout editor. As such the total of the width and height of all tabbed panels cannot bigger than the size of screen. Perhaps I don't know the way to expand the size of the canvas. Any one care to correct me?

[rinser55]

Late to the party, but for anyone who wants to increase the canvas size beyond the size of the screen:

1. Maximize the GUI editor window.
2. Drag the canvas so it's as big as possible (fills the window).
3. Restore down the window by either clicking the restore down button or dragging the window down from the top of the screen.
4. Note that the canvas doesn't default align to the bottom right. Scroll to the bottom right.
5. Maximize the window again. The canvas will default align so the bottom right corner is located roughly in the middle of the screen. You can now drag the canvas so it fills the screen again, and thus increase the total canvas size beyond the screen size.
6. Repeat as necessary until the canvas reaches your desired size.

[Sabrina Benge]

MAGIC!! WORKED WONDERFULLY

[Bachtiar Muhammad Lubis]

Nice one Charles

[Bachtiar Muhammad Lubis]

Btw how to call another GUI to this tab panel?

[Le Dung]

Great !!!!!!!

[qaqcvc]

Thanks! It works very well.

[beginner94]

Thanks a lot for this workaround!

Do you also know how to resize of the overall window when another tab is opened?

Answer 3

[Walter Roberson]

It appears that GUIDE does not offer a layout service for tab groups. However, see http://www.mathworks.com/matlabcentral/fileexchange/?term=uitab

Answer 4

[Ka Mirul]

You can use several button to switch panel dispaly to create multi tab GUI.

I've made step by step tutorial here. Enjoy

Answer 5

[egdeluca]

Good morning,

I'm trying to create a JTabGroup with delete icon but I have some problems to java handle object. From the following example:

% Prepare a tab-group consisting of two tabs
hTabGroup = uitabgroup;
tab1 = uitab(hTabGroup, 'title','Panel 1');
a = axes('parent', tab1); surf(peaks);
tab2 = uitab(hTabGroup, 'title','Panel 2');
uicontrol(tab2, 'String','Close', 'Callback','close(gcbf)');
% Get the underlying Java reference (use hidden property)
jTabGroup = getappdata(handle(hTabGroup),'JTabbedPane');

% First let's load the close icon
jarFile = fullfile(matlabroot,'/java/jar/mwt.jar');
iconsFolder = '/com/mathworks/mwt/resources/';
iconURI = ['jar:file:/' jarFile '!' iconsFolder 'closebox.gif'];
icon = javax.swing.ImageIcon(java.net.URL(iconURI));
 
% Now let's prepare the close button: icon, size and callback
jCloseButton = handle(javax.swing.JButton,'CallbackProperties');
jCloseButton.setIcon(icon);
jCloseButton.setPreferredSize(java.awt.Dimension(15,15));
jCloseButton.setMaximumSize(java.awt.Dimension(15,15));
jCloseButton.setSize(java.awt.Dimension(15,15));
set(jCloseButton, 'ActionPerformedCallback',@(h,e)delete(tab2));
 
% Now let's prepare a tab panel with our label and close button
jPanel = javax.swing.JPanel;	% default layout = FlowLayout
set(jPanel.getLayout, 'Hgap',0, 'Vgap',0);  % default gap = 5px
jLabel = javax.swing.JLabel('Tab #2');
jPanel.add(jLabel);
jPanel.add(jCloseButton);
 
% Now attach this tab panel as the tab-group's 2nd component
jTabGroup.setTabComponentAt(1,jPanel);	% Tab #1 = second tab

The handle of JTabGroup variable is empty, then it doesn't work. The same code works in R2014a version. Can anyone tell me why?

Where is the mistake?

Thank you

Egidio