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 lef
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 lef
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