EJEMPLO COMPLETO, EXPLICADO PASO A PASO, DESARROLLADO CON

GUI EN MATLAB

Por Hernán Darío Toro Escobar

1. Inicialmente debemos tener completamente claro el problema.

A continuación se presenta la definición del problema que

desarrollaremos en este ejercicio:

En un curso, cada estudiante presenta dos exámenes. La nota

de cada examen se encuentra entre 0.0 y 5.0. Se quiere listar el
nombre de cada estudiante con su nota promedio. Además, la
nota media de todos los estudiantes del grupo.

ENTRADA:

• nombreEstudiante
• notaExamen1
• notaExamen2

SALIDA

• Por cada estudiante: nombreEstudiante

notaPromedio
• notaMediaGrupo

DISEÑO DE LA FORMA:

• Cuatro etiquetas
o Nombre
o Examen 1
o Examen 2
o Nota Promedio
• Cuatro cuadros de texto
o tNombre
o tExamen1
o tExamen2
o tNotaPromedio
• Tres botones
o bCalcular
o bEntrar
o bTerminar
2. Entremos a MATLAB. Una vez en MATLAB, abrimos la GUI (Interfase
Gráfica de Usuario) así: File – New - GUI. Se muestra la siguiente
ventana (GUIDE Quick Start):

3. Seleccionemos Blank GUI (Default) y digitemos OK. Se presenta un

formulario, así:
 En la parte izquierda del formulario apreciamos los controles.

4. Digitemos doble-click en cualquier parte del formulario y se muestra un

menú con las propiedades del formulario, así:
5. Por defecto, el formulario tiene como nombre identificador (Tag en el
cuadro de propiedades) “Figure 1”. Cámbiémoslo a “fBalance”
(Escribimos el prefijo f por ser un formulario).

6. Modifiquemos el color del formulario a nuestro gusto (propiedad Color)

7. Modifiquemos también la dimensión del formulario colocando el cursor

(la flecha) en el punto inferior derecho del formulario (un cuadro
diminuto de color negro) , y con el botón izquierdo del mouse apretado,
lo arrastramos hasta lograr el tamaño que creamos más conveniente

8. Procedemos a colocar los diferentes controles al formulario iniciando por

la primera etiqueta, Nombre, así: arrastremos el control Static Text al
formulario como lo indica la siguiente figura:
9. Haciendo doble-click sobre la etiqueta, se presenta un menú con las
propiedades de la misma. Modifiquemos algunas de estas propiedades,
así:

a. El tamaño y la posición lo podemos hacer colocando el cursor

sobre los extremos de la etiqueta y con el botón izquierdo del
mouse apretado, arrastramos los puntos o las líneas hasta el
punto del formulario que creamos más indicado y hasta darle un
tamaño conveniente

b. En la propiedad String escribimos la palabra Nombre

c. En la propiedad FontSize escribimos 15

d. En la propiedad FontAngle señalamos italic

e. En la propiedad FontWeight señalamos bold

f. En la propiedad HorizontalAlignment señalamos left

g. En la propiedad BackgroundColor indicamos el mismo color del

formulario (es lo más adecuado)
 h. Otras propiedades podrían ser modificadas a nuestro gusto
después de comprender su efecto

La nueva apariencia de la etiqueta se muestra en la siguiente figura:

10.Procedemos a colocar las etiquetas Examen 1, Examen 2 y Nota

Promedio copiando y pegando la etiqueta Nombre y modificando en
cada una de ellas la propiedad String Nombre por Examen 1, Examen
2 y Nota Promedio respectivamente. El formulario, luego de los
cambios, se presenta así:
11.Seguidamente procedemos a colocar en el formulario los diferentes
cuadros de texto. Iniciamos con el cuadro de texto donde el usuario
escribirá el nombre, así:

a. Arrastramos el control Edit Text hacia el formulario al frente de la

etiqueta Nombre

b. Le damos la ubicación y el tamaño adecuado de igual forma como

procedimos con la etiqueta Nombre

c. Modificamos las propiedades FontSize, FontAngle, FontWeight

y BackgroundColor a nuestro gusto

d. En la propiedad HorizontalAlignment señalamos left

e. La propiedad String debe quedar en blanco

f. Importante: en la propiedad Tag escribimos tNombre y es la

identificación del objeto en el programa (Escribimos el prefijo t por
ser un cuadro de texto)

El formulario lo veremos así:

12.Los cuadros de texto para las notas del Examen 1 y el Examen 2 los
insertamos en el formulario simplemente copiando y pegando tNombre
y modificando las siguientes propiedades:

a. La propiedad Tag para cada uno de ellos así: tExamen1 y

tExamen2

b. En la propiedad HorizontalAlignment señalamos right por que

su contenido es numérico

c. La dimensión de cada cuadro es, desde luego, más pequeña que

la del nombre

Luego de la inclusión de estos dos cuadros, el formulario se muestra así:

13.El cuadro de texto para la nota promedio debe ser un Static Text, como
las etiquetas, porque su contenido no debe ser modificado por el usuario
(sólo por el programa). Para incluir este cuadro, procedemos así:

a. Arrastramos el control Static Text hacia el formulario en la

ubicación adecuada (al frente de la etiqueta Nota Promedio

b. En la propiedad Tag escribimos tNotaPromedio

c. Las demás propiedades las hacemos iguales a las de tExamen1 y

tExamen2

El formulario lo veremos así:

14.A continuación procedemos a incluir en el formulario los tres botones
requeridos para calcular la nota promedio, entrar la información a un
archivo, desplegar el listado solicitado y terminar. Iniciamos con el
primer botón de comando, así:

a. Arrastramos el control Push Button hacia el formulario en la

ubicación adecuada

b. Le damos un tamaño acorde con su contenido

c. Modificamos las propiedades FontSize, FontAngle, FontWeight

y BackgroundColor a nuestro gusto

d. En la propiedad String escribimos Calcular

e. En la propiedad Tag escribimos bCalcular

f. Copiamos y pegamos el botón bCalcular para incluir los otros

dos botones y les modificamos el contenido de la propiedad
String por Entrar y Terminar y el de la propiedad Tag por
bEntrar y bTerminar respectivamente

El formulario, en su presentación final, lo vemos así:

15.El paso siguiente consiste en la programación de cada uno de los
eventos.

a. Creación del formulario. El primero evento es la creación del

formulario (al iniciar la ejecución del programa) y se programa así:
damos click al botón derecho del mouse en cualquier parte del
formulario donde no se encuentre ningún objeto y se mostrará un
menú del cual seleccionamos la opción View Callbacks que nos
lleva a una nueva lista de opciones de las cuales señalamos
CreateFcn como se presenta en la figura:
 Inmediatamente, los pasos anteriores no lleva al editor, que nos
muestra el siguiente código, para que nosotros completemos las
instrucciones requeridas en la programación de la función:
% --- Executes during object creation, after setting all properties.
function fBalance_CreateFcn(hObject, eventdata, handles)
% hObject handle to fBalance (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles empty - handles not created until after all CreateFcns called

La programación de esta función consiste en borrar las variables e

inicializar el contador de estudiantes (nroEstudiantes) en 0. Este
contador lo declaramos como global porque lo utilizaremos en
otras partes del programa. La función completa queda así:
% --- Executes during object creation, after setting all properties.
function fBalance_CreateFcn(hObject, eventdata, handles)
% hObject handle to fBalance (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles empty - handles not created until after all CreateFcns called
% Declaramos la variable nroEstudiantes como global porque se utilizará en
% otros eventos
global nroEstudiantes;
nroEstudiantes = 0;

b. Botón bCalcular. Cuando el usuario da click en el botón Calcular

se debe obtener el promedio de las dos notas contenidas en
tExamen1 y tExamen 2. Para programar este evento damos
 click con el botón derecho de mouse en el botón del formulario
bCalcular lo que nos muestra un menú del cual seleccionamos la
opción View Callbacks que nos lleva a otro menú de opciones
entre las cuales damos click en la opción Callback que nos lleva
al editor, presentándonos el siguiente código:
% --- Executes on button press in bCalcular.
function bCalcular_Callback(hObject, eventdata, handles)
% hObject handle to bCalcular (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)

La programación de esta function consiste en llevar a una

variable, examen1, el contenido de tExamen1 como valor; llevar
a una variable, examen2, el contenido de tExamen2; calcular
notaPromedio y llevar este dato al cuadro de texto
tNotaPromedio. La variable notaPromedio la declaramos como
global porque la utilizaremos en otros eventos. El código
completo de la función queda así:
% --- Executes on button press in bCalcular.
function bCalcular_Callback(hObject, eventdata, handles)
% hObject handle to bCalcular (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
global notaPromedio;
examen1 = eval(get(handles.tExamen1, 'String'));
examen2 = eval(get(handles.tExamen2, 'String'));
notaPromedio = (examen1 + examen2) / 2;
set(handles.tNotaPromedio, 'String', notaPromedio);

c. Botón bEntrar. El evento click en el botón bEntrar debe

producir el incremento de la variables nroEstudiantes en 1,
llevar la información de tNombre al vector nombres, llevar
notaPromedio al vector notasPromedio y por último, borrar los
cuadros de texto en espera de entrar la información de un nuevo
estudiante o de terminar. En los vectores nombres y
notasPromedio almacenamos la información que será
presentada en el informe final. El código completo lo veremos así
en el editor:
% --- Executes on button press in bEntrar.
function bEntrar_Callback(hObject, eventdata, handles)
% hObject handle to bEntrar (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
global nombres;
global notasPromedio;
global notaPromedio;
global nroEstudiantes;

nroEstudiantes = nroEstudiantes + 1;
nombre = get(handles.tNombre, 'String');
nombres{nroEstudiantes} = nombre;
notasPromedio(nroEstudiantes) = notaPromedio;
borrado = '';
 set(handles.tNombre, 'String', borrado);
set(handles.tExamen1, 'String', borrado);
set(handles.tExamen2, 'String', borrado);
set(handles.tNotaPromedio, 'String', borrado);

d. Botón bTerminar. Por último programamos el evento click en el

botón bTerminar que consiste en producir el informe final:
títulos, subtítulos y listado de nombres y notas promedio de los
estudiantes, así como el cálculo y despliegue del promedio del
grupo. Este evento también termina la ejecución del programa. El
código de este evento lo presentamos a continuación:

% --- Executes on button press in bTerminar.

function bTerminar_Callback(hObject, eventdata, handles)
% hObject handle to bTerminar (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
global nombres;
global notasPromedio;
global nroEstudiantes;

clc
fprintf('Balance del Curso\n');
fprintf('\nNombre\tNota\n\n');
for i = 1 : nroEstudiantes
fprintf('%s\t%4.1f\n', nombres{i}, notasPromedio(i));
end
fprintf('\nPromedio del grupo:\t%4.1f\n', mean(notasPromedio));

% terminación del programa

close(gcbf);

16.Hemos concluido el programa completo y ya se encuentra listo para su

ejecución. El programa en ejecución lo podemos ver como lo muestra la
siguiente figura:
17.A continuación observamos el listado final que nos entrega el programa
en la ventana de comandos de MATLAB
18.Al guardar el programa, el editor se salva con la extensión .m y el
formulario con la extensión .fig. Podemos nuevamente traer el
formulario, ya creado, de la siguiente manera:

a. Abrimos MATLAB

b. Entramos a la opción del menú File – New – GUI

c. Se muestra la siguiente ventana:

d. Abrimos la pestaña Open Existing GUI

e. Seleccionamos el archivo requerido .fig

f. Ya tenemos el archivo a disposición para su edición o ejecución