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 é smartasi@bol.com.br