Construir GUIs com o Projeto Visual Editor do Eclipse

Uma ferramenta gráfica para construir interfaces gráficas

Como muitos projetos da Eclipse.org, a meta do projeto Visual Editor é construir uma ferramenta para construir ferramentas. — Neste caso, ferramentas para construir interfaces gráficas com o usuário (GUIs). O projeto Visual Editor liberou uma implementação de referência. O Visual Editor release 0.5 é um construtor de GUI para aplicativos AWT/Swing, um recurso há muito aguardado do Eclipse. O release 1.0 inclui suporte para SWT. Obtenha uma visão geral do Visual Editor e da tecnologia por trás do mesmo, juntamente com uma curta demonstração dos recursos do Visual Editor V0.5 para construir aplicativos AWT/Swing e uma visualização do suporte a SWT no Visual Editor V1.0.

David Gallardo, Author

David Gallardo é um consultor de software independente e autor especializado em internacionalização de software, aplicativos da Web Java e desenvolvimento de banco de dados. É um engenheiro de software profissional há mais de quinze anos e tem experiência com muitos sistemas operacionais, linguagens de programação e protocolos de rede. Sua experiência recente inclui a liderança do desenvolvimento de banco de dados e internacionalização em uma empresa de e-commerce de relações comerciais entre empresas, a TradeAccess, Inc. Antes disso, ele era um engenheiro sênior do grupo de Desenvolvimento de Produtos Internacionais na Lotus Development Corporation, onde contribuiu para o desenvolvimento de uma biblioteca para várias plataforma, fornecendo suporte a Unicode e a idiomas internacionais para produtos Lotus, incluindo o Domino. David pode ser contatado em david@gallardo.org.



14/Mar/2006 (Primeira publicação 04/Mai/2004)

Nota do Editor

Este artigo foi escrito em maio de 2004, quando a versão atual do Eclipse era 2.1. Como resultado, alguns detalhes aqui não estão atualizados, mas ele permanece uma introdução básica ao projeto Editor Visual do Eclipse e às bibliotecas relacionadas.


Introdução ao Projeto Editor Visual do Eclipse

Leia qualquer linha de discussão sobre os méritos relativos do Eclipse e seus concorrentes e você encontrará menção a diversos recursos que podem ser melhores, piores ou completamente ausentes em um ou outro. Até recentemente, uma coisa que sempre surgia em relação ao Eclipse era a falta de um construtor de GUI: uma ferramenta gráfica para construção de GUIs. Felizmente, isso foi remediado pelo lançamento em novembro de 2003 do Projeto Editor Visual do Eclipse e da liberação logo em seguida do Visual Editor V0.5, que permite criar aplicativos AWT/Swing com um editor gráfico WYSIWYG completo.

Como o Eclipse, o Visual Editor é baseado em uma contribuição de código da IBM®. Desenvolvedores familiarizados com o Visual Editor no WebSphere® Studio Application Developer V5.x verificarão que o Editor Visual do Eclipse é praticamente idêntico. Para aprender sobre como usar o Visual Editor, consulte a documentação do WebSphere Studio Visual Editor (consulte Recursos).

E como muitos outros projetos do portfólio da Eclipse.org, incluindo o Eclipse, a meta do projeto Visual Editor é bem ambiciosa: construir uma ferramenta para construir ferramentas de edição gráfica. Apesar de o suporte do release inicial para AWT/Swing ser completo, os planos para o Visual Editor vão muito além disso. Os apoios técnicos estão sendo reprojetados para serem neutros em relação à linguagem de programação e ao kit de ferramentas gráficas suportados.

No futuro, você verá implementações do Visual Editor para kits de ferramentas diferentes do AWT/Swing, como o SWT, e, potencialmente, implementações para linguagens diferentes da linguagem de programação Java™ , como C++. O trabalho para incluir suporte a SWT está em andamento e será incluído no Visual Editor V1.0, programado para conclusão por volta da mesma época que o Eclipse V3.0, em meados de 2004.


Por Trás do Visual Editor

A primeira encarnação do Visual Editor como um construtor de GUI para AWT/Swing era satisfatória o suficiente para desenvolvedores de GUI, mas se você for do tipo de desenvolvedor que gosta de saber o que está por trás, há muito para se ver: o Visual Editor controla algumas tecnologias interessantes que são úteis por elas mesmas. Se estiver interessado em construir seu próprio editor gráfico ou ferramenta de modelagem, a implementação existente do Visual Editor é apenas uma dica do que você pode realizar.

