Computação e Programação

Transcrição

1 Computação e Programação MEMec - LEAN 1º Semestre Aula Teórica 17 Instituto Superior Técnico, Dep. de Engenharia Mecânica - ACCAII Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven Processo de Desenvolvimento GUIs no MATLAB Componentes / controlos da GUI Componentes das GUIs no MATLAB Elementos de Estilo 2 1

2 Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven Processo de Desenvolvimento GUIs no MATLAB Componentes / controlos da GUI Componentes das GUIs no MATLAB Elementos de Estilo 3 Interface Gráfica do Utilizador (GUI) Tipo de interface do utilizador que permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste à interface de linha de comando, que decorre via comandos de texto. A interação é feita geralmente através de um rato ou um teclado, com os quais o utilizador é capaz de selecionar símbolos e manipulá-los de forma a obter algum resultado prático

3 Exemplos de interfaces interface gráfica GNOME (Ubuntu ver. 9.04) interface linha de comando DOS (Windows XP) 5 Elementos da GUI Uma GUI usa uma combinação 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 constituém uma GUI tipo incluém: Sistema de janelas, Ícones e elementos gráficos, Menus/grupos de funções, Dispositivo de ponteiro, como por exemplo o rato. 6 3

4 Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven Processo de Desenvolvimento GUIs no MATLAB Componentes / controlos da GUI Componentes das GUIs no MATLAB Elementos de Estilo 7 Programação event-driven O fluxo da execução do código nas GUIs é controlado por indicações externas, i.e. eventos, que esta não pode controlar. Este modo de funcionamento resulta num tipo de programação denominado por programação orientada a eventos (event-driven programming) onde a evolução do programa é condicionada por eventos, como por exemplo o pressionar do botão do rato. A execução do programa desenvolve-se de modo assíncrono, sendo determinada por acções externas à GUI. 8 4

5 Programação event-driven Os eventos incluem acções do utilizador, acções devidas a outros elementos de código ou externas, i.e. geradas pelo SO, como por exemplo a criação de um ficheiro no sistema de ficheiros 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 da execução do programa constitui a principal diferença entre programação orientada a eventos e programação de execução sequencial. 9 Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven Processo de Desenvolvimento GUIs no MATLAB Componentes / controlos da GUI Componentes das GUIs no MATLAB Elementos de Estilo 10 5

6 Desenvolvimento da GUI O desenvolvimento de GUIs pressupõe o entendimento do que se pretende para a aplicação final, o que incluí: Caracterizar os utilizadores, Identificar as funcionalidades desejadas, Definir o modo de interacção entre os utilizadores e a GUI, Seleccionar as componentes necessários para o correcto funcionamento da GUI. Para tal é necessária uma abordagem sistemática na forma de um Processo de Desenvolvimento (PD) 11 Processo de Desenvolvimento (PD) Fase I - Desenho da GUI: documentação dos requisitos e especificação funcional, nomeadamente definição das entradas e saídas, fluxos de dados, tipos de ecrãs e caracterizar os comportamentos da GUI e do programa que esta controla. FASE II - Programação da GUI: desenvolver o esboço, ou protótipo gráfico, da GUI e implementar os elementos de código para os controlos que asseguram o funcionamento correcto e consistente do programa. Fase III Testes 12 6

7 Ilustração do PD para GUIs no MATLAB Fase I Fase II Fase III 13 Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven Processo de Desenvolvimento GUIs no MATLAB Componentes / controlos da GUI Componentes das GUIs no MATLAB Elementos de Estilo 14 7

8 GUIs no MATLAB Uma GUI no MATLAB é uma aplicação gráfica com uma ou mais janelas que contém componentes e controlos, i.e. componentes que 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. 15 Editor de GUIs: guide GUI do guide Editor de Toolbars de GUIs Toolbar do guide Componentes de GUIs 16 8

9 Execução da GUI no MATLAB O funcionamento da generalidade das GUIs no MATLAB baseia-se na reacção a acções ou eventos, i.e. 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. A GUI e respectivos controlos têm associados elementos de código denominados por callbacks. A callback compreende o código que o MATLAB executa como reacção ao evento desencadeado fora da GUI. 17 Execução da GUI no MATLAB Os eventos do utilizador que desencadeiam callbacks no MATLAB incluem: 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 18 9

10 Descrição de uma GUI no sistema WIMP As instruções de comando são apresentadas como ícones e organizadas em menus, sendo acionadas através do dispositivo de ponteiro. Um dispositivo de ponteiro, e.g. o rato, é usado para controlar a posição dum cursor e apresentar informação organizada em janelas representada através e ícones. O MATLAB fornece / gere a interação entre janelas de GUIs, a própria aplicação e o SO. A ligação ao SO inclui os dispositivos de hardware, e.g. ponteiro e hardware gráfico. 19 Exemplo de execução da Simple GUI EVENTO 1º callback 3º 2º 20 10

