Roteiro para Interface Gráfica e JavaBean

Sylvia Campos, Jobson Ronan e Paulo Borba

Centro de Informática

Universidade Federal de Pernambuco

1. Criando um Applet :    

• Crie uma nova VisualClass,  File -> New -> VisualClass
• Dê um nome a sua classe
• Selecione a opção Applet

• Você verá os componentes gráficos do lado esquerdo.
• Faremos um Applet, para simular a Máquina de Café.

2. Escolhendo o Layout :

    O Layout nos permite escolher como os componentes serão dispostos no Applet.

• Iremos usar o GridBagLayout.
• Clique duas vezes no Applet. do lado direito aparecerão as propriedades do Applet.
• Na opção Layout, selecione GridBagLayout.

3. Adicionando Componentes :

    Para a nossa aplicação, utilizaremos 3 botões para representar as moedas, 1 botão para representar a bebida café e 1 JTextField como mostrador.

• Clique no componente JButton e clique no Applet.
• Do lado direito aparecerão as propriedades do botão, com o GridBagLayout é necessário colocarmos a posição e o tamanho relativo do botão.
• Para configurar a posição, clique na 4ª propriedade: constraint
• Selecione a coordenada y (grid y) e a coordenada x (grid x)
• As propriedades weight x e weight y, indicam a porcentagem de espaço que o botão irá ocupar no applet, escolheremos o  valor 1 para todos os componentes
• grid height e grid width indicam quantas linhas e quantas colunas o botão irá ocupar. O botão Café, por exemplo, poderá ter os valores maiores que os botões de moedas de forma a ocupar um maior espaço.
• Para mudar o texto do botão(o nome que aparecerá sobre o botão), selecione a propriedade text.
• Adicione um JTextField e os 4 botões como mostra a figura abaixo

4. Implementando o actionPerformed :

• Clique com o botão direito no botão do applet, selecione Events -> actionPerformed
• No código será gerado o método actionPerformed.

• Implemente a classe para que ao clicar em um dos botões de moedas, o valor armazenado seja mostrado no JTextField, e quando o valor armazenado atingir 15, o botão Café seja liberado. Logo após utilizado, o botão Café deverá diminuir o valor corrente do contador.
• Para a opção de ativar e desativar um botão, utilizamos o método setEnable que recebe um boolean.

5. Rodando o Applet :

    Com as implementações feitas, iremos rodar o Applet.

• Run As -> Java Applet
• Teste seu Applet, clicando nos botões e verificando a saída.

Criando JavaBeans

    O código em azul especializa o roteiro para criar o bean ListSelector

1. Criando um componente comum :

• Crie um projeto no Eclipse.
• File->New->Others, expanda a aba Java, clique em Swing e no menu ao lado clique em JPanel Visual Class::

• Clique em next.
• Digite o nome do pacote(não deixe o default) e no nome da classe digite ListSelector,

• Por fim clique em next.
• O Eclipse deverá ficar da seguinte forma:

• A janela JavaBeans mostra a hierarquia dos componentes(JavaBeans) dentro do seu JavaBean;
• A Janela Properties mostra as propriedades do JavaBean selecionado no momento
• A tela cinza é o painel principal do JavaBean.

    Agora vamos inserir e ajustar os componentes que utilizaremos em nosso JavaBean.

