Semana 8 - Interface gráfica

Prévia do material em texto

Interface gráfica
Apresentação
Uma interface gráfica é o meio pelo qual o usuário interage com a aplicação, e o seu 
desenvolvimento é realizado utilizando uma linguagem de front-end. Em Java, por exemplo, uma 
interface é criada por meio de classes que pertencem aos pacotes AWT (abstract windows toolkit) e 
Swing, especificados como java.awt e javax.swing. Estes são distribuídos em um modelo hierárquico 
de classes a partir da classe Object do pacote java.lang. Portanto, alguns conhecimentos são 
importantes no desenvolvimento de uma interface gráfica, como herança, métodos e objetos, visto 
que Java é uma linguagem regida pelos princípios da orientação a objetos.
Nesta Unidade de Aprendizagem, você verá as instruções básicas para 
o desenvolvimento de uma interface gráfica. Além disso, conhecerá as diferenças entre front-end e 
back-end. 
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Definir as instruções básicas para criação de interface gráfica.•
Diferenciar programação front-end e back-end.•
Desenvolver interfaces gráficas com Java.•
Infográfico
Uma interface é um conjunto de objetos agrupados de tal forma que permitem uma experiência 
interativa com o usuário. Os gerenciadores 
de layout são utilizados para organizar as informações em uma tela específica, atendendo às 
necessidades dos desenvolvedores ou designers de telas. Por exemplo, caso um desenvolvedor 
queira desenvolver uma tela de conversão de temperatura Fahrenheit para Célsius. Nesse caso, o 
desenvolvedor poderia utilizar um gerenciador de layout tipo grid 2x2, ou seja, a tela seria dividida 
em quatro células de mesmo tamanho, onde o desenvolvedor posicionaria os objetos de telas como 
a caixa de entrada do valor em Fahrenheit, a caixa de saída do valor convertido para Célsius e dois 
botões: um para limpar a caixa de entrada e outro para efetuar o cálculo. Cada objeto ocuparia uma 
célula no grid.
Neste Infográfico, você vai ver os tipos de gerenciadores de layout 
que podem ser usados no desenvolvimento de uma interface gráfica 
de usuário. 
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/54a84027-dea5-47ca-afbe-0ed41f6c60cf/31040834-1d4a-4c7f-ac31-45f38ff5e0ff.jpg
 
Conteúdo do livro
A interface gráfica do usuário é o elo de ligação e interatividade entre ele e a aplicação. Esta é 
composta por diversas interfaces gráficas interligadas, e os elementos que compõem uma interface 
gráfica são os seguintes: botões, caixa de textos, imagens, rótulos, etc., elementos que são criados 
por classes na linguagem Java. Esta é uma linguagem de programação orientada a objetos com 
diversas classes, as quais são organizadas em pacotes hierarquicamente distribuídos, tendo diversos 
métodos próprios, além de acessar métodos de outras classes via princípio de herança. Cabe ao 
desenvolvedor entender e aplicar corretamente as classes e os métodos no desenvolvimento de 
uma interface gráfica do usuário.
No capítulo Interface gráfica, base teórica desta Unidade de Aprendizagem, você vai conhecer as 
principais classes e métodos usados no desenvolvimento de uma interface gráfica. Além disso, vai 
ver as diferenças entre linguagem front-end e back-end.
Boa leitura.
PROGRAMAÇÃO 
ORIENTADA A 
OBJETOS
OBJETIVOS DE APRENDIZAGEM
 > Definir as instruções básicas para criação de interface gráfica.
 > Diferenciar programação front-end e back-end.
 > Desenvolver interfaces gráficas com Java.
