Programação Na Web Gestores de Layout Arranjo de elementos numa Janela 1 António Gonçalves Agenda Como os gestores de layout simplificam o desenho do interface Standard layout managers FlowLayout, BorderLayout, CardLayout, GridLayout, GridBagLayout, BoxLayout Posicionar elementos manualmente Estratégia para usar os gestores de layout eficientemente Uso de componentes invisíveis 2 Layout Managers 1
Gestores de Layout Associado a cada Container Define dimensões e posições dos componentes numa janela Úteis para janelas cuja dimensão pode sofrer alterações em diferentes S.O. Fácil uso para layouts simples Mas, de uso complexo quando se pretender obter layouts complexos Controlo layouts complexos Uso de container encadeados (cada um com o seu próprio gestor de layout) Uso de componentes invisíveis Desenvolvimento de gestores de layout Inibir os gestores de layout e arranjar os elementos manualmente 3 Layout Managers FlowLayout Layout por defeito para Panel e Applet Comportamento Redimensiona os componentes para as suas dimensões predeterminadas Coloca os componentes em linha da esquerda para a direita, topo para o fundo Linhas são centradas por defeito Constructores FlowLayout() Centra cada linha e mantém 5 entre entradas de uma linha e entre colunas FlowLayout(int alignment) Espaçamento de 5 pixels mas altera o alinhamento de linhas FlowLayout.LEFT, FlowLayout.RIGHT, FlowLayout.CENTER FlowLayout(int alignment, int hgap, int vgap) Diz qual é o alinhamento, e o espaçamento vertical e horizontal entre os componentes (em pixels) 4 Layout Managers 2
FlowLayout: Exemplo public class FlowTest extends Applet { public void init() { // setlayout(new FlowLayout()); for(int i=1; i<6; i++) { add(new Button("Button " + i)); 5 Layout Managers Flow Layout import javax.swing.*; import java.awt.*; public class SwingFrame { public static void main( String args[] ) { JFrame win = new JFrame( "My First GUI Program" ); win.getcontentpane().setlayout( new FlowLayout() ); for ( int i = 0; i < 10; i++ ) win.getcontentpane().add( new JButton( String.valueOf( i ) ) ); win.pack(); win.show(); // SwingFrame 6 Layout Managers 3
FlowLayout 7 Layout Managers BorderLayout Layout por defeito de Frame e Dialog Comportamento Divide o Container em cinco regiões Cada região é identificada por uma constante do tipo BorderLayout NORTH, SOUTH, EAST, WEST, e CENTER NORTH e SOUTH respeita o altura preferencial do componente EAST e WEST respeita o comprimento preferencial do componente CENTER é atribuído o espaço que resta 8 Layout Managers 4
BorderLayout (Continua) Construtores BorderLayout() Border layout sem espaçamento entre componentes BorderLayout(int hgap, int vgap) Border layout com a definição de pixels entre regiões Adicionar Componentes add(component, BorderLayout.REGION) Especificar sempre a região em que adicionar os componentes CENTER por defeito 9 Layout Managers BorderLayout: Exemplo public class BorderTest extends Applet { public void init() { setlayout(new BorderLayout()); add(new Button("Button 1"), BorderLayout.NORTH); add(new Button("Button 2"), BorderLayout.SOUTH); add(new Button("Button 3"), BorderLayout.EAST); add(new Button("Button 4"), BorderLayout.WEST); add(new Button("Button 5"), BorderLayout.CENTER); 10 Layout Managers 5
BorderLayout import javax.swing.*; import java.awt.*; public class SwingFrame { public static void main( String args[] ) { JFrame win = new JFrame( "My First GUI Program" ); Container content = win.getcontentpane(); content.setlayout( new BorderLayout() ); content.add( "North", new JButton( "North" ) ); content.add( "South", new JButton( "South" ) ); content.add( "East", new JButton( "East" ) ); content.add( "West", new JButton( "West" ) ); content.add( "South", new JButton( "South" ) ); content.add( "Center", new JButton( "Center" ) ); win.pack(); win.show(); // SwingFrame 11 Layout Managers BorderLayout 12 Layout Managers 6
GridLayout Comportamento Divide uma janela em vários rectângulos de dimensões idênticas Itens são colocados nas células da esquerda-para-direita, topo-para-base Ignora as dimensões predefinidas de um componente Muitos poucos componentes resulta em células em branco Demasiados componentes resulta em colunas extras 13 Layout Managers GridLayout (Continua) Constructores GridLayout() Cria uma linha com uma coluna por cada componente GridLayout(int rows, int cols) Divide a janela num número definido de linhas e colunas Cada linha ou coluna (mas não ambos) podem ser zero GridLayout(int rows, int cols, int hgap, int vgap) Usar o espaçamento entre células 14 Layout Managers 7
GridLayout, Exemplo public class GridTest extends Applet { public void init() { setlayout(new GridLayout(2,3)); // 2 rows, 3 cols add(new Button("Button One")); add(new Button("Button Two")); add(new Button("Button Three")); add(new Button("Button Four")); add(new Button("Button Five")); add(new Button("Button Six")); 15 Layout Managers GridLayout gridlayout( 2, 4 ) gridlayout( 0, 4 ) gridlayout( 4, 4 ) gridlayout( 10, 10 ) 16 Layout Managers 8
CardLayout Comportamento Empilha os componentes uns sobre os outros, somente o que esta no topo é visível Associada um nome com cada componente Panel cardpanel; CardLayout layout new CardLayout(); cardpanel.setlayout(layout);... cardpanel.add("card 1", component1); cardpanel.add("card 2", component2);... layout.show(cardpanel, "Card 1"); layout.first(cardpanel); layout.next(cardpanel); 17 Layout Managers CardLayout, Exemplo 18 Layout Managers 9
GridBagLayout Comportamento Divide o container em linhas e colunas. Um componente pode ocupar mais de uma célula. Cada componente possui um GridBagConstraint, que tem instruções de posicionamento e dimensionamento. O GridBagConstraints indica: Como os componentes são dispostos na áreas de visualização Indica a célula que cada componente começa e acaba Como os componentes são esticados quando existe espaço extra Alinhamento das células 19 Layout Managers GridBagLayout: Passos básicos Criar o layout, guardar uma referencia a ele GridBagLayout layout = new GridBagLayout(); setlayout(layout); Criar um objecto do tipo GridBagConstraints GridBagConstraints constraints = new GridBagConstraints(); Indicar os GridBagConstraints para o componente 1 constraints.gridx = x1; constraints.gridy = y1; constraints.gridwidth = width1; constraints.gridheight = height1; Adicionar component 1 na janela, incluir as restrições add(component1, constraints); Repetir os dois últimos passos para cada um dos componentes restantes 20 Layout Managers 10
GridBagConstraints É feita uma cópia quando o componentes é adicionado a janela Por isto, é possível reutilizar GridBagConstraints GridBagConstraints constraints = new GridBagConstraints(); constraints.gridx = x1; constraints.gridy = y1; constraints.gridwidth = width1; constraints.gridheight = height1; add(component1, constraints); constraints.gridx = x1; constraints.gridy = y1; add(component2, constraints); 21 Layout Managers GridBagLayout: Exemplo 22 Layout Managers 11
GridBagLayout, Exemplo public GridBagTest() { setlayout(new GridBagLayout()); textarea = new JTextArea(12, 40); // 12 rows, 40 cols bsaveas = new JButton("Save As"); filefield = new JTextField("C:\\Document.txt"); bok = new JButton("OK"); bexit = new JButton("Exit"); GridBagConstraints c = new GridBagConstraints(); // Text Area. c.gridx = 0; c.gridy = 0; c.gridwidth = GridBagConstraints.REMAINDER; c.gridheight = 1; c.weightx = 1.0; c.weighty = 1.0; c.fill = GridBagConstraints.BOTH; c.insets = new Insets(2,2,2,2); //t,l,b,r add(textarea, c);... 23 Layout Managers GridBagLayout, Exemplo // Save As Button. c.gridx = 0; c.gridy = 1; c.gridwidth = 1; c.gridheight = 1; c.weightx = 0.0; c.weighty = 0.0; c.fill = GridBagConstraints.VERTICAL; add(bsaveas,c); // Filename Input (Textfield). c.gridx = 1; c.gridwidth = GridBagConstraints.REMAINDER; c.gridheight = 1; c.weightx = 1.0; c.weighty = 0.0; c.fill = GridBagConstraints.BOTH; add(filefield,c);... 24 Layout Managers 12
GridBagLayout, Exemplo // Exit Button. c.gridx = 3; c.gridwidth = 1; c.gridheight = 1; c.weightx = 0.0; c.weighty = 0.0; c.fill = GridBagConstraints.NONE; add(bexit,c); // Filler so Column 1 has nonzero width. Component filler = Box.createRigidArea(new Dimension(1,1)); c.gridx = 1; c.weightx = 1.0; add(filler,c);... 25 Layout Managers GridBagLayout, Resultado With Box filler at (2,1) Without Box filler at (2,1) 26 Layout Managers 13
Containers encadeados, Exemplo 27 Layout Managers Containers encadeados, Exemplo public NestedLayout() { setlayout(new BorderLayout(2,2)); textarea = new JTextArea(12,40); // 12 rows, 40 cols bsaveas = new JButton("Save As"); filefield = new JTextField("C:\\Document.txt"); bok = new JButton("OK"); bexit = new JButton("Exit"); add(textarea,borderlayout.center); // Set up buttons and textfield in bottom panel. JPanel bottompanel = new JPanel(); bottompanel.setlayout(new GridLayout(2,1)); 28 Layout Managers 14
Containers encadeados, Exemplo JPanel subpanel1 = new JPanel(); JPanel subpanel2 = new JPanel(); subpanel1.setlayout(new BorderLayout()); subpanel2.setlayout (new FlowLayout(FlowLayout.RIGHT,2,2)); subpanel1.add(bsaveas,borderlayout.west); subpanel1.add(filefield,borderlayout.center); subpanel2.add(bok); subpanel2.add(bexit); bottompanel.add(subpanel1); bottompanel.add(subpanel2); add(bottompanel,borderlayout.south); 29 Layout Managers Containers encadeados, Resultado 30 Layout Managers 15