8-output

Prévia do material em texto

E-Book - Apostila
8-Um trato no look do soRware (DL)
E-Book - Apostila
Esse arquivoé uma versão estática. Para melhor experiência, acesse esse conteúdo pela m ídia interativa.
E-Book - Apostila
rato
soÜwa
Nessa unidade vamos estudar como estruturar interfaces visandoa usabilidade por parte dos
usuários dos sistemas que vamos desenvolver. Antes de tudo, vamos acompanharo casoa seguir.
Reflexão
Alan havia crescido na carreira como programadore estava se tornando um verdadeiro
especialista no desenvolvimento de soluções computacionais. Suas competências se
desenvolveram de forma notável,e ele já estava utilizando padrões de projetose boas
práticas de desenvolvimento com maestria. Seus códigos eram otimizadose organizados,
o que facilitavao trabalho em equipe. Tudo estava indo muito bem.
Em um novo projeto de software, Alan contava com uma pequena equipe, somente com
desenvolvedores. Para ele não foi um problema, pois conseguiu implementar muito bem
a soluçãoe entregá-la parao cliente. Após alguns meses de usodo sistema, Alan ficou
extremamente frustrado ao descobrir queo cliente estava insatisfeito com o uso do
software. Apesar do programa serrápido, estávele funcional, sua usabilidade estava
muito comprometida, pois não foram observados os mínimos critérios de uma interação
facilitada com o sistema. Mesmo nãosendo especialista em interfaces, Alan percebeu que
precisaria se preocupar minimamente com essa parte da solução, com o objetivo de não
comprometero projeto.
2-23
E-Book - Apostila
Ao final deste conteúdo, você será capaz de:
• Conhecer bibliotecas para implementação de interfaces gráficas em
soluções computacionais;
• Diferenciar os tipos de tratamentos de eventos;
• Avaliara necessidade da utilização de padrões de projeto comoo MVC.
Um dos aspectos mais importantes de um sistema computacional que possui interação com o
usuárioé a boa qualidade de seus componentes visuais. Bons exemplos para isso são os aplicativos
que podemos obter das lojas virtuais para nossos dispositivos móveis. Independentemente da
qualidadee do número de funcionalidades que um deles ofereça,a probabilidade deo usuário
gostare mantê-lo instaladoé muito baixa, casoa sua interface gráfica não cause boa impressãoe
facilitea interaçãoe acesso às funcionalidades.
3 - 23
E-Book - Apostila
Nesta unidade, estudaremos sobre os principais componentes visuais paraa construção de
interfaces gráficas de qualidadee como eles podem serutilizados para garantir alto nível de
usabilidade.
FIGURA1 - Interface gráfica confusa
4-23
ELABORAÇÃO DO AUTOR, 2020.
E-Book - Apostila
FIGURA2 - Interface gráfica organizada
5- 23
ELABORAÇÄO DO AUTOR, 2020.
Hello, world!
E-Book - Apostila
6 - 23
E-Book - Apostila
O pacote javax.swinge seus subpacotes possuem classes úteis paraa criação de interfaces gráficas
parao usuário (GUI: Graphical User Interface).A criação de uma interface gráfica (uma tela) envolve
o uso da classe JFrame, que fazparte dele.A palavra frame significa moldura.A ideiaé
construirmos uma moldura e, então, adicionarmos conteúdoa ela, como botões, campos textuais,
tabelas, menus etc. Um JFrame possui um painel de conteúdo (doinglês content pane). Trata-se
de um objeto capaz de armazenar outros objetos. Não adicionamos conteúdo diretamentea um
JFrame. Uma vez que tenhamos um JFrame em mãos, obtemos uma referência ao seu painel de
conteúdoe adicionamos conteúdoa ele.
Tradicionalmente, quando aprendemos uma nova tecnologia, linguagem, framework etc.,
começamos osestudos por meio da implementação de um aplicativo "Hello, World" que, em geral,
é um exemplo minimal que ilustrao que é possível fazer com aquele conteúdo sob estudo.
Veja,a seguir, os nomes de algumas classes que representam componentes visuais.
TABELA1 - Componentes visuais do pacote javax.swing
Nome daclasse
JLabel
JTextField
JButton
ELABORAÇÃO DO AUTOR, 2020.
Finalidade
Exibir texto não editável pelo usuário.
Exibir uma caixa textual ondeo usuário possa inserir conteúdo.
Exibir um botão.
O seguinte programaé um "Hello, World" feito, utilizando classes do pacote javax.swing.
7 - 23
Estudo Guiado
E-Book - Apostila
public class HelloSwingTela{
public static void criarTela() {
JFrame tela = new JFrame ('Hello, Swing!! ! ');
tela.setDefaultClose0peration(JFrame.EXIT ON CLOSE);
//const roi us J Label
J Label he11o SwingLabe\. = new J Label (' He1 \.o, Swing! ! ! ! ! ! ! ' ) ;
//obtem o painel de conteúdo
Container painelDeConteudo = tela.getConteúdoPane ();
//adiciona o JLabel ao painel de conteúdo
painelDeConteudo.add(helloSwingLabel);
//ajusta largura e altura da tela conforme seu conteúdo
tela. pack();
//to rnaa tela vis ive\.
tela.setVisible(true);
public static void main(String[] args) {
SWingUtilities.invokeLater(() ->{
criarTela();
i)i
8 - 23
public	class	HelloSwingTela{
public	static	void	criarTela()	{
JFrame	tela	=	new	JFrame	('Hello,	Swing!!!');
tela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//constroi	um	JLabel
JLabel	helloSwingLabel	=	new	JLabel	('Hello,	Swing!!!!!!!');
//obtem	o	painel	de	conteúdo
Container	painelDeConteudo	=	tela.getConteúdoPane();
//adiciona	o	JLabel	ao	painel	de	conteúdo
painelDeConteudo.add(helloSwingLabel);
	
//ajusta	largura	e	altura	da	tela	conforme	seu	conteúdo
tela.pack();
//torna	a	tela	visível
tela.setVisible(true);
}
	
public	static	void	main(String[]	args)	{
SwingUtilities.invokeLater(()	->	{
criarTela();
});
}
}
E-Book - Apostila
Leiaa página 304 atéa 306 para conhecer um pouco mais sobrea
estrutura básica do pacote javax.swing.
Cl1que no linke leiao livro
DEITEL, P.; DEITEL, H.J ava: como programar. 10.ed. São Paulo: Pearson, 2017.
Saiba Mais
O método invokeLateré utilizado para especificarmos uma atividadea ser executada por
um fluxo independente do principal, que funciona em paralelo com ele. lsso ocorre por
diferentes razões. Uma delasé o fato de não querermos congelara interface gráfica com o
usuário, caso elesolicitea execução de alguma funcionalidade que eventualmente
demore para terminar. Além disso,o swing (assim comoa maioria dos toolkits de interface
gráfica)é single threaded, isto é, somente um fluxo de execução pode tocar nos
componentes visuais,e ele deve seracessado pelo método invokeLater.
Tratamento de eventos
Quandoo usuário interage com um componente visual dizemos que um evento acontece. Um
clique no botão, um caractere digitado em um campo textual, uma opção selecionada em um menu
sãotodos exemplos de eventos.O framework Swing utilizao padrão de projeto chamado Observer
para fazero tratamento de eventos.O tratamento de um evento consiste em especificar uma ação
que deve serrealizada quando eleocorrer. Por exemplo, quando um professor que utiliza um
sistema acadêmico clica um botão para salvar as notas que acabou de digitar,a açãoa serrealizada
é o armazenamento delas no banco de dados do sistema.
9-23
https://plataforma.bvirtual.com.br/Acervo/Publicacao/39590
E-Book - Apostila
O padrão de projeto Observer consiste essencialmente em duas partes: um objeto Observablee
um objeto Observer.O primeiroé quem dáorigem aos eventos. No exemplo do sistema acadêmico,
o botão queo professor usa para enviar as notasé um Observable. Cabe ao desenvolvedor do
sistema especificar um objeto que desempenharáo papel de Observer. Eleé notificado toda vez
queo evento acontece (obotãoé clicado, nesse caso)e executa um método previamente definido.
A Figura3 ilustra como Observablee Observer conversam diretamente.
FIGURA3 - Observablee Observer
ELABORAÇÃO DO AUTOR, 2010.
10 - 23
E-Book - Apostila
Saiba Mais
A notação() ->()é chamada de expressão lambda. Trata-se de um recurso disponível na
linguagem Java desdea sua versão 8. Uma expressão lambdaé usada como
implementação de uma interface, desde que elapossua um único método. Interfaces que
possuem um único método sãochamadas de funcionais no Java 8. Eventualmente,
interfaces com mais de um método também podemserimplementadas utilizando-se uma
expressão lambda. Porém, isso somente pode acontecer nos casos em quea interface
possui um único método abstrato, sem implementaçãoe todos os outros possuem
implementação padrão (são marcados como modificador default).
Todoo padrão de projeto possui um diagrama de classes que exibea sua estrutura geral.A
estrutura do padrão Observeré exibida na Figura 4.
FIGURA4 - Diagrama de classes do padrão de projeto Observer
ELABORAÇÃO DO AUTOR, 2020.
11-23
Diagrama de classes do pad rão de projetoO bserver exibe uma interface chamada Subject
(ela fazo papel de Observable)e possui os métodos add, removee notifyobservers.H á
uma interface chamada0 bserver cujoú nico método sechama update. ConcreteSubjecté
uma classe concreta que imp îementa Subject.C oncreteo bserveré uma classe conereta
que implementaO bserver. Subject possui um relacionamento TEM-UM comO bserver.
Eventualmente,C oncreteo bserver pode terum relacio namento TEM-UM com
ConcreteSubject.
E-Book - Apostila
Um padrão de projeto (do inglês Design Pattern)é uma solução amplamente conhecidae
genéricao suficiente para que possa seraplicadaa diversos problemas, mesmo queeles
pertençama domínios diferentes.A sua existência tem décadas, porém eles foram
primeiramente documentados, de fato, em um livro que hojeé conhecido como TheGang of
Four.O padrão de projeto Observer, por exemplo,é aplicado para tratar eventos, como clicar
botões, alterações de localização detectadas por sensores de GPS, dispositivos móveis quando
detectam novas redes Bluetooth, toques na tela realizados por um usuário do Google Maps,a
fim de escolher um destinoe muitos outros exemplos.O MVC (Model View Controller)é um
padrão composto cuja implementação pode serfeita de diferentes formas. Uma delas envolvea
aplicação doO bserver. Em alguns casos, os componentes visuais são registrados como
observadores do modelo que têm como responsabilidade notificá-los quando alterações de
interesse aconteçam.
O aplicativo construído,a seguir, ilustrao uso de componentes visuais,e o tratamento do eventoé
realizado utilizandoo padrão de projeto Observer.O usuário pode utilizá-lo para fazera conversão
de unidades de medida de temperaturas.
public class ConversorDeTemperatura {
public static void criarTela(){
JFrame tela = new JFrame ('Conversor');
JTextField celsi usTextField = new 3TextField ( 1õ);
JLabel celsiusLabel = new JLabel ('\u00B0C');
JButton convertButton = new JButton ('Converter');
12-23
public	class	ConversorDeTemperatura	{
	
public	static	void	criarTela(){
JFrame	tela	=	new	JFrame	('Conversor');
JTextField	celsiusTextField	=	new	JTextField	(10);
JLabel	celsiusLabel	=	new	JLabel	('\u00B0C');
JButton	convertButton	=	new	JButton	('Converter');
E-Book - Apostila
JLabel valorConvertidoLabel = new JLabel (");
Container painelDeConteudo = tela.getConteñdoPane();
painelDeConteudo.setLayout (new GridLayout (2, 4, 2, 4));
painelDeConteudo. add( ce1si usTextField);
painelDeConteudo. add( ce1si usLabel);
painelDeConteudo. add( convertButI on);
painelDeConteudo. add(valo rConve rtidoLabel);
convertButton.addActionListener((e) ->{
double celsius = Double.parseDouble(
ce{siusTextField.getText()
double fahrenheit = celsius / 5 * 9 + 32;
valorConvertidoLabel.setText(
String.format('%.2f\u00B0F', fahrenheit)
//aj usta largura e altura de acordo como conteñdo
tela.pack();
//centraliza
tela.setLocationRelativeTo(null);
//altera comportamento padrâo do botâo fechar
I eta . setDefauIt CIo se0peration(J Frame. EXIT 0N CLOSE);
//torna a tela visivel
tela. setVisible (Irue);
public static void main (String[] args) {
SwingUtilities.invokeLater (() ->{
criarTela();
13 - 23
JLabel	valorConvertidoLabel	=	new	JLabel	('');
Container	painelDeConteudo	=	tela.getConteúdoPane();
painelDeConteudo.setLayout	(new	GridLayout	(2,	4,	2,	4));
painelDeConteudo.add(celsiusTextField);
painelDeConteudo.add(celsiusLabel);
painelDeConteudo.add(convertButton);
painelDeConteudo.add(valorConvertidoLabel);
	
	
convertButton.addActionListener((e)	->	{
double	celsius	=	Double.parseDouble(
celsiusTextField.getText()
);
double	fahrenheit	=	celsius	/	5	*	9	+	32;
valorConvertidoLabel.setText(
String.format('%.2f\u00B0F',	fahrenheit)
);
});
	
//ajusta	largura	e	altura	de	acordo	com	o	conteúdo
tela.pack();
//centraliza
tela.setLocationRelativeTo(null);
//altera	comportamento	padrão	do	botão	fechar
tela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//torna	a	tela	visível
tela.setVisible(true);
	
}
public	static	void	main(String[]	args)	{
SwingUtilities.invokeLater	(()	->	{
criarTela();
});
}
}
Estudo Guiado
E-Book - Apostila
Aprofunde seus conhecimentos sobreo pacote Swinge o
tratamento de eventos lendoa página 378 atéa 398.
Cl1que no linke leiao livro
DEITEL, P.; DEITEL, H.J ava: como programar. 10.ed. São Paulo: Pearson, 2017.
Os Componentes visuais jcomboboxe jtabte
Um JComboBoxé um componente que faza exibição de uma coleção de itens como um menu.O
desenvolvedor pode configurá-lo, de modoa permitir que o usuário selecione uma única opção,
diversas opções simultaneamente, utilize filtros entre outras ações.
Veja um exemplo,a seguir, em que a figura mostra um menu com uma coleção de nomes de
animais.O usuário pode clicar uma pequena seta na lateral para fazero menu expandir. Após, ele
pode selecionar um nome nalista.
FIGURA5 - JCombobox
14 - 23
https://plataforma.bvirtual.com.br/Acervo/Publicacao/39590
Pig
Bird
Cat
Dog
Rabbit
E LABORAÇÃO DO AUTOR,2020.
E-Book - Apostila
A construção de um JComboBox envolvea especificação da parte visual, bem como deum modelo
que fica responsável pela manipulação dos dados que aparecem no menu.O códigoa seguir mostra
um exemplo de construção de um JComboBox.
15-23
E-Book - Apostila
import javax.swing.JComboBox;
import javax.swing.SWingUtiIities;
import javax.swing.JFrame;
public class ExemploJComboBox {
public static void main(String[] args) (
SWingUtiIities.invokeLater(() ->{
String[] dados = { 'Banana', 'Laranja', 'Uva',
'Pêssego' };
JComboBox menu = new JComboBox<>(dados);
JFrame tela = new JFrame('Exemplo de JComboBox');
tela. setDefau{tC{ose0peration
(JFrame.EXIT ON CLOSE);
tela.getConteudoPane().add(menu);
tela.pack();
tela.setLocationRelativeTo(nu{{);
tela.setVisible(true);
Assim como ocorre com o JComboBox, um componente do tipo JTable requera especificação da
parte visual, bem como deum modelo, que fica responsável por manipular os dados que serão
exibidos. Como seunome sugere, trata-se de um componente visual que exibe dados como uma
tabela.
Para tabelas extremamente simples, podemos utilizara classe DefaultTableModel que deixa
predefinidas diversas características das células da tabela. Por exemplo: seu conteúdo é, por
padrão, atualizável,e elas são capazes de exibir somente texto. Veja um exemplo de JTable com
DefaultTableModel,a seguir.
16-23
import	javax.swing.JComboBox;
import	javax.swing.SwingUtilities;
import	javax.swing.JFrame;
public	class	ExemploJComboBox	{
				public	static	void	main(String[]	args)	{
								SwingUtilities.invokeLater(()	->	{
												String[]	dados	=	{	'Banana',	'Laranja',	'Uva',
'Pêssego'	};
												JComboBox	menu	=	new	JComboBox<>(dados);
												JFrame	tela	=	new	JFrame('Exemplo	de	JComboBox');
												tela.setDefaultCloseOperation
(JFrame.EXIT_ON_CLOSE);
												tela.getConteúdoPane().add(menu);
												tela.pack();
												tela.setLocationRelativeTo(null);
												tela.setVisible(true);
								});
				}
}
E-Book - Apostila
import javax.swing.JFrame;
import javax.suing.JScro1IPane;
import javax.swing.JTable;
import javax.suing.SWingUti1ities;
import javax.swing.table.DefaultTableModel;
public class ExemploJTableDefaultTableModel {
public static void main( String[] a rgs) (
St ring[] colunas = ( ' José' , ' Ped ro ' , ' Ha ria ' } ;
Object[] [] dados = { { 10, 8, 9 }, ( 10, 10, 10 }, ( 7,
7,8 } };
SwingUtilities.invokeLater(()- {
JFrame tela = neu JFrame('Exemplo Tabela simples');
Def auItTab1 eMode1 modelo = nes
Def auIITab1eNodel( dados, colunas);
JTable tabela = nes JTable (modelo);
tela. getC onteúdoPane(). add( nes JScrollPane (tabela));
tela.setDefau{tC{ose0peration(JFrame.EXIT ON CLOSE);
tela.pack();
tela.setLocationRelativeTo(null);
tela.setVisible(true);
Veja comoo modelo fazo papel de mediador entreo componente visuale a coleçao de dados:
17 - 23
import	javax.swing.JFrame;
import	javax.swing.JScrollPane;
import	javax.swing.JTable;
import	javax.swing.SwingUtilities;
import	javax.swing.table.DefaultTableModel;
public	class	ExemploJTableDefaultTableModel	{
				public	static	void	main(String[]	args)	{
								String[]	colunas	=	{	'José',	'Pedro',	'Maria'	};
								Object[][]	dados	=	{	{	10,	8,	9	},	{	10,	10,	10	},	{	7,
7,	8	}	};
								SwingUtilities.invokeLater(()	->	{
												JFrame	tela	=	new	JFrame('Exemplo	Tabela	simples');
												DefaultTableModel	modelo	=	new
DefaultTableModel(dados,	colunas);
												JTable	tabela	=	new	JTable(modelo);
												tela.getConteúdoPane().add(new	JScrollPane(tabela));
												tela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
												tela.pack();
												tela.setLocationRelativeTo(null);
												tela.setVisible(true);
								});
				}
}
Jonas
18 anos
Jonas
18 anos
Exemplo1
ELABORAÇAO oOAUTON, 202o.
E-Book - Apostila
Ok, minha r°sponsabiIidade
é exibir os‹ ados daqueles
objetos ali..
Minha única responsabilidade*
¿ ¿ é g uardar obj *tos, não cabea
mim exibi-los Eu deixaria de
ser altamente coeso.
Passa essesd odos pra cá!
Senhora Tabela, não fale diretamente
comigo, por favor. Não seja ingênua!
Não comp ometa seu nível de
responsab idade.E se amanhã outros
objetos es iverem no meu Iugar?
18-23
E-Book - Apostila
FIGURA7 - Conclusão da demonstração
ELABORAÇÃO DO AUTOR, 2020.
Muitas vezes, desejamos personalizara forma como osdados são exibidos nas células de um
JTable. Por exemplo:é muito mais natural que o valor booleano seja apresentado em sua célula
como uma caixa que o usuário pode marcar/desmarcar do que textualmente (true/false ou
verdadeiro/true).
Para fazer essa personalização, criamos um modelo personalizado paraa JTable. Para isso,é
preciso entendera forma como elasecomunica com seu modeloo qual lhedá acesso aos dados de
interesse. Esse processoé ilustradoa seguir.
FIGURA8 - JTable com Modelo personalizado
19 - 23
ORACLE.
E-Book - Apostila
JTable com Modelo personalizado.A figura mostra uma tabela de dados. Abaixo, há um
retângulo que representao objeto JTable, chamado Table Object. Há uma interação entre
um objetoe ele, chamado Table Model Object, também representado por um retângulo.
Por fim,o Table Model Object está conectadoa um Table Data, graficamente representado
por um paralelogramo.O objetivoé mostrar comoo baixo acoplamento entrea tabelae
seus dadosé promovido pelo modelo.
A seguir, construímos um modelo personalizado.
20-23
Estudo Guiado
E-Book - Apostila
public class ExibicaoPersonalizadaTableModel extends
AbstractTabteModel {
public ExibicaoPersonalizadaTableModel (Object [][] dados,
String [] colunas) {
this.dados = dados;
this.colunas = colunas;
p rivate Object [][] dados;
String [] colunas;
g0ver ride
public int getRowCount() {
return dados.length;
g0ver ride
public int getColumnCount() {
retu rn co1 unas. length;
g0ver ride
public Object getValueAt (int rowIndex, int columnIndex) {
return dados[rowIndex] [columnIndex];
g0ver ride
public Class getColumnClass(int columnIndex) {
return getVa{ueAt (0, coIumnIndex).getClass();
U ma vezconstru ido,o modelo pode serutilizado normalmente como feito com o
DefaultTableModel. Basta entregar uma instância de sua classe parao construtor de JTable ao
constru í-la.
O método responsável por especificar paraa JTablea forma como eladeve exibir seus dadosé o
getColumnClass. Eledevolvea classe do objeto existente em uma determinada célula, especificada
por seus parâmetros. Quandoa classe do elementoé <em>Boolean, por exemplo,a JTable tomaráa
decisão de exibi-lo como uma caixa de seleção.
21-23
public	class	ExibicaoPersonalizadaTableModel	extends
AbstractTableModel	{
	public	ExibicaoPersonalizadaTableModel	(Object	[][]	dados,
String	[]	colunas)	{
		this.dados	=	dados;
		this.colunas	=	colunas;
	}
	private	Object	[][]	dados;
	String	[]	colunas;
	
	@Override
	public	int	getRowCount()	{
		return	dados.length;
	}
	@Override
	public	int	getColumnCount()	{
		return	colunas.length;
	}
	@Override
	public	Object	getValueAt(int	rowIndex,	int	columnIndex)	{
		return	dados[rowIndex][columnIndex];
	}
@Override
	public	Class	getColumnClass(int	columnIndex)	{
		return	getValueAt(0,	columnIndex).getClass();
	}
}
E-Book - Apostila
O uso de modelos personalizadosé ilustrado na página 728a 743.
Cl1que no linke leiao livro
DEITEL, P.; DEITEL, H.J ava: como programar. 10.ed. São Paulo: Pearson, 2017.
Curiosidade
Toda classe possui um membro chamado ’class’. Ele representa, comoo nome sugere,a
própria classe.É um membro estático,o que quer dizer que todas as instâncias têm acesso
a ele. Além disso, pode seracessado utilizandoo próprio nome daclasse. Ela pode ser
utilizada para obter informações sobrea própria classe, incluindo os nomes dosmétodos
que define.
Para um programador, mesmo quenãosejao seu enfoque central, considerara usabilidade do
sistemaé essencial. Nesse contexto, estudamos diversos conceitos para desenvolver competências
com esse viés:
22-23
https://plataforma.bvirtual.com.br/Acervo/Publicacao/39590
Exte
E-Book - Apostila
Recursoé melhor visualizado no formato interativo
Refe i
i liog
DEITEL, P; DEITEL, H. Java: como programar. 10.ed. São Paulo: Pearson Education do Brasil, 2017.
ORACLE. How to use tables. Disponível em: https://docs.oracle.com/javase/tutorial/uiswing/compo
nents/table.html. Acesso em: 10 ago. 2020.
23-23
https://docs.oracle.com/javase/tutorial/uiswing/components/table.html