COMPUTAÇÃO E PROGRAMAÇÃO - Técnico Lisboa - … · 1.4 Template padrão de uma callback Onde: ... documentação dos requisitos e especificação funcional, nomeadamente definição

José Borges, v1.1@2010 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 18 2. Guarde todo o material que implementar nesta aula, por exemplo, enviando para o seu email


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


1.1 Editor de GUIs no MATLAB: guide

1.2 Exemplo de GUI no MATLAB


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.


Processo de Desenvolvimento (PD)

Componentes da GUI

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

1.6 Componentes da GUI


2. A minha primeiraGUI

2.1 Criar uma nova GUI no MATLAB

1

Escreva guide na prompt do MATLAB.

2

Seleccione o template Blank GUI (Default).


3

Grave a GUI com o nome primeiraGUI.

4

Adicione na janela principal as componentes: Edit Text, Push Button, Static Text.


5

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

6

Propriedades das componentes “Edit Text” e “Static Text”.


7

Propriedades do controlo Push Button.

8

Clicar com o botão do lado direito em cima do controlo Push Button e seleccionar “View Callbacks” / “Calbacks”.


9

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)

% 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.


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


GUI para gerir o funcionamento geral da aplicação

3.1 Implementação da GUI biblio_main

1

Crie uma GUI com o nome biblio_main.

2

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”.


3

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

Tipo de Componente

Propriedade

Title Tag FontSize

Panel Utilizadores 8


4

Editar o código das callbacks para os seguintes controlos.

Controlo Código da callback

pbListar GUI_Listar;

pbAdicionar GUI_Adicionar;

pbRemover GUI_Remover;

pbSair close(handles.figure1)

5

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.


GUI para listar os Sócios da biblioteca

3.2 Implementação da GUI_Listar

1

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.

Tipo de Componente

Propriedade

String Tag FontSize

Static Text Biblioteca - Listar

Sócios

18

Static Text Número de Sócio 8

Edit Text edtNumero 15

Static Text Nº Documento

Identificação

8

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 15

Tipo de Componente

Propriedade

Title Tag FontSize

Panel Livro Requisitado 8

Panel Navegar nos registos 8


2

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)

% 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);


3

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)

Controlo Código da callback

pbEsquerda 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)


handles.Index = index;

end



pbDireita 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)


handles.Index = index;

end



pbActualizar % 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)


handles.Index = 1;




pbTerminar % Encerra a figura da GUI

close(handles.figure1)

4

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.

3.3 NOTAS

A 2ª parte desta AP decorrerá durante a próxima semana.

Guarde todos os ficheiros que implementou até à próxima AP

Documents

COMPUTAÇÃO E PROGRAMAÇÃO - Técnico Lisboa - … · 1.4 Template padrão de uma callback Onde: ... documentação dos requisitos e especificação funcional, nomeadamente definição