Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Este trabalho tem como objetivo fornecer um curso introdutório sobre a criação de interfaces gráficas com o usuário (GUIs), assunto por vezes não conhecido entre os programadores Matlab. Após o estudo do material, espera-se que o programador desenvolva interfaces gráficas básicas, e também consiga se situar na busca de informações mais avançadas sobre a criação de GUIs.
Tipologia: Manuais, Projetos, Pesquisas
1 / 25
Esta página não é visível na pré-visualização
Não perca as partes importantes!
ii
Sumário
1.1. O que é uma GUI? 1.2. Os modos de criação 1.3. Projetando sua GUI
2.1. O que é o Guide? 2.2. Programando a GUI
3.1. Os componentes básicos de uma GUI 3.2. O inspetor de propriedades
4.1. A criação de menus e submenus no Guide 4.2. Propriedades dos menus
1. Interfaces Gráficas com o Usuário no Matlab
1.1. O que é uma GUI?
Uma interface gráfica com o usuário ( graphical user interface , a famosa GUI) é uma interface “pictórica” para um programa. Uma GUI provê um ambiente familiar para o trabalho do usuário, fornecendo recursos como janelas, botões, menus, entre outros. Pode-se criar uma interface gráfica se o aplicativo que você está desenvolvendo vai ser utilizado por outras pessoas, ou se a função que você está escrevendo vai ser usada várias vezes. Nesses casos, menus, botões e caixas de texto podem ser usados como métodos de inserção de dados. Tenha em mente que a GUI deve se comportar de maneira inteligível, de forma que o usuário presuma qual a ação que o programa tomará quando este interagir com um objeto pertencente à interface. Por exemplo, quando um botão for clicado, é natural que a ação adotada pelo programa seja descrita pelo nome etiquetado no botão. O Matlab contém exemplos interessantes de suas habilidades com as GUIs. Utilize, na janela de comandos ( command window ), o comando
demo e veja o vídeo associado, ou consulte a ajuda do programa.
1.2. Os modos de criação
Basicamente, há dois meios de se criar uma GUI:
1.3. Projetando sua GUI
Antes de por a “mão na massa”, é interessante que haja um projeto das GUIs que você deseja construir. Obviamente, este projeto é feito depois das outras funções da interface terem sido planejadas. Um projeto de GUI pode ser feito com papel e caneta, como um rascunho da interface que você deseja que o programa tenha. A ideia de um esboço é exemplificada na Figura 1 [3].
Figura 1. Um esboço de interface gráfica com o usuário.
O rascunho em um papel é simples, mas independente da complexidade da GUI, é sempre um bom meio de começar. Depois de projetada, é hora de estruturar sua GUI no Guide.
Figura 3. A GUI botaotexto.fig, e seu respectivo arquivo .m no Matlab Editor.
Esta interface gráfica exibe um botão, uma caixa de edição e um rótulo de texto. O Matlab chama esses objetos de pushbutton , edit text e static text , respectivamente. Observe, no arquivo botaotexto.m, os callbacks já citados anteriormente. Quando clicarmos o pushbutton , ativaremos seu callback , que determinará a ação do botão. Da mesma forma, quando digitarmos alguns caracteres na edit text e pressionarmos “Enter”, ativaremos seu callback. Note que static text não tem sua função callback. Tenha em mente que nem sempre todos os callbacks são utilizados; veremos isso em detalhes adiante.
3. GUIs e seus componentes
3.1. Os componentes básicos de uma GUI
Observe, na Figura 2, a paleta de componentes do Guide. A Tabela 1, abaixo, descreve os componentes mais usados.
Objeto Nome ( tag no Matlab) Descrição
Botão simples ( push button )
Por vezes chamado de botão de controle, é um componente gráfico que normalmente contém um rótulo de texto. Clicando-o, o Matlab executa a ação definida pelo callback do objeto.
Controle deslizante ( slider )
Sliders costumam ser utilizados para selecionar um valor em um intervalo de valores. Cada mudança de valor executa a ação definida no callback do objeto.
Botão de rádio ( radio button )
O botão de rádio é um tipo de botão de chave, que contém um rótulo e um círculo ao lado deste rótulo. Quando selecionado, o círculo é preenchido. Botões de rádio costumam ser utilizados para selecionar uma entre um grupo mutuamente exclusivo de opções. Cada clique em um botão de rádio executa o callback definido para o objeto.
Caixa de controle ( check box )
Estas caixas consistem em botões com um rótulo e uma caixa quadrada ao lado deste rótulo. Quando ativado, o controle alterna entre preenchido e limpo. As caixas de controle costumam ser usadas para indicar o estado de uma opção, ou selecionar várias opções não-exclusivas. Cada clique em um botão de rádio executa o callback definido.
Painel ( panel )
Painéis, chamados de frames em algumas versões do Matlab, são áreas destinadas a agrupar conjuntos de componentes. Também não geram callbacks.
Tabela 1. Descrição dos componentes mais usados na criação de uma GUI.
Na Figura 4, como exemplo, temos uma GUI com todos esses componentes.
Figura 4. Interface gráfica com todos os componentes descritos na Tabela 1.
Conhecendo estes componentes e utilizando-os convenientemente, estaremos a um passo da criação de GUIs úteis e funcionais. Depois de projetar a GUI, basta programar as ações de cada componente. Entretanto, algumas vezes é interessante mudar a cor de fundo da janela, ou o tipo de fonte de um rótulo de texto, entre outros aspectos da interface. Podemos fazer isso no Guide utilizando o inspetor de propriedades dos componentes.
3.2. O inspetor de propriedades
Se executarmos um clique duplo em qualquer um dos componentes no momento de criação da sua interface gráfica no Guide, o inspetor de propriedades ( Inspector ; Property Inspector nas primeiras versões) é acionado. Pode-se também clicar no componente em questão com o botão direito do mouse, e selecionar a opção Property Inspector , ou escolher View → Property Inspector no menu do Guide. Na Figura 5, temos o inspetor de propriedades da interface gráfica botaotexto, exibida na Figura 3. As propriedades apresentadas são referentes ao pushbutton daquela GUI.
Figura 5. O inspetor de propriedades do Guide. As propriedades exibidas referem-se a um pushbutton.
O inspetor de propriedades exibe as propriedades do objeto, e se alterará conforme outros objetos são clicados. Podemos alterar os valores das propriedades como necessário. Na Tabela 2, dada abaixo, temos algumas propriedades compartilhadas pela maioria dos componentes descritos na Tabela 1.
Propriedade do
componente
Descrição
BackgroundColor
Especifica a cor do plano de fundo do objeto. Existe um valor predefinido, e outro valor pode ser escolhido diretamente em uma paleta de cores ou especificando-se valores numéricos (HSB ou RGB).
Callback Especifica o nome e os parâmetros da função a ser chamada quando o objeto é ativado.
Enable
Especifica se o objeto pode ser selecionado ou não. Se o objeto em questão não está habilitado, ele não responderá ao clique do mouse ou a entrada de dados do teclado. Possíveis valores são ‘ on ’, ‘ off ’ e (em versões mais recentes) ‘ inactive ’.
Propriedade do
componente
Descrição
TooltipString Especifica o texto de ajuda que será exibido quando o usuário deixa o ponteiro do mouse por determinado tempo sobre o objeto.
Units
As unidades usadas para descrever a posição da janela e de seus componentes. Possíveis valores são ‘ inches ’, ‘ centimeters ’, ‘ normalized ’, ‘ points ’, ‘ pixels ’ ou ‘ characters ’. O valor padrão em versões mais recentes é ‘ characters ’; em versões anteriores este valor é ‘ pixels ’.
Value
O valor atual do componente. Para botões de chave, caixas de controle e botões de rádio, o valor é ‘ max ’ quando o botão está ativado e ‘ min ’ se o botão está desativado. Outros controles possuem significados diferentes para este termo.
Visible Especifica se o objeto está ou não visível. Os possíveis valores são ‘ on ’ e ‘ off ’.
Tabela 2. Propriedades comuns à maioria dos componentes dados pelo Guide.
Conhecendo estas propriedades, podemos começar a customizar a aparência da interface gráfica.
4. Criando e modificando menus
4.1. A criação de menus e submenus no Guide
Menus podem também ser adicionados às interfaces gráficas criadas no Guide. Eles são úteis quando queremos disponibilizar opções que não são necessárias em todo o momento de execução, ou adicionar funções que são utilizadas com pouca frequência. Há dois tipos de menus disponíveis no Guide: os menus padrão ( standard ), que se situam na barra de menus, no topo de uma janela, e os menus de contexto, que aparecem quando o usuário clica com o botão direito sobre um determinado objeto. O Guide possui uma ferramenta para edição de menus, o Menu Editor. Para acioná-lo, podemos ir para Tools → Menu Editor , ou simplesmente clicar no ícone que exibe um menu. Este ícone é mostrado na Figura 6, juntamente com o Menu Editor.
Figura 6. O manipulador de menus do Guide, Menu Editor.
A Figura 7 mostra exemplos de menus padrão no Menu Editor , e a interface gráfica com um menu de contexto ativado. É importante saber que, para os menus de contexto trabalharem da maneira esperada, devemos alterar a propriedade UIContextMenu do componente ao qual queremos associar tal menu.
Quando lidamos com menus, é comum observarmos a presença de atalhos que aparecem na forma de letras sublinhadas. As “letras mnemônicas”, como são chamadas, servem para agilizar o acesso ao menu. Para utilizá-las, pressionamos ALT e a letra correspondente ao item de menu que desejamos acionar. Para implementar a funcionalidade das letras mnemônicas no Menu Editor do Guide, simplesmente colocamos o caractere “&” imediatamente antes da letra desejada. Por exemplo, na interface exibida na Figura 8, se quisermos que o menu “Item 2” tenha como atalho a combinação ALT + T, escrevemos “I&tem 2” na propriedade “ Label ” do Menu Editor. Note que, em tempo de execução, o atalho apenas aparecerá quando pressionarmos ALT. Na Figura 9, temos o exemplo descrito acima na GUI botaotexto.
Figura 9. Exemplo de interface gráfica com uma letra mnemônica e a correspondente entrada no Menu Editor.
5. Exemplos, exemplos, exemplos
Com todas as ferramentas adquiridas nas seções anteriores, chegamos na parte mais interessante: programar!
Exemplo 1: Trabalhando com a GUI botaotexto
Vamos relembrar a interface gráfica de nome botaotexto, vista em execução na Figura 10.
Figura 10. A GUI botaotexto, a ser utilizada no Exemplo 1.
Neste exemplo, quando o botão ‘Transfere’ for pressionado, o texto digitado na caixa de edição edit1 será copiado para o rótulo de texto text. Para isso, o callback do botão pushbutton1 deverá conter os seguintes comandos:
% --- Executes on button press in pushbutton1. function pushbutton1_Callback(hObject, eventdata, handles) % hObject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA)
texto = get(handles.edit1,'String'); set(handles.text1,'String',texto);
% handles structure with handles and user data (see GUIDATA)
% Hint: get(hObject,'Value') returns toggle state of radiobutton
set(handles.radiobutton1,'Value',0); set(handles.radiobutton2,'Value',1); set(handles.radiobutton3,'Value',0);
E finalmente, os callbacks de radiobutton3 :
% --- Executes on button press in radiobutton3. function radiobutton3_Callback(hObject, eventdata, handles) % hObject handle to radiobutton3 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA)
% Hint: get(hObject,'Value') returns toggle state of radiobutton
set(handles.radiobutton1,'Value',0); set(handles.radiobutton2,'Value',0); set(handles.radiobutton3,'Value',1);
Com isso, os botões de rádio serão selecionados um por vez.
Exemplo 3: Um simples contador de cliques
Continuando a interação de botões com outros objetos, agora teremos um contador de cliques. A interface gráfica deste contador é dada abaixo, na Figura 12. A propriedade “ String ” de text1 e de pushbutton1 foi alterada para “Cliques: 0” e “Clique aqui”, respectivamente, e a propriedade “ FontSize ” dos dois objetos foi alterada para “12”.
Figura 12. A GUI contaclique, a ser utilizada no Exemplo 3.
Os callbacks de pushbutton1 serão:
% --- Executes on button press in pushbutton1. function pushbutton1_Callback(hObject, eventdata, handles) % hObject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA)
% Declara e inicializa a variável para armazenar a contagem persistent contador if isempty(contador) contador = 0; end
% Atualiza a contagem contador = contador + 1;
% Cria o novo texto str = sprintf('Cliques: %d',contador);
% Atualiza o rótulo de texto set(handles.text1,'String',str);