• Primeiro clique no painel principal e, na janela de propriedades, altere o Layout de FlowLayout para GridBagLayout. Entender o funcionamento dos Layouts é fundamental para desenvolver uma boa GUI. Uma boa referencia de como funcionam os Layouts encontrar-se no final deste documento.
• Insira dois JList e dois JButton no seu JavaBean. Eles deverão a princípio ficar desorganizados. Provavelmente a versão do Editor de GUIs do eclipse utilizada ainda é uma antiga.
• Vamos então configurar as constantes de cada componente:

            Clique no primeiro JList, expanda a aba Constraint na janela de propriedades, altere os seguintes valores:
            grid x = 0; grid y = 0; grid heigth = 2; grid width = 1;
            Altere as Constraints do segundo JList para:
            grid x = 2; grid y = 0; grid heigth = 2; grid width = 1;
            Altere as Constraints do primeiro botão para:
            grid x = 1; grid y = 0; grid heigth = 1; grid width = 1; ANCHOR = SOUTH; wheigth y = 1;
            Altere as Constraints do primeiro botão para:
            grid x = 1; grid y = 1; grid heigth = 1; grid width = 1; ANCHOR = NORTH; wheigth y = 1;

    (Se por algum instante você não conseguir visualizar algum componente, este poderá ser selecionado pela janela JavaBeans).

    Agora Altere as Propriedades text dos JButtons para ">>" e "<<".

    Por fim, altere as propriedades SelectionMode dos dois JList para SINGLE. Isto dirá ao componente que ele só pode selecionar um objeto da        lista por vez.

    Se tudo foi feito corretamente seu JavaBean já deverá estar como o da figura  abaixo

• Agora vamos implementar a lógica de seleção:
  Escreva dois atributos do tipo javax.swing.DefaultListModel para sua classe, um que conterá os elementos que podem ser selecionados e outro que conterá os já selecionados. Um objeto do tipo DefaultListModel é um objeto semelhante a um vector, com a diferença de que ele sabe se comunicar com o JList avisando quando algum de seus elementos mudou. Depois crie métodos get´s e set´s para os mesmos. Instancie-os diretamente na declaração;
  No corpo dos métodos gets dos JList, adicione uma linha chamando o método setListData passando o referente vector como parâmetro, devendo os método semelhante ao seguinte:

private javax.swing.JList getJList() {
    if(jList == null) {
        jList = new javax.swing.JList();
        jList.setSelectionMode(javax.swing.ListSelectionModel.SINGLE_SELECTION);
        jList.setModel(escolhas);
    }
    return jList;
}

• Adicione eventos para os botões, de forma que um elemento de uma lista passe para a outra. Utilize os métodos getSelectedIndex() da classe JList para saber o índice do objeto selecionado, e os métodos remove() e addElement(Object o) da classe DefaultListModel para manipular as seleções;
• Teste o projeto.

2. Transformando o componente em um JavaBean :

2.1 Característica: Propriedade

    Agora vamos adicionar algumas propriedades ao nosso Bean de forma que ele possa ficar bastante customizável:

• Implemente os métodos (get/is e set) para as propriedades desejadas (os métodos devem ser públicos).

• botaoAdicionarText (getBotaoAdicionarText e setBotaoAdicionarText)
• botaoRemoverText (getBotaoRemoverText e setBotaoRemoverText)
• botaoAdicionarHabilitado (isBotaoAdicionarHabilitado e setBotaoAdicionarHabilitado)
• botaoRemoverHabilitado (isBotaoRemoverHabilitado e setBotaoRemoverHabilitado) 

    O corpo de cada método deste deve ser apenas um chamada ao referente do componente desejado, exemplo:

void setBotaoAdicionarText(String s) {
    this.bottaoAdicionar.setText(s);
}

 

2.2 Característica: Comunicação por eventos

    Agora vamos criar a estrutura para que objetos possam "assinar" eventos do nosso Bean

• Crie uma classe para representar o evento. Esta classe deve herdar de java.util.EventObject (escolhendo-a como a classe base no wizard da criação da classe) e ter o mesmo nome do Bean seguido de Event (ListSelectorEvent).

• Defina ainda um construtor que recebe um Object com parâmetro (chame-o de source). O construtor deve chamar o construtor da superclasse passando o objeto recebido. Esse objeto é a fonte do evento, o objeto que criou e irá notificar o evento, permitindo que quem seja notificado tenha acesso a fonte do evento.

