Creating the Visual Aspect of the GUI: Part 1

  1. For the adder GUI, we will need the following components

    • Edit Text ComponentTwo Edit Text components

    • StaticText ComponentThree Static Text component

    • PushbuttonOne Pushbutton component

    Add in all these components to the GUI by clicking on the icon and placing it onto the grid. At this point, your GUI should look similar to the figure below :
    Components added

  2. Next, its time to edit the properties of these components. Let’s start with the static text. Double click one of the Static Text components. You should see the following table appear. It is called the Property Inspector and allows you to modify the properties of a component.
    Property Inspector

  3. We’re interested in changing the String parameter. Go ahead and edit this text to +.
    Change String Parameter

    Let’s also change the font size from 8 to 20.
    Change Font Size

    After modifying these properties, the component may not be fully visible on the GUI editor. This can be fixed if you resize the component, i.e. use your mouse cursor and stretch the component to make it larger.

  4. Now, do the same for the next Static Text component, but instead of changing the String parameter to +, change it to =.

  5. For the third Static Text component, change the String parameter to whatever you want as the title to your GUI. I kept it simple and named it MyAdderGUI. You can also experiment around with the different font options as well.

  6. For the final Static Text component, we want to set the String Parameter to 0. In addition, we want to modify the Tag parameter for this component. The Tag parameter is basically the variable name of this component. Let’s call it answer_staticText. This component will be used to display our answer, as you have probably already have guessed.
    Change Static Text Properties

  7. So now, you should have something that looks like the following:
    What You Should Have

Creating the Visual Aspect of the GUI: Part 2

  1. Next, lets modify the Edit Text components. Double click on the first Edit Text component. We want to set the String parameter to 0 and we also want to change the Tag parameter to input1_editText, as shown below. This component will store the first of two numbers that will be added together.
    Change Edit Text Properties

  2. For the second Edit Text component, set the String parameter to 0 BUT set the Tag parameter input2_editText. This component will store the second of two numbers that will be added together.

  3. Finally, we need to modify the pushbutton component. Change the String parameter to Add! and change the Tag parameter to add_pushbutton. Pushing this button will display the sum of the two input numbers.
    Change Pushbutton Properties

  4. So now, you should have something like this:
    What You Should Have

    Rearrange your components accordingly. You should have something like this when you are done:
    Visual Aspect of GUI Complete

  5. Now, save your GUI under any file name you please. I chose to name mine myAdder. When you save this file, MATLAB automatically generates two files: myAdder.fig and myAdder.m. The .fig file contains the graphics of your interface. The .m file contains all the code for the GUI.

Pages: 1 2 3 4 5