Construo de Interfaces Grficas do Utilizador (GUIs)

Tipos de interfaces do utilizador Programao event-driven GUIs no MATLAB Componentes / controlos da GUI Processo de Desenvolvimento
Instituto Superior Tcnico, Dep. de Engenharia Mecnica - ACCAII

Interface Grfica do Utilizador (GUI)

Tipo de interface do utilizador que permite a interao com dispositivos digitais atravs de elementos grficos como cones e outros indicadores visuais, em contraste interface de linha de comando, que decorre via comandos de texto. A interao feita geralmente atravs de um rato ou um teclado, com os quais o utilizador capaz de selecionar smbolos e manipul-los de forma a obter algum resultado prtico.
http://pt.wikipedia.org/wiki/Interface_grfica_do_utilizador
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

Exemplos de interfaces

interface grfica
GNOME (Ubuntu ver. 9.04)

interface linha de comando

DOS (Windows XP)
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

Elementos da GUI
Uma GUI usa uma combinao de tecnologias e dispositivos para fornecer uma plataforma que permite ao utilizador interagir com um dado sistema (software e/ou hardware. As componentes no sistema WIMP (Windows, Icons, Menus and Pointing device) que constitum uma GUI tipo inclum:
Sistema de janelas, cones e elementos grficos, Menus/grupos de funes, Dispositivo de ponteiro, como por exemplo o rato.
Computao e Programao 2009 / 2010
4

Jos Borges - Miguel Pedro Silva

Programao event-driven
O fluxo da execuo do cdigo nas GUIs controlado por indicaes externas, i.e. eventos, que esta no pode controlar. Este modo de funcionamento resulta num tipo de programao denominado por programao orientada a eventos (event-driven programming) onde o desenvolvimento do programa condicionado por eventos, como por exemplo pressionar o boto do rato. A execuo do programa desenvolve-se de modo assncrono, sendo determinada por aces externas GUI.
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

Programao event-driven
Os eventos incluem aces do utilizador, aces devidas a outros elementos de cdigo ou externas, i.e. geradas pelo SO, como por exemplo a criao de um ficheiro no sistema de ficheiros ou a ligao de hardware perifrico. O controlo do programa no depende de um fluxo de execuo programado no cdigo mas sim da sequncia de elementos de cdigo (callbacks) disparadas por reaco aos eventos. O controlo do fluxo da execuo do programa constitui a principal diferena entre programao orientada a eventos e programao de execuo sequencial.
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

GUIs no MATLAB
Uma GUI no MATLAB uma aplicao grfica com uma ou mais janelas que contm componentes e controlos, i.e. componentes que disparam elementos de cdigo por reaco a eventos, e que permitem a interaco entre o utilizador e o programa. As GUIs no MATLAB permitem:
realizar operaes de computao, ler / escrever para ficheiros, comunicar com outras GUIs, apresentar dados em tabelas e grficos.
Computao e Programao 2009 / 2010
7

Jos Borges - Miguel Pedro Silva

Execuo da GUI no MATLAB

O funcionamento da generalidade das GUIs no MATLAB baseia-se na reaco a aces ou eventos, i.e. a GUI est normalmente num dado estado, que apenas alterado quando o utilizador, ou outros elementos de cdigo, desencadeiam uma determinada aco ou evento. A GUI e respectivos controlos tm associados elementos de cdigo denominados por callbacks. A callback compreende o cdigo que o MATLAB executa como reaco ao evento desencadeado fora da GUI.

Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

Execuo da GUI no MATLAB

Os eventos do utilizador que desencadeiam callbacks no MATLAB incluem:
carregar em botes da GUI carregar num boto do rato seleccionar um elemento do menu escrever uma cadeia de caracteres ou valor numrico passar com o rato em cima de uma componente

Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

Descrio de uma GUI no sistema WIMP

As instrues de comando so apresentadas como cones e organizadas em menus, sendo acionadas atravs do dispositivo de ponteiro.

Um dispositivo de ponteiro, e.g. o rato, usado para controlar a posio dum cursor e apresentar informao organizada em janelas representada atravs e cones.
Jos Borges - Miguel Pedro Silva

O MATLAB fornece / gere a interao entre janelas de GUIs, a prpria aplicao e o SO. A ligao ao SO inclui os dispositivos de hardware, e.g. ponteiro e hardware grfico.

Computao e Programao 2009 / 2010

10

Exemplo de execuo da Simple GUI

EVENTO

1
callback

2 3

Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

11

Componentes / controlos do MATLAB

As componentes das GUIs incluem, entre outros:
Jos Borges - Miguel Pedro Silva

figures, menus, toolbars, push buttons, radio buttons, list boxes, static text sliders axes etc
12

Computao e Programao 2009 / 2010

Estrutura de uma GUI no MATLAB

Figure: simple_gui.fig + M-file: simple_gui.m

Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

13

Editor de GUIs: guide

Barra de menus

Toolbar

Componentes

rea de edio
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

14

Editor de GUIs: guide

Toolbar do guide
Editor de Menus Alinhamento de componentes Editor de Tabs Editor de Toolbars

Editor de m-files do MATLAB Inspector de propriedades das componentes

Jos Borges - Miguel Pedro Silva

Execuo da GUI Explorador de componentes

15

Computao e Programao 2009 / 2010

Desenvolvimento da GUI
O desenvolvimento de qualquer tipo de programa, inclusive as GUIs, pressupe sempre um entendimento do que se pretende para a aplicao final, o que inclu:
Caracterizar os utilizadores da GUI, Determinar as funcionalidades da GUI, Definir o modo de interaco entre os utilizadores e a GUI, Seleccionar as componentes necessrios para o correcto funcionamento da GUI.

Para tal necessria uma abordagem sistemtica na forma de um Processo de Desenvolvimento (PD)
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

16

Processo de Desenvolvimento (PD)

Fase I - Desenho da GUI: documentao dos requisitos e especificao funcional, nomeadamente definio das entradas e sadas, fluxos de dados, tipos de ecrs e caracterizar os comportamentos da GUI e do programa que esta controla. FASE II - Programao da GUI: desenvolver o prottipo grfico da GUI e implementar os elementos de cdigo para os controlos que asseguram o funcionamento correcto e consistente do programa. Fase III Testes
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

17

Ilustrao do PD
Fase I

Fase II Fase III

Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

18

Referncias
Captulo 13 de Essential MATLAB for Engineers and Scientists 3rd Edition, Brian Hahn e Dan Valentine (2007) Elsevier. Seco 13.4 de Matlab: A Practical Introduction to Programming and Problem Solving, Stormy Attaway (2009) Elsevier. Wikipdia:
http://en.wikipedia.org/wiki/Graphical_user_interface http://pt.wikipedia.org/wiki/Interface_grfica_do_utilizador

Mathworks:
Creating Graphical User Interfaces (buildgui.pdf)
http://www.mathworks.com/access/helpdesk/help/pdf_doc/matlab/buildgui.pdf
19

Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

Clicar nos links para aceder aos recursos especificados!

Demos da Mathworks
http://www.mathworks.com/demos/matlab/creating-a-graphical-user-interfacematlab-video-tutorial.html?product=ML http://www.mathworks.com/products/demos/shipping/matlab/uitabledemo.ht ml?product=ML http://www.mathworks.com/products/demos/shipping/matlab/WhatsNewR200 7b_GraphicsAndGUIBuilding.html?product=ML http://www.mathworks.com/products/demos/shipping/matlab/WhatsNewR200 8a_GraphicsAndGUIBuilding.html?product=ML http://www.mathworks.com/products/demos/shipping/matlab/WhatsNew_6GU Is_viewlet_swf.html?product=ML
Jos Borges - Miguel Pedro Silva

Computao e Programao 2009 / 2010

20

10