Introdução
No mundo da programação, as interfaces gráficas são as telas de interação entre 
as ações do usuário com um determinado software. Uma tela é composta, então, 
de vários objetos, como botões, caixas de entrada de texto, imagens, barras de 
rolagens, etc. (LECESSI, 2019).
Em programação Java, há diversos objetos que são utilizados na compo-
sição de uma tela. Esses objetos pertencem a pacotes como AWT (abstract 
windows toolkit) e ao pacote GUI (graphical user interface) SWING (LECESSI, 
2019). Esses objetos, na verdade, são classes de programação que têm funções 
e parâmetros, sendo utilizados no desenvolvimento de uma interface gráfica. 
O desenvolvimento de uma interface gráfica é conhecido como programação 
de front-end. Nessa programação, o desenvolvedor cria telas com objetivos de 
interação com o usuário baseado no propósito da tela (SAMOYLOV; SANAULLA 
2018). Esse desenvolvimento também é responsável pela experiência do usuário 
dentro da aplicação. 
Neste capítulo, vamos definir os conceitos relativos às classes utilizadas na 
construção de uma tela. Além disso, vamos diferenciar as linguagens front-end e 
back-end e, por fim, criar uma interface gráfica.
Interface gráfica
Paulo Sérgio Pádua de Lacerda
Componentes de uma interface gráfica
Uma interface gráfica é a tela por onde o usuário interage com a aplicação. 
Também conhecida como GUI (graphical user interface), é o modo gráfico 
das aplicações, ou seja, a parte visual. Uma interface é composta por diver-
sos elementos, como botões, ícones, vídeos, caixa de texto, rótulos, caixa 
dropdown, entre outros, utilizados na interação com usuário (LECESSI, 2019). 
Veja, na Figura 1, um exemplo de uma interface do usuário. Essa imagem é 
composta por diversos elementos. Por exemplo, o elemento janela é composto 
pelos botões de fechar (x) e ajuda (?), bem como por título (Enter System pas-
sword). O painel é composto de outros elementos, como uma imagem (ícone 
da chave), rótulos de textos representado o que o usuário deve fazer (Please 
enter your user name and password to log on in Operation System), dois botões 
(OK e Cancel), duas caixas de entrada de textos (User name e Password) e uma 
caixa de verificação (Save this password in your password list). 
Figura 1. Interface gráfica.
Fonte: Fleur_de_papier/Shutterstock.com.
Como objetivo, a Figura 1 apresenta uma tela de login para a validação 
do nome do usuário e da senha. Então, pode-se afirmar que uma aplicação 
completa é composta de várias telas que se interligam entre si, permitindo 
uma navegabilidade na aplicação (SCHILDT, 2015). Além disso, cada tela tem 
elementos que interagem com as ações do usuário, possibilitando capturar 
e validar dados, como a tela de login da Figura 1. 
Interface gráfica2
Portanto, na programação Java, o desenvolvimento de uma interface gráfica 
é possível por meio do uso de objetos (classes) pertencentes aos pacotes AWT 
e GUI SWING (HORSTMANN, 2009). Os pacotes no desenvolvimento Java são 
containers que agrupam classes, pois a linguagem Java é uma programação 
orientada a objetos. Por isso, as classes são formadas por atributos e méto-
dos que, quando utilizados na programação de uma interface, resultam nos 
objetos de tela, como botões, imagens, painéis, etc. 
Esses pacotes e classes estão estruturados em forma de uma árvore 
hierárquica e dispostos para serem usados na programação da uma inter-
face. Veja, na Figura 2, o componente Button (classe Button). Note que ele 
pertence à classe Component, que pertence ao pacote java.awt. Então, 
a classe Button é uma subclasse da classe Component. 
Figura 2. Classe Button do container java.awt.
A classe Button do container java.awt é responsável por criar elementos 
tipo botão na interface do usuário por meio de métodos construtores como 
Button() ou Button(String label). 
Toda e qualquer classe em Java é filha da superclasse ou classe-mãe 
conhecida como Object, pertencente ao pacote java.lang.
Entretanto, as classes do pacote java.awt para a criação de objetos de 
interfaces gráficas estão em desuso, pois esse pacote foi o primeiro conjunto 
de classes criadas para o desenvolvimento de objetos a serem usados em 
telas gráficas na programação Java e não tem compatibilidade com todas 
as plataformas. Porém, hoje, se você deseja construir uma aplicação gráfica 
Interface gráfica 3
com Java, você deve utilizar as classes do pacote Java SWING, conhecidocomo 
javax.swing (FINEGAN; LIGUORI, 2015). Esse pacote é um avanço do pacote 
java.awt, tem novos elementos e compatibilidade com todas as plataformas. 
Veja, na Figura 3, a estrutura hierárquica do pacote javax.swing para 
a classe JButton. Essa classe cria objetos tipo botão para ser utilizada na 
interface gráfica do usuário. 
Figura 3. Classe JButton do container javax.swing.
A estrutura hierárquica apresentada na Figura 3 é maior que a Figura 2, 
pois agora há outros pacotes hierarquicamente distribuídos que determinam 
o acesso à classe JButton. Além do mais, a classe JButton tem diver-
sos métodos construtores que são utilizados na criação do botão, como 
JButton(), JButton (Action a), JButton(Icon a), JButton (String 
text) e JButton (String text, Icon a). Todos esses métodos são 
utilizados na criação do botão e dependem do requisito para a criação. Por 
exemplo, para um botão somente com texto, o método JButton (String 
text) deverá ser usado; porém, para um botão que contenha um ícone e um 
texto, o método JButton (String text, Icon a) deverá ser o usado.
Se você deseja saber mais sobre as classes pertencentes aos pacotes 
java.awt e javax.swing, acesse, pela web, o Oracle Help Center. 
Lá você encontrará uma vasta documentação sobre os pacotes, as classes e os 
métodos utilizados no desenvolvimento de uma interface gráfica. 
Interface gráfica4
Cada elemento do pacote javax.swing tem métodos próprios e pode 
herdar métodos de classes hierarquicamente superiores, além de implementar 
interfaces. Vamos a exemplo utilizando a classe JButton (SCHILDT, 2015). 
Na Figura 4, foi utilizando o JFrame, do pacote javax.swing, para a criação 
do painel visando à inserção do objeto. Observe, no exemplo, que diversos 
métodos foram utilizados tanto no objeto painel quanto no objeto do botão. 
Figura 4. Exemplo com JButton e JFrame.
Note, na linha 7 da Figura 4, o comando para a criação do painel com 
JFrame e o texto da barra de título. A linha 8 cria variável com o conteúdo 
texto, enquanto a linha nova mostra a criação do objeto b (botão) utilizando 
o método construtor da classe JButton com o parâmetro texto. A linha 
10 mostra o método da classe JButton, setBound(x,y,h,v). Esse método 
determina a posição de aparecimento do botão no painel, nesse caso na 
posição (x=0, y=0), canto superior esquerdo do painel, e um container de 
dimensões (h=90, v=20), ou seja, uma área de dimensões horizontal de 90 
e vertical de 20. Em seguida, vemos métodos associados ao painel, como o 
método add(), na linha 11, que adiciona o botão no painel, o método setSize, 
que determina as dimensões horizontal e vertical do painel, e os métodos 
setVisible (true), para tornar o painel visível, e setLayout(null), para 
especificar nenhum tipo de leiaute. 
Interface gráfica 5
Veja, na Figura 5, o resultado do código apresentado na Figura 4. Note 
que esse código foi desenvolvido na ferramenta de desenvolvimento Eclipse 
Version: 2020-03 (4.15.0) Build id: 20200313-1211. 
Figura 5. Resultado do código da Figura 4.
Note que uma janela com ícone do Java e os botões de minimizar, maximizar 
e fechar é apresenta na Figura 5. Essa janela é gerada pela classe JFrame. 
Como conteúdo, temos o botão gerado pelo JButton (string texto).
Agora, vamos apresentar algumas classes pertencentes ao pacote java.
swing que são utilizadas na criação dos objetos de tela (Quadro 1). 
Quadro 1. Classes do pacote javax.swing
Classe Descrição Construtores
JLabel Cria criação de rótulos JLabel(String texto, 
Icon icon, int 
alinhamento)
JButton Cria a criação de botões JButton(String text, 
Icon icon)
JRadioButton Cria botão de opções JRadioButton(String 
text, Icon icon, 
boolean selected)
JPasswordField Cria uma caixa de senha JPasswordField(String 
text, int columns)
JCheckBox Cria um caixa de 
verificação
JCheckBox(String text, 
Icon icon, boolean 
selected)
(Continua)
Interface gráfica6
Classe Descrição Construtores
ImageIcon Cria um objeto para 
inserir imagem
ImageIcon(URL location, 
String description)
ImageIcon(String 
filename, String 
description)
ImageIcon(Image image, 
String description)
JComboBox Cria uma caixa 
dropdown com opções
JComboBox(Vector<E> 
items)
JComboBox(E[] items)
JMenu Cria um menu de opções JMenu(String s, boolean 
b)
JTextField Cria uma caixa de 
entrada de texto
JTextField(String text, 
int columns)
JMenuItem Cria opções de Menu JMenuItem(String text, 
Icon icon)
JMenuBar Cria a barra de menu JMenuBar()
JOptionPane Cria caixa de diálogo JOptionPane()
JCheckBoxMe-
nuItem
Cria opções de caixa de 
verificação selecionada 
ou não
JCheckBoxMenuItem(String 
text, 
Icon icon, boolean b)
Fonte: Adaptado de Lecessi (2019). 
Logo, você pode verificar que há variações de método construtores de 
acordo com o elemento a ser criado. Por exemplo, o elemento JMenuBar 
pode ser criado somente utilizando o método construtor simples JMenuBar() 
sem passagem de qualquer parâmetro. Já o método que cria uma caixa texto 
na tela do usuário tem duas opções: a primeira passando um vetor de itens 
JComboBox(Vector<E> items) e a segunda passando um array de itens 
JComboBox(E[] items). Entretanto, há outros métodos que podem ser 
usados de acordo com a necessidade de uso do objeto, a exemplo do objeto 
JOptionPane. Esse objeto tem alguns tipos diferentes de métodos, como 
(HORSTMANN, 2009):
(Continuação)
Interface gráfica 7
 � showConfirmDialog, que abre uma caixa de diálogo de questiona-
