AULA 10 - CCT0024 Linguagem de Programação Objetivos da aula. Janelas para leitura e exibição de textos

Transcrição

1 AULA 10 - CCT0024 Linguagem de Programação Objetivos da aula Introduzir o conceito de interfaces gráficas (GUI) Apresentar os componentes Swing e sua hierarquia Criar interfaces gráficas com componentes Swing Introduzir o conceito de evento Compreender o funcionamento do tratamento de eventos Recordando... Até agora, nossas aplicações utilizaram janelas de texto para entrada e saída de dados. A maioria dos aplicativos, entretanto, utiliza janelas com recursos gráficos de interação com o usuário, chamados de componentes visuais, controles ou widgets (window gadgets), que são utilizados para compor a Interfaces Gráficas (GUI) desses aplicativos. Uma GUI é formada por um conjunto de objetos com o qual o usuário interage via mouse, teclado ou outro forma de entrada. Exemplos de GUI são janelas de aplicativos tais como editores de texto, planilhas e navegadores. Janelas para leitura e exibição de textos A forma mais simples de criar uma janela é usar a classe JOptionPane (pacote javax.swing), que possui métodos para criar janelas de entrada e de saída de textos. Essas janelas de diálogos são exibidas invocando métodos estáticos da classe JOptionPane. O aplicativo a seguir utiliza duas janelas de diálogo para obter dois valores inteiros somá-los e exibir a soma desses inteiros. import javax.swing.joptionpane; public class Adicao{ // Adição de inteiros public static void main( String args[] ){ String strnumero1 = JOptionPane.showInputDialog("Entre com um número" ); String strnumero2 = JOptionPane.showInputDialog("Entre outro número"); int numero1 = Integer.parseInt(strNumero1); int numero2 = Integer.parseInt(strNumero2); int soma = numero1 + numero2; //soma os números JOptionPane.showMessageDialog(null, "A soma é : " + soma, "Soma de dois inteiros", JOptionPane.PLAIN_MESSAGE ); // fim do main // fim da classe 1

2 O método showinputdialog da classe JOptionPane exibe um diálogo de entrada apresentando o argumento String para o usuário. Esse método devolve o String digitado na caixa de texto para o programa. Ao contrário da classe Scanner que pode captar valores de vários tipos através de seus métodos, o método showinputdialog só permite captar informações do tipo String. Se usuário clicar no botão Cancel, o método retorna null. Se o usuário digitar uma informação não convertível para o tipo int, ou mesmo não digitar caracter algum, e clicar no botão OK, ocorrerá um erro em tempo de execução que, futuramente, veremos como tratar. O aplicativo também utilizou o método showmessagedialog da classe JOptionPane para exibir uma mensagem que contém a soma dos dois números. O primeiro argumento informa a posição da caixa de diálogo na tela, no caso null indica que a caixa deve ficar no centro da tela. O segundo argumento é a mensagem a exibir, neste caso o resultado de uma concatenação. O terceiro argumento é um String que deve aparecer na barra de título da caixa de diálogo. O quarto argumento é o tipo de diálogo: ERROR_MESSAGE Apresenta um ícone vermelho com X. INFORMATION_MESSAGE Apresenta um ícone azul com i. WARNING_MESSAGE Apresenta um ícone amarelo com!. QUESTION_MESSAGE Apresenta um ícone verde com?. PLAIN_MESSAGE Só a mensagem, sem ícone. Montando Janelas livremente A maioria dos aplicativos GUI exige interfaces mais elaboradas e personalizadas, que utilizam diversos componentes gráficos. A seguir usaremos alguns componentes da biblioteca Swing, que fazem parte da Java Foundation Classes (JFC), para criar as aplicações gráficas. Os componentes Swing do pacote Javax.swing que usaremos, são: JLabel JTextField JButton JCheckBox JRadioButton Exibe texto não editável. Permite a digitação de um texto de entrada. Permite interação com o mouse com um ou dois cliques. Campo com opção de seleção / deseleção. Campo para seleção de opções mutuamente exclusivas. Antes do conjunto Swing, introduzido no J2SE 1.2, as GUI eram construídas com componentes AWT ( Abstract Window Toolkit) do pacote java.awt. Estes componentes eram exibidos de forma diferente em cada plataforma: Windows, Mac, etc., além da forma do usuário interagir com um componente AWT também diferir entre as plataformas. 2

3 Componentes Swing permitem especificar uniformemente a aparência e o comportamento para um aplicativo em todas as plataformas. Alguns componentes Swing requerem interação direta com o sistema local de janelas, o que pode restringir sua aparência e funcionalidade, sendo chamados de componentes Swing pesados. A maioria dos componentes Swing, entretanto, não são afetados pelos sistemas de janelas das plataformas. Esses são componentes Swing leves. O diagrama UML ao lado, mostra a hierarquia da herança de classes a partir das quais os componentes Swing leves herdam seus atributos e comportamento comuns. Object Component A classe Object é a superclasse de toda a hierarquia de classes do Java. A classe Component (pacote java.awt) declara os comportamentos e os atributos comuns aos componentes GUI em pacotes Awt e Swing. A classe Container organiza e exibe outros componentes. É possível anexar Containers a outros Containers, ajudando na organização da GUI. A classe JComponent (pacote javax.swing) é a superclasse de todos os componentes leves Swing. Criando aplicações com janelas Container JComponent O aplicativo a seguir cria uma janela própria, a partir da janela básica do Swing, que é a classe JFrame, que fornece os atributos e comportamentos básicos de uma janela, que são a barra de título e os botões de minimizar, maximizar e fechar a janela. Nossa aplicação consiste de duas classes: a subclasse de JFrame e uma classe de teste (método main), que cria e exibe a janela do aplicativo. A aparência da janela é construída agregando os componentes visuais (botões, menus, caixas de texto, rótulos, etc.) como atributos da classe derivada de JFrame. A nossa aplicação terá como objetivo criar uma tela com duas caixas de texto e um botão. Clicando no botão, copiaremos o texto da caixa de texto de origem para a caixa de texto de destino. A aplicação deve ter a aparência da figura a seguir. 3

4 Ao construir uma GUI, cada componente deve ser anexado a um container. No caso deste aplicativo, uma janela criada com um JFrame. Geralmente pode ser especificada a posição de cada componente, o que é conhecido como especificar o layout dos componentes GUI. Usaremos um objeto de layout da classe FlowLayout, na qual os componentes são colocados na janela da GUI (container) da esquerda para a direita, na ordem em que são anexados pelo programa. Quando não houver mais espaço, eles continuam a aparecer da esquerda para a direita na próxima linha. Se o container for redimensionado, os componentes são reorganizados para caber na nova largura do mesmo, possivelmente com mais ou menos linhas de componentes. Os rótulos são controles da classe JLabel, que é uma subclasse de JComponent. Um JLabel exibe uma única linha de texto de leitura, uma imagem, ou um texto com imagem. Na nossa aplicação, usaremos um label de origem antes da caixa de texto de origem e um label de destino antes da caixa de texto de destino. Essa última também possui um ícone (uma seta) associado. As caixas de texto são objetos da classe JTextField, que permitem que o usuário edite um texto. A classe com a janela da GUI terá o seguinte cógigo: package copiando; import java.awt.flowlayout; // gerenciador de layout import javax.swing.jframe; // janela básica import javax.swing.jlabel; // exibe textos e imagens import javax.swing.jtextfield;// campo de texto editável import javax.swing.jbutton; // botão simples import javax.swing.icon; // para manipular imagens import javax.swing.imageicon; // carrega imagens import javax.swing.swingconstants; //constantes do Swing public class Janela extends JFrame{ private JLabel labelorigem; // Rótulo do texto origem private JLabel labeldestino; // Rótulo do texto destino private JTextField textoorigem;// Campo do texto origem private JTextField textodestino;//campo do texto destino private JButton copiar ;//Botão de ordem de cópia 4

5 public Janela() { super ("Copiador de texto"); //Rótulo da janela setlayout(new FlowLayout()); // layout da janela labelorigem = new JLabel("Origem" ); // Rótulo do campo origem add (labelorigem); //coloca rótulo na janela textoorigem = new JTextField(10); //texto com 10 colunas textoorigem.settooltiptext("texto a ser copiado"); add (textoorigem); // //coloca campo do texto origem copiar = new JButton("Copiar"); // cria botão de cópia copiar.settooltiptext("clique para copiar o texto"); add (copiar); // coloca botão na janela labeldestino = new JLabel("Destino" ); // Rótulo do campo destino add (labeldestino); //coloca rótulo na janela Icon seta = new ImageIcon(getClass().getResource("seta.gif")); labeldestino.seticon(seta); // adiciona seta ao rótulo textodestino = new JTextField(10); //texto com 10 colunas textodestino.seteditable(false); // torna campo destino não editável add (textodestino); // //coloca campo do texto destino A classe Principal, cria um objeto da classe Janela e especifica a operação de fechamento padrão da janela (simplesmente a oculta). O método setdefaultcloseoperation com a constante JFrame.EXIT_ON_CLOSE como argumento, indica que o aplicativo termina quando a janela for fechada pelo usuário. Os outros comandos são para definir o tamanho inicial da janela e torná-la visível. package copiando; import javax.swing.jframe; public class Principal { public static void main(string[] args) { Janela jan = new Janela(); jan.setdefaultcloseoperation(jframe.exit_on_close); jan.setsize(275,180);// larg.x alt. da janela jan.setvisible( true ); // exibe janela Compilando e executando o projeto, aparecerá a janela planejada. Falta adicionar o código para executarmos a cópia do texto, mas para isso precisamos do conceito de tratamento de evento, que veremos a seguir. Tratamento de eventos As tarefas que um aplicativo gráfico deve realizar são comandadas pelo usuário através da interação deste com a GUI. É comum clicar sobre um botão ( OK, Enviar ou Gravar, por exemplo) para instruir o aplicativo a realizar uma tarefa. As aplicações com GUIs são, portanto, baseadas em eventos, que geralmente são gerados pelo usuário. Quando um usuário interage com um componente GUI, ele gera um evento, que resulta numa tarefa a ser executada. Alguns eventos comuns são o clicar em um botão, o digitar numa caixa de texto ou o selecionar uma opção de uma lista. O 5

6 código que realiza uma tarefa em resposta ao evento é chamado de handler de evento, e o processo total de responder ao evento é conhecido como tratamento do evento. Tratando eventos de componentes Swing Para que um aplicativo possa responder a um evento, são necessários três passos na aplicação. 1. Criar uma classe que contenha o código de tratamento do evento e instanciar um objeto dessa classe, que será o tratador do evento (handler). 2. A classe do handler deve implementar uma interface apropriada, conhecida como interface listener de evento e o código de tratamento deve estar no método cujo nome foi definido pelo listener. 3. Registrar o tratador do evento na lista de tratadores de eventos associados ao componente, indicando que este é o objeto tratador do evento que deve ser notificado (chamado) quando o evento ocorrer. Existem diferentes tipos de eventos em uma interface GUI. Ao ocorrer um evento, as informações sobre o evento são armazenadas em um objeto de uma classe que estende a classe AWTEvent. A hierarquia abaixo contém várias classes de eventos do pacote java.awt.event. Estes tipos de eventos são utilizados tantos em objetos AWT como Swing. Eventos específicos para objetos Swing são declarados no pacote javax.swing.event. Object EventObject AWTEvent ActionEvent AdjustmentEvent ItemEvent TextEvent ComponentEvent O modelo de tratamento que vimos aqui é conhecido como modelo de delegação de eventos, pois o processamento de um evento é passado a um objeto particular no aplicativo, o objeto listener ou o ouvinte de eventos. Para cada tipo de evento, existe uma interface ouvinte de eventos. Um ouvinte de evento é um objeto que implementa uma ou mais interfaces do pacote ContainerEvent FocusEvent PaintEvent WindowEvent InputEvent KeyEvent MouseEvent WindowListener ActionListener AdjustmentListener ComponentListener ContainerListener FocusListener ItemListener KeyListener MouseListener MouseMotionListener TextListener 6

7 java.awt.event ou javax.swing.event. Veja algumas interfaces na caixa ao lado. Cada interface ouvinte de eventos especifica os métodos de tratamento de evento que interessem. Quando ocorre um evento, o componente da interface com o qual o usuário interagiu informa seus ouvintes registrados, chamando o método de tratamento de evento adequado de cada ouvinte. Cada tipo de componente possui um evento principal associado, que é o ActionEvent (pacote java.awt.event). Para botões, por exemplo, o ActionEvent é gerado com um click no botão. Já para as caixas de texto, o ActionEvent é gerado quando se aperta o enter após digitar o texto. E assim por diante. O ActionEvent é processado pelo objeto handler do evento, cuja classe tem que implementar a interface ActionListener (pacote java.awt.event). Nessa interface é definido o método actionperformed(actionevent e), que é portanto, o método que deve possuir o código de tratamento do evento e. Tratando eventos na nossa aplicação A nossa aplicação de cópia de textos pode agora ser retomada para complementarmos com o tratamento do evento de click no botão copiar. Para tanto, vamos incluir uma classe interna (private) no mesmo arquivo da classe Janela. Essa classe implementa a interface ActionListener e possui o método actionperformed(actionevent e). Também será necessário, no construtor da janela, criar um objeto dessa classe e registrá-lo como tratador do evento de click no botão. Veja o código a incluir no final do construtor da janela: TrataBotao tratador = new TrataBotao(); // cria copiar.addactionlistener(tratador); // registra handler Agora o código da nova classe interna do tratador de eventos (no arquivo da classe Janela): private class TrataBotao implements ActionListener { public void actionperformed(actionevent e){ textodestino.settext(textoorigem.gettext()); É também necessário importar a classe dos eventos (coloque os comandos abaixo no arquivo da classe Janela: import java.awt.event.actionevent;// evento de clique no botão import java.awt.event.actionlistener;// interface do handler Compile, execute e teste. 7

8 Usando outros componentes Vamos fazer duas aplicações que fazem a mesma coisa de forma diferente. A idéia básica é manipular um campo de texto. A primeira aplicação trabalha com caixas de seleção (JCheckBox) e manipula o texto com um único handler associado a dois componentes. A segunda aplicação utiliza botões de seleção mutuamente exclusiva (JRadioButton) cria um handler para cada componente. O botão de estado JCheckBox Os botões de estado JCheckBox e JRadioButton, descendentes do componente JToggleButton, trabalham com as informações de ativado (verdadeiro) ou desativado (falso). Um JRadioButton é diferente de um JCheckBox dado que vários JRadioButton quando agrupados são mutuamente exclusivos, ou seja, somente um dos JRadioButton pode estar selecionado por vez. A classe a seguir utiliza dois objetos JCheckBox para selecionar o estilo desejado de fonte do texto exibido em um JTextField, um para o estilo negrito, outro para o estilo itálico. Ao iniciar o aplicativo, nenhum dos JCheckBox estará ativado. import java.awt.flowlayout; import java.awt.font; import java.awt.event.itemlistener; import java.awt.event.itemevent; import javax.swing.jframe; import javax.swing.jtextfield; import javax.swing.jcheckbox; public class JanelaComCheckBox extends JFrame{ private JTextField texto; private JCheckBox cb1; private JCheckBox cb2; // construtor adiciona JCheckBoxes e JTextField public JanelaComCheckBox() { super( "Testa CheckBox" ); // cria JFrame com título setlayout( new FlowLayout() ); // define o layout texto = new JTextField("Fonte com novo estilo", 20); texto.setfont(new Font("Serif", Font.PLAIN,14)); add(texto); // adiciona textfield ao JFrame cb1 = new JCheckBox( "Negrito" ); //CheckBox Negrito cb2 = new JCheckBox( "Italico" ); //CheckBox Itálico add(cb1); //adiciona CheckBox de negrito ao Frame add(cb2); //adiciona CheckBox de itálico ao Frame 8

9 CheckBoxHandler h=new CheckBoxHandler();// cria handler cb1.additemlistener(h); //registra o mesmo handler p/.. cb2.additemlistener(h); //..os dois controles CheckBox // fim do construtor // classe interna para tratar o evento ItemListener private class CheckBoxHandler implements ItemListener { // controla o estilo de fonte negrito private int valnegrito = Font.PLAIN; // controla o estilo de fonte itálico private int valitalic = Font.PLAIN; // responde aos eventos de caixa de seleção public void itemstatechanged(itemevent event) { // processa eventos da caixa de seleção de negrito if (event.getsource() == cb1) valnegrito = cb1.isselected()?font.bold:font.plain; // processa eventos da caixa de seleção de itálico if (event.getsource() == cb2) valitalic = cb2.isselected()?font.italic:font.plain; // configura a fonte do campo de texto texto.setfont(new Font("Serif", valnegrito + valitalic, 14)); // fim do método itemstatechanged // fim da classe CheckBoxHandler // fim da classe JanelaComCheckBox A classe TestaJanelaComCheckBox a seguir é utilizada para testar a classe anterior. import javax.swing.jframe; public class TestaJanelaComCheckBox{ public static void main( String args[] ) { JanelaComCheckBox janela = new JanelaComCheckBox(); janela.setdefaultcloseoperation(jframe.exit_on_close); janela.setsize(275, 100); //configura tamanho da janela janela.setvisible(true); // exibe a janela // fim do main O botão de estado JRadioButton O botão de opção, instância da classe JRadioButton, é parecido com a caixa de seleção apresentada, pois. também tem dois estados, selecionado (verdadeiro) e não selecionado (falso). A classe a seguir utiliza botões que permitem que apenas um único estilo de fonte seja selecionado por vez. import java.awt.flowlayout; import java.awt.font; 9

10 import java.awt.event.itemlistener; import java.awt.event.itemevent; import javax.swing.jframe; import javax.swing.jtextfield; import javax.swing.jradiobutton; import javax.swing.buttongroup; public class JanelaComRadioButton extends JFrame { private JTextField texto; private Font normalfont; private Font negritofont; private Font italicofont; private Font negritalfont; private JRadioButton normalrb; private JRadioButton negritorb; private JRadioButton italicorb; private JRadioButton negritalrb; // buttongroup para armazenar botões de opção private ButtonGroup gruporb; // construtor adiciona JRadioButtons ao JFrame public JanelaComRadioButton() { super("testa RadioButton" ); setlayout(new FlowLayout()); texto = new JTextField("Mudando o estilo", 25 ); add(texto); // adiciona textfield ao JFrame // cria botões de opção normalrb = new JRadioButton("Normal",true); negritorb = new JRadioButton("Negrito",false); italicorb = new JRadioButton("Italico",false); negritalrb = new JRadioButton("Negrito/Itálico",false); add(normalrb); // adiciona o botão do estilo normal add(negritorb); // adiciona o botão de negrito add(italicorb); // adiciona o botão de itálico add(negritalrb);// adiciona botão de negrito/itálico // cria relacionamento lógico entre JRadioButtons gruporb = new ButtonGroup(); // cria ButtonGroup gruporb.add(normalrb); // adiciona botão ao grupo gruporb.add(negritorb); // adiciona botão ao grupo gruporb.add(italicorb); // adiciona botão ao grupo gruporb.add(negritalrb); // adiciona botão ao grupo // cria objetos fonte normalfont = new Font( "Serif", Font.PLAIN, 14 ); negritofont = new Font( "Serif", Font.BOLD, 14 ); italicofont = new Font( "Serif", Font.ITALIC, 14 ); negritalfont = new Font( "Serif", Font.BOLD + 10

11 Font.ITALIC, 14 ); texto.setfont(normalfont); // configura fonte inicial // registra eventos para JradioButtons normalrb.additemlistener( new RadioButtonHandler(normalFont)); negritorb.additemlistener( new RadioButtonHandler(negritoFont)); italicorb.additemlistener( new RadioButtonHandler(italicoFont)); negritalrb.additemlistener( new RadioButtonHandler(negrItalFont)); // fim do construtor RadioButtonFrame // classe interna para tratar eventos de botão de opção private class RadioButtonHandler implements ItemListener{ private Font font; // fonte associada com o listener public RadioButtonHandler(Font f) { font = f; // configura a fonte desse listener // fim do construtor RadioButtonHandler // método de tratamento dos eventos de botão de opção public void itemstatechanged(itemevent event) { texto.setfont(font); // configura fonte de texto // fim do método itemstatechanged // fim da classe RadioButtonHandler interna e private A classe TestaJanelaComRadioButton, a seguir, testa a classe anterior. import javax.swing.jframe; public class TestaJanelaComRadioButton{ public static void main( String args[] ){ JanelaComRadioButton jan = new JanelaComRadioButton(); jan.setdefaultcloseoperation(jframe.exit_on_close); jan.setsize(300, 100); // define tamanho da janela jan.setvisible(true); // exibe a janela // fim de main Desafio 1. Rode a aplicação gráfica dada como primeiro exemplo da aula e aumente a largura do Frame para compreender o funcionamento do estilo FlowLayout. 2. Investigue qual é o componente de caixa de texto e crie uma janela correspondente a um formulário de informações, com o título de 11

12 Formulário de informações do aluno e que possua dois rótulos ( Nome e Endereço ) antecedendo cada um a uma caixa de texto. As caixas de texto devem ter dicas associadas à passagem do cursor do mouse (ex: Nome do aluno e Endereço residencial do aluno ). Na aplicação principal, antes de instanciar a janela anterior, coloque uma mensagem avisando que será aberto um formulário a ser preenchido. 3. Crie uma aplicação de sua escolha com todos os tipos de componentes que vimos na aula de hoje. 4. Crie um Jogo da Velha usando uma janela com GridLayout, botões em cada um dos espaços do grid e uma matriz bidimensional para guardar as jogadas. 12