Visual Editor Project

Bom, antes de mais nada, gostaria de lembrar que este é um guia básico de VEP, e não tem a pretensão de levar o leitor além dos primeiros passos nessa grande ferramenta.

É interessante salientar também que o VEP é uma ótima ferramenta não somente para a construção de GUIs , como também para construir ferramentas que constroem interfaces gráficas. Porém não entraremos neste processo.

E, é claro, é necessário que se tenha o Eclipse para poder usar o VEP.

Esse guia foi baseado nas minhas primeiras aventuras pelo VEP, então redundâncias e similaridades provavelmente não são meras coincidências.

Como Começar…

Bom, antes de mais nada, o VEP é uma aplicação extra do eclipse, e para utilizá-lo serão necessários também o GEF( Graphical Editing Framework ) e o EMF( Eclipse Modeling Framework ), nas suas respectivas versões compatíveis.

Existem 2 maneiras básicas de se fazer isso:

·  Através do próprio Eclipse. Vá no menu 'Help', 'Software Updates' e finalmente em 'Find and Install'. Depois basta escolher a fonte e qual plugin se é desejado, o Eclipse cuida das versões e instalações. Processo simples, porém pode levar certo tempo. Não utilize se estiver com pressa.

· Realizando o download e extraindo para pasta. Vá até o site do projeto VEP ( www.eclipse.org/vep )  e baixe os arquivos necessários, sempre observando as versões do seu Eclipse , do GEF e do EMF. Feito isso, deve-se remover as versões antigas dos mesmos e extrair as novas para as pastas 'Plugins' e 'Features' no diretório do Eclipse.

Parece muito simples, mas muitas vezes atualizar as versões e evitar conflitos pode se tornar a parte mais complicada de um projeto.

Para mais informações sobre outros plugins do Eclipse, recomendo uma visita aos tutoriais do GUJ ( www.guj.com.br ) ou, mais especificamente, a esse tutorial.

Sua primeira GUI no VEP

Depois de instalar o VE, você encontrará algumas novas opções a cada novo projeto Java. Crie um projeto. Use o botão direito do mouse no nome do projeto, e após selecionar 'NEW' no menu, percebe-se que agora existe a opção de criar uma Visual Class (figura 1). Então crie uma. Alternativamente, dependendo do seu Eclipse, pode-se fazer necessário selecionar 'other' e então uma Visual Class.

Figura 1.

Selecionando essa opção, irá se abrir à janela de criação de uma nova classe Java (Figura 2). Note os botões e as caixas para a seleção de superclasses. Tipicamente, o que se faria seria criar um JPanel para conter as funcionabilidades da sua aplicação, mas agora para simplificar criaremos diretamente um JFrame e adicionaremos outros elementos à ele.

Escolha o nome da classe, e certifique-se de ter selecionado 'frame' da 'swing' para estendê-la, e pelo menos o ‘void main’ como método. Após, selecione 'finish'.

Figura 2.

Agora seu projeto possui uma classe visual. Abra-a com o Visual Editor. Você notará que o VE possui três janelas distintas (figura 3). Na primeira se encontra o código da classe, na segunda como a GUI está aparentando, e na terceira uma palheta com diversos componentes que são possíveis de adicionar na GUI, bastando arrastá-los para dentro da segunda janela. Note que ao alterar algo na segunda janela isto modificará o código da primeira, e vice-versa ( Por exemplo, ao alterar o tamanho da janela o método ‘initialize( )’ terá seus valores numéricos alterados. ) . É possível desabilitar essa sincronização na barra de status.

Figura 3.

Além da janela do VE, podem-se observar duas novas perspectivas : a do Java Beans (figura 4) e a das Propriedades (figura 5).

Figura 4.

Figura 5.

A perspectiva Java Beans lhe permite navegar entre os componentes da sua classe com facilidade e rapidez. Inicialmente, o único elemento na sua classe visual é um ‘JContentPane’. Através dele que é possível adicionar novos elementos ao ‘Jframe’. Selecione o ‘JContentPane’, o que fará o Eclipse levar a janela de código (figura 6) até o mesmo, onde você pode observar o método ‘getJContentPane( )’.

Figura 6.

A outra perspectiva adicionada pelo VE é a visão das Propriedades. Nessa, as propriedades de um elemento podem ser vistas. Por exemplo, se for necessário trocar o Layout do ‘JContentPanel’, basta selecionar este objeto no Java Beans, e depois alterar a propriedade Layout (figura 7) na perspectiva de Propriedades (observe as alterações no método ‘jContentPane.setLayout( )’ na janela de código ). Algumas propriedades lhe fornecem as opções viáveis enquanto em outras é preciso digitar o que se quer. Selecione o layout atual e altere-o. Note que mais uma vez o código se alterará. Essa interação entre as perspectivas funciona duplamente.

Figura 7.

Interagindo com o usuário

Uma vez criado um frame, agora é possível adicionar elementos que permitam o usuário interagir com a sua aplicação. Vamos criar uma caixa-de-seleção. Clique em uma JCheckbox e depois clique na posição desejada dentro do JFrame no editor gráfico. Note que, dependendo do layout usado, as opções de onde colocar a caixa se alteram. Uma vez alocada a caixa, selecione JLabel e coloque-o perto da caixa que você adicionou anteriormente. Pode-se expandir o label e conferir-lhe texto pela janela gráfica (figura 8), ou selecioná-lo e usar a perspectiva de Propriedades (figura 9) para fazer o mesmo.

Figura 8.

Figura 9.

Agora você pode movimentar os elementos para que eles estejam de acordo com suas expectativas, utilizando-se da ferramenta de Alinhamento. Vamos alinhar os elementos no topo do Frame. Selecione ambos os elementos pressionando a tecla ‘ctrl’, escolha Customize Layout (figura 10) e alinhe eles no topo selecionando o botão “Align top”.

Figura 10.

Se você tentasse rodar o programa agora, nada realmente aconteceria, pois os listeners ainda não foram adicionados. Você poderia selecionar e deselecionar a caixa, claro, mas sem os listeners nada acontece. Para adicioná-los, clique com o botão direito do mouse na caixa-de-seleção pela perspectiva do Java Beans, e selecione Events (figura 11). Perceba que existem diversos exemplos de implementações possíveis para listeners. Escolha Action Performed, o que irá implementar código para o listener, tendo esse como uma classe anônima.

Figura 11.

Você verá que onde existe a necessidade de código no listener aparece com o identificador TODO (figura 12). Alterando o código para que toda vez que a caixa for selecionada o conteúdo do JLabel seja alterado, o código fica mais ou menos assim (figura 13).

Figura 12.

Figura 13.

Agora, só falta testar sua aplicação.

Testando a aplicação

Uma grande utilidade do VE é a capacidade de testar sua GUI sem uma aplicação pronta. Para isso, ele lhe possibilita rodar os componentes sem um método "main()".

Vamos então testar a aplicação. Selecione sua classe visual dentro do pacote, e escolha Run, depois Java Beans (figura 14). Deve aparecer uma nova janela (figura 15) com a caixa e o texto mudando toda vez que a caixa é selecionada.

Figura 14.

Figura 15.

Como estamos tratando de um Jframe, também é possível simplesmente completar o método main( ) e testar como se fosse outra aplicação qualquer.

Com isso está terminada a sua primeira GUI. Os princípios utilizados para a construção dessa podem ser utilizados para a construção de diversas outras, e com algumas poucas modificações muitas outras coisas. Espero que este guia tenha sido útil, cumprindo assim seu objetivo.

Sugestões, dúvidas, meu email é [email protected]