Practice GUI. "Using all controls".

1. Let us invoke the GUIDE tool by typing guide in the command line.
Press OK to select a blank screen.
2. Place in the work area two controls: Edit Text and Static Text.
3. Double click on the Edit Text control to show the Property Inspector.
Modify the attribute background color to white.
4. Change the default text control Edit Text Escriba Aqui.
5. Make wider the control. Place in the Width property the value 20.
6. Modify the text of the Static Text control "<< Mensaje >>" and place on the width property
the value 20.
7. Run your GUI. The following dialog screen should appear:

Save your screen before continuing.

8. Now we create a function that is executed when you press enter. This event invokes the
function "callback".
Place the mouse in the control, press the right button, expand "View Callbacks" and choose
"Callback". The file-M editing window will appear and will be placed in the line of the
corresponding control function:
Function varargout=edit1_Callback(h,eventdata,handles,varagin)
the syntax for naming functions is as follows:
function <output variable>=Control Name_call function (<calling object handler>,<event
data>,<handler>,<input variable>)
Write the following code:
Msg=get(h,string)
Set(handles,text1,string,msg)
9. Execute the program and write in the edit text Hola Mundo and press enter.
You should have the following result:

10. Place one frame control in the work area. Arrange objects so they look as follows:

The frame will cover the above objects. Solve the problem by pressing the right mouse button
on the frame and select "Send to Back".
11. Add to the workspace one frame, a slider and an edit box. In the edit box change the
background color to white.
Order all the objects as follow:

We recommend to align them using the tool to align objects.

the following configuration:

Selects all objects and select

12. Lets add code for sliding the slider, the value of this is present in the edit box, and the value
of the edit box is represented in the slider by clicking the edit box the right button.
Go to the function named "Callback" for the slider and enter the following code:
Value=get(h,value);
Set(handles.edit2,string,value);
Go to the function called "ButtonDownFcn" the edit text and enter the following code:
Set(handles.slider1,value,str2num(get(h,string)))
13. Run the program and do testings.

14. Suppose that the slider is required to drive a value from 0 to 1000 and when pressing the arrows
on the sides the value vary and pressing unit between the sliding block and an arrow of the wings
the value vary 10 units. To achieve these effects requires modifying the following properties:
Property: Max
New value: 1000
Property: SliderStep x
New value: 0.001
Property: SliderStep y
New value: 0.01
X is the % of change when pressing the arrows.
Y is the % of change when pressing between the block and the arrow side.
Note: StepSlider values are calculated from the percent of change, as in x the change is a thousandth
then the value 0.001 is indicated. For y the change is one hundredth then the value of 0.01 is
indicated.
15. Add a Push Botton control and modify the following properties:
Property: String
New value: Lema
Property: PositionWidth New value: 15

16. Write in the callback function called Push Button, the following code:
Warndlg(Por la Superacion Plena del Hombre..!,Lema de la UABC)
17. Run the program and press the Botton.
The following warning message will appear:

18. Enter in the work area a Frame and one Toggle Button. Modify the following attributes of
controls:
Control: togglebutton1
Property:String
Property:PositionWidth

New value: Habilitar Boton

New value: 20

Control: pushbutton1
Property:Enable

New value: off

Arrange the controls so they look like this:

19. Type the following code in the callback function for control ToggleButton1:
If get(h,value)==1
Set(handles.pushbutton1,enable,on)
else
Set(handles.pushbutton1,enable,off)
end
The purpose of this code is to enable or disable the Control pushbutton1 depending on the state of
ToggleButton1.

20. Run the program and verify that it works.

21. Add a Checkbox and a Frame and set the checkbox for when it is marked then paint the
background color. Modify the properties of the checkbox:
Property:String
Property:PositionWidth

New value: Verde el Fondo

New value:20

Arrange the controls so they look like this:

22. Write the following code in the callback function called the CheckBox1 Control:
If get(h,value)==1
set(h,Backgroundcolor,green)
set(handles.frame4,Backgroundcolor,green)
else
set(h,Backgroundcolor,factory)
set(handles.frame4,Backgroundcolor,factory)
end
23. Run the program and verify that it works.

24. Now we will use the Popup Menu control. Insert a Popup, Static Text and Frame control. Change
the attributes of the following objects:

Control: text2
Property: String
Property: PositionWidth
Property: Backgroundcolor red,green,blue

New value: Color del Fondo de Pantalla*

New value: 20
New Value: 1,1,1

* Write this value in two lines using the editor string

of property inspector.

Control: popupmenu1
Property: String
New value:
Amarillo|Morado|Cielo|Rojo|Verde|Azul|Blanco|Negro
Arrange the controls so they look like this:

25. In the Popup menu callback type the following:

Color={y;m;c;r;g;b;w;k};
Whitebg(char(color(get(h,value))))
26. Run the program and verify that it works.

27. Make a list of selectable numbers through 3 Radio Buttons, each radio will display a different
count the listbox.
Insert in the work area a Frame, a listbox a Static Text and 3 Radio Button.
Modify the following attributes:

Control: text3
Property: String
New value: Contando..
Control: radiobutton1
Property: String
New value: 1 al 10
Property value
New value: 1
Control: radiobutton2
Property: String
New value: 100 al 200
Control: radiobutton3
Property: String
New value: 5 en 5 al 50
Arrange the controls so they look like this:

28. You need to consider that by using the radiobutton in Matlab you must update its code state,
this means that when triggered the callback event of a radio button, the programmer must update
the values of all other concerning the Radio button pushed.
Therefore it will be necessary to add the following code to the callback functions of the three radio
button.
Control: radiobutton1
Function: Callback
Serie=1:1:10;
set(handles.listbox1,string,serie)
set(handles.radiobutton1,value,1)
set(handles.radiobutton2,value,0)
set(handles.radiobutton3,value,0)
Control: radiobutton2
Function: Callback
Serie=100:1:200;
set(handles.listbox1,string,serie)
set(handles.radiobutton1,value,0)
set(handles.radiobutton2,value,1
set(handles.radiobutton3,value,0)

Control: radiobutton3
Function: Callback
Serie=0:5:50;
set(handles.listbox1,string,serie)
set(handles.radiobutton1,value,0)
set(handles.radiobutton2,value,0)
set(handles.radiobutton3,value,1)
29. Run the program and verify that it works.
30. You will notice that when you start the GUI, it does not have data in the listbox, but the radio
button 1 is selected by default. To make this effect, you will need to add code to the function called
CreateFcn the ListBox. This way we initialize.
serie=1:1:10;
set(h,string,serie)
Run the program. In this occasion you will have the initial values.

31. Implement menus for the interface through the Editor menu
. Call it by pressing the icon on
the toolbar. Once opened we will create a menu called File, the main menus are created by pressing
the button

and submenus with

. Using the arrow keys move the menu position

. The properties of UIMenus are Label that is the message to display, Tag
identification tag, the first check box places a separator in the top menu, the second marks the
menu with a check and edit box callback Go function name.

Create the following menu tree with its own effect:

32. Menu Editor does not support creating callback function in the M file, so we have to create for
ourselves. When we close and re-open the editor will automatically set the menu the function name
in the edit box callback since left its default value <automatic>. Find the name of control regarding
the menu UIMENU out. And enter the following code:
delete(gef)

33. Check that the figure is closed.

34. Add the following line at the callbacks of the corresponding menus:
Menu: Copy to clipboard
Callback: print dbitmap
Menu: TIF file
Callback: print temp.tif;msgbox(Se gravo en el archive temp.tif)

35. Finally we will add a farewell message, which will be deployed when closing the figure. This was
achieved through the function called DeleteFcn of the figure object, you get to the right clicking on
the work area.

In that function type:

Msgbox(Buena Suerte..,Despedida,help)

36. Run the program and test the farewell message.