• Crie uma interface listener para o evento a ser notificado pelo Bean. A interface deve herdar de java.util.EventListener e seu nome deve ser o mesmo do Bean seguido de Listener (ListSelectorListener). Esta interface deve ter as assinaturas dos métodos que irão notificar cada um dos eventos deste Bean.

                                        public void botaoAdicionarPressionado(ListSelectorEvent e);

                      public void botaoRemoverPressionado(ListSelectorEvent e);

• Em seguida temos de criar métodos na classe do Bean (ListSelector) para adicionar e remover listeners, permitindo assim que objetos "assinem" e cancelem "assinaturas" para escutar eventos. Defina um atributo java.util.Vector chamado listenersVector. Em seguida use os templates abaixo para definir os métodos para adicionar (addListSelectorListener) e remover (removeListSelectorListener) listeners do vetor de listeners. 

• Depois de criar a estrutura para assinar os eventos temos de criar a estrutura para notificá-los. Defina métodos para disparar cada um dos eventos definidos na assinatura da interface listener (ListSelectorListener).

• Por fim temos de indicar em que situações os eventos devem ser disparados. No início deste roteiro você implementou os eventos que os componentes do Bean devem gerar (actionPerformed dos botões). Agora você deve adicionar a notificação do evento através da chamada ao método fire correspondente.

2.3 Característica: Persistência

• Agora vamos implementar a última característica de um Bean, Persistência. A classe do (ListSelector) Bean deve implementar a interface java.io.Serializable

• Compile o projeto

• Note que não implementamos Introspecção e Customização específicos para o nosso Bean. Dessa forma a IDE automaticamente irá detectar as propriedades do Bean e implementará editores default para as mesmas.

3. Gerando um arquivo para distribuição (JAR)

• O seu Bean está pronto. Agora temos de gerar um arquivo de distribuição para permitir instalá-lo em uma IDE e distribuí-lo para outras pessoas/projetos, permitindo assim seu reuso.
• Clique em File->New->Fiel para criar um arquivo. Dê a ele o nome  manifest.tmp no diretório raiz dos diretórios com os arquivos .class do projeto. 
• Adicione no arquivo as seguintes linhas:

  Manifest-Version: 1.0
  Name: <PACOTE_DO_BEAN>/<NOME_DO_BEAN>.class
  Java-Bean: True

  Em seguida salve o arquivo.

• Clique no diretório raiz do seu projeto com o botão direito e selecione export, clique em JAR File e em seguida em Next.
• Marque apenas os pacotes que são de fundamental importância para o funcionamento do Bean. Lembrando-se de desmarcar os arquivos .project, .classpath o manifest.tmp. Digite o nome do Arquivo JAR a ser gerado no campo "JAR File" como ListSelector.jar, Em seguida clique em Next.
• Clique em Next na tela seguinte;
• Selecione "use exist manifest from workspace" clique em Browse e selecione o arquivo manifest que você acabou de criar;

        O arquivo ListSelector deverá ser criado no diretório do seu workspace do eclipse.

4. Utilizando o Bean no Eclipse

• Feche o projeto com o seu Bean.
• Crie um novo projeto, adicione o arquivo ListSelector.jar no classpath do seu projeto, e em seguida crie uma nova classe visual(JFrame, JPanel, JDialog, etc.).
• Agora com o editor visual do Eclipse aberto, na barra de componentes, selecione "choose bean", em seguida digite o nome do seu Bean, ListSelector, e clique em Ok.
• Agora basta clicar no painel principal que seu JavaBean será inserido. Observe que ao clicar nele, na janela de propriedades estarão visíveis as propriedades que você disponibilizou.
• Crie uma aplicação exemplo para o seu JavaBean

Links úteis:

• Effective Layout Management: Short Course
• JavaBeans, a trail in The Java Tutorial
• Thinking in Java 3rd Edition, Chapter 14 (zip com o Livro)