A ferramenta mais óbvia que o Visual Editor usa é a Graphical Editing Framework (GEF). A GEF usa como base o kit de ferramentas gráficas nativo do Eclipse, o SWT, para facilitar o desenvolvimento de um editor gráfico para diagramas ou editores de texto WYSIWYG. Se você estiver familiarizado com os primitivos gráficos do SWT (ou do AWT/Swing, que são semelhantes nesse caso), sabe como é difícil desenhar e manipular formas arbitrárias como retângulos, setas e elipses, sem mencionar gerenciar os relacionamentos entre elas e o modelo de dados que representam.

A GEF é dividida em duas partes: o plug-in Draw2D, que é um pacote leve de desenho e renderização que ajuda a desenhar formas e diagramas; e o plug-in GEF, que inclui ferramentas de seleção e criação, uma paleta de ferramentas e uma estrutura de controlador para mapeamento entre o modelo de dados e as visualizações.

A GEF é uma estrutura neutra para o modelo. Mas como parte do Visual Editor (e outras ferramentas gráficas que geram código), usa a Eclipse Modeling Framework (EMF) nos bastidores para mapear entre um modelo (que é armazenado internamente usando XML metadata Interchange ou XMI), uma classe Java e a representação gráfica. Um dos recursos importantes da EMF é assegurar que esses mapeamentos sejam todos 1:1. Portanto, enquanto XMI pode ser considerado como a representação canônica do modelo, nada é perdido ao fazer uma volta completa do código para o diagrama. Por isso o Visual Editor precisa somente salvar uma representação do modelo, o código de origem Java, e você está livre para editar esse código de origem fora do editor gráfico.

Para saber mais sobre GEF e EMF, consulte Recursos.


Desenvolvendo Aplicativos AWT/Swing com o Visual Editor

Conforme mencionado, o release 0.5 é um construtor de GUI completo de AWT/Swing. Funciona com o Eclipse V2.1.x e é comparado de forma favorável aos construtores de GUI em outros IDEs. Primeiramente, gera código de alta qualidade, em comparação ao que um desenvolvedor de GUI experiente desenvolveria manualmente, sem artefatos especiais que tornam as modificações difíceis. Segundo, suas poderosas capacidades de análise permitem a volta completa do código, de forma que as mudanças feitas no código de origem sejam refletidas praticamente imediatamente no editor gráfico.

Uma das tarefas mais entediantes na construção manual de um aplicativo Swing é gerenciar o posicionamento dos componentes usando gerenciadores de layout. Como é um editor gráfico WYSIWYG, o Visual Editor facilita a obtenção da aparência e comportamento desejado em sua interface com o usuário. Além disso, como pode mapear automaticamente entre diferentes gerenciadores de layout, é possível criar a aparência de seu aplicativo usando um layout nulo, que permite obter exatamente o layout desejado facilmente, e, em seguida, alternar para um grid-bag layout, que permite que o layout se comporte bem quando a janela é redimensionada.

Nas seções a seguir, daremos uma olhada rápida no Visual Editor V0.5 e em alguns de seus recursos mais interessantes. Será necessário ter o Eclipse V2.1.x instalado com o Visual Editor V0.5. Além disso, o Visual Editor requer dois outros plug-ins: EMF e GEF (consulte Recursos).


Ferramentas do Visual Editor

Após instalar o Visual Editor, encontrará alguns novos recursos da próxima vez que criar um novo projeto Java. Suponhamos que você tenha criado um projeto chamado VEPExample. Se você clicar com o botão direito do mouse no nome do projeto no Package Explorer e selecionar Novo no menu de contexto, verá uma nova opção para criar uma Classe Visual. Ao clicar nessa opção, uma caixa de diálogo familiar aparecerá com um novo nome, "Criar uma Nova Classe Java Usando o Visual Editor". Outras diferenças que você observará são diversos botões de opções e uma caixa de opção para selecionar a superclasse. Geralmente, você criaria um JPanel para conter os elementos da UI de seu aplicativo e, em seguida, incluiria esse painel em um JFrame. Por questão de brevidade, você criará um quadro e incluirá elementos diretamente nele. Para obter informações adicionais sobre como desenvolver aplicativos Swing, consulte a série de tutoriais listados em Recursos.

Insira um nome para a classe, como Test, e assegure que "frame" e "swing" estejam selecionadas na seção rotulada "Qual classe visual gostaria de estender?" Além disso, sob "Quais stubs de método gostaria de criar?", selecione main().

Figura 1. Criando uma Nova Classe Visual
Criando uma Nova Classe Visual

