COMPUTAÇÃO E PROGRAMAÇÃO

Transcrição

1 COMPUTAÇÃO E PROGRAMAÇÃO 1º Semestre 2010/2011 MEMec, LEAN Ficha da Aula Prática 10: Construção de GUIs Parte I Sumário das tarefas e objectivos da aula: 1. Identificar os vários componentes das GUIs 2. Entender o processo de desenvolvimento para GUI 3. Construir GUIs NOTAS: 1. Consultar os acetatos das ATs 17 e Guarde todo o material que implementar nesta aula, por exemplo, enviando para o seu José Borges, v1.1@2010 1

2 1. Guided User Interface (GUI) 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 constituem uma GUI tipo incluem: Sistema de janelas, Ícones e elementos gráficos, Menus/grupos de funções, Dispositivo de ponteiro, como por exemplo o rato. Programação event-driven O fluxo da execução do código nas GUIs é controlado por indicações externas, i.e. eventos, que são determinados pelo utilizador, e não pelo programa. 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. 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. GUIs 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. 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 José Borges, v1.1@2010 2

3 1.1 Editor de GUIs no MATLAB: guide 1.2 Exemplo de GUI no MATLAB José Borges, 3

4 1.3 Estrutura da m-file de uma GUI 1.4 Template padrão de uma callback Onde: OBJECT HANDLE (hobject): estrutura com atributos e propriedades (os mesmos que são visualizáveis através do Property Inspector) da componente que disparou a callback. EVENT DATA (eventdata): estrutura com o histórico da sequência de evento até ao disparo da callback (não é utilizado por todas as componentes). HANDLES STRUCTURE (handles): apontador para uma estrutura com atributos e propriedades (os mesmos visualizáveis no Property Inspector) de todas as componentes existentes na GUI, bem como dados específicos da aplicação. José Borges, v1.1@2010 4

5 Processo de Desenvolvimento (PD) 1.5 Etapas do Processo de Desenvolvimento 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 Componentes da GUI 1.6 Componentes da GUI José Borges, v1.1@2010 5

6 2. A minha primeiragui 2.1 Criar uma nova GUI no MATLAB Escreva guide na prompt do MATLAB. 1 Seleccione o template Blank GUI (Default). 2 José Borges, v1.1@2010 6

7 Grave a GUI com o nome primeiragui. 3 Adicione na janela principal as componentes: Edit Text, Push Button, Static Text. 4 José Borges, v1.1@2010 7

8 Edite as propriedades de cada componente como se indica na tabela seguinte: 1 Fazer duplo clique em cima da componente (ou então clicar com o botão do lado direito e seleccionar Property Inspector ); 2 - Substituir o texto à frente da propriedade pretendida. Edit Text Push Button Static Text String Entrada de texto Carrega Aqui! Saída de texto Tag edtcaixaentrada pbcarregaaqui sttcaixasaida 5 Propriedades das componentes Edit Text e Static Text. 6 José Borges, v1.1@2010 8

9 Propriedades do controlo Push Button. 7 Clicar com o botão do lado direito em cima do controlo Push Button e seleccionar View Callbacks / Calbacks. 8 José Borges, v1.1@2010 9

10 Editar a callback do controlo Push Button com o código da caixa seguinte. Por exemplo, no caso do pbcarregaaqui colocar o código a seguir ao cabeçalho: % --- Executes on button press in pbesquerda. function pbcarregaaqui_callback(hobject, eventdata, handles) % hobject handle to pbesquerda (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) 9 % Atribui à variável entradatexto o conteúdo da propriedade % String da componente Edit Text com a Tag edtcaixaentrada entradatexto = get(handles.edtcaixaentrada,'string'); set(handles.sttcaixasaida, 'String', entradatexto) 11 Guardar a GUI no disco e executar (carregar na tecla F5). Escrever A minha primeira GUI! na caixa Edit Text e a seguir carregar no botão Push Button. José Borges, v1.1@

11 3. Desenvolvimento de uma aplicação para gestão de uma biblioteca Pretende-se criar uma aplicação gráfica para gerir os utilizadores de uma biblioteca. As componentes desta aplicação são: 1. GUI para gerir o funcionamento geral da aplicação. 2. GUI para listar os Sócios da biblioteca. 3. GUI para adicionar novos Sócios à base de dados da biblioteca. 4. GUI para retirar Sócios da base de dados da biblioteca. É dado o ficheiro de dados inicial: fichsocios.txt São dadas as funções de leitura de ficheiros: lerficheiro.m lerumsocio.m José Borges, v1.1@

12 GUI para gerir o funcionamento geral da aplicação 3.1 Implementação da GUI biblio_main Crie uma GUI com o nome biblio_main. 1 Clicar com o botão do lado direito sobre a GUI e escolher GUI Options. Desactivar a opção GUI allows only one instance to run. 2 José Borges, v1.1@

13 Componha as componentes da GUI como na figura e pela ordem da tabela seguinte. Edite as propriedades das componentes como apresentado na tabela. Tipo de Componente Propriedade String Tag FontSize Static Text Biblioteca 18 Push Button Listar pblistar 15 Push Button Adicionar pbadicionar 15 Push Button Remover pbremover 15 Push Button Sair pbsair 15 3 Tipo de Componente Propriedade Title Tag FontSize Panel Utilizadores 8 José Borges, v1.1@

14 Editar o código das callbacks para os seguintes controlos. 4 Controlo pblistar pbadicionar pbremover pbsair Código da callback GUI_Listar; GUI_Adicionar; GUI_Remover; close(handles.figure1) Guardar a GUI no disco e executar (carregar na tecla F5). ATENÇÃO: as GUIs para as opções Listar, Adicionar e Remover não estão implementadas, pelo que só a opção Sair irá funcionar. 5 José Borges, v1.1@

