Aula 8 Gerenciadores de Layout part2

Prévia do material em texto

PROGRAMAÇÃO II - CCT0418 
Aula 08 – Gerenciadores de Layout Parte II 
Prof. Milton Escóssia 
2018 
Introdução 
 Interfaces complexas exigem que cada componente 
seja colocado numa localização exata. 
 Em geral usam-se múltiplos painéis. 
Tipos de Gerenciadores de Layout 
 BoxLayout 
 CardLayout 
 GridBagLayout 
 JScrollPane 
 JTabbedPane 
BoxLayout 
 Organiza os componentes sequencialmente pelo 
eixo X ou eixo Y (indicados no construtor) usando os 
tamanhos preferenciais de cada componente. 
 Permite colocar uma única linha ou coluna de 
componentes com mais flexibilidade do que o GridLayout. 
 
BoxLayout 
 Possui um único construtor: 
 
 
 
 ‘alvo’ – especifica o container que necessita do layout. 
 ‘eixo’ - especifica o eixo para disport os componentes. 
 
 Um eixo pode assumir um dos seguintes valores: 
 BoxLayout.X_AXIS 
 BoxLayout.Y_AXIS 
 BoxLayout.LINE_AXIS 
 BoxLayout.PAGE_AXIS 
public BoxLayout(java.awt.Container alvo, int eixo) 
Definindo uma Superclasse para o JFrame 
 Para os exemplos a seguir optou-se por criar uma 
superclasse que contivesse as instruções de 
configuração padrão de uma janela. 
 
 Assim: 
LayoutFrame 
BoxLayoutHorizontal
Simples 
BoxLayoutVertical
Simples 
BoxLayoutHorizontal
Vertical 
Definindo uma Superclasse para o JFrame 
Ex: BoxLayoutHorizontalSimples 
Ex: BoxLayoutVerticalSimples 
A Classe Box 
 É uma classe do tipo CONTAINER que utiliza a 
classe BoxLayout como seu gerenciador de layout. 
 
 Funciona como um JPanel com um BoxLayout como seu 
gerenciador de leiaute. 
 
 Pode-se utilizar a classe interna FILLER para melhor 
posicionamento dos componentes sem um container. 
A Classe Box 
 Fornece métodos estáticos (de classe) que permite 
criar vários tipos de componentes invisíveis para 
definição de um layout: 
 Componente Glue 
 Componente Strut 
 Componente Rigid Areas 
Box – Usando Componente Glue 
 Permite realizar o controle de posicionamento de 
componentes de tamanho fixo contidos em um Box. 
 createGlue( ), createHorizontalGlue( ), 
createVerticalGlue( ) 
container.add(firstComponent); 
container.add(Box.createHorizontalGlue()); 
container.add(secondComponent); 
Box – Usando Componente Strut 
 Permite criar espaço de tamanho fixo entre 2 
componentes. 
 createHorizontalStrut( ) 
 createVerticalStrut( ) 
 
Box – Usando Componente Strut 
 Criando estruturas bi-dimensionais especificando 
sua largura e altura. 
 
 
 
 
Component horizontalStrut = Box. createHorizontalStrut(10, 20); 
aBox.add(horizontalStrut); 
 
Component verticalStrut = Box. createVerticalStrut(30, 10); 
aBox.add(verticalStrut); 
Box – Usando Componente Strut 
 Criando estrutura unidimensional especificando sua 
largura ou sua altura. 
 
Component horizontalStrut = Box. createHorizontalStrut(10); 
aBox.add(horizontalStrut); 
 
Component verticalStrut = Box. createVerticalStrut(10); 
aBox.add(verticalStrut); 
Box – Usando Componente Rigid Area 
 Permite criar um componente invisível com a 
distribuição igual de espaço entre os componentes. 
 createRigidArea( ) 
container.add(firstComponent); 
container.add(Box.createRigidArea(new Dimension(5,0))); 
container.add(secondComponent); 
Box – Usando a Classe Interna Filler 
 Usado para especificar um componente com um 
tamanho(minimum, preferred, e maximum) 
desejado. 
container.add(firstComponent); 
Dimension minSize = new Dimension(5, 100); 
Dimension prefSize = new Dimension(5, 100); 
Dimension maxSize = new Dimension(Short.MAX_VALUE, 100); 
container.add(new Box.Filler(minSize, prefSize, maxSize)); 
container.add(secondComponent); 
Box – Criando Caixas Horizontais e Verticais 
 Fornece métodos estáticos para criar um BoxLayout 
horizontal ou vertical: 
 
 Box b = Box.createHorizontalBox( ) – Os elementos são 
organizados da esquerda para direita 
 
 Box b = Box.createVerticalBox( ) – Os elementos são 
organizados de cima para baixo 
Ex: BoxLayoutHorizontalVertical 
BoxLayout com Box 
Usando BoxLayout com Alinhamento 
Vertical 
Usando BoxLayout com Alinhamento 
Vertical 
Usando BoxLayout com Alinhamento 
Vertical 
Usando BoxLayout com Alinhamento 
Horizontal 
Usando BoxLayout com Alinhamento 
Horizontal 
Usando BoxLayout com Alinhamento 
Horizontal 
Exercício - 1 
 Implemente um código Java com Swing que crie a 
janela abaixo. Sabendo que para a criação dessa 
janela deve-se: 
 Usar um JPanel para cada “linha” – usando FlowLayout 
com alinhamento pela esquerda para os dois primeiros. 
 Para a terceira linha deve ser centralizado. 
 Um quarto JPanel usando BoxLayout para agrupar os 3 
painéis anteriores. 
Exercício - 2 
 Implemente um código Java com Swing que crie a 
janela de login abaixo. Sabendo que para a criação 
dessa janela deve-se: 
 Usar a classe Box para a foto, para os dados de login e 
para os botões. 
 O Box dos botões deve se adicionado a um FlowLayout 
alinhado de forma centralizada. 
Exercício - 3 
 Implemente um código Java com Swing que crie a janela 
abaixo. Sabendo que para a criação dessa janela deve-se: 
 Usar a classe Box para a foto, para os dados do contato e para os 
botões. 
 O Box dos botões deve se adicionado a um FlowLayout alinhado 
à direita. 
 O painel principal deve utilizar um BorderLayout. 
 Os campos de FONE e Celular deve conter máscara. 
 
CardLayout 
 Permite criar uma área que contenha diferentes 
componentes em momentos diferentes. 
 Empilha componentes como uma pilha de cartas. 
 Pode ser controlado por um botão, ou um combo box 
para determinar qual painel o CardLayout deverá exibir. 
 
 Uma alternativa ao CardLayout é a utilização de um 
tabbed pane. 
Métodos do CardLayout 
 show(Container container, String nome) 
 Muda para o card do container que possui o nome informado. 
 
 first( Container container ); 
 Muda para o primeiro card do container. 
 
 next( Container container ); 
 Muda para o próximo card do container. 
 
 previous( Container container ); 
 Muda para o card anterior do container. 
 
 last( Container container ); 
 Muda para o último card do container. 
Exemplo 
Exemplo 
Exemplo 
Primeiro 
Anterior 
Próximo 
Último 
JButton JPanel 
Exemplo 
Primeiro Último 
Anterior Anterior Anterior 
Próximo Próximo Próximo 
Anterior 
Próximo 
Exemplo 
Exemplo 
Exemplo 
CardLayoutSimples 
Mudar de Card 
Mudar de Card 
CardLayout 
CardLayout 
CardLayout 
CardLayout 
CardLayout 
GridBagLayout 
 Gerenciador de layout mais complexo. 
 
 É baseado no GridLayout. 
 É semelhante ao GridLayout, porém permite que o 
tamanho de cada componente varie e que possam ser 
colocados em qualquer ordem. 
 
 Forma uma grid, porém suas células não precisam 
ter necessariamente o mesmo tamanho, seus 
componentes podem ocupar mais de uma célula e o 
redimensionamento é opcional. 
GridBagLayout 
 Sua utilização requer a criação de um esboço de 
como será a tela com os componentes e suas 
posições adequadamente. 
 
GridBagLayout 
 Esboço da tela com os componentes. 
 
GridBagLayout 
 Esboço da tela com os componentes. 
 
GridBagLayout 
 Esboço da tela com os componentes. 
 
GridBagLayout 
 Representa a tela como uma grade com linhas e 
colunas, porém permiteposicionar elementos 
ocupando várias células em qualquer direção. 
 Isso permite layouts mais customizados. 
 Como consequência causa um custo muito alto de 
manutenção. 
 
GridBagLayout - Características 
 O container é dividido numa grande de células formadas 
por linhas e colunas. 
 
 O alinhamento do componente dentro da célula, pode ou 
não manter suas dimensões originais quando houver 
redimensionamento da janela. 
 
 Cada célula pode conter apenas um componente a ser 
expandida de forma a ocupar uma área correspondente 
a uma ou mais linhas e/ou colunas. 
 
 Fornece meios para controlar a aparência de cada parte 
através de da classe GridBagConstraints. 
Exemplo 
Exemplo 
Exemplo 
GridBagLayout - Controles 
 Para cada componente adicionado ao container, deve-se 
passar um objeto da classe GridBagConstraints. 
 
 A classe GridBagConstraints define como o componente 
deve se comportar dentro do grid. 
 
GridBagLayout - Controles 
 As constraints são acumulativas. 
 Ao serem definidas são aplicadas a todos os componentes. 
 Deve ser reinicializadas para que cada componentes tenha um 
controle diferenciado. 
 
 A Grid é formada por células, porém células vazias 
em linhas/colunas vazias tem dimensão 0 (zero)! 
 Não ocupará espaço na grid. 
 Dará a falsa impressão de que a célula não existe. 
 Para criar uma célula vazia pode-se utilizar um JLabel 
vazio! 
Formas de Aplicação de Controles 
 Adicionando junto ao método add( ) do Container 
 Parâmetros: 
 O componente 
 O controle (a instância do GridBagConstraints) 
 
 Através do método setConstraints( ) do 
GridBagLayout 
 Parâmetros: 
 O componente 
 O controle (a instância do GridBagConstraints) 
 
 
Exemplo 
 Usando o método add( ) do Container com 
GridBagLayout para aplicar controle do 
GridBagLayout: 
Exemplo 
 Usando o método setConstraints( ) para aplicar 
controle do GridBagLayout: 
GridBagLayout - Controles 
 Para cada componente adicionado ao container, deve-se 
passar um objeto da classe GridBagConstraints. 
 
 A classe GridBagConstraints define como o componente 
deve se comportar dentro do grid. 
 
GridBagLayout - Controles 
 A classe GridBagConstraints contém informações sobre: 
 Localização(location) do componente dentro da grid 
 
 Expansão (span) do componente sobre mais de uma célula (horizontal - 
colspan, ou vertical - rowspan) 
 
 Escala(scaling) do componente dentro da célula da grid (fill, fill 
horizontally, fill vertically, none) 
 
 Espaçamento(spacing) do componente dentro da grid (padding, border) 
 
 Posicionamento(positioning) do componente dentro de uma célula do 
grid. 
 
 Redimensionamento(resizing) do componente em caso de 
redimensionamento do container. 
Controle de Localização do Componente 
 Define a localização(location) do componente dentro 
da grid. 
 
 A localização onde deve ser colocado cada 
componente é feita através de restrições 
(GridBagConstraints) passadas ao método add( ). 
Principais Propriedades 
 gridx e gridy 
 São valores inteiros que definem a localização de um 
componente. 
 São semelhantes as coordenadas X (gridx) e Y (gridy) de 
uma matriz. 
 Não é primordial alterar o valor destes atributos, pois o 
padrão é a constante RELATIVE, que posiciona o 
componente após o último que foi adicionado. 
 gridx - Indica a coluna onde o objeto será posicionado. 
 gridY - Indica a linha onde o objeto será posicionado 
 
Controle de Expansão o componente 
 Define com um componente se expande (span) 
sobre mais de uma célula (horitonzal - colspan, ou 
vertical - rowspan) 
 
Principais Propriedades 
 gridwidth e gridheight 
 especifica o número de células que o componente deve 
ocupar, tanto na horizontal (gridwidth) como na vertical 
(gridheight). 
 O valor padrão é 1, ou seja, o componente ocupa apenas uma 
célula do grid. 
 Ao invés de atribuir um número diretamente, pode-se passar 
também a constante RELATIVE, que posiciona o componente que 
está sendo adicionado ao lado do último componente da linha 
(caso gridwidth) ou da coluna (caso gridheight), ou REMAINDER, 
que faz com que ele seja o último componente da linha (se for 
gridwidth) ou da coluna (se for gridheight). 
 
 gridwidth - Indica o número de colunas a serem ocupadas pelo 
objeto 
 gridheight - Indica o número de linhas a serem ocupadas pelo 
objeto 
Controle de Escala do Componente 
 Define a escala(scaling) do componente dentro da 
célula da crid (fill, fill horizontally, fill vertically, none) 
Principais Propriedades 
 fill 
 Especifica a forma como o componente deve ser 
redimensionado para ocupar o espaço da célula, caso 
necessário. 
 
 Valores permitidos: 
 NONE: não há redimensionamento, portanto o tamanho do 
componente é definido por seu “preferred size”. Este é o valor 
padrão do atributo; 
 HORIZONTAL: redimensiona horizontalmente; 
 VERTICAL: redimensiona verticalmente; 
 BOTH: redimensiona para ambos os lados. 
 
Controle de Espaçamento do Componente 
 Define o espaçamento(spacing) do componente 
dentro da grid (padding, border). 
Principais Propriedades 
 insets 
 Define o espaço ao redor do componente (external 
padding), como se fosse uma borda externa vazia. 
 
 Seu valor é definido por um objeto do tipo Insets, que por 
padrão não deixa nenhum espaçamento. 
Principais Propriedades 
 ipadx e ipady 
 ipad corresponde ao termo internal padding. 
 
 Define quanto deve ser adicionado à largura (ipadx) e à 
altura (ipady) do componente, portanto a largura aumenta 
em ipadx pixels e a altura em ipady pixels. 
 
 Este valor é do tipo int, onde zero é o padrão. 
 
Controle de Posicionamento do Componente 
 Posicionamento(positioning) do componente dentro 
de uma célula do grid. 
 
Principal Propriedade 
 anchor 
 Indica qual parte da célula o componente deve ficar 
ancorado, caso não esteja ocupando todo o espaço 
disponível. 
 O valor de âncora padrão é CENTER. 
NORTHWEST NORTH NORTHEAST 
WEST EAST CENTER 
SOUTHWEST SOUTH SOUTHEAST 
Controle de Redimensionamento do 
Componente 
 Redimensionamento(resizing) do componente em 
caso de redimensionamento do container. 
 
Principais Propriedades 
 weightx e weighty 
 Define o crescimento da célula, tanto horizontalmente 
(weightx) quanto verticalmente (weighty). 
 Estes atributos são do tipo double e possuem, por 
padrão, valor zero. 
 Se o peso de todas as células for zero, o tamanho do grid será 
proporcional ao tamanho dos componentes adicionados. 
 Se for necessário que o grid se expanda para, por exemplo, 
ocupar toda a área do container, é importante especificar o 
peso (weight) nas células. 
Ex. GridBagLayoutSimples 
Ex. GridBagLayoutSimples 
Ex. GridBagLayoutII 
Ex. GridBagLayoutII 
Ex. GridBagLayoutII 
Exemplo 1 
Exemplo 1 
Exemplo 2 
Exemplo 2 
Exemplo 2 
Exemplo 3 
Exemplo 3 
Exemplo 3 
Ex. GridBagLayoutComplexo 
Ex. GridBagLayoutComplexo 
Ex. GridBagLayoutComplexo 
Ex. GridBagLayoutComplexo 
Exercício com GridBagLayout 
 Crie uma janela, usando o GridBagLayout, 
composta pelos botões: um, dois, três e quatro 
dispostos da seguinte forma: 
Exercício 
 Crie o leiaute abaixo utilizando o GridBagLayout 
como gerenciador de layout. 
Acrescentando uma Barra de Rolagem a um 
Componente 
 O JScrollPane é um containerque adiciona uma barra de 
rolagem (vertical/ horizontal) a um componente. 
 Somente um componente por vez. 
 
 Caso seja necessário mais de um componente, então deve-se 
colocar os componentes em um JPanel, e então adicionar o 
JPanel ao JScrollPane. 
JScrollPane 
JScrollPane - Métodos 
 JScrollPane(Component view): 
 Construtor que requer o componente que adicionará a barra de 
rolagem(em ambos os eixos vertical e horizontal, se 
necessário). 
 
 JScrollPane(Component view, int, vert, int horiz): 
 Construtor que requer o componente que adicionará a barra de 
rolagem, e determina se deverá adicionar. 
 
 void setViewportView(Component view): 
 Altera o componente visualizado. 
 
 void setViewportBorder(Border viewportBorder): 
 adiciona uma borda ao componente. 
Políticas do JScrollPane 
 VERTICAL_SCROLLBAR_AS_NEEDED e 
HORIZONTAL_SCROLLBAR_AS_NEEDED 
 Valor default. 
 A barra de rolagem aparece quando a viewport é menor que o 
cliente e disaparece quando a viewport é maior que o cliente. 
 
 VERTICAL_SCROLLBAR_ALWAYS e 
HORIZONTAL_SCROLLBAR_ALWAYS 
 Sempre exibe a barra de rolagem. 
 A The knob disaparece se a viewport é maior que que todo o 
cliente. 
 
 VERTICAL_SCROLLBAR_NEVER e 
HORIZONTAL_SCROLLBAR_NEVER 
 Nunca exibirá a barra de rolagem 
Exemplo – JList com Scroll 
Fonte: https://docs.oracle.com/javase/tutorial/uiswing/components/scrollpane.html 
Exemplo – JTextArea com Scroll 
JTextArea 
JScrollPane 
Barra de 
Rolagem 
Vertical 
Barra de 
Rolagem 
Horizontal 
Exemplo – JTextArea com Scroll 
Exemplo – JTextArea com Scroll 
Exemplo – JList com Scroll 
JList 
JScrollPane 
Exemplo – JList com Scroll 
Exemplo – JList com Scroll 
Exercício - 5 
 Crie um formulário de cadastro de Funcionário onde 
a janela de visualização vertical é menor que o 
formulário, necessitando assim acrescentar uma 
barra de rolagem vertical. 
Usando Abas com JTabbedPane 
 Container que é responsável em criar abas e realizar a 
trocar as páginas (painéis). 
 
 Funciona como um container de painéis, capaz de 
modularizar um formulário em diversas seções,. 
 Possibilita a entrada de uma grande quantidade de 
informações sem a necessidade de possuir um formulário com 
uma dimensão que pode não caber no monitor do usuário. 
 
 O JTabbedPane só suporta um componente por vez 
(similar ao JScrollPane). 
 
 Cada componente deve ser um único container/ 
componente (ex: um JPanel ou um Box) que pode conter 
outros componentes. 
 
Adicionando Páginas às Abas 
 O JTabbedPane fornece métodos para adicionar um 
componentes ao JTabbedPane: 
 public void addTab(String title, Component component); 
 
 public void addTab(String title, Icon icon, Component 
component); 
 
 public void addTab(String title, Icon icon, Component 
component, String tooltip); 
Métodos do JTabbedPane 
 Cada método requer um título para a aba e o 
componente que será a página para a aba. 
 Um método extra permite especificar um ícone para 
a aba ou um tooltip para a aba. 
 
 Uma vez adicionado a aba, pode-se acessá-lo 
através de índice, iniciando por 0 (zero). 
 
 Os métodos getSelectedTab( ) e setSelectedTab( ). 
Ex: JTabbedPaneExemplo 
Ex: JTabbedPaneExemplo 
Ex: JTabbedPaneExemplo 
Ex: JTabbedPaneExemplo 
Exercício 
 Recirar o formulário de Dados do Aluno substituindo 
o CardLayout pelo JTabbedPane. 
Referências 
 JFrame e JPanel - Introdução ao estudo de GUI 
 http://www.javaprogressivo.net/2012/11/JFrame-e-JPanel-Introducao-ao-estudo-de-GUI-em-
Java.html 
 
 JFrame e JPanel: como criar uma aplicação gráfica em Java 
 http://www.javaprogressivo.net/2012/11/JFrame-e-JPanelDesenhando-em-Java.html 
 
 DEVMEDIA - Conhecendo Gerenciadores de Layout GUI do Java 
 https://www.devmedia.com.br/conhecendo-gerenciadores-de-layout-gui-do-java/25869 
 
 DEVMEDIA - Utilização de Gerenciadores de Layout 
 https://www.devmedia.com.br/utilizacao-de-gerenciadores-de-layout/8430 
 
 Caelum Cap.8 - Mais Swing: layout managers, mais componentes e detalhes 
 http://www.caelum.com.br/apostila-java-testes-xml-design-patterns/mais-swing-layout-
managers-mais-componentes-e-detalhes/#8-3-exercicios-usando-layout-managers 
Referências 
 SWING - Componentes mais importantes e suas 
propriedades 
 https://www.devmedia.com.br/swing-componentes-mais-
importantes-e-suas-propriedades/16113 
 
 iMasters - Tudo sobre o GridBagLayout 
 https://imasters.com.br/artigo/2463/java/tudo-sobre-o-
gridbaglayout/?trace=1519021197&source=single 
 
 Java JTabbedPane: Componente de formulários em Java 
 https://www.devmedia.com.br/java-jtabbedpane-componente-
de-formularios-em-java/1512 
 
Videos 
 Como utilizar CardLayout, navegação em java por modelo de 
cartão. 
 https://www.youtube.com/watch?v=bLR8PzNg1KU 
 
 Criando um Form Java Básico usando o GridBag Customizer 
 https://netbeans.org/kb/docs/java/gbcustomizer-
basic_pt_BR.html?print=yes 
 
 Netbeans Interface Create using GridBagLayout 
 https://www.youtube.com/watch?v=lZxoWZpP52c 
 
 Java Tutorial 47 (GUI) - GridBagLayout and 
GridBagConstraints 
 https://www.youtube.com/watch?v=g2vDARb7gx8