Interface Gráfica. GUI (Graphic User Interface) AWT e Swing Containers e componentes Layouts. Linguagem Java - Prof. Luciana Porcher Nedel 1

Transcrição

1 Interface Gráfica GUI (Graphic User Interface) AWT e Swing Containers e componentes Layouts Linguagem Java - Prof. Luciana Porcher Nedel 1 Graphical User Interface (GUI) Existe uma infinidade de funcionalidades disponíveis nas bibliotecas de classes Java, destinadas a prover a comunicação homem-máquina gráfica. Os elementos básicos necessários para criar um GUI residem em dois pacotes: java.awt: Abstract Windowing Toolkit (classes básicas); javax.swing: Swing Components - fornece melhores alternativas aos componentes definidos na classe java.awt. Exemplo: estudaremos a classe JButton do Swing no lugar da classe Button, do java.awt. Linguagem Java - Prof. Luciana Porcher Nedel 2 1

2 Graphical User Interface (GUI) As classes Swing são parte de um conjunto mais genérico de capacidades gráficas, chamado de Java Foundation Classes, ou JFC. JFC suporta: definição de botões, menus, etc. desenho 2D (java.awt.geom) funcionalidades drag-and-drop (java.awt.dnd) API com acessibilidade a usuários (javax.accessibility) Swing é mais flexível que java.awt porque é implementada toda em Java, enquanto que java.awt é implementada em código nativo. Linguagem Java - Prof. Luciana Porcher Nedel 3 Exemplo 1: Graphical User Interface (GUI) import javax.swing.*; public class TestaJanela { // Objeto Janela static JFrame janela = new JFrame("Título da janela"); public static void main (String args[]) { janela.setbounds(50, 100, 400, 150); // Seta posicao e tamanho janela.setdefaultcloseoperation( WindowConstants, DISPOSE_ON_CLOSE); janela.setvisible(true); // Exibe a janela } } Argumentos do método setdefaultcloseoperation: DISPOSE_ON_CLOSE - Destróia a janela DO_NOTHING_ON_CLOSE - Desabilita opção HIDE_ON_CLOSE - Apenas fecha a janela Linguagem Java - Prof. Luciana Porcher Nedel 4 2

3 Exercícios 1) Teste a classe exemplo com os diferentes argumentos para o método setdefaultcloseoperation(). 2) Faça um trecho de programa que anime uma janela, variando sua posição e tamanho. Linguagem Java - Prof. Luciana Porcher Nedel 5 Containers e componentes Uma interface gráfica em Java é baseada em dois elementos: containers: servem para agrupar e exibir outros componentes componentes: botões, labels, scrollbars, etc. Dessa forma, todo programa que ofereça uma interface vai possuir pelo menos um container, que pode ser: JFrame: janela principal do programa JDialog: janela para diálogos JApplet: janela para Applets Linguagem Java - Prof. Luciana Porcher Nedel 6 3

4 Containers e componentes Para construirmos uma interface gráfica em JAVA, adicionamos componentes (Botões, Menus, Textos, Tabelas, Listas, etc.) sobre a área da janela. Por essa razão a área da janela é um container, ou seja, um elemento capaz de armazenar uma lista de componentes. Linguagem Java - Prof. Luciana Porcher Nedel 7 Exemplo 2: Containers e Componentes import javax.swing.*; import java.awt.*; public class TestaContainer { // Objeto Janela static JFrame janela = new JFrame("Título da janela"); public static void main (String args[ ]) { int i; janela.setbounds(50, 100, 400, 150); // Seta posição e tamanho janela.setdefaultcloseoperation(windowconstants.dispose_on_close); FlowLayout flow = new FlowLayout(); // Define o layout do container Container caixa = janela.getcontentpane(); // Define o tamanho do container caixa.setlayout(flow); // Seta layout do container for (i=1; i<=6; i++) caixa.add(new JButton("Aperte " + i)); // Adiciona um botão janela.setvisible(true); // Exibe a janela } } Linguagem Java - Prof. Luciana Porcher Nedel 8 4

5 Exercícios 1) Redimensione interativamente a janela da aplicação e observe o comportamento dos botões da interface. 2) Troque o argumento de FlowLayout(), para FlowLayout (FlowLayout.LEFT) e observe. 3) Adicione no programa acima, os seguintes componentes: JLabel label = new JLabel("Exemplo de texto:"); caixa.add(label); JTextField campo = new JTextField(15); caixa.add(campo); janela.pack(); // Redimensiona a janela Linguagem Java - Prof. Luciana Porcher Nedel 9 Criando uma janela Uma janela em Java é representada por um objeto da classe Window. java.lang Object java.awt Component Container Window Define um componente (botão, scrollbar, etc). Define um componente que pode conter outros componentes. Define uma janela básica sem barra de título ou borda. java.swing Frame JFrame Define uma janela com barra de título e borda. Extende potencialidades do Frame. Linguagem Java - Prof. Luciana Porcher Nedel 10 5