15 GUI para listar os Sócios da biblioteca 3.2 Implementação da GUI_Listar Crie uma GUI com o nome GUI_Listar. Clicar com o botão do lado direito sobre a GUI e escolher GUI Options. Desactivar a opção GUI allows only one instance to run. Componha as componentes da GUI como na figura e pela ordem da tabela seguinte. Edite as propriedades das componentes como apresentado na tabela. 1 Tipo de Componente Static Text Propriedade String Tag FontSize Biblioteca - Listar Sócios Static Text Número de Sócio 8 Edit Text edtnumero 15 Static Text Nº Documento Identificação Edit Text edtdocumentoid 15 Static Text Nome 8 Edit Text edtnome 15 Static Text Morada 8 Edit Text edtmorada 15 Static Text Código 8 Edit Text edtcodigo 15 Static Text Data do Aluguer 8 Edit Text edtdata 15 Push Button << pbesquerda 15 Push Button >> pbdireita 15 Push Button Actualizar pbactualizar 15 Push Button Terminar pbterminar Tipo de Componente Propriedade Title Tag FontSize Panel Livro Requisitado 8 Panel Navegar nos registos 8 José Borges, v1.1@

16 Incluir o seguinte código na função de inicialização GUI_Listar_OpeningFcn, i.e., colocar o código a seguir ao cabeçalho da função de inicialização: % --- Executes just before GUI_Listar is made visible. function GUI_Listar_OpeningFcn(hObject, eventdata, handles, varargin) % This function has no output args, see OutputFcn. % hobject handle to figure % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % varargin command line arguments to GUI_Listar (see VARARGIN) 2 % Choose default command line output for GUI_Listar handles.output = hobject; % Carrega dados a partir do ficheiro 'fichclientes.txt' clientes = lerficheiro ('fichsocios.txt'); % Insere a estrutura de dados Clientes na estrutura interna da GUI handles handles.clientes = clientes; % Insere a variável auxiliar Indice (que contém o índice do cliente actual a ser % exibido na GUI) na estrutura interna da GUI handles handles.index=1; % Actualiza na GUI_Listar as componentes tipo Edit Text % com o conteúdo da ficha do sócio número 1 set(handles.edtnumero,'string',clientes(1).numsocio) set(handles.edtdocumentoid,'string', clientes(1).numeroid) set(handles.edtnome,'string', clientes(1).nome) set(handles.edtmorada,'string', clientes(1).morada) set(handles.edtcodigo,'string',clientes(1).numlivro) set(handles.edtdata,'string',clientes(1).dataaluguer) % Update the index pointer to reflect the new index handles.index = 1; % Update handles structure guidata(hobject, handles); José Borges, v1.1@

17 Editar o código das callbacks. Por exemplo, no caso do pbesquerda colocar a seguir ao código: % --- Executes on button press in pbesquerda. function pbesquerda_callback(hobject, eventdata, handles) % hobject handle to pbesquerda (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) 3 Controlo pbesquerda pbdireita pbactualizar Código da callback clientes = handles.clientes; index = handles.index; % Navega para a esquerda no sistema de índices index = index - 1; if index > 0 set(handles.edtnumero,'string',clientes(index).numsocio) set(handles.edtdocumentoid,'string',clientes(index).numeroid) set(handles.edtnome,'string',clientes(index).nome) set(handles.edtmorada,'string',clientes(index).morada) set(handles.edtcodigo,'string',clientes(index).numlivro) set(handles.edtdata,'string',clientes(index).dataaluguer) % Update the index pointer to reflect the new index handles.index = index; end % Update handles structure guidata(hobject, handles); clientes = handles.clientes; index = handles.index; % Navega para a direita no sistema de índices index = index + 1; if ((length(clientes)-index) >= 0) set(handles.edtnumero,'string',clientes(index).numsocio) set(handles.edtdocumentoid,'string',clientes(index).numeroid) set(handles.edtnome,'string',clientes(index).nome) set(handles.edtmorada,'string',clientes(index).morada) set(handles.edtcodigo,'string',clientes(index).numlivro) set(handles.edtdata,'string',clientes(index).dataaluguer) % Update the index pointer to reflect the new index handles.index = index; end % Update handles structure guidata(hobject, handles); % Actualiza o conteúdo do array de estruturas Clientes % a partir do ficheiro de sócios clientes = lerficheiro('fichsocios.txt'); handles.clientes = clientes; handles.index=1; % Reactualiza as caixas Edit Text da GUI_Listar set(handles.edtnumero,'string',clientes(1).numsocio) set(handles.edtdocumentoid,'string',clientes(1).numeroid) set(handles.edtnome,'string',clientes(1).nome) set(handles.edtmorada,'string',clientes(1).morada) set(handles.edtcodigo,'string',clientes(1).numlivro) set(handles.edtdata,'string',clientes(1).dataaluguer) % Update the index pointer to reflect the new index handles.index = 1; % Update handles structure guidata(hobject, handles); José Borges, v1.1@

18 pbterminar % Encerra a figura da GUI close(handles.figure1) Guardar a GUI no disco e executar (carregar na tecla F5). Navegar nos registos da base de dados carregando nos botões tipo Push Button: para a esquerda << ou para a direita >>. O botão Actualizar serve para recarregar a informação da base de dados, que poderá ser modificada por uma das outras GUIs NOTAS A 2ª parte desta AP decorrerá durante a próxima semana. Guarde todos os ficheiros que implementou até à próxima AP José Borges, v1.1@