Técnicas de

Programação
 Material Teórico
Aplicação de Interface Gráfica

Responsável pelo Conteúdo:

Profª Esp. Margarete Eliane da Silva Almendro

Revisão Técnica:
Prof. Me. Douglas Almendro

Revisão Textual:
Prof. Me. Selma Aparecida Cesarin
a
 Aplicação de Interface Gráfica

• Aplicação de Interface Gráfica

·· Nesta Unidade, o aluno terá uma visão do que vem a ser interface gráfica e aprenderá
a criar um programa com os recursos gráficos de linguagem de programação.

Olá, alunos(as)!
Hoje, veremos alguns assuntos introdutórios na nossa Disciplina e aproveito para apresentar
alguns conceitos que utilizaremos na estrutura de todas as nossas Unidades.
Lembramos a você a importância de realizar todas as atividades propostas dentro do prazo
estabelecido para cada Unidade. Dessa forma, você evitará que o conteúdo se acumule e que
você tenha problemas ao final do semestre.
Uma última recomendação: caso tenha problemas para acessar algum item da disciplina
ou dúvidas com relação ao conteúdo, não deixe de entrar em contato com seu professor tutor
pelo botão mensagens ou nos fóruns.

5
Unidade: Aplicação de Interface Gráfica

Contextualização

A utilização da interface gráfica ou ambiente visual é uma forma de interagirmos com os

recursos dos sistemas. Por trás dos elementos, existe uma vasta ou até mesma o mínimo de
instruções de computadores que irão executar determinada tarefa.
Sem essas facilidades, os usuários deveriam possuir uma habilidade igual à de um programador
para que as tarefas ou eventos fossem executados.
Graças aos componentes de interação, os códigos ficam por trás da interface, oferecendo
maior praticidade ao usuário.

6
 Aplicação de Interface Gráfica

Nesta aula, aprenderemos a montar uma interface gráfica mais amigável e, para tanto,
utilizaremos a versão 8.0 do NetBeans (mas qualquer outra versão do NetBeans também
poderá ser utilizada).
Vamos falar um pouco sobre as aplicações gráficas:
• Há muito tempo era de difícil criação, principalmente em outras linguagens: Clipper,
C++, C, Pascal etc.;
• As linguagens atuais facilitam o seu desenvolvimento, principalmente o Java e o .NET;
• Existe uma infinidade de funcionalidades disponíveis nas bibliotecas de classes Java,
destinadas a promover a interação entre usuário e máquina de forma gráfica.

Como desenvolver interfaces gráficas em Java?

Bem, temos alguns aspectos interessantes sobre a interface gráfica em Java. Para a criação
dela, temos:

AWT · Foi a primeira API para interfaces gráficas a surgir no Java;

(Abstract Window Toolkit) · Usa o modo nativo do sistema operacional;
· Resolução de 72 dpi;
· java.awt.*.

Figura Estrutura do AWT.

Component Button

Canvas

Container
Checkbox

Choice

Panel Window Label

List

Dialog Frame Scrollbar

TextComponent

TextArea TextField

7
Unidade: Aplicação de Interface Gráfica

Como podemos ver, esta estrutura oferece:

• Pacotes com diversos componentes gráficos;

• Componentes que têm aparência dependente de plataforma;
• Métodos obsoletos.

SWING
√ A partir do Java 1.2;
√ Mais rica que a AWT;
√ Componentes 100% Java;
√ Executado em qualquer S.O. mantendo o visual, fonte, cores e geometria (look-and-feel);
√ Resolução de 300 dpi;
√ javax.swing.*;
√ Hierarquia usada.
• JComponent;
• Super classe do pacote javax.swing;
• JFrame, JLabel, JList, JMenuBar, JPanel, JButton, JMenu, JTextArea são alguns
exemplos de classes direta ou indiretamente herdadas;
• Extensão do pacote AWT;
• Programação mais simples.

AWT+SWING
∙ União perfeita;
∙ Aproveitamento das características de ambos os pacotes.