6 Criando uma janela Component Container Panel (container velho) Window JComponent (componentes Swing) Applet Frame Dialog JWindow (sem bordas nem barra de título) JApplet JFrame JDialog Linguagem Java - Prof. Luciana Porcher Nedel 11 Classes de AWT (1) Object Component Panel Container Window Button Label ScrollPane Canvas Checkbox Choice Scrollbar List Frame Dialog TextComponent FileDialog TextArea TextField Linguagem Java - Prof. Luciana Porcher Nedel 12 6

7 Classes de AWT (2) Object MenuComponent MenuItem MenuBar Menu CheckBoxMenuItem PopupMenu Linguagem Java - Prof. Luciana Porcher Nedel 13 Package Swing Criado em 1997 Extensão da AWT - Abstract Window Toolkit Classes implementadas inteiramente em Java Mesma estrutura que os componentes AWT Componentes que fornecem melhores alternativas para a implementação de interfaces gráficas JButton no lugar de Button, JFrame no lugar de Frame, etc. As classes de Swing fazem parte de um conjunto mais genérico de classes com capacidades gráficas: JFC (Java Foundation Classes) Linguagem Java - Prof. Luciana Porcher Nedel 14 7

8 Componentes Swing Componentes swing são divididos em: Visuais: botões, menus, barras de ferramentas, etc. Não-visuais, de auxílio aos outros: root pane, panel, layered pane, etc. Pacote javax.swing Linguagem Java - Prof. Luciana Porcher Nedel 15 Classes de Swing Object Component Container JComponent Window Frame Dialog Classes de elementos de interface JFrame JDialog Linguagem Java - Prof. Luciana Porcher Nedel 16 8

9 Hierarquia de componentes JComponent JList JScrollbar JOptionPane JLabel JTextComponent Abstract Button JPanel JMenuBar JComboBox JTextArea JButton JTextField JMenuItem JToggleButton JMenu JRadioButton JCheckBox Linguagem Java - Prof. Luciana Porcher Nedel 17 Complexidade da hierarquia Algumas classes da hierarquia são bastante simples, outras são complexas JFrame, por exemplo: 2 construtores, 236 métodos 23 métodos declarados 17 métodos herdados de Frame 19 métodos herdados de Window 44 métodos herdados de Container 124 métodos herdados de Component 9 métodos herdados de Object Linguagem Java - Prof. Luciana Porcher Nedel 18 9

10 Complexidade da hierarquia Não é possível dominar as facilidades da linguagem com a mesma velocidade com que se domina os comandos de uma linguagem procedural Uso da documentação da API durante a programação é rotineiro e essencial Linguagem Java - Prof. Luciana Porcher Nedel 19 Containers e Componentes Desde que a classe Container é uma sub-classe da classe Component, todo objeto container é também um Componente. A diferença básica entre um objeto JFrame e um objeto Window é que o JFrame representa a janela principal de uma aplicação. Antes de criar um objeto Window, é preciso criar um objeto JFrame. Como a classe JDialog deriva diretamente da classe Window, pode-se criar objetos JDialog somente no contexto de um objeto JFrame. Linguagem Java - Prof. Luciana Porcher Nedel 20 10

11 Containers e Componentes JFrame: Um objeto desta classe possui uma barra de título e características para receber menus e outros componentes. JDialog: Usada para definir janelas de diálogo para entrada de dados. Normalmente usada em resposta a uma opção de menu selecionada. Definida em função de um objeto JFrame. JApplet: Classe base para applets Java. É possível desenhar e adicionar menus e outros componentes em um JApplet. JComponent: As subclasses de JComponent definem um conjunto de componentes standard (menus, botões, checkboxes, etc.) Linguagem Java - Prof. Luciana Porcher Nedel 21 Containers e Componentes Alguns atributos de componentes: posição (x,y): posição do objeto em relação ao seu container; nome do componente (mywindow.setname( Teste );); tamanho: altura e largura; cor do objeto e cor de fundo; fonte aparência do cursor; objeto habilitado ou não (isenabled(), mywindow.setenabled); objeto visível ou não (isvisible(), mywindow.setvisible); objeto válido ou não. Todos atributos são private. Linguagem Java - Prof. Luciana Porcher Nedel 22 11

12 Containers e Componentes Tamanho e posição de um componente: posição é definida por x, y (tipo int) ou por um objeto do tipo Point. Um objeto Point possui dois argumentos public int (x e y); dimensões definidas por width e height (tipo int) ou por um objeto do tipo Dimension (dois argumentos public int - width e height). Tamanho e posição também podem ser definidos juntos pelo objeto Rectangle (4 argumentos public int - x, y representando o topo à esquerda e width e height definindo o tamanho). Linguagem Java - Prof. Luciana Porcher Nedel 23 Containers e Componentes Exemplos de métodos: void setbounds(int x, int y, int width, int height); void setbounds(rectangle rect); Rectangle getbounds(); void setsize(dimension d); Dimension getsize(); setlocation(int x, int y); setlocation(point p); Point getlocation(); Linguagem Java - Prof. Luciana Porcher Nedel 24 12

13 Containers e Componentes Outros componentes disponíveis: Button (JButton) Menu (JMenu) Text Component (JTextComponent) List (JList) Table (JTable) Container Linguagem Java - Prof. Luciana Porcher Nedel 25 Uma janela simples Execute a classe abaixo e veja o que acontece import javax.swing.*; class SimpleFrame { public static void main(string args[ ]) { JFrame frame = new JFrame( Swing Application ); JButton but = new JButton( I am a Swing button ); JLabel texto = new JLabel( Number of button clicks: 0 ); JPanel painel = new JPanel( ); painel.add(but); painel.add(texto); frame.getcontentpane( ).add(painel); frame.pack( ); frame.show( ); } } Linguagem Java - Prof. Luciana Porcher Nedel 26 13

14 Uma janela simples A aplicação do exercício anterior possui os seguintes elementos: JFrame: armazena os demais componentes JPanel: painel, serve para facilitar o posicionamento do botão e do label JButton: o botão I am a Swing button JLabel: o texto Number of button clicks: 0 JFrames são top-level containers: sempre estão presentes JPanels são intermediate containers: podem estar ou não presentes (mas geralmente estão) JButton e JLabel são componentes atômicos: não podem ser usados para conter e normalmente respondem ao usuário Linguagem Java - Prof. Luciana Porcher Nedel 27 Uma janela simples... Questões ainda não respondidas: Como organizar os componentes em um JPanel? Java oferece diversos layouts para estruturação de componentes Por exemplo, para JPanel o layout default é FlowLayout, que distribui os componentes na horizontal Mas, e se quisermos distribuir de outro modo? Basta trocar o layout por outro! Linguagem Java - Prof. Luciana Porcher Nedel 28 14

15 Entendendo Layouts Já foi visto que interfaces em JAVA são construídas na medida em que adicionamos Components a Containers. Os Containers são responsáveis então por manter os componentes visíveis, repassar os eventos, etc. Como a filosofia da linguagem JAVA é de que os programas sejam extremamente portáveis, a filosofia da interface visa também ser extremamente adaptável. Por essa razão a disposição dos Components sobre o Container não é indicada por um par ordenado (x,y) como na maioria das bibliotecas de construção de interface com o usuário (MFC - Micrfosoft, OWL - Borland etc). Linguagem Java - Prof. Luciana Porcher Nedel 29 Entendendo Layouts É possível definir seus próprios Layouts, mas a linguagem oferece um conjunto de Layouts básicos que simplificam o trabalho. O arranjo dos componentes no container é gerenciado por um LayoutManager A vantagem da existência de um LayoutManager é que a apresentação dos componentes se adapta quando do redimensionamento da janela A desvantagem é o pouco domínio que o programador tem da posição dos componentes com alguns LayoutManagers Linguagem Java - Prof. Luciana Porcher Nedel 30 15

16 FlowLayout Os components são distribuídos da esquerda para a direita e de cima para baixo Panel c =new Panel( ); c.add(new Button("1")); c.add(new TextField(9)); c.add(new Button("dois")); c.add(new Button("três")); Respeita o tamanho preferido dos componentes mesmo quando não houver espaço suficiente no container Linguagem Java - Prof. Luciana Porcher Nedel 31 GridLayout Similar ao FlowLayout, mas cada component é alocado em uma célula de igual tamanho. Permite definir um vetor ou matriz de células nas quais os componentes são alocados. Panel c =new Panel(); c.setlayout(new GridLayout(2,2)); c.add(new Button("um")); c.add(new TextField(5)); c.add(new Button("dois")); c.add(new Button("três")); Divide a área em uma grade Dispõe os elementos da esquerda para a direita e de cima para baixo Todos tem o mesmo tamanho Linguagem Java - Prof. Luciana Porcher Nedel 32 16

17 Exemplo public class AplicacaoGrafica extends Frame{ private Button butok; private TextField campo1,campo2,resp; private Label texto1,texto2; public AplicacaoGrafica( ){ super("aplicacao grafica simples"); addwindowlistener(new AppListener( )); texto1 = new Label("Nome:"); campo1 = new TextField(15); texto2 = new Label("Fone:"); campo2 = new TextField(15); butok = new Button("OK"); resp = new TextField(15); setlayout(new GridLayout(3,2)); add(texto1); add(campo1); add(texto2); add(campo2); add(butok); add(resp); butok.addactionlistener(new ActionListener(){ public void actionperformed(actionevent e){ resp.settext(campo1.gettext()+" "+campo2.gettext()); } }); pack( ); } } Linguagem Java - Prof. Luciana Porcher Nedel 33 Resultado Linguagem Java - Prof. Luciana Porcher Nedel 34 17

18 GridBagLayout Semelhante ao GridLayout, porem as divisões podem ter tamanhos diferentes Utiliza a classe GridBagConstraints para dimensionar e posicionar os componentes Um layout flexível e complicado usado quando nenhum dos outros se aplica Linguagem Java - Prof. Luciana Porcher Nedel 35 BorderLayout Layout default para a maioria das aplicações gráficas. Quando se adiciona um componente, é necessário especificar em qual das áreas ele deve ser adicionado. Ex: add(butok, BorderLayout.WEST); Divide um container em cinco regiões BorderLayout.CENTER BorderLayout.NORTH North BorderLayout.EAST BorderLayout.SOUTH West Center East BorderLayout. WEST South Linguagem Java - Prof. Luciana Porcher Nedel 36 18

19 BorderLayout - exemplo JPanel jpanel=new JPanel(new BorderLayout( )); JButton b=new JButton("Botão"); jpanel.add(b,borderlayout.center); JFrame f=new JFrame( ); f.getcontentpane( ).add(jpanel); f.pack( ); f.setvisible(true); Linguagem Java - Prof. Luciana Porcher Nedel 37 BorderLayout Linguagem Java - Prof. Luciana Porcher Nedel 38 19

20 CardLayout Usado para exibir um componente de cada vez como em uma pilha de cartas somente o objeto que estiver no topo será visível Métodos: first(container), last(container), next(container), previous(container), show(container, String) Linguagem Java - Prof. Luciana Porcher Nedel 39 CardLayout Linguagem Java - Prof. Luciana Porcher Nedel 40 20

21 BoxLayout Respeita o tamanho preferido dos componentes Coloca os componentes em uma linha ou coluna BoxLayout.X_AXIS para componentes em linha BoxLayout.Y_AXIS para componentes em coluna JPanel c =new JPanel(); // trocando o layout do JPanel c.setlayout(new BoxLayout(c,BoxLayout.Y_AXIS)); //adicionando os JButtons nas posições desejada c.add(new JButton("um")); c.add(new JButton("dois")); c.add(new JButton("três")); c.add(new JButton("quatro")); Linguagem Java - Prof. Luciana Porcher Nedel 41 BoxLayout Linguagem Java - Prof. Luciana Porcher Nedel 42 21

22 GridLayout JPanel c =new JPanel( ); c.setlayout(new GridLayout(2,2)); c.add(new JButton("um")); c.add(new JTextField(5)); c.add(new JButton("dois")); c.add(new JButton("três")); Divide a área em uma grade Dispõe os elementos da esquerda para a direita e de cima para baixo Todos tem mesmo tamanho Linguagem Java - Prof. Luciana Porcher Nedel 43 Compondo Layouts usando Panels A classe Panel é derivada de Container e pode ser usada para agrupar Components de maneira a criar Layouts compostos. Por ser também um Container, um Panel pode ter seu Layout próprio. Como um Container pode conter outros Containers, podemos agrupar vários Components em um Panel e passar a considerá-los como um único Component para efeitos de layout. Veja a seguir o código que exibe o seguinte diálogo: Linguagem Java - Prof. Luciana Porcher Nedel 44 22

23 public class AplicacaoGrafica extends Frame{ private Button butok; private TextField campo1,campo2,campor; private Label texto1,texto2,textor; private Panel p1 = new Panel( ); private Panel p2 = new Panel( ); public AplicacaoGrafica( ){ super("aplicacao grafica simples"); // Cria os componentes texto1 = new Label("Nome:"); campo1 = new TextField(15); texto2 = new Label("Fone:"); campo2 = new TextField(15); butok = new Button("OK"); textor = new Label("Resp:"); campor = new TextField(20); Exemplo 1: Compondo Layouts usando a AWT // Define o layout do container básico setlayout(new GridLayout(2,1)); // Define o layout dos Panels p1.setlayout(new GridLayout(2,2)); p2.setlayout(new FlowLayout(FlowLayout.CENTER)); // Adiciona os componentes aos panels p1.add(texto1); p1.add(campo1); p1.add(texto2); p1.add(campo2); p2.add(butok); p2.add(textor); p2.add(campor); // Adiciona os panels ao container básico add(p1); add(p2);... Linguagem Java - Prof. Luciana Porcher Nedel 45 import java.awt.*; import java.awt.event.*; import javax.swing.*; public class PanelDemo extends JFrame { private JPanel buttonpanel; private JButton buttons[ ]; public PanelDemo( ) { super( "Panel Demo" ); Container c = getcontentpane(); buttonpanel = new JPanel(); buttons = new JButton[ 5 ]; buttonpanel.setlayout( new GridLayout( 1, buttons.length ) ); Exemplo 2: Compondo Layouts usando a Swing } for ( int i = 0; i < buttons.length; i++ ) { buttons[ i ] = new JButton( "Button " + (i + 1) ); buttonpanel.add( buttons[ i ] ); } c.add( buttonpanel, BorderLayout.SOUTH ); setsize( 425, 150 ); show( ); } public static void main( String args[] ) { PanelDemo app = new PanelDemo( ); app.addwindowlistener( new WindowAdapter() { public void windowclosing( WindowEvent e ) { System.exit( 0 ); } } ); } Linguagem Java - Prof. Luciana Porcher Nedel 46 23

24 Exercícios 1) Altere o layout da janela do último exemplo de maneira que o botão de OK fique centrado na parte inferior da janela juntamente com um botão de CANCEL. 2) Crie o layout de uma janela que tenha 4 botões na parte superior, 5 botões no lado esquerdo, um campo de entrada de dados na parte inferior e deixa a área central livre para a edição de gráficos como no esquema abaixo: BUT1 BUT2 BUT3 BUT4 BUT5 BUT1 BUT2 BUT3 BUT4 Linguagem Java - Prof. Luciana Porcher Nedel 47 24