14/12/2015
1
D.E.M. – Área Científica de Controlo Automação e Informática Industrial
Computação e ProgramaçãoMEMec, LEAN - 1º Semestre 2015-2016
Aula Teórica 25
• Interfaces Gráficas do Utilizador (GUIs)• Programação event-driven• GUIs no MATLAB
• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Alinhamento da AT 25
• Interfaces Gráficas do Utilizador (GUIs)
• Programação event-driven
• GUIs no MATLAB• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Computação e Programação 2015 / 2016 2
14/12/2015
2
• Tipo de interface com o utilizador que permite ainteração com dispositivos digitais através deelementos gráficos, como ícones e outros indicadoresvisuais
• A interação é feita geralmente através de um rato,um teclado, ou um ecrã tactil, com os quais outilizador é capaz de selecionar símbolos e de osmanipular de forma a obter algum resultado prático.
Interface Gráfica do Utilizador (GUI)
Computação e Programação 2015 / 2016 3
Exemplos de interfaces gráficas
• GNOME (Ubuntu ver. 9.04)
• iOS 5.0
• Android 4.0
• Windows 7
Computação e Programação 2015 / 2016 4
14/12/2015
3
Exemplos de interfaces de linha de comando
• MS-DOS (Windows XP)• GNOME Terminal 3
• Mac OS X Terminal
Computação e Programação 2015 / 2016 5
• No sistema WIMP (Windows, Icons, Menus andPointing device) os componentes que constituemuma GUI típica incluem:
• Sistema de janelas,
• Ícones e elementos gráficos,
• Menus/grupos de funções,
• Dispositivo de ponteiro (e.g.: o rato)
Elementos da GUI
Computação e Programação 2015 / 2016 6
14/12/2015
4
• “Effective interfaces are visually apparent andforgiving, instilling in their users a sense of control.Users quickly see the breadth of their options, grasphow to achieve their goals, and do their work.”
• “Efficient interfaces do not concern the user withthe inner workings of the system.”
• “Effective applications and services perform amaximum of work, while requiring a minimum ofinformation from users.”
Qualidade de uma GUI
http://www.asktog.com/basics/firstPrinciples.html
Computação e Programação 2015 / 2016 7
Alinhamento da AT 25
• Interfaces Gráficas do Utilizador (GUIs)
• Programação event-driven
• GUIs no MATLAB• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Computação e Programação 2015 / 2016 8
14/12/2015
5
• Os eventos incluem acções do utilizador, acções devidas aoutros elementos de código, ou acções externas (geradas pelo
SO, como por exemplo a criação de um ficheiro ou a ligação de hardware
periférico)
• O controlo do programa não depende de um fluxo deexecução programado no código, mas sim da sequência deelementos de código (callbacks) disparada por reacção aoseventos
• O controlo do fluxo de execução do programa constitui aprincipal diferença entre a programação dirigida poreventos e a programação de execução sequencial.
Programação event-driven
Computação e Programação 2015 / 2016 9
• Programa de execução sequencial
Programação event-driven
Computação e Programação 2015 / 2016 10
14/12/2015
6
Programação event-driven
• Programa dirigido por eventos
As funções que respondem aos eventos
chamam-se funções de callback
Computação e Programação 2015 / 2016 11
Alinhamento da AT 25
• Interfaces Gráficas do Utilizador (GUIs)
• Programação event-driven
• GUIs no MATLAB• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Computação e Programação 2015 / 2016 12
14/12/2015
7
• Uma GUI no MATLAB é uma aplicação gráfica com uma oumais janelas que contém componentes e controlos (controlossão também componentes, mas disparam elementos decódigo por reacção a eventos), e que permitem a interacçãoentre o utilizador e o programa.
• As GUIs no MATLAB permitem:
• realizar operações de computação,
• ler / escrever para ficheiros,
• comunicar com outras GUIs,
• apresentar dados em tabelas e gráficos.
GUIs no MATLAB
Computação e Programação 2015 / 2016 13
Estrutura de uma GUI no MATLAB
Figure: simple_gui.fig M-file: simple_gui.m+
Computação e Programação 2015 / 2016 14
14/12/2015
8
• O funcionamento da generalidade das GUIs no MATLABbaseia-se na reacção a acções ou eventos (event-driven)
• A GUI está normalmente num dado estado, que apenas éalterado quando o utilizador, ou outros elementos de código,desencadeiam uma determinada acção ou evento
• Os controlos da GUI têm associados elementos de códigodenominados por callbacks. Uma callback contém o códigoque o MATLAB executa como reacção ao eventodesencadeado
Execução da GUI no MATLAB
Computação e Programação 2015 / 2016 15
• Os eventos do utilizador que desencadeiam callbacks
no MATLAB incluem por exemplo:
• carregar em botões da GUI
• carregar num botão do rato
• seleccionar um elemento do menu
• escrever uma cadeia de caracteres ou valor numérico
• passar com o rato em cima de uma componente
Execução da GUI no MATLAB
Computação e Programação 2015 / 2016 16
14/12/2015
9
Processo de Desenvolvimento
Fase I
Fase III
Fase II
Computação e Programação 2015 / 2016 17
Alinhamento da AT 25
• Interfaces Gráficas do Utilizador (GUIs)
• Programação event-driven
• GUIs no MATLAB• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Computação e Programação 2015 / 2016 18
14/12/2015
10
• As componentes das GUIs incluem, entre outros:
• figures,• menus, • toolbars, • push buttons, • radio buttons, • list boxes, • static text• sliders• axes• etc
Componentes e controlos da GUI
Computação e Programação 2015 / 2016 19
• Disponível na pasta do MATLAB, subdirectoria "..\help\techdoc\creating_guis\examples"
• Abrir pela linha de comandos utilizando: guide
controlsuite
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 20
14/12/2015
11
Conceitos básicos
• Uma handle é uma variável através da qual se podemodificar, ou aceder às propriedades (estado) docomponente que lhe está associado
Computação e Programação 2015 / 2016 21
Conceitos básicos
• Todos os componentes de uma GUI, incluindo a figura,possuem a sua própria handle
• As handles de todos os componentes da GUI são guardadasnos campos de uma estrutura chamada handles, criadaautomaticamente pelo GUIDE
handles =
figure1: 162.0011
listbox: 5.0017
slider: 4.0020
pushbutton: 163.0011
output: 162.0011
Computação e Programação 2015 / 2016 22
14/12/2015
12
Conceitos básicos
Descrição: As funções get e set permitem conhecer emodificar o valor das propriedades de um componente atravésda sua handle
Sintaxe: valor = get(handle, propriedade)
set(handle, propriedade, valor)
% Exemplos escritos dentro de uma função de callback
num_real = get(handles.slider, 'Value');
set(handles.listbox, 'BackgroundColor', [1 1 0]);
Computação e Programação 2015 / 2016 23
Conceitos básicos
• A estrutura handles, é um dos três argumentos deentrada que o GUIDE gera automaticamente em todas asfunções de callback
• Isso implica que todos os componentes, e respectivaspropriedades, estão acessíveis dentro de todas as funçõesde callback
• Quaisquer dados, ou estruturas de dados, que devam estaracessíveis durante a execução da GUI, devem seradicionados como novos campos da estrutura handles
Computação e Programação 2015 / 2016 24
14/12/2015
13
Alinhamento da AT 25
• Interfaces Gráficas do Utilizador (GUIs)
• Programação event-driven
• GUIs no MATLAB• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Computação e Programação 2015 / 2016 25
Estrutura padrão da m-file de uma GUI
Computação e Programação 2015 / 2016 26
14/12/2015
14
• Comments
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 27
• Initialization
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 28
14/12/2015
15
• Opening Function
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 29
• Output Function
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 30
14/12/2015
16
• Component and figure callbacks (sample)
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 31
Alinhamento da AT 25
• Interfaces Gráficas do Utilizador (GUIs)
• Programação event-driven
• GUIs no MATLAB• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Computação e Programação 2015 / 2016 32
14/12/2015
17
• figures,• menus,• toolbars, • push buttons,• radio buttons, • list boxes, • static text• sliders• axes• etc
• Controlos são componentes que geram eventos em resposta a uma acção do utilizador. Estão normalmente associados a uma função de callback que executa a acção pretendida.
Componentes e controlos da GUI
Computação e Programação 2015 / 2016 33
Cabeçalho de uma função de callback
Declaração da função de callback para a componente (pushbutton1) que disparou a
chamada. O nome é gerado pelo GUIDE a partir do
identificador (Tag) do componente.
Argumentos de entrada. A sequência indicada é fixa e gerada
pelo GUIDE.
Computação e Programação 2015 / 2016 34
14/12/2015
18
• OBJECT HANDLE (hObject): handle do própriocomponente que disparou a função de callback (tambémdisponível na estrutura handles)
• EVENT DATA (eventdata): variável reservada parafuturos desenvolvimentos
• HANDLES STRUCTURE (handles): estrutura que agrupanos seus campos as handles de todas as componentesexistentes na GUI, bem como todos os dados adicionais daaplicação
Argumentos de uma função de callback
Computação e Programação 2015 / 2016 35
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 36
14/12/2015
19
• Push Button
• Toggle Button
.
Exemplo: GUI controlsuite
Computação e Programação 2015 / 2016 37
Alinhamento da AT 25
• Interfaces Gráficas do Utilizador (GUIs)
• Programação event-driven
• GUIs no MATLAB• Componentes e handles
• Estrutura do código no m-file
• Controlos e funções de callback
• Exemplo: Simple GUI
Computação e Programação 2015 / 2016 38
14/12/2015
20
Simple GUI
Computação e Programação 2015 / 2016 39
Simple GUI
Computação e Programação 2015 / 2016 40
14/12/2015
21
Simple GUI
Computação e Programação 2015 / 2016 41
Simple GUI
Computação e Programação 2015 / 2016 42
14/12/2015
22
Simple GUI
Computação e Programação 2015 / 2016 43
Simple GUI
Computação e Programação 2015 / 2016 44
14/12/2015
23
Simple GUI
Computação e Programação 2015 / 2016 45
Simple GUI
Computação e Programação 2015 / 2016 46
14/12/2015
24
Simple GUI
Editor de opções do popup
Computação e Programação 2015 / 2016 47
Simple GUI
Computação e Programação 2015 / 2016 48
14/12/2015
25
As aulas teóricas contêm contribuições dos profs. José Borges e Miguel Silva
Computação e Programação 2015 / 2016 49
Referências
• Secção 14.3 de Matlab: A Practical Introduction to
Programming and Problem Solving, Stormy Attaway (2012) Elsevier.
• Wikipédia:• http://en.wikipedia.org/wiki/Graphical_user_interface
• http://pt.wikipedia.org/wiki/Interface_gráfica_do_utilizador
• Mathworks:
• “Creating Graphical User Interfaces” (buildgui.pdf)http://www.mathworks.com/access/helpdesk/help/pdf_doc/matlab/buildgui.pdf
• Capítulo 13 de Essential MATLAB for Engineers and Scientists
3rd Edition, Brian Hahn e Dan Valentine (2007) Elsevier.
• http://www.mathworks.com/demos/matlab/creating-a-graphical-user-interface-matlab-video-tutorial.html?product=ML
• http://www.mathworks.com/products/demos/shipping/matlab/uitabledemo.html?product=ML
• http://www.mathworks.com/products/demos/shipping/matlab/WhatsNewR2007b_GraphicsAndGUIBuilding.html?product=ML
• http://www.mathworks.com/products/demos/shipping/matlab/WhatsNewR2008a_GraphicsAndGUIBuilding.html?product=ML
• http://www.mathworks.com/products/demos/shipping/matlab/WhatsNew_6GUIs_viewlet_swf.html?product=ML
Demos da Mathworks
Computação e Programação 2015 / 2016 50
Top Related