Tipos de aplicações
√ Standalone
∙ Aplicativos criados para rodar via SO.
√ Applets
∙ Aplicativos criados para rodar via Browser;
∙ O Browser é quem controla seu ciclo de vida (início, fim etc.);
∙ Geralmente ocupam parte da janela do browser, mas podem abrir janelas extras;
∙ Possuem restrições de segurança.

8
Vamos colocar a mão na massa?
Agora, começaremos a criação de um novo projeto. Vamos aos passos principais:
• Menu file ou arquivos

Na opção categorias, vamos escolher Java.

• Projetos, aplicação Java
• E Clicar no botão próximo. Deverá aparecer esta janela:

9
 Unidade: Aplicação de Interface Gráfica

Até aqui, só criamos um projeto que poderá conter diversos arquivos de apoio para o
nosso projeto.
Importante!
Dicas:
• Saber o nome do projeto. Pode ser qualquer nome:
• Sugestão: o nome deve ter algum sentido para o projeto que esteja criando;
• Onde estará salvando este projeto “diretório pasta…”;
• Deixar habilitado o item criar classe principal.
50% dos desenvolvedores iniciais comentem o erro de não saber o nome muito
menos onde salvaram seu projeto.

• Já podemos clicar no botão finalizar.

Sua janela deverá ficar parecida com esta:

Vamos observar melhor a guia de projetos:

Podemos observar que a nossa ferramenta já cria uma estrutura de diretórios para este
projeto, “o que facilita bastante a organização dele”.

10
 O próximo passo será criar a janela na qual criaremos a interface gráfica. Para isto, vamos
clicar com o botão direito do mouse sobre a pasta de pacote:

• Vamos seguir os caminhos acima e terminar clicando em FormJFrame.

A seguinte tela deverá aparecer:

Onde há a opção nome da Classe, podemos colocar o nome da tela que deverá ser criada.
Com as demais opções, não precisamos nos preocupar, pois em nosso projeto já definimos o
local de criação.

11
 Unidade: Aplicação de Interface Gráfica

• Agora, já podemos clicar no botão finalizar.

A próxima etapa já deverá aparecer na nossa janela a ser customizada.

À nossa direita, temos a paleta de controles e ou componentes que poderão ser inseridos
em nossa janela. E no centro, nossa interface, ainda sem atrativo algum.
Vamos começar a moldar nossa janela, mas, primeiro, vamos definir o gerenciador de
layout que iremos trabalhar. Para tanto, devemos clicar com o botão direito do mouse sobre
a nossa janela.

Podemos observar que existem diversos gerenciadores de layout que podemos escolher,
neste caso, para facilitar a criação da janela ou design livre ou layout nulo. Os demais são mais
limitados com relação à criação de layouts, mas você pode se aprofundar mais na comunidade
GUJ na internet, nas quais existe um fórum somente sobre Java.

12
 Vamos criar um container dentro de nossa janela e para isto vamos selecionar na paleta
contêineres Swing, painel.
O conceito é o mesmo de um container de navio e deveremos criar um para em seguida
acomodar os itens de nosso layout.

Vamos, então, clicar neste painel e colocá-lo em nossa janela.

A partir de agora, poderemos mudar a cor, borda etc.

13
 Unidade: Aplicação de Interface Gráfica

Vamos mudar a cor deste painel?

Então, selecione a paleta de propriedades e escolha a opção background.

• Escolha a cor desejada e clique em ok.

Vamos agora selecionar um componente para colocarmos neste container. O escolhido
para nosso aplicativo é o componente JLabel.

14
 Veja que a parte cinza apenas representa as coordenadas do nosso JLabel. Vamos agora
mudar este JLabel, que na verdade representa uma etiqueta fixa.
Mudamos a propriedade text dele para FIRE e vamos mudar também o tamanho, a cor e a
fonte deste componente.

Mudamos a propriedade foreground para amarelo.

15
 Unidade: Aplicação de Interface Gráfica

Agora, na propriedade font, mudaremos para fonte arial e tamanho 36.