mento de ação com os valores SIM/NÃO/CANCELA (Yes/No/Cancel);
 � ShowInputDialog, que abre uma caixa de entrada de dados;
 � showMessageDialog, que avisa o usuário a respeito de algo ocorrido, 
ou seja, mostra uma mensagem na tela em forma de pop-up.
João é um desenvolvedor júnior da empresa Solar Alimentos. Hoje, 
a empresa Solar Alimentos tem um sistema de administração desen-
volvido com a linguagem Java e telas sem muita interatividade com o usuário. 
Por ser uma empresa pequena, o sistema, até então, era o suficiente. Porém, 
na última semana, alguns problemas começaram a ocorrer no setor de vendas. 
Dados incorretos estavam sendo validados e excluídos durante a operação 
dos colaboradores. João, então, foi encarregado de resolver o problema, por-
que ele já estava comprometendo os procedimentos operacionais devido ao 
retrabalho, mas também nos negócios, pois o colaborador perdia tempo em 
resolver, por exemplo, a inserção de dados incorretos e não dava andamento 
nos procedimentos de venda. 
Diante desse cenário, João fez uma análise do incidente e chegou à conclusão 
de que a interface de venda não tinha um sistema de confirmação de registro ou 
exclusão dos dados. Assim, João implementou, nos botões de confirmação de 
registros, mensagens pop-ups com o método showConfirmDialog(),showMe
ssageDialog() no intuito de mostrar os dados novamente ao usuário e de que 
este confirmasse o tipo de operação. Com essa solução, João conseguiu resolver 
o problema das operações indevidas no sistema da empresa Solar Alimentos.
De fato, todos os elementos pertencentes ao pacote javax.swing são 
utilizados em forma de programação Java. Ou seja, mesmo que você utilize 
uma ferramenta RAD (rapid application development) ou simplesmente arraste 
e solte, há um código em Java detrás do objeto. Veja, na Figura 6, um exemplo 
da ferramenta Windows Builder com a opção “Application Window” no am-
biente de desenvolvimento integrado (IDE, do inglês integrated development 
environment) Eclipse. 
Interface gráfica8
Figura 6. Criando o botão graficamente.
A Figura 6 exibe cinco painéis.
1. O painel 1 mostra a estrutura do projeto em Java criado no IDE Eclipse. 
Contém os pacotes de organização do projeto, as classes, as interfaces, 
etc.
2. O painel 2 mostra a tela do usuário a ser desenvolvida.
3. O painel 3 mostra as opções de objetos que podem ser utilizados para o 
desenvolvimento da tela do usuário, como botões, labels, leiautes, etc.
4. O painel 4 especifica algumas propriedades do objeto selecionadoque podem ser alteradas.
5. O painel 5 mostra a estrutura hierárquica dos objetos utilizados na 
tela do usuário.
Veja, então, que você facilmente consegue criar as telas da sua aplicação. 
Porém, por trás de cada elemento gráfico, há um código-fonte, como mostra 
a Figura 7. 
Interface gráfica 9
Figura 7. Código-fonte.
Veja, na Figura 7, o código-fonte dos elementos de tela de usuário. Nesse 
exemplo, o objeto JFrame e o objeto JButton foram utilizados na criação 
dos objetos, o método setIcon foi utilizado para inserir uma imagem no 
botão, o método setForeground foi utilizado para inserir cor no texto e o 
método setBackgrund foi utilizado para inserir a cor de fundo do botão. 
Ainda, o método getContentPane() foi aplicado para adicionar o botão na 
região inferior do leiaute da tela.
A essa altura, você deve estar se questionando: o desenvolvimento de tela 
utiliza uma linguagem de back-end ou front-end? No caso do nosso exemplo, 
somente foi utilizada a linguagem Java. Esse assunto será detalhado a seguir.
Linguagem front-end ou back-end?
Como você foi apresentado a alguns objetos em Java que são utilizados no 
desenvolvimento de uma interface de usuário, vamos diferenciar as lingua-
gens de uso para a composição de uma tela conhecida como front-end e uma 
linguagem conhecida como back-end (SAMOYLOV; SANAULLA 2018). Porém, 
antes, vamos entender o porquê do uso de uma arquitetura no desenvolvi-
mento de uma aplicação. 
Interface gráfica10
Ao desenvolver uma aplicação, você precisa entender quais são as suas 
partes integrantes, como o design (parte visual da aplicação), as regras de 
negócios que serão implementadas, como a lógica do negócio, e a camada que 
tem acesso aos dados, conhecida como persistência de dados. Esse modelo 
de arquitetura é conhecido como arquitetura de três camadas: 
1. a camada um representa a parte visual da aplicação (interface do 
usuário); 
2. a camada dois representa a lógica do negócio;
3. a camada três representa o acesso aos dados (SCHILDT, 2015). 
Essa arquitetura é linear e toda informação passa pela camada de negócios 
em ambas as direções. Ou seja, a camada de apresentação tem comunicação 
com a camada de lógica de negócio, a qual, por sua vez, tem comunicação 
com a camada de acesso aos dados. A camada de apresentação é a tela do 
usuário, ou interface do usuário. 
As linguagens de front-end são responsáveis pelo desenvolvimento da 
tela e aspectos como interatividade e design, associados aos elementos de 
tela. Algumas linguagens são específicas de front-end, como HTML (HyperText 
Markup Language), Javascript, folha de estilo e Jquery, e são utilizadas prin-
cipalmente para o desenvolvimento de telas para plataformas web e móveis 
(LUCKOW; MELO, 2015). Já outras linguagens são específicas para o uso em 
back-end, camada lógica do negócio, como PHP, C#, C++, Perl, Ruby e Java, 
além do uso de banco de dados, como MySQL, Oracle, etc., para representar 
a camada de persistência (LUCKOW; MELO, 2015). 
Plataformas como web e mobile são mais fáceis para o entendimento das 
diferenças entre linguagem de front-end e back-end, pois geralmente fazem 
uso de linguagens diferentes, como HTML, Javascript e CSS para a criação de 
páginas, e PHP para lógica do negócio (LUCKOW; MELO, 2015).
Com a evolução da tecnologia, muitas linguagens são criadas e 
favorecem o desenvolvimento para novas plataformas. O React é 
um exemplo dessas novas linguagens utilizam bibliotecas Javascript para o 
desenvolvimento de aplicações para plataformas web e mobile. Uma aplica-
ção desenvolvida no React usa a linguagem Javascript como base para todo o 
desenvolvimento. Mesmo assim, há como identificar a parte das camadas de 
apresentação, negócio e persistência de dados. 
Interface gráfica 11
Como descrito anteriormente, o pacote javax.swing contém diversas 
classes que criam elementos de tela. Essa programação, mesmo na lingua-
gem Java, é considerada uma linguagem front-end, pois é utilizada para 
criar interfaces gráficas. Essas interfaces dentro de uma arquitetura, por 
exemplo, de três camadas, pertencem à camada de apresentação (camada 
1) (LECESSI, 2019). Portanto, todo e qualquer código associada aos elementos 
de tela são considerados programação front-end. Vamos a um exemplo de 
uma tela de login. Veja, na Figura 8, que a tela compreende três objetos, além 
da janela da aplicação: dois elementos tipo caixa de entrada (JTextField e 
JPasswordField), um botão (JButton) e uma janela (JFrame). 
Figura 8. Tela de login.
Veja que a tela de usuário é gerada pelo código que aparece detrás da 
imagem. Esse código, então, pode ser considerado um código-fonte tipo front-
-end, pois gera os elementos que compõem a interface do usuário. Mesmo 
que houvesse uma validação dos dados, esse código ainda estaria associado 
à camada de apresentação, não a uma regra de negócio, e toda a operação 
estaria associada à tela de apresentação.
Interface gráfica12
Já as linguagens de back-end executam a regra de negócios, ou seja, re-
cebem os dados da camada de front-end, processam, armazenam e retornam 
uma resposta ao usuário (SCHILDT, 2015). Vamos supor uma tela de controle 
de vendas. Toda a programação da tela é linguagem de front-end, mas o pro-
cessamento dos dados (número da venda, valor total, item de venda, dia da 
venda, hora da venda, nome do vendedor, quantidade de produtos, valor de 
comissão e conexão de com banco de dados) e as rotinas de armazenamento 
nas devidas tabelas no banco de dados são considerados back-end.
O modelo model view control (MVC) muitas vezes é confundido com 
uma arquitetura de três camadas. Porém, esse modelo é um padrão 
de projetos e pode ser utilizado para ampliar as funcionalidades da camada de 
apresentação do modelo de três camadas.
Na próxima seção, veremos um pequeno projeto de criação de uma interface 
de usuário. Serão detalhados, para isso, os métodos e parâmetros contidos 
nos elementos de tela. 
Criação de uma interface de usuário
A interação do homem com o computador sempre foi alvo de estudos por 
parte das grandes empresas de informática. Ao longo do tempo, passou 
de simples comandos, modo estritamente textual, para interfaces gráficas 
tanto simples quanto complexas, que são compostas de diversos elementos 
que permitem a interação do usuário com a aplicação. Em Java, utilizando 
as classes do pacote javax.swing, você pode criar interfaces de aplica-
ção. Então, vamos demonstrar como criar uma interface gráfica de usuário. 
Os procedimentos a seguir serão executados no IDE Eclipse, mas podem ser 
executados em outros, como NetBeans, por exemplo. 
Interface gráfica 13
Nosso exemplo será uma tela de cadastro de clientes de um sistema de 
vendas. Esse sistema é composto de alguns módulos separados por menus. 
A tela de cadastro de cliente é composta de campos para inserção de dados, 
como nome do cliente, e-mail, nacionalidade, estado, observações, telefone 
para contato e opções de recebimento de notícias de promoções. Vamos ao 
passo a passo.
1. Criação do projeto Java no Eclipse. Clique no menu File > New > Java 
Project. Uma janela será aberta para que você insira o nome do pro-
jeto; depois, clique em Finish. Veja, na Figura 9, a janela de criação do 
projeto em Java e a estrutura do projeto já na janela Project Explorer.
Figura 9. Criando o projeto.
Interface gráfica14
2. Criação do pacote. Agora vamos criar um pacote para a organização 
da nossa interface (tela de cadastro de clientes). Nesse caso, o pacote 
(br.sagah.tela) é criado na pasta src (source) do projeto. A Figura 10 
ilustra o processo.
Figura 10. Criando o pacote.
3. Classe principal. Agora, vamos criar a classe principal. Na progra-
mação Java, uma das classes contém o método principal (main()). 
O método main indica que a classe é a classe inicial para a execução 
do projeto. Para isso, clique no pacote br.sagah.tela e, depois, em 
File > New > Class. Por padrão de desenvolvimento, o nome da classe 
é criado com a letra inicialmaiúscula e com os objetos em minúsculo. 
A Figura 11 ilustra a tela de criação da classe. Lembre-se de clicar na 
caixa de verificação do método main() conforme a imagem. 
Interface gráfica 15
Figura 11. Criando a classe principal.
4. Criação da classe da tela. Com o intuito de separar a classe que gera 
a tela da classe principal, vamos criar uma nova classe, mas sem o 
método main(). Clique no pacote br.sagah.tela e, depois, em File 
> New > Class, conforme a Figura 11. Porém, dê um novo nome para a 
classe, Tela. A Figura 12 apresenta a classe criada e o código da classe 
com um método construtor. O método construtor é executado com a 
classe instanciada. 
Interface gráfica16
Figura 12. Método construtor da tela do usuário.
Até esse ponto, o projeto consta com um pacote (br.sagah.tela) e duas 
classes: a classe principal e a classe da tela gráfica do usuário. Desse modo, 
o próximo passo é utilizar o método initialize(). Esse método será res-
ponsável pelos códigos dos elementos de tela.
5. Criação da janela. Use a classe JFrame para criar a janela que agrupará 
os elementos de tela. A Figura 13 ilustra o código para a criação da janela. 
Interface gráfica 17
Figura 13. Código de criação da janela.
Além do objeto, alguns métodos foram utilizados para determinar algumas 
características da janela. Veja a seguir.
 � setSize(largura, altura): especifica a altura e a largura da janela. 
Os valores são em pixels.
 � setLocationRelativeTo(null): especifica a localização da janela. 
Nesse exemplo, o parâmetro null é determinado no centro da tela.
 � setVisible(true): permite a visualização da tela do usuário. O pa-
râmetro true ativa a visualização.
 � setBackground(cor): determina a cor de fundo do objeto. A cor pode 
ser estabelecida com a classe Color. 
 � setDefaultCloseOperation(JFrame.EXIT _ ON _ CLOSE): habilita 
o botão fechar da janela criada pelo JFrame. 
6. Criação do painel. Os gerenciadores de leiaute servem para organizar 
os elementos de tela dentro da janela. Existem diversos gerenciadores 
de leiaute, como FlowLayout, GridLayout, Box Layout e BorderLayout. 
Embora sejam utilizados para organizar os dados dentro, por exem-
plo, de um JFrame ou JPanel, aqui, vamos construir a tela de cadastro 
e cliente sem um gerenciador de leiaute. Nesse cenário, o método 
setLayout recebe parâmetro null, ou seja, não há qualquer tipo 
de gerenciamento, e os objetos são posicionados na tela de forma 
Interface gráfica18
absoluta, utilizando valores de X (distância da borda esquerda da tela) 
e Y (distância da borda superior da tela). Vamos criar, então, um painel 
por meio da classe JPanel() para a organização dos elementos de 
tela, mas sem gerenciador; apenas adicionando o painel. O código está 
descrito na Figura 14.
Figura 14. Criação do painel.
Observe o uso do método setLayout(null). Esse comando não ativa 
qualquer tipo de gerenciador de leiaute específico, sendo necessário o po-
sicionamento dos elementos com o método setBound(x, y, w, h).
7. Criação dos códigos dos objetos que serão utilizados na tela. Todos os 
labels (rótulos) indicativos da tela foram criados com a classe JLabel 
e com algumas características, como alteração da cor do texto e do 
tamanho de fonte, além do seu posicionamento. A Figura 15 mostra a 
criação do título da tela. Observe o uso dos métodos setForeground(), 
que define a cor do texto, e setFont(), que permite especificar o tipo, o 
tamanho e o estilo de fonte. Posteriormente, o método adiciona o objeto 
ao painel criado com JPanel(). Ainda, o uso do método setBounds(x, 
y, w, h) especifica o posicionamento do elemento na tela (x, y) e a 
área de visualização do conteúdo do elemento (w, referente à largura, 
e h, à altura). Os demais elementos da tela criados com o JLabel 
seguem os mesmos princípios. 
Interface gráfica 19
Figura 15. Aplicação do JLabel.
Por sua vez, os elementos de entrada de texto foram criados utilizando a 
classe JTextField(). Os elementos nome, e-mail e telefone do cliente foram 
criados utilizando a classe JTextField(), exemplificado com o código da 
caixa de entrada do nome do cliente (Figura 16).
Figura 16. Aplicação do JTextField.
Interface gráfica20
O campo estado foi criado por meio da classe JComboBox. Essa classe 
permite que listas sejam exibidas dentro de um elemento de tela. Veja, 
na Figura 17, a criação de um array de nomes (strings) e a inserção do array 
como parâmetro do objeto JComboBox. 
Figura 17. Aplicação do JComoBox.
Por sua vez, os campos de opções são conhecidos como botões de rádio 
(JRadioButton). A construção desse elemento na interface de usuário é 
possível pelo uso da classe JRadioButton. Entretanto, para que as op-
ções sejam únicas, pode-se, por exemplo, criar um grupo de botões de rádio 
(ButtonGroup) e adicionar os botões a esse elemento conforme o código da 
Figura 18. Veja que o objeto bg não é acionado ao painel, mas, sim, os objetos 
de botões de rádio.
Interface gráfica 21
Figura 18. Aplicação do JRadioButton com ButtonGroup.
Já as linhas podem ser adicionadas à tela visando à organização visual 
dos elementos. O código a seguir adiciona uma linha na tela. Cria-se a linha 
com a classe JSeparator.
JSeparator separator = new JSeparator();
separator.setForeground(Color.WHITE);
separator.setBounds(10, 196, 525, 8);
panel.add(separator);
Além disso, podem ser criadas caixas de observação, que são elementos 
de tela que permitem que o usuário insira informações adicionais. Esse objeto 
é criado via classe JTextArea. Veja, na Figura 19, o código de criação.
Interface gráfica22
Figura 19. Aplicação do JTextArea.
Inserir uma imagem na tela do usuário é possível pela combinação entre 
a classe ImageIcon e uma classe JLabel, sendo que o parâmetro pas-
sado para o objeto JLabel é o ícone especificado com o método construtor 
ImageIcon. Nesse exemplo, a caixa de texto e a imagem têm as mesmas 
dimensões (largura, altura) (Figura 20). 
Figura 20. Inserindo uma imagem.
Interface gráfica 23
Uma observação importante é o Path associado à imagem. Nesse exemplo, 
foi utilizado o caminho do recurso do próprio projeto, resgatado pelo método 
getResource("/br/sagah/tela/foto2.jpg") e passado como parâmetro.
Ainda, caixas de verificação podem ser utilizadas na interface do usuário 
como um campo de aceite para que alguma ação possa ser realizada. A Figura 
21 ilustra o código-fonte que cria esses elementos de tela. O exemplo ilustra 
o uso da classe JCheckBox.
Figura 21. Aplicando uma caixa de verificação.
Por sua vez, botões são criados com a classe JButton. A Figura 22 ilustra 
a criação dos botões na tela. 
Interface gráfica24
Figura 22. Criando botões.
Por fim, menus são criados para organizar as ações de uma tela. No desen-
volvimento Java, a classe JMenu cria a área de opções de menu, que são criadas 
por JMenuItem. Esses objetos são dispostos na barra de menu (JMenuBar). 
A Figura 23 ilustra a codificação da criação do menu na interface do usuário.
Figura 23. Criando o menu.
Interface gráfica 25
Note a sequência de criação do menu. Cria-se a barra de menu (JMenuBar) 
e, em seguida, a área de menu (JMenu), adicionando à barra de menu. Depois, 
você cria as opções de menu por meio do JMenuItem e adiciona os itens à 
área de menu. Como resultado, tem-se a interface do usuário ilustrada na 
Figura 24.
Figura 24. Interface do usuário.
Neste capítulo, vimos que uma interface gráfica pode ser desenvolvida 
utilizando as classes dos pacotes SWING (javax.swing), pois essas classes 
são compatíveis com todas as plataformas, como a classe JButton, para a 
criação de objetos tipo botão simples. As classes do pacote javax.swing 
têm métodos e alguns parâmetros que são utilizados, por exemplo, para 
alterar características do objeto, com o método setSize(x,y), que determina 
dimensões de um painel ou de uma janela. 
Logo, a linguagem utilizada no desenvolvimento de uma interface do 
usuário é considerada uma linguagem de front-end, embora seja a mesmautilizada para a codificação de regra de negócio, conhecida como linguagem 
back-end. A linguagem de front-end é aplicada aos objetos associados à 
camada de apresentação em um modelo de três camadas.
Interface gráfica26
Em resumo, a organização e a navegação são necessárias no desenvolvi-
mento de uma interface com o objetivo de criar boas experiências ao usuário 
em relação à visualização das informações, mas também visando a uma melhor 
distribuição dos pesos de importância para cada objeto de tela. No caso da 
linguagem Java, isso é feito utilizando os objetos gerados pelas classes do 
pacote javax.swing.
Referências
FINEGAN, E.; LIGUORI, R. OCA Java SE 8: guia de estudos para o exame 1Z0-808. Porto 
Alegre: Bookman, 2015.
HORSTMANN, C. Conceitos de computação com Java: compatível com Java 5 & 6. 5. ed. 
Porto Alegre: Bookman, 2009.
LECESSI, R. Functional interfaces in Java: fundamentals and examples. New York: 
Apress, 2019.
LUCKOW, D. H.; MELO, A. A. Programação Java para a web: aprenda a desenvolver uma 
aplicação financeira pessoal com as ferramentas mais modernas da plataforma Java. 
2. ed. São Paulo: Novatec, 2015.
SAMOYLOV, N.; SANAULLA, M. Java 11 cookbook: a definitive guide to learning the key 
concepts of modern application development. 2nd ed. Birmingham: Packt Publishing, 
2018. 
SCHILDT, H. Java para iniciantes: crie, compile e execute programas Java rapidamente. 
6. ed. Porto Alegre: Bookman, 2015.
Interface gráfica 27
Dica do professor
A orientação a objetos é um paradigma de programação, e Java 
é uma linguagem orientada a objetos. Para iniciantes, compreender a estrutura hierárquica dos 
pacotes e das classes no Oracle Help 
pode ser uma tarefa difícil, pois o princípio de herança está estritamente aplicado à estrutura. O 
Oracle Help Center é a documentação oficial 
da linguagem Java.
Nesta Dica do Professor, você vai ver como o princípio de orientação 
a objetos conhecido como herança é aplicado às classes do pacote javax.swing. 
 
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
 
 
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/b3ac823e8e3100ee9be61111a6a1dc2e
Exercícios
1) As classes em Java são distribuídas de forma hierárquica e relacionadas entre si pelo 
princípio de herança. A classe raiz é a classe Object do pacote java.lang, e essas classes são 
agrupadas em pacotes.
Com relação à distribuição das classes em uma estrutura hierárquica, leia as afirmações a 
seguir.
I. A classe JLabel consegue acessar métodos do pacote JComponent, como o método 
setFont() que determina características de fonte. 
II. O método setBackground() do pacote java.JComponent pode ser acessado pela classe 
Frame via herança.
III. A interface Accessible permite que a classe JFrame acesse métodos do pacote 
javax.JComponent.
IV. O método setSize() pode ser acessado via objeto JFrame, pois pertence a uma classe 
superior à classe JFrame, conhecida como Component. 
Qual é a alternativa correta?
A) As afirmativas I e II estão corretas.
B) As afirmativas II e IV estão corretas.
C) As afirmativas I, II e III estão corretas.
D) As afirmativas III e IV estão corretas.
E) As afirmativas I, II e IV estão corretas.
Uma interface gráfica é formada por elementos de controle como caixa de texto, botões de 
seleção, botão simples, etc. Esses elementos são posicionados na tela por diversos meios, de 
forma absoluta ou pelo uso de gerenciadores.
Agora, considere as seguintes asserções:
I. Quando um container tem mais de um componente, é preciso especificar como esses 
componentes devem ser dispostos na apresentação. Em Java, um objeto que implemente a 
interface LayoutManager é responsável por esse gerenciamento de disposição. 
2) 
PORQUE
II. O uso de um gerenciador especifica o tamanho e a posição dos componentes na janela 
gráfica do programa, ou seja, determina onde os componentes irão ficar na interface gráfica 
do usuário, dispostos dentro do container, como Frame, Panel e Window.
Assinale a alternativa que apresenta a análise correta das asserções.
A) As asserções I e II são proposições verdadeiras, mas a II não justifica a I.
B) As asserções I e II são proposições verdadeiras, e a II justifica a I. 
C) A asserção I é uma proposição verdadeira; a II, falsa. 
D) A asserção I é uma proposição falsa; a II, verdadeira. 
E) As asserções I e II são proposições falsas.
3) As linguagens de front-end são definidas como linguagens usadas no desenvolvimento de 
interface gráfica de usuários. As classes dos pacotes java.awt e javax.swing são utilizadas no 
desenvolvimento de uma interface.
Considerando o contexto, marque V (verdadeiro) ou F (falso).
( ) No modelo de três camadas, a camada um, apresentação, é onde linguagens de front-end, 
como Java, são usadas na criação dos elementos de interface. 
( ) Diferentemente da linguagem de front-end, a de back-end é usada para implementar as 
regras de negócio, sendo aplicada na camada dois do modelo de três camadas.
( ) Um projeto utilizando a linguagem Java faz uso da linguagem tanto para criação de 
interfaces gráficas do usuário como no desenvolvimento das rotinas de validação das regras 
de negócio. 
( ) As classes do pacote javax.swing são utilizadas para a criação de elementos de tela como 
um botão simples. Essas classes implementam os princípios de herança.
Assinale a alternativa que apresenta a sequência correta.
A) V, V, F, V. 
B) F, F, F, V.
C) V, V, F, F. 
D) V, F, F, V.
E) V, V, V, V.
4) Um bom layout favorece a experiência de usuário, incluindo a usabilidade da aplicação. Em 
containers como JFrame e JPanel há alguns gerenciadores que facilitam o desenvolvimento 
de um layout. Esse gerenciador de layout divide um container em uma grade com linhas e 
colunas, onde os componentes são colocados a partir da parte superior esquerda e assim 
sucessivamente.
Assinale a alternativa que representa o gerenciador de layout descrito.
A) BorderLayout.
B) GridLayout.
C) FlowLayout.
D) CardLayout.
E) BoxLayout.
5) A linguagem Java tem alguns pacotes que agrupam classes utilizadas na construção de uma 
interface gráfica do usuário. Os elementos de uma interface são criados por classes como 
JLabel, JButton e JTextField, que geram objetos como rótulos, botões e campo de entrada 
de texto.
Logo, a API __________ foi adicionada à plataforma na versão do Java SE 1.2, com o objetivo 
de melhorar recursos e componentes para criar interfaces gráficas no Java. O Swing é 
compatível com o __________, sendo possível usar componentes e recursos das duas 
__________ no mesmo projeto. Uma __________ gráfica criada pelo Swing é única em qualquer 
sistema operacional que a executa, seja Windows, Linux ou qualquer outro, permanecendo o 
mesmo layout e estilos. Grande parte da complexidade da biblioteca Swing foi pelo fato da 
preocupação de __________ que a AWT não tinha.
Assinale a alternativa que complete as lacunas.
A) Swing; AWT; bibliotecas; interface; portabilidade.
B) AWT; Swing; API; interface; portabilidade.
C) AWT; BorderLayout; API; tela; compatibilidade.
D) Swing; BorderLayout; bibliotecas; tela; compatibilidade.
E) AWT; Swing; API; interface; portabilidade.
Na prática
A linguagem Java permite que o desenvolvedor crie interfaces gráficas de usuário. Essa linguagem 
de programação é orientada a objetos e usada tanto para front-end quanto para back-end em 
aplicativos Java para desktop. Durante o desenvolvimento de uma interface gráfica, problemas 
ocorrem, sendo assim, em algumas situações, a linguagem não oferece um suporte direto a ajustes 
dos objetos para atender às necessidades do layout de tela.
Neste Na Prática, você vai ver como um profissional de tecnologia 
da informação (TI) encontrou a solução para o problema do ajuste automático de imagens a serem 
apresentadas na interface gráfica proposta para uma escola. 
 
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou cliqueno 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/e45b6fd3-8e05-47ce-bbb0-40446772a43a/30b421ef-a4a2-46c4-8209-33cc519f5fc5.jpg
Saiba +
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
Entendendo e aplicando herança em Java
Este texto aborda a programação orientada a objetos no atendimento a diversos princípios. A 
herança é um dos princípios básicos, sendo muito aplicada na hierarquia de classes da linguagem 
Java. Confira.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
11 dicas de ferramentas que vão te ajudar a criar um layout 
excelente
Este site lista 11 ferramentas úteis para o desenvolvimento do layout de uma interface gráfica do 
usuário. Veja a seguir.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Java para iniciantes: crie, compile e execute programas Java 
rapidamente
O Capítulo 16 desta obra é um ótimo reforço para o entendimento em tela da linguagem Java. Leia.
Conteúdo interativo disponível na plataforma de ensino!
https://www.devmedia.com.br/entendendo-e-aplicando-heranca-em-java/24544?v=347252168
https://www.iset.com.br/blog/ferramentas-ajudar-criar-layout/?v=230918602