11 Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven GUIs no MATLAB Componentes / controlos da GUI Processo de Desenvolvimento Componentes das GUIs no MATLAB Elementos de Estilo 21 Edição da simple_gui Barra de menus Toolbar Componentes Área de edição 22 11

12 Componentes / controlos do MATLAB As componentes das GUIs incluem, entre outros: figures, menus, toolbars, push buttons, radio buttons, list boxes, static text sliders axes etc 23 Estrutura de uma GUI no MATLAB Figure: simple_gui.fig + M-file: simple_gui.m 24 12

13 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 Execução da GUI Explorador de componentes 25 Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven GUIs no MATLAB Componentes / controlos da GUI Processo de Desenvolvimento Componentes das GUIs no MATLAB Elementos de Estilo 26 13

14 Componentes disponíveis no guide 27 Componente: Push Button Push Button Push buttons generate an action when clicked. For example, an OK button might apply settings and close a dialog box. When you click a push button, it appears depressed; when you release the mouse button, the push button appears raised

15 Componente: Slider Slider Sliders accept numeric input within a specified range by enabling the user to move a sliding bar, which is called a slider or thumb. Users move the slider by clicking the slider and dragging it, by clicking in the trough, or by clicking an arrow. The location of the slider indicates the relative location within the specified range. 29 Componente: Radio Button Radio Button Radio buttons are similar to check boxes, but radio buttons are typically mutually exclusive within a group of related radio buttons. That is, when you select one button the previously selected button is deselected. To activate a radio button, click the mouse button on the object. The display indicates the state of the button. Use a button group to manage mutually exclusive radio buttons

16 Componente: Check Box Check Box Check boxes can generate an action when checked and indicate their state as checked or not checked. Check boxes are useful when providing the user with a number of independent choices, for example, displaying a toolbar. 31 Componente: Edit Text Edit Text Edit text components are fields that enable users to enter or modify text strings. Use edit text when you want text as input. Users can enter numbers but you must convert them to their numeric equivalents

17 Componente: Static Text Static Text Static text controls display lines of text. Static text is typically used to label other controls, provide directions to the user, or indicate values associated with a slider. Users cannot change static text interactively. 33 Componente: Pop-Up Menu Pop-Up Menu Pop-up menus open to display a list of choices when users click the arrow

18 Componente: List Box List Box List boxes display a list of items and enable users to select one or more items. 35 Componente: Toggle Button Toggle Button Toggle buttons generate an action and indicate whether they are turned on or off. When you click a toggle button, it appears depressed, showing that it is on. When you release the mouse button, the toggle button remains depressed until you click it a second time. When you do so, the button returns to the raised state, showing that it is off. Use a button group to manage mutually exclusive toggle buttons

19 Componente: Table Table Use the table button to create a table component. (Refer to the uitable function for more information on using this component.) 37 Componente: Axes Axes Axes enable your GUI to display graphics such as graphs and images. Like all graphics objects, axes have properties that you can set to control many aspects of its behavior and appearance (See Axes Properties in the MATLAB Graphics documentation) 38 19

20 Componente: Panel Panel Panels arrange GUI components into groups. By visually grouping related controls, panels can make the user interface easier to understand. A panel can have a title and various borders. Panel children can be user interface controls and axes as well as button groups and other panels. The position of each component within a panel is interpreted relative to the panel. If you move the panel, its children move with it and maintain their positions on the panel. 39 Componente: Button Group Button Group Button groups are like panels but are used to manage exclusive selection behavior for radio buttons and toggle buttons

21 Componente: Toolbar Toolbar GUIDE Toolbar Editor You can create toolbars containing push buttons and toggle buttons. Use the GUIDE Toolbar Editor to create toolbar buttons. Choose between predefined buttons, such as Save and Print, and buttons which you customize with your own icons and callbacks. 41 Exemplo: GUI controlsuite Disponível na pasta do MATLAB, subdirectoria "..\help\techdoc\creating_guis\examples" Abrir pela linha de comandos utilizando: guide controlsuite 42 21

22 Alinhamento da AT 17 Interfaces Gráficas do Utilizador (GUIs) Programação event-driven GUIs no MATLAB Componentes / controlos da GUI Processo de Desenvolvimento Componentes das GUIs no MATLAB Elementos de Estilo 43 Elementos de Estilo Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work. 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

23 Elementos de Estilo "Less is more" Mies van der Rohe (while citing a poem by Robert Browning) 45 Referências Capítulo 13 de Essential MATLAB for Engineers and Scientists 3 rd Edition, Brian Hahn e Dan Valentine (2007) Elsevier. Secção 13.4 de Matlab: A Practical Introduction to Programming and Problem Solving, Stormy Attaway (2009) Elsevier. Wikipédia: Mathworks: Creating Graphical User Interfaces (buildgui.pdf)

24 Demos da Mathworks ml?product=ml 7b_GraphicsAndGUIBuilding.html?product=ML 8a_GraphicsAndGUIBuilding.html?product=ML Is_viewlet_swf.html?product=ML 47 24