Pronto! Temos uma interface gráfica pronta; porém, sem interação inteligente do usuário.
• Vamos fazer esta aplicação “rodar” ou simplesmente executar!
Para isso, lembra-se do início da criação de nosso projeto? Pois bem! Agora deveremos
informar para a classe principal o que ela deverá fazer: “mostrar a nossa interface gráfica
criada agora”.
Vamos clicar no arquivo criado pelo projeto. Deverá aparecer uma tela com uma programação
simples; porém, deveremos colocar o seguinte código: o nome da nossa janela de interface
gráfica para o qual, no caso deste exemplo, foi dado o nome de Tela:

Tela x = new Tela(); // “estamos criando um objeto e dando vida para ele”
Atenção X.show(true); // este comando estará fazendo com que a janela apareça

16
 • Próximo passo: executar o projeto.
Para isso, basta clicar no botão de play verde, como mostra a figura a seguir.

O resultado deverá ser:

Como já vimos os passos de como criar uma interface, vamos criar uma interface como a
identificada a seguir.

Ou seja, acrescentar dois botões e escrever as palavras Acende e Apaga.

17
 Unidade: Aplicação de Interface Gráfica

Até aqui, nada que seja uma novidade além do que aprendemos até agora. Porém, temos
de mostrar que nossa interface tem dinamismo “interação” com o usuário.
Então, agora vamos aprender um pouco sobre eventos.
Em uma aplicação com interface, existe a necessidade de capturar eventos na janela para
que uma ação seja executada (clicar, abrir, passar o mouse, fechar etc.), tudo isto para que
exista uma interação do usuário com a nossa GUI.

Cada evento está associado a um objeto (componente da GUI);

• O evento gera outro objeto (ActionEvent);
• O evento é passado para um listener (escutador de eventos);
Para criar um listener, devemos implementar uma interface listener (java.awt.event.*)
Para facilitar, montaremos nossa interface para que quando o usuário clicar em um botão,
ele execute alguma sequência de comandos já definidos em um algoritmo.

18
 Primeiramente, devemos selecionar o botão que receberá o evento e escolher o evento por
meio da guia de eventos.

Neste caso, escolheremos mouseCliked e no lugar de nenhum estaremos selecionando

jButton1MouseClicked.
Logo na sequência, aparecerá a parte programável de nossa interface.

19
 Unidade: Aplicação de Interface Gráfica

Onde está escrito “// TODO add your handling code here:” iremos digitar o seguinte código:
• JOptionPane.showMessageDialog(null, “Fogo Aceso”);

Perceba que aparece uma linha sublinhada de vermelho e uma lâmpada ao lado. Isto indica
que temos um erro de compilação ou sintaxe da linguagem. Este erro é simples de resolver:
basta clicarmos na lâmpada e escolher a opção de importar o javax.swing.JOptionPane.
Este erro acontece devido ao fato de que para usarmos o JOptionPane ele faz parte do
pacote swing do Java e devemos importá-lo para a nossa interface.
Repita para o outro botão e coloque outra mensagem: JOptionPane.showMessageDialog(null,
“Fogo Apagado”);

Vamos alterar o código a seguir.

O que irá acontecer?

Nesse caso, além de mostrar a mensagem, ele também irá alterar o texto do jLabel 1 que
criamos na nossa interface.

20
 Vamos criar agora uma interface simples para calcular o seno coseno tangente de um
ângulo. Como sugestão, veja a interface a seguir.

Nesta interface, o que temos de diferente seria a caixa de texto para que o usuário possa
digitar o ângulo e depois escolher se prefere exibir uma das opções a seguir.
Note que qualquer usuário em “sã ignorância” não entenderia esta palavra de jTextField, não é?
Então, para a arrumarmos na propriedade textr do nosso jTextField1 eliminaremos essa palavra.

Pronto!
Agora é só programarmos os botões para calcular o Seno, Coseno e Tangente.
Simples, não? Pois é!

21
 Unidade: Aplicação de Interface Gráfica

Agora, temos o problema do algoritmo, não é? Fique calmo(a)!

No Java, temos a opção de efetuar cálculos usando funções da biblioteca nativa do Java,
chamada Math. Vamos aplicá-la?
No botão do Seno, escolheremos o evento de MouseClicked e, em seguida, a
seguinte programação:

• Lembre-se de que a programação a ser digitada é apenas:

