At 21 guis  programacao event driven_ processo de desenvolvimento_gu_is no matlab
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

At 21 guis programacao event driven_ processo de desenvolvimento_gu_is no matlab

  • 2,416 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,416
On Slideshare
409
From Embeds
2,007
Number of Embeds
7

Actions

Shares
Downloads
24
Comments
0
Likes
0

Embeds 2,007

http://ratosdotecnico.blogspot.pt 1,964
http://www.ratosdotecnico.blogspot.pt 21
http://ratosdotecnico.blogspot.com 17
http://ratosdotecnico.blogspot.com.br 2
http://ratosdotecnico.blogspot.co.uk 1
http://ratosdotecnico.blogspot.dk 1
http://www.ratosdotecnico.blogspot.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 24-11-2012 Computação e Programação MEMec, LEAN - 1º Semestre 2012-2013 Aula Teórica 21 • Interfaces Gráficas do Utilizador (GUIs) • Programação event-driven • Processo de Desenvolvimento • GUIs no MATLAB D.E.M. – Área Científica de Controlo Automação e Informática IndustrialAlinhamento da AT 21 • 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 Computação e Programação 2012 / 2013 2 1
  • 2. 24-11-2012Interface 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 com a interface de linha de comando, que decorre via comandos de texto)• 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 manipulá-los de forma a obter algum resultado prático. http://pt.wikipedia.org/wiki/Interface_gráfica_do_utilizador Computação e Programação 2012 / 2013 3Exemplos de interfaces gráficas • GNOME (Ubuntu ver. 9.04) • iOS 5.0 • Android 4.0 • Windows 7 Computação e Programação 2012 / 2013 4 2
  • 3. 24-11-2012Exemplos de interfaces de linha de comando • MS-DOS (Windows XP) • GNOME Terminal 3 • Mac OS X Terminal Computação e Programação 2012 / 2013 5Elementos 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 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 2012 / 2013 6 3
  • 4. 24-11-2012 Alinhamento da AT 21 • 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 Computação e Programação 2012 / 2013 7 Programação event-driven• Os eventos incluem acções do utilizador, acções devidas a outros elementos de código, ou acções externas (i.e. 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 da 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 2012 / 2013 8 4
  • 5. 24-11-2012Programação event-driven• Programa de execução sequencial Computação e Programação 2012 / 2013 9Programação event-driven• Programa dirigido por eventosAs funções que respondem aos eventos chamam-se funções de callback Computação e Programação 2012 / 2013 10 5
  • 6. 24-11-2012 Alinhamento da AT 21 • 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 Computação e Programação 2012 / 2013 11 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) Computação e Programação 2012 / 2013 12 6
  • 7. 24-11-2012 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 Computação e Programação 2012 / 2013 13 Ilustração do PD para GUIs no MATLAB Fase I Fase II Fase III Computação e Programação 2012 / 2013 14 7
  • 8. 24-11-2012 Alinhamento da AT 21 • 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 Computação e Programação 2012 / 2013 15 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 2012 / 2013 16 8
  • 9. 24-11-2012 Estrutura de uma GUI no MATLAB Figure: simple_gui.fig + M-file: simple_gui.m Computação e Programação 2012 / 2013 17 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.• Os controlos da GUI têm associados elementos de código denominados por callbacks. Uma callback compreende o código que o MATLAB executa como reacção ao evento desencadeado fora da GUI. Computação e Programação 2012 / 2013 18 9
  • 10. 24-11-2012 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 2012 / 2013 19 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. 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 deUm dispositivo de ponteiro, e.g. o rato, é usado hardware, e.g. ponteiro e hardwarepara controlar a posição dum cursor e gráfico.apresentar informação organizada em janelasrepresentada através e ícones. Computação e Programação 2012 / 2013 20 10
  • 11. 24-11-2012Exemplo de execução da “Simple GUI” EVENTO 1º callback 2º 3º Computação e Programação 2012 / 2013 21Alinhamento da AT 21 • 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 Computação e Programação 2012 / 2013 22 11
  • 12. 24-11-2012 Editor de GUIs: guide• GUI do guide Toolbar do guide Componentes de GUIs Computação e Programação 2012 / 2013 23 Editor de GUIs: guide• Toolbar do guide Editor de Menus Editor de Tabs Alinhamento de componentes Editor de Toolbars Editor de m-files do MATLAB Execução da GUI Inspector de propriedades Explorador de das componentes componentes Computação e Programação 2012 / 2013 24 12
  • 13. 24-11-2012 Edição da simple_guiBarra de menus ToolbarComponentesÁrea de edição Computação e Programação 2012 / 2013 25 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 Computação e Programação 2012 / 2013 26 13
  • 14. 24-11-2012Alinhamento da AT 21 • 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 Computação e Programação 2012 / 2013 27Componentes disponíveis no guide Computação e Programação 2012 / 2013 28 14
  • 15. 24-11-2012Componente: Push ButtonComponent Icon Description • Push buttons generate an action when clicked. • For example, an OK button might Push apply settings and close a dialog box. Button • When you click a push button, it appears depressed; when you release the mouse button, the push button appears raised. Computação e Programação 2012 / 2013 29Componente: SliderComponent Icon Description • 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 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. Computação e Programação 2012 / 2013 30 15
  • 16. 24-11-2012Componente: Radio ButtonComponent Icon Description • 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 Radio selected button is deselected. Button • 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. Computação e Programação 2012 / 2013 31Componente: Check BoxComponent Icon Description • Check boxes can generate an action when checked and indicate their state as checked or not checked. Check Box •Check boxes are useful when providing the user with a number of independent choices, for example, displaying a toolbar. Computação e Programação 2012 / 2013 32 16
  • 17. 24-11-2012Componente: Edit TextComponent Icon Description • Edit text components are fields that enable users to enter or modify text strings. Edit • Use edit text when you want text as Text input. • Users can enter numbers but you must convert them to their numeric equivalents. Computação e Programação 2012 / 2013 33Componente: Static TextComponent Icon Description • Static text controls display lines of text. • Static text is typically used to label Static other controls, provide directions to Text the user, or indicate values associated with a slider. • Users cannot change static text interactively. Computação e Programação 2012 / 2013 34 17
  • 18. 24-11-2012Componente: Pop-Up MenuComponent Icon Description Pop-Up • Pop-up menus open to display a list Menu of choices when users click the arrow. Computação e Programação 2012 / 2013 35Componente: List BoxComponent Icon Description • List boxes display a list of items andList Box enable users to select one or more items. Computação e Programação 2012 / 2013 36 18
  • 19. 24-11-2012Componente: Toggle ButtonComponent Icon Description • 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. Toggle • When you release the mouse button, the toggle button remains depressed until you Button 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. Computação e Programação 2012 / 2013 37Componente: TableComponent Icon Description • Use the table button to create a table component. (Refer to the uitable Table function for more information on using this component.) Computação e Programação 2012 / 2013 38 19
  • 20. 24-11-2012Componente: AxesComponent Icon Description • Axes enable your GUI to display graphics such as graphs and images. • Like all graphics objects, axes have Axes properties that you can set to control many aspects of its behavior and appearance (See “Axes Properties” in the MATLAB Graphics documentation) Computação e Programação 2012 / 2013 39Componente: PanelComponent Icon Description • 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 Panel 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. Computação e Programação 2012 / 2013 40 20
  • 21. 24-11-2012Componente: Button GroupComponent Icon Description • Button groups are like panels but are Button used to manage exclusive selection Group behavior for radio buttons and toggle buttons. Computação e Programação 2012 / 2013 41Componente: ToolbarComponent Icon Description • You can create toolbars containing push buttons and toggle buttons. •Use the GUIDE Toolbar Editor to create toolbar buttons.Toolbar GUIDE Toolbar Editor • Choose between predefined buttons, such as Save and Print, and buttons which you customize with your own icons and callbacks. Computação e Programação 2012 / 2013 42 21
  • 22. 24-11-2012Exemplo: GUI controlsuite• Disponível na pasta do MATLAB, subdirectoria "..helptechdoccrea ting_guisexamples"• Abrir pela linha de comandos utilizando: guide controlsuite Computação e Programação 2012 / 2013 43Alinhamento da AT 21 • 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 Computação e Programação 2012 / 2013 44 22
  • 23. 24-11-2012Elementos 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.” http://www.asktog.com/basics/firstPrinciples.html Computação e Programação 2012 / 2013 45Referências• Capítulo 13 de Essential MATLAB for Engineers and Scientists 3rd Edition, Brian Hahn e Dan Valentine (2007) Elsevier.• 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 Computação e Programação 2012 / 2013 46 23
  • 24. 24-11-2012Demos da Mathworks • 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/uitable demo.html?product=ML • http://www.mathworks.com/products/demos/shipping/matlab/Whats NewR2007b_GraphicsAndGUIBuilding.html?product=ML • http://www.mathworks.com/products/demos/shipping/matlab/Whats NewR2008a_GraphicsAndGUIBuilding.html?product=ML • http://www.mathworks.com/products/demos/shipping/matlab/Whats New_6GUIs_viewlet_swf.html?product=ML Computação e Programação 2012 / 2013 47 24