Após fazer suas seleções, selecione Concluir para criar a classe visual e abri-la usando o Visual Editor. Você verá que, diferentemente do editor Java regular, o Visual Editor possui três seções distintas. Na parte superior está um editor gráfico que mostra qual será a aparência de sua classe visual quando renderizada no tempo de execução. À esquerda está uma lista de widgets que podem ser arrastados e soltados em seu aplicativo. Na parte inferior está o código de origem.

Figura 2. Editando uma Classe Swing com o Visual Editor
Editando uma Classe Swing com o Visual Editor

É possível ver a interação entre as visualizações de origem e gráfica rolando pela origem e localizando o método initialize() , que configura o tamanho inicial da janela de aplicativo:

     private void initialize() {
            this.setSize(300, 200);
            this.setContentPane(getJContentPane());
     }

Se você alterar o primeiro número, a largura, para um novo valor, como 600, verá que em um instante a representação gráfica acima terá a largura alterada para refletir esse novo valor. Se estiver fazendo muitas mudanças no código de origem, pode querer desativar a sincronização clicando no botão Parar Round-trip na barra de status do Eclipse; caso contrário, o editor pode não ser tão responsivo quanto você gostaria.

Além do Visual Editor, você também observará duas novas visualizações em sua perspectiva Java: uma visualização JavaBeans no canto inferior esquerdo e uma visualização Propriedades no canto superior direito. Como você já deve saber, um recurso de design de Swing é que cada componente, como a classe frame que você acabou de criar e quaisquer outros widgets incluídos, é um JavaBean. A visualização JavaBeans permite navegar até esses componentes de sua classe facilmente. Inicialmente, a única entrada abaixo de "this" (que se refere à classe atualmente no Visual Editor) é jContentPanel. Como já deve saber, você não inclui coisas diretamente em um JFrame, mas, em vez disso, em seu painel de conteúdo. Clicar em jContentPanel o levará ao método getJContentPanel() na classe frame.

Figura 3. A Visualização JavaBeans
A Visualização JavaBeans

A outra visualização que o Visual Editor inclui é a visualização Propriedades, que exibe as propriedades de JavaBeans. Aqui, por exemplo, após selecionar jContentPane na visualização JavaBeans, é possível alterar o gerenciador de layout usado. (Antes de fazer isso, pode ser que queira dar uma olhada no código de origem na janela Editor para ver se configura o gerenciador de layout chamando jContentPane.setLayout() com um objeto java.awt.BorderLayout .) Algumas propriedades permitem a inserção de texto livre, mas outras fornecem uma interface mais apropriada; a propriedade para as mensagens de layout usa uma lista suspensa para limitá-lo a gerenciadores de layout válidos. Clique no valor padrão, BorderLayout, e, em seguida, role para cima na lista que parece escolher o gerenciador de layout nulo.

Figura 4. Selecionando um Gerenciador de Layout Nulo
Selecionando um Gerenciador de Layout Nulo.

Após fazer essa mudança, verá que no código de origem jContentPane.setLayout() agora é chamado de valor null. Para provar para você mesmo que a interação entre a visualização Propriedades e o Editor funciona em ambas as direções, você pode tentar alterar null no código de origem de volta para new java.awt.BorderLayout() e verificar se o valor é alterado automaticamente na visualização Propriedades.


Criando e Ativando a UI

Depois de ter criado um quadro para seu aplicativo, é possível começar a incluir os widgets que permitem que o usuário interaja com seu aplicativo. Vamos incluir uma caixa de opção que alterne a ativação e desativação de uma mensagem. Comece clicando no widget JCheckbox e clicando dentro do quadro no editor gráfico. Se você estiver usando um gerenciador de layout nulo, perceberá que pode colocá-lo em qualquer parte da área de janela de conteúdo. Se estiver usando BorderLayout, tem a opção de colocá-lo no Norte, Sul, Leste, Oeste ou Centro.

Em seguida, clique no widget JLabel e clique em Avançar na caixa de opção incluída. Usando a visualização Propriedades, altere o texto para "Unchecked" e ajuste o tamanho da caixa de texto de forma que o texto se ajuste corretamente. (Como alternativa, primeiro expanda a caixa, em seguida, clique no canto superior esquerdo, que abrirá um campo de texto onde é possível digitar o texto.)

Nesse momento, é possível organizar os widgets, se quiser, usando a ferramenta de alinhamento. Selecione ambos mantendo a tecla Ctrl pressionada e clicando em cada um por vez. Em seguida, clique no botão Mostrar Janela de Alinhamento e no botão Alinhar pela parte Superior .

Figura 5. Usando a Ferramenta de Alinhamento para Endireitar as Coisas
Usando a Ferramenta de Alinhamento para Endireitar as Coisas