double seno;
seno=Double.parseDouble(jTextField1.getText());
//estamos transformando o valor digitado em um número
//do tipo double.
JOptionPane.showMessageDialog(null,”O seno de:“+
jTextField1.getText()+ “ é “+Math.sin(seno));
//Math.sin() é uma função para calcular o seno

Vamos agora para o Coseno.

double coseno;
coseno=Double.parseDouble(jTextField1.getText());
//estamos transformando o valor digitado em um número
//do tipo double.
JOptionPane.showMessageDialog(null,”O Coseno de: “+
jTextField1.getText()+ “ é “+Math.cos(coseno));
//Math.cos() é uma função para calcular o coseno

22
 Vamos, por último, para a Tangente.

double tangente;
tangente=Double.parseDouble(jTextField1.getText());
//estamos transformando o valor digitado em um número
//do tipo double.
JOptionPane.showMessageDialog(null,”A Tangente de: “+
jTextField1.getText()+ “ é “+Math.tan(tangente));
//Math.tan() é uma função para calcular a tangente

Tome muito cuidado se por acaso for copiar e colar o código, pois, geralmente, ocorrem
erros nas aspas, haja vista que, em alguns casos, gera o que chamamos de aspas francesas. Se
isso acontecer, basta substituí-las por aspas normais novamente.
Poderíamos melhorar esta interface fazendo com que os valores se apresentem em uma
nova caixa de texto, não é?
Vamos lá!

Já a programação de cada botão seria modificada para:

23
 Unidade: Aplicação de Interface Gráfica

double seno;
seno=Double.parseDouble(jTextField1.getText());
jTextField2.setText(String.valueOf(Math.sin(seno)));
//neste caso a variável numérica não pode ser exibida diretamente
//na caixa de texto portanto colocamos o String.valueOf!

double coseno;
coseno=Double.parseDouble(jTextField1.getText());
jTextField2.setText(String.valueOf(Math.cos(coseno)));
//neste caso a variável numérica não pode ser exibida diretamente
//na caixa de texto portanto colocamos o String.valueOf!

double tangente;
tangente=Double.parseDouble(jTextField1.getText());
jTextField2.setText(String.valueOf(Math.tan(tangente)));
//neste caso a variável numérica não pode ser exibida diretamente
//na caixa de texto, portanto, colocamos o String.valueOf!

24
Material Complementar

Para aprofundar seus conhecimentos, consulte:

Vídeos:
Interface Gráfica em Java - Aula 01
https://youtu.be/ZMlySbYed8Q

Livros:
DEITEL, H. M. e DEITEL, P. J. Livro Estudo Dirigido de Algoritmos. São Paulo:
Editora Pearson, 2012.
________. Java: Como Programar. 4º Edição. Porto Alegre: Bookman Editora, 2003.

25
 Unidade: Aplicação de Interface Gráfica

Referências

ASCENCIO, A. F. G.; CAMPOS, E. A. V. Fundamentos da programação de

computadores: algoritmos, Pascal, C/C e Java. 2.ed. São Paulo: Pearson. 2010. (e-book).

CHRISTOS, P. UMESH, V. Algoritmos. Porto Alegre: Grupo A, 2011. (e-book).

EDELWEISS, N.; GALANTE, R. Estruturas de dados. Porto Alegre: Grupo A, 2011. (e-book)

FORBELLONE, A. L. V.; EBERSPACHER, H. F. Lógica de Programação: A Construção

de Algoritmos e Estrutura de Dados. 3.ed. São Paulo: Makron Books do Brasil, 2005.

GOODRICH M. T., TAMASSIA R. Estruturas de dados e algoritmos em Java. Porto

Alegre: Grupo A, 2011. (e-book)

HORSTMANN, C. Conceitos de computação com Java. 5.ed. Porto Alegre: Grupo A,

2009. (e-book)

MANZANO, J. A. N. G. Algoritmos: Lógica para Desenvolvimento de Programação. 20.ed.

São Paulo: Eriça, 2007.

VILARIM, G. O. Algoritmos: Programação para Iniciantes. Rio de Janeiro: Ciência

Moderna, 2004.

26
Anotações

27