CreacióN De Una Interfaz GráFica Del Usuario(Gui)

25
Creación de una Interfaz Gráfica del Usuario(GUI) Versión 7 Marzo 2006 Autor: Arturo Salinas C.

Transcript of CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Page 1: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Creación de una Interfaz Gráfica del Usuario(GUI)

Versión 7

Marzo 2006

Autor: Arturo Salinas C.

Page 2: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Para crear una interfaz gráfica proceda a seleccionar en MATLAB: FILE, NEW GUI

Page 3: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Aparece la siguiente ventana:

Haga clic sobre el botón OK con el botón izquierdo del ratón

Page 4: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Aparece la siguiente ventana:

Page 5: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Si los controles de la izquierda de la ventana anterior no tienen visibles sus nombres, proceda a seleccionar de la barra menú la opción FILE, PREFERENCES y obtendrá la ventana:

Page 6: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Active la casilla de verificación SHOW NAMES IN COMPONENTS PALETTE como se aprecia en la siguiente ventana:

Page 7: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

La ventana quedará como se aprecia a continuación:

Page 8: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Proceda a guardar este GUI yendo a FILE, SAVE AS dando nombre EJEMPLO1 y pulsar botón del ratón sobre el botón GUARDAR como se aprecia a continuación.

Page 9: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Ahora bien, procederemos a insertar tres BOTONES DE COMANDO(PUSH BUTTOM). Para ello haga clic sobre el botón PUSH BUTTOM y arrastre hacia el área de gráficos como se aprecia en la ventana siguiente:

Page 10: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Ubique cursor del ratón sobre el botón recién creado y pulse el botón derecho del ratón y obtendrá el menú contextual siguiente:

Page 11: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Elija la opción DUPLICATE y le creará una copia de ese botón. Repita la acción y tendrá la siguiente ventana:

Page 12: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Arrastre los botones de modo que queden como se ve en la siguiente ventana:

Page 13: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Ubíquese sobre el primer botón y pulse botón izquierdo del ratón y le aparecerá una ventana cuyo título es PROPERTY INSPECTOR vaya a la propiedad STRING y ponga el texto Grafico 1 como se observa en la siguiente ventana:

Page 14: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Ahora cierre el cuadro de diálogo PROPERTY INSPECTOR y realice la misma acción anterior sobre el segundo botón de comando y en la propiedad STRING digite Grafico 2 como se aprecia a continuación:

Page 15: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Ahora cierre el cuadro de diálogo PROPERTY INSPECTOR y realice la misma acción anterior sobre el tercer botón de comando y en la propiedad STRING digite Grafico 3 como se aprecia a continuación:

Page 16: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

A continuación, procederemos a guardar el GUI nuevamente y nos aparecerá la siguiente ventana.

Ubique la función pushbuttom1_Callback que se encuentra casi al final del archivo

Page 17: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Inserte las siguientes instrucciones en esa función y en la posición que se indica en la siguiente ventana:

Page 18: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Haga lo mismo con la función pushbuttom2_Callback y agregue las instrucciones que se indican a continuación:

Page 19: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Finalmente proceda a agregar las siguientes instrucciones en la función pushbuttom3_Callback

Page 20: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Con lo anterior tenemos nuestro GUI completo por lo tanto lo guardaremos:

Después salimos desde ese GUI

Page 21: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Probaremos el GUI recién terminado para lo cual desde la ventana de comandos de MATLAB digite ejemplo1 y aparecerá la siguiente pantalla:

Page 22: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Damos un clic sobre el botón con nombre Grafico 1 y vemos la siguiente pantalla:

Page 23: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Bueno, ahora hacemos un clic sobre el botón con nombre Grafico 2 y vemos la siguiente pantalla:

Page 24: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Bueno, ahora hacemos un clic sobre el botón con nombre Grafico 3 y vemos la siguiente pantalla:

Page 25: CreacióN De Una Interfaz GráFica Del Usuario(Gui)

Si obtenemos los resultados anteriores, significa que nuestro GUI está perfecto por lo que lo podremos utilizar en el futuro o modificarlo para agregarle otros objetos.

Hemos logrado confeccionar rápidamente una demostración bastante simple pero que nos ilustra la facilidad de esta herramienta para producir material de apoyo.