Seu quadro agora deve ter aparência semelhante à Figura 6.

Figura 6. Um Quadro com Dois Widgets
Um Quadro com Dois Widgets.

Se você fosse executar este aplicativo neste momento, é claro que não iria ocorrer muita coisa. É possível clicar na caixa de opção para ativar e desativar, pois Swing cuida disso para você, mas para que realmente faça alguma coisa, será necessário incluir algum código. Se estiver familiarizado com o modelo de evento Swing, você sabe que precisa incluir um listener de ação à caixa de opção de forma que sempre que o usuário alterá-la, o listener possa executar alguma ação. Para incluir um listener usando o Visual Editor, clique com o botão direito do mouse na caixa de opção no editor gráfico e selecione Eventos > Ação Executada no menu de contexto que aparece. Isso incluirá o código para um listener de ação, implementado como uma classe anônima, no código de inicialização para a caixa de opção:

   private javax.swing.JCheckBox getJCheckBox() {
      if (jCheckBox == null) {
         jCheckBox = new javax.swing.JCheckBox();
         jCheckBox.setBounds(45, 75, 21, 21);
         jCheckBox
            .addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent e) {
               System.out.println("actionPerformed()");
               // stub de Evento TODO Gerado Automaticamente actionPerformed()
            }
         });
      }
      return jCheckBox;
   }

Como pode ver, onde é necessário incluir código está identificado com uma anotação TODO . Vamos alterar o código de forma que sempre que a caixa de opção for alterada, o rótulo a seu lado é alterado também para refletir o estado da caixa de opção. Esta deve ser a aparência do novo código após a mudança:

         jCheckBox
            .addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent e) {
               jLabel.setText(
                  jCheckBox.isSelected() ? "Checked" : "Unchecked");
            }
         });

Está na hora de testar o aplicativo.


Executando uma Classe Visual

O Visual Editor permite ativar JavaBeans de forma conveniente sem a necessidade de uma classe main() . Isso é conveniente principalmente quando você estiver testando um componente, como um JPanel, separado do aplicativo que, eventualmente, o incluirá. Para ativar o aplicativo de teste simples criado dessa forma, certifique-se de que Test.java esteja selecionado no Editor, em seguida, selecione Executar > Executar como > Java Bean no menu principal do Eclipse.

Como alternativa, como é um JFrame, também é possível executar Test como um aplicativo Java concluindo o método main() da seguinte forma:

   public static void main(String[] args) {
      Test test = new Test();
      test.setDefaultCloseOperation(EXIT_ON_CLOSE);
      test.setVisible(true);
   }

Selecione Executar > Executar como > Aplicativo Java no menu principal para iniciá-lo. Independentemente da forma que executá-lo, você deve ver que, ao clicar na caixa de opção, o rótulo é alterado conforme necessário. Se não estava acompanhando no Eclipse, mas deseja ver como ficou o código, pode fazer download do mesmo (consulte Recursos).


Pré-estreia do Suporte do Visual Editor V1.0 para SWT

Na época em que este texto foi escrito, construções preliminares do Visual Editor V1.0 forneciam uma visualização do suporte a SWT, apesar de a versão final provavelmente ser diferente. Vamos dar uma olhada rápida aqui, mas esteja ciente de que você pode precisar fazer ajustes se estiver acompanhando com uma versão mais nova.

Ao fazer download de uma construção sem release do Visual Editor V1.0, como a construção de integração I20040325 que estamos usando aqui, também será necessário fazer download das construções do Eclipse, EMF e GEF correspondentes. Não haverá necessariamente construções de release e não é possível misturar e combinar versões. A página de download do VEP (consulte Recursos) especificará quais construções são necessárias e conterão links para elas.

Após instalar o Eclipse, Visual Editor, EMF e GEF, inicie o Eclipse e crie um novo projeto Java. Para usar o SWT, será necessário incluir a biblioteca do SWT no caminho de construção Java de seu projeto. Clique com o botão direito do mouse no projeto e selecione Propriedades > Caminho de Construção Java. Clique na guia Bibliotecas, clique no botão Incluir Biblioteca , selecione Standard Widget Toolkit (SWT) e, em seguida, clique em Avançar. Aceite o padrão "Usar o Nível da Plataforma SWT" no próximo diálogo e clique em Concluir. Clique em OK para fechar a caixa de diálogo de propriedades.

Como antes, crie uma nova Classe Visual clicando com o botão direito do mouse no projeto e selecionando Novo > Classe Visual. Insira um nome para a classe, como SWTTest. Desta vez, no entanto, em vez de selecionar "frame" como a classe visual a estender, selecione "other". Além disso, assegure que a superclasse seja java.lang.Object e selecione a caixa ao lado do método main() sob "Quais stubs de método você gostaria de criar?"

Figura 7. Criando uma Classe Visual do SWT
Criando uma Classe Visual do SWT.

Inicialmente, a tela do editor gráfico estará vazia. Para criar um aplicativo, será necessário incluir um shell do SWT. Você deve verificar que a paleta de widgets à esquerda do Visual Editor contém uma seleção de widgets do SWT (além dos widgets do AWT e do Swing). Clique em Shell, em seguida, clique e arraste na tela para criar a janela do aplicativo.

Figura 8. Incluindo um Shell do SWT no Editor Gráfico
Incluindo um Shell do SWT no Editor Gráfico.

Agora é possível incluir widgets no shell. Aqui incluiremos somente um único campo de texto. Clique em Texto, em seguida, clique e arraste no shell para posicioná-lo. Clique no canto esquerdo superior do campo para incluir algum texto, como "Hello, SWT!"

Figura 9. Hello, SWT!
Hello, SWT!

Após ter concluído essas etapas, verá que o Visual Editor criou um método createSSHell(), que inicializa o shell como a seguir:

   private void createSShell() {
      sShell = new org.eclipse.swt.widgets.Shell();
      text = new org.eclipse.swt.widgets.Text(sShell,
            org.eclipse.swt.SWT.NONE);
      sShell.setSize(new org.eclipse.swt.graphics.Point(209, 85));
      text.setBounds(new org.eclipse.swt.graphics.Rectangle(23,
            9, 153, 27));
      text.setText("Hello, SWT!");
   }

Em seguida, precisamos incluir algum código no método main() para instanciar a classe e executar o código do SWT:

   public static void main(String[] args) {
      SWTTest test = new SWTTest();
      Display display = new Display();
      test.createSShell();
      test.sShell.open();
      while (!test.sShell.isDisposed()) {
         if (!display.readAndDispatch())
            display.sleep();
      }
      System.out.println("finishing...");
      display.dispose();
   }

Após digitar isso, você pode clicar com o botão direito do mouse na janela de origem e selecionar Origem > Reorganizar Importações para resolver a referência a Exibir.

Para executar o aplicativo, é necessário incluir uma biblioteca compartilhada do SWT específica da plataforma ou DLL em seu caminho. Uma maneira de fazer isso é usando uma configuração de ativação. Selecione Executar > Executar... no menu principal do Eclipse, em seguida, clique na guia Argumentos na caixa de diálogo que aparece. Na caixa Argumentos da VM, inclua um argumento -D com um caminho para as bibliotecas. No Windows®, se tiver instalado o Eclipse em C:\eclipse, o argumento completo será -Djava.library.path=C:\eclipse\plugins\org.eclipse.swt.win32_3.0.0\os\win32\x86.

Figura 10. Incluindo um Caminho para DLLs do SWT no Windows na Configuração de Ativação
Incluindo um Caminho para DLLs do SWT no Windows

Após inserir esse argumento, clique em Executar para iniciar o aplicativo SWT. Se tudo tiver saído bem, a janela de aplicativo será aberta com a mensagem "Hello, SWT!"

Figura 11. A Janela de Aplicativo "Hello, SWT!"
A Janela de Aplicativo Hello, SWT!

Resumo

O Projeto Visual Editor inclui o construtor de GUI há muito esperado no Eclipse. A versão inicial, 0.5, contém suporte para AWT/Swing e coloca o Eclipse em paridade com outros IDEs em relação a desenvolvimento de GUI. A versão seguinte, 1.0, conterá o suporte para SWT esperado ansiosamente. Além disso, nada é certo, mas devido a seu apoio tecnológico sólido, muitas coisas, incluindo suporte para outras linguagens de programação e kits de ferramentas, são possíveis.


Download

DescriçãoNomeTamanho
Código de amostraos-ecvisual/test.zip---

Recursos

Aprender

Obter produtos e tecnologias

Discutir

  • Os newsgroups da Plataforma Eclipse devem ser sua primeira parada para discutir questões referentes ao Eclipse. (Selecionar isso ativará seu aplicativo leitor de notícias Usenet e abrirá eclipse.platform.)
  • Os newsgroups do Eclipse têm muitos recursos para pessoas interessadas em usar e estender o Eclipse.
  • Participe de blogs do developerWorks e envolva-se na comunidade developerWorks.

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=382610
ArticleTitle=Construir GUIs com o Projeto Visual Editor do Eclipse
publish-date=03142006