Computação e Programação

Transcrição

1 Computação e Programação MEMec, LEAN - 1º Semestre 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 D.E.M. Área Científica de Controlo Automação e Informática Industrial 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 /

2 Interface Gráfica do Utilizador (GUI) Tipo de interface com o utilizador que permite a interação com dispositivos digitais através de elementos gráficos, como ícones e outros indicadores visuais A interação é feita geralmente através de um rato, um teclado, ou um ecrã tactil, com os quais o utilizador é capaz de selecionar símbolos e de os manipular de forma a obter algum resultado prático. Computação e Programação 2015 / Exemplos de interfaces gráficas GNOME (Ubuntu ver. 9.04) ios 5.0 Android 4.0 Windows 7 Computação e Programação 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 / Elementos da GUI No sistema WIMP (Windows, Icons, Menus and Pointing device) os componentes que constituem uma GUI típica incluem: Sistema de janelas, Ícones e elementos gráficos, Menus/grupos de funções, Dispositivo de ponteiro (e.g.: o rato) Computação e Programação 2015 /

4 Qualidade de uma GUI Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp howtoachievetheirgoals,anddotheirwork. Efficient interfaces do not concern the user with the inner workings of the system. Effective applications and services perform a maximum of work, while requiring a minimum of information from users. Computação e Programação 2015 / 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 /

5 Programação event-driven Os eventos incluem acções do utilizador, acções devidas a outros 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 de execução programado no código, mas sim da sequência de elementos de código (callbacks) disparada por reacção aos eventos O controlo do fluxo de execução do programa constitui a principal diferença entre a programação dirigida por eventos e a programação de execução sequencial. Computação e Programação 2015 / Programação event-driven Programa de execução sequencial Computação e Programação 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 / 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 /

7 GUIs no MATLAB Uma GUI no MATLAB é uma aplicação gráfica com uma ou mais janelas que contém componentes e controlos(controlos são também componentes, mas disparam elementos de código por reacção a eventos), e que permitem a interacção entre 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. Computação e Programação 2015 / Estrutura de uma GUI no MATLAB Figure: simple_gui.fig + M-file: simple_gui.m Computação e Programação 2015 /

8 Execução da GUI no MATLAB O funcionamento da generalidade das GUIs no MATLAB baseia-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ódigo denominados por callbacks. Uma callback contém o código que o MATLAB executa como reacção ao evento desencadeado Computação e Programação 2015 / Execução da GUI no MATLAB 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 Computação e Programação 2015 /

9 Processo de Desenvolvimento Fase I Fase II Fase III Computação e Programação 2015 / 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 /

10 Componentes e controlos da GUI As componentes das GUIs incluem, entre outros: figures, menus, toolbars, push buttons, radio buttons, list boxes, static text sliders axes etc Computação e Programação 2015 / Exemplo: GUI controlsuite Disponível na pasta do MATLAB, subdirectoria "..\help\techdoc\crea ting_guis\examples" Abrir pela linha de comandos utilizando: guide controlsuite Computação e Programação 2015 /

11 Conceitos básicos Uma handle é uma variável através da qual se pode modificar, ou aceder às propriedades (estado) do componente que lhe está associado Computação e Programação 2015 / 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 guardadas nos campos de uma estrutura chamada handles, criada automaticamente pelo GUIDE handles = figure1: listbox: slider: pushbutton: output: Computação e Programação 2015 /

12 Conceitos básicos Descrição: As funções get e set permitem conhecer e modificar o valor das propriedades de um componente através da 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 / Conceitos básicos A estrutura handles, é um dos três argumentos de entrada que o GUIDE gera automaticamente em todas as funções de callback Isso implica que todos os componentes, e respectivas propriedades, estão acessíveis dentro de todas as funções de callback Quaisquer dados, ou estruturas de dados, que devam estar acessíveis durante a execução da GUI, devem ser adicionados como novos campos da estrutura handles Computação e Programação 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 / Estrutura padrão da m-file de uma GUI Computação e Programação 2015 /

14 Exemplo: GUI controlsuite Comments Computação e Programação 2015 / Exemplo: GUI controlsuite Initialization Computação e Programação 2015 /

15 Exemplo: GUI controlsuite Opening Function Computação e Programação 2015 / Exemplo: GUI controlsuite Output Function Computação e Programação 2015 /

16 Exemplo: GUI controlsuite Component and figure callbacks (sample) Computação e Programação 2015 / 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 /

17 Componentes e controlos da GUI 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. figures, menus, toolbars, push buttons, radio buttons, list boxes, static text sliders axes etc Computação e Programação 2015 / Cabeçalho de uma função de callback Declaração da função de callbackpara 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 /

18 Argumentos de uma função de callback OBJECT HANDLE (hobject): handle do próprio componente que disparou a função de callback (também disponível na estrutura handles) EVENT DATA (eventdata): variável reservada para futuros desenvolvimentos HANDLES STRUCTURE (handles): estrutura que agrupa nos seus campos as handles de todas as componentes existentes na GUI, bem como todos os dados adicionais da aplicação Computação e Programação 2015 / Exemplo: GUI controlsuite Computação e Programação 2015 /

19 Exemplo: GUI controlsuite Push Button Toggle Button. Computação e Programação 2015 / 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 /

20 Simple GUI Computação e Programação 2015 / Simple GUI Computação e Programação 2015 /

24 Simple GUI Editor de opções do popup Computação e Programação 2015 / Simple GUI Computação e Programação 2015 /

25 Referências Secção 14.3 de Matlab: A Practical Introduction to Programming and Problem Solving, Stormy Attaway (2012) Elsevier. Wikipédia: Mathworks: Creating Graphical User Interfaces (buildgui.pdf) Capítulo 13 de Essential MATLAB for Engineers and Scientists 3 rd Edition, Brian Hahn e Dan Valentine (2007)Elsevier. As aulas teóricas contêm contribuições dos profs. José Borges e Miguel Silva Computação e Programação 2015 / Demos da Mathworks demo.html?product=ml NewR2007b_GraphicsAndGUIBuilding.html?product=ML NewR2008a_GraphicsAndGUIBuilding.html?product=ML New_6GUIs_viewlet_swf.html?product=ML Computação e Programação 2015 /