blinkdagger

Blinkdagger proudly presents Pimp My Gui, a series that will provide our readers with tips and tricks on how they can make their GUIs beautiful on both the inside and outside.

Last time, we started with Zane’s commuter GUI and used panels to reorganize the GUI to great effect. Today, we’re going to look into using the custom menu bar to clean up the GUI while still retaining maximum functionality.

Contents

• Zane’s Revenge
• Naming the GUI
• Custom Menu Bar To the Rescue!
• Delete Entry
• Save, Load, and Print Data
• Next Time

Zane’s Revenge

After doing some preliminary work on Zane’s GUI, I returned it to him because he said there were some features he wanted to add, such as:

• Save/Load Buttons
• Idiot proofing the code
• Status Bar for most recent action
• Print all locations/dates in command window
• Delete specific entry # (need entry from the printed list)

Zane implemented these features flawlessly, but unfortunately, he also mutilated the beautiful GUI from the last post. Here is the before and after:

BEFORE:

AFTER:

Naming the GUI

If you look at the upper left hand corner of the pictures above, you’ll notice that the GUI name is different between those two images. It goes from “TutorCommuterGUI_QQ” to “Tutor Commuter”. I don’t know about you guys, but I prefer the second title. By default, the GUI name that appears in the upper left corner is taken directly from the file name of the GUI. Luckily, this can be changed by modifying the properties of the figure itself.

It’s a bit nit picky, but I find that paying attention to little details like this separate the mediocre GUIs from the truly great ones.

Custom Menu Bar To the Rescue!

With all the additional buttons and features, the GUI now looks a little crowded and twice as complicated. Since most of these features are secondary, they don’t really need their own button. Instead, we can move their callbacks to the menu bar. Click here for a quick review on how to implement custom menu bars.

For a quick reminder, here’s how you get to the menu bar option using GUIDE:

In the picture below, you can see that I added in three menus: File, Delete Date, and Help:

The images below show you the contents of each menu. Notice how I also assigned hot keys to these commands!

Delete Entry and Undo

After adding the menu bar, we need to get rid of the appropriate buttons and add in some code. First, lets get rid of the delete button, the delete edit text box, and the undo button.

Also, we have to remember to modify the code in the m-file. Thankfully, this part is straight forward.
Each menu item has its own unique callback wherein we need to place the appropriate code. Let’s use the Save function as an example.

Originally, the code for the Save function was contained within the save_pushbutton callback. In this case, we would cut and paste the code in the save_pushbutton callback into the save_menu_item callback. The process is then repeated for all the other buttons that we will be deleting.

But wait! What about the edit text field? How will we get the correct input from the user? With the removal of the edit text box for the delete function, we had to use a different way of getting input from the user. This was done using the command inputdlg. You can find out how to use inputdlg in this tutorial. See the images below to see how this feature was reprogrammed.

Now, when you click on the following menu item:

The following appears:

Save, Load, and Print Data

The save and load buttons are quite large and don’t have to be on the actual GUI. It’s probably better to use them as menu items as well. Let’s remove those buttons and attach their functionality to the menu items instead.

The “Print” button looks like it doesn’t need to be on the GUI as well. Let’s create a menu item for it. Now the GUI is now much more compact but retains all of its functionality!

Next Time

The Menu Bar is a great way to add extra functionality to your GUI without taking up too much space. It’s a great way to stash functions that while important, are not used frequently.

Next time, we’ll discuss a couple of ways to go about implementing a “help” feature to your GUI. All good GUIs should be self contained, easy to use, and should supply a helpful built in tutorial for the end user.