Aula 2 – Gerenciadores de Leiautes

Prévia do material em texto

Aula 2 – Gerenciadores de Leiautes 
Objetivo desta Aula: 
Nesta aula, você irá: 
1 - Conhecer os vários tipos de layout da biblioteca Swing. 
2 - Aprender como gerenciar os vários tipos de layout da biblioteca Swing. 
3 - Aprender a desenvolver pequenos programas para exemplificar os tópicos estudados. 
 
Gerenciadores de leiaute 
Os gerenciadores de leiautes organizam os componentes GUI em um contêiner de objetos com 
o objetivo de construir uma apresentação melhor. Sua função é facilitar a vida do designer na 
construção das interfaces. Essa funcionalidade permite que o programador se concentre na 
aparência e nos comportamentos básicos, deixando para o gerenciador de leiaute a 
responsabilidade do detalhe da aparência. Todos estes gerenciadores implementam a 
interface LayoutManager, (no pacote java.awt). 
O método setLayout, da classe Container, aceita um objeto que implementa a interface 
LayoutManager como parâmetro. 
Existem basicamente 3 tipos de maneiras de organizar componentes GUI: 
-Posicionamento Absoluto: Utilizado pela maioria das IDE’s, pois, permite que especifique 
uma posição absoluta de cada componente GUI em relação ao canto superior esquerdo do 
contêiner. Usa os métodos Component setSize e setLocation ou setBounds. É considerado 
muito trabalhoso para se construir sem auxilio de IDE’s. 
-Gerenciadores de Layout: Utilizando os gerenciadores de layout, sua tarefa pode ficar mais 
simples e rápida, uma vez que o gerenciador fará o trabalho para você, automaticamente. O 
problema é que você irá perder autonomia e o controle sobre o posicionamento e tamanho 
dos GUIs. 
-Programação Visual em uma IDE: São ferramentas de design fornecidas pelas IDEs que 
permitem arrastar e soltar os componentes GUI de uma caixa de ferramentas em uma área de 
desenho em branco. Geralmente, a IDE cria o código Java necessário. Nesses ambientes, você 
ainda pode acrescentar códigos de tratamento de eventos de um componente escolhido 
através de cliques ou duplo clique. 
FlowLayout 
Classe gerenciadora de leiaute que dispõe os componentes GUI sequencialmente na janela, da 
esquerda para a direita, de cima para baixo, como se fosse a escrita de um texto dentro de um 
parágrafo à medida que os componentes são adicionados ao contêiner. 
É comumente utilizado para arrumar botões em painéis. As linhas são centralizadas. 
O exemplo apresenta uma tela com 5 botões. 
 
Código: 
package projaula2pooead; 
 import java.awt.FlowLayout; 
import javax.swing.JButton; 
/** 
 * 
* @author Eduardo 
 */ 
public class JFrameFlowLayout extends javax.swing.JFrame { 
 FlowLayout layout; 
 /** Construtor do JFrameFlowLayout */ 
 public JFrameFlowLayout() { 
 super("Teste FlowLayout"); 
 initialize(); 
 } 
 private void initialize() { 
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE
); 
 // setPreferredSize(new Dimension(400, 200)); 
 layout = new FlowLayout(); 
 getContentPane().setLayout(layout); 
 for (int i=0; i<5; i++){ 
 add(new JButton("Botão- "+i)); 
 } 
 pack(); 
 } 
 /** 
 * @param args the command line arguments 
 */ 
 public static void main(String args[]) { 
 java.awt.EventQueue.invokeLater(new Runnable() { 
 public void run() { 
 new JFrameFlowLayout().setVisible(true); 
 } 
 }); 
 } 
 // Variables declaration - do not modify 
 // End of variables declaration 
 } 
Alterando o alinhamento 
Utilizando o método setAlignment(int align), podemos definir qual o tipo de alinhamento será 
utilizado. No quadro abaixo, apresentamos as três constantes que podem ser usadas como 
align para definir o tipo de alinhamento dos componentes. 
Constante Efeito 
FlowLayout.CENTER Faz com que os componentes sejam alinhados ao centro de cada linha de 
componentes. 
FlowLayout.LEFT Alinha os componentes a partir da margem esquerda do gerenciador. 
FlowLayout.RIGHT Alinha os componentes a partir da margem direita do gerenciador. 
FlowLayout.LEADING Alinha os componentes justificadamente para o canto principal da 
orientação do gerenciador, como por exemplo à esquerda em uma 
orientação da esquerda para direita. 
FlowLayout.TRAILING Alinha os componentes justificadamente para o próximo canto da 
orientação do gerenciador, como por exemplo à direita em uma orientação 
da esquerda para direita. 
 
Inserindo a linha abaixo, temos o alinhamento a direita: 
layout.setAlignment(FlowLayout.RIGHT); 
Inserindo a linha abaixo, temos o alinhamento a direita: 
layout.setAlignment(FlowLayout.LEFT); 
 
Inserindo a linha abaixo, temos o alinhamento a Principal: 
layout.setAlignment(FlowLayout.LEADING); 
Inserindo a linha abaixo, temos o alinhamento a Principal: 
layout.setAlignment(FlowLayout.TRAILING); 
 
 
 
 
Para definirmos um tamanho do contêiner, utilizamos o método setPreferredSize (Dimension 
predefinida). 
Esse método recebe um objeto da classe Dimension(Largura, Altura). Então, teremos: 
setPreferredSize(new Dimension(400, 200)); 
Define um contêiner de 400 de largura por 200 de altura. 
Complementando esse gerenciador, também podemos definir o intervalo entre os 
componentes, tanto vertical, quanto horizontalmente, através dos métodos setHgap e 
setVgap. Ambos os métodos recebem um inteiro que define o intervalo em pixels. 
 
GriLayout 
Classe gerenciadora de leiaute que dispõe os componentes GUI em um grid, como se fosse 
uma grade de uma planilha de cálculo. Então, os componentes são colocados em linhas e 
colunas pré-determinadas e deixando-os com o mesmo tamanho. É válido lembrar que o 
tamanho dos componentes será ajustado automaticamente à medida que a janela é 
redimensionada. 
Os construtores: 
Construtor Função 
new GridLayout( ); Cria uma grade com apenas uma linha e o número de 
colunas necessárias para colocar todos os componentes, 
um em cada coluna. 
new GridLayout(int rows, int cols); Cria uma grade com o número de linhas e colunas 
definidos pelos parâmetros. 
new GridLayout(int rows, int cols, int 
hgap, int vgap); 
Cria uma grade com o número de linhas e colunas 
definidos pelos parâmetros. Além disso, informamos o 
espaçamento horizontal e vertical entre os componentes. 
É válido lembrar que podemos acessar estes atributos 
através dos métodos estudados no FlowLayout. 
Tarefa: 
Altere o programa fornecido para verificar todos 
esses comandos apresentados. Veja como a 
redefinição destes componentes altera a 
aparência da disposição dos componentes. 
 
Código 
public class JFrameGridLayout extends javax.swing.JFrame { 
 GridLayout layout; 
 /** Creates new form JFrameGridLayout */ 
 public JFrameGridLayout() { 
 super("Teste GridLayout "); 
 initialize(); 
 } 
 private void initialize() { 
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); 
 setPreferredSize(new Dimension(400, 200)); 
 
 layout = new GridLayout(3,5); 
 // setLayout(layout); 
 getContentPane().setLayout(layout); 
 //layout.setAlignment(FlowLayout.TRAILING); 
 //layout.setHgap(15); 
 //layout.setVgap(60); 
 for (int i=0; i<10; i++){ 
 add(new JButton("Botão- "+i)); 
 } 
 pack(); 
 } 
 /** 
 * @param args the command line arguments 
 */ 
 public static void main(String args[]) { 
 java.awt.EventQueue.invokeLater(new Runnable() { 
 public void run() { 
 new JFrameGridLayout().setVisible(true); 
 }}); 
 } 
} 
BorderLayout 
Classe gerenciadora de leiaute que dispõe os componentes GUI em cinco áreas: norte (parte 
superior), sul (parte inferior), leste (lado direito), oeste (lado esquerdo) e centro. Isso significa 
que podemos adicionar até cinco componentes neste gerenciador, um para cada região. As 
regiões Norte e Sul têm prioridade sobre Leste e Oeste e estas têm prioridade sobre a região 
Central. 
Existem cinco constantes definidas para que possamos acessar as áreas: BorderLayout.NORTH, 
BorderLayout.SOUTH, BorderLayout.EAST, BorderLayout.WEST e BorderLayout.CENTER. 
Observações Importantes: 
1. Quando adicionamos os componentes na tela, precisamos definir qual área estaremos 
utilizando. Essa informação é dada pelas constantes acima; 
2. Quando não definimos qual setor o componente irá entrar, ele irá para a área central; 
3. Os métodos de definição de espaçamento vertical e horizontal funcionam 
normalmente neste gerenciador. 
4. Os métodos setSize e setLocation também funcionam e definem tamanho e local onde 
a janela irá aparecer. 
 
 
 
 
 
Código: 
import java.awt.BorderLayout; 
import java.awt.Dimension; 
import javax.swing.JButton; 
import javax.swing.JLabel; 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
CardLayout 
Classe gerenciadora de leiaute que dispõe os componentes GUI em cartões. Apenas um cartão 
é visível por vez e o contêiner trabalha como se os cartões estivessem empilhados. O primeiro 
componente adicionado é o componente GUI, visível quando o contêiner é apresentado pela 
primeira vez. 
 
/** 
 * 
 * @author Eduardo 
 */ 
public class JFrameBorderLayout extends javax.swing.JFrame { 
 BorderLayout layout; 
 /** Creates new form JFrameBorderLayout */ 
 public JFrameBorderLayout() { 
 super("Teste BorderLayout"); 
 initialize(); 
 } 
 private void initialize() { 
 setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); 
 setPreferredSize(new Dimension(400, 200)); //define o tamanho 
 layout = new BorderLayout(); 
 getContentPane().setLayout(layout); 
 layout.setHgap(5);//define o espaçamento horizontal entre GUI 
 layout.setVgap(5);//define o espaçamento vertical entre GUI 
 add(new JButton("Norte"), BorderLayout.NORTH); 
 add(new JButton("Sul"), BorderLayout.SOUTH); 
 add(new JButton("Leste"), BorderLayout.EAST); 
 add(new JButton("Oeste"), BorderLayout.WEST); 
 add(new JLabel("Um texto no Centro"), BorderLayout.CENTER); 
 pack(); 
 } 
 public static void main(String args[]) { 
 java.awt.EventQueue.invokeLater(new Runnable() { 
 public void run() { 
 new JFrameBorderLayout().setVisible(true); 
 } 
 }); 
 } 
} 
BoxLayout 
Classe gerenciadora de leiaute oferecida pelo Swing que é simples, com alto grau de 
flexibilidade. Dispõe os componentes GUI em uma única linha ou uma única coluna, porém, 
arranjos de componentes bem complexos podem ser obtidos através da combinação desses 
componentes. 
Normalmente, este tipo de gerenciador não é usado diretamente, mas sim através de um 
contêiner do tipo BOX. 
GridBagLayout 
 
 
 
Principais características: 
 O contêiner é 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 haver apenas um componente a ser expandida de forma a ocupar 
uma área correspondente a uma ou mais linhas e/ou colunas. 
Definições de leiautes: 
Uma vez que o desenho da interface tenha sido especificado, a chave para a utilização deste 
gerenciador é a criação de um objeto de restrição de posicionamento. Esse objeto é da classe 
GridBagConstraints. Uma vez que esse objeto tenha sido criado e suas restrições especificadas, 
basta associar essas restrições ao componente usando o método setConstraints() e adicioná-lo 
ao container com o método add() com o segundo parâmetro de restrições. 
Classe gerenciadora de leiaute semelhante a GridLayout, mas diferente pelo fato que podemos 
variar o tamanho dos componentes, além de podermos adicionar em qualquer ordem. Cada 
objeto do GridBagLayout mantém uma grade de células retangulares. 
Campo Descrição 
 
anchor 
Utilizado quando o tamanho do componente é menor que a área da célula à 
qual ele foi alocado para indicar a posição do componente na célula. O 
padrão é CENTER, mas outros valores possíveis são NORTH, NORTHEAST, 
EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, NORTHWEST. 
 
 
 
 
 
fill 
Utilizado quando a área para a apresentação do componente é maior que o 
tamanho natural do componente. Indica como a apresentação do 
componente irá ocupar a área disponível, podendo assumir os valores 
definidos em constantes da classe: 
 NONE: não modifica o tamanho do componente (o padrão). 
 VERTICAL: ocupa o espaço vertical mas não altera a largura do 
componente; 
 VERTICAL: ocupa o espaço disponível na horizontal mas não altera a 
altura do componente; e 
 BOTH: ocupa os espaço disponível nas duas dimensões. 
gridx Define a coluna que o componente será alocado. A primeira coluna (a mais a 
esquerda) tem valor 0. 
gridy Define a linha que o componente será alocado. A primeira linha (a mais a 
acima) tem valor 0. 
gridwidth Define o número de colunas que um componente usa. Seu valor padrão é 1. 
gridheight Define o número de linhas que um componente usa. Seu valor padrão é 1. 
weightx, weighty Define o espaçamento extra para alocação, vertical (y) e horizontalmente (x). 
insets Define o espaçamento externo entre cada componente e o limite do seu 
canto. Por padrão, os componentes não tem espaçamento externo. 
ipadx, ipady Define o espaçamento interno entre cada componente e o limite do seu 
canto. Por padrão, os componentes não tem espaçamento interno. 
 
 
 
 
 
 
 
 
Código: 
…… 
public class JFrameGridBagLayout 
extends javax.swing.JFrame { 
 /** Creates new form 
JFrameGridBagLayout */ 
 public JFrameGridBagLayout() { 
 super("Teste GridBagLayout"); 
 initialize(); 
} 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
GridBagLayout layout; 
 private final int noLinhas = 3; 
 /** Creates new form JFrameFlowLayout */ 
 private void initialize() { 
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); 
setPreferredSize(new Dimension(400, 200)); 
 layout = new GridBagLayout(); 
 // setLayout(layout); 
 getContentPane().setLayout(layout); 
List lEsq = new List(noLinhas, true); 
lEsq.add("Um"); 
lEsq.add("Dois"); 
lEsq.add("Tres"); 
lEsq.add("Quatro"); 
lEsq.add("Cinco"); 
lEsq.add("Seis"); 
lEsq.add("Sete"); 
Button add = new Button(">>"); 
Button clear = new Button("Clear"); 
Button close = new Button("Close"); 
TextArea tDir = new TextArea("", noLinhas, 
 10, TextArea.SCROLLBARS_NONE); 
 GridBagConstraints restricoes = new GridBagConstraints(); 
restricoes.gridx = 0; 
restricoes.gridy = 0; 
restricoes.gridwidth = 1; 
restricoes.gridheight = 3; 
restricoes.fill = GridBagConstraints.VERTICAL; 
add(lEsq, restricoes); 
restricoes.gridx = 2; 
add(tDir, restricoes); 
Insets margens = new Insets(4, 3, 4, 3); 
restricoes.gridx = 1; 
restricoes.gridy = 0; 
restricoes.gridwidth = 1; 
restricoes.gridheight = 1;restricoes.fill = GridBagConstraints.BOTH; 
restricoes.ipadx = 4; 
restricoes.ipady = 4; 
restricoes.insets = margens; 
add(add, restricoes); 
restricoes.gridy = 1; 
add(clear, restricoes); 
restricoes.gridy = 2; 
add(close, restricoes); 
 pack(); 
 } 
 
 
 
 
 
Atividade proposta 
Escreva um programa para criar a janela de uma calculadora, como a foto abaixo. 
 Leitura do Capítulo 11, do livro: Java, como programar. 6ª Edição, de H. Deitel e P. 
Deitel, Editora Pearson Education, 2005. 
 Resolução dos exercícios de 11.11 até 11.18, do capítulo 11, do livro: Java, Como 
Programar. 
 
public static void main(String args[]) { 
 java.awt.EventQueue.invokeLater(new Runnable() { 
 public void run() { 
 new JFrameGridBagLayout().setVisible(true); 
 } 
 }); 
 } 
}