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.

Voltar para parte superior

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.

Voltar para parte superior

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.

Voltar para parte superior

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).

Voltar para parte superior

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().

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.

É 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.

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.

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.

Voltar para parte superior

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 .

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

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.

Voltar para parte superior

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).

Voltar para parte superior

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?"

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.

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!"

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.

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!"

Voltar para parte superior

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.

Voltar para parte superior

Download

Informações sobre métodos de download

Recursos

Aprender

• Obtenha detalhes sobre o Visual Editor no WebSphere Studio Application Developer V5.x em " Comparando o WebSphere Studio Application Developer ao VisualAge para Java."
  
  
• Para usar o Visual Editor, é necessário ter os plug-ins GEF e EMF. Aprenda sobre Graphical Editing Framework (GEF) e Eclipse Modeling Framework (EMF) em " Criar um Aplicativo Baseado no Eclipse Usando Graphical Editing Framework," " Aplicativos de Modelo com Eclipse Modeling Framework, Parte 1" e " Desenvolvimento de Eclipse Usando Graphical Editing Framework e Eclipse Modeling Framework" (PDF).
  
  
• Leia um tutorial sobre Criando uma GUI com JFC/Swing.
  
  
• Compare e contraste kits de ferramentas da GUI Java em " SWT, Swing ou AWT: O que É Certo para Você?" em developerWorks.
  
  
• Verifique a " Lista de Leitura Recomendada do Eclipse."
  
  
• Navegue por todo o Conteúdo do Eclipse em developerWorks.
  
  
• Iniciante para o Eclipse? Leia o arquivo do developerWorks " Introdução à Plataforma Eclipse" para conhecer sua origem e arquitetura e como estender o Eclipse com plug-ins.
  
  
• Expanda suas qualificações no Eclipse verificando, no IBM developerWorks, Recursos do Projeto Eclipse.
  
  
• Para ouvir entrevistas e discussões interessantes para desenvolvedores de software, verifique os podcasts do developerWorks.
  
  
• Para uma introdução à plataforma Eclipse, consulte " Introdução à Plataforma Eclipse."
  
  
• Mantenha-se atualizado com Eventos Técnicos e Webcasts do developerWorks.
  
  
• Assista e aprenda sobre as tecnologias IBM e de software livre e funções de produtos gratuitamente com os Demos On Demand do developerWorks.
  
  
• Verifique conferências, feiras comerciais, webcasts e outros Eventos futuros no mundo que sejam de interesse de desenvolvedores de software livre da IBM.
  
  
• Visite Zona de Software Livre do developerWorks para obter informações extensivas sobre como executar ações, sobre ferramentas e atualizações de projetos para ajudá-lo a se desenvolver com tecnologias de software livre e usá-las com produtos IBM.
  
  

Obter produtos e tecnologias

• Saiba mais sobre o Projeto Visual Editor na Eclipse.org.
  
  
• Construído no Eclipse, o WebSphere Studio fornece uma integração flexível semelhante a um portal de ferramentas de desenvolvimento de aplicativos com diversos idiomas, multiplataforma e diversos dispositivos para construir, testar e implementar aplicativos dinâmicos.
  
  
• Verifique os downloads de tecnologia do Eclipse mais recentes em IBM alphaWorks.
  
  
• Faça download de Plataforma Eclipse e Outros Projetos da Eclipse Foundation.
  
  
• Faça download de versões de avaliação de produtos IBM e entre em contato com ferramentas de desenvolvimento de aplicativos e produtos de middleware do DB2®, Lotus®, Rational®, Tivoli® e WebSphere®.
  
  
• Inove seu próximo projeto de desenvolvimento de software livre com software de avaliação da IBM, disponível para download ou em DVD.
  
  

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.
  
  

Sobre o autor

Classificar este artigo

Comentários

Voltar para parte superior

Índice

• Nota do Editor
• Introdução ao Projeto Editor Visual do Eclipse
• Por Trás do Visual Editor
• Desenvolvendo Aplicativos AWT/Swing com o Visual Editor
• Ferramentas do Visual Editor
• Criando e Ativando a UI
• Executando uma Classe Visual
• Pré-estreia do Suporte do Visual Editor V1.0 para SWT
• Resumo
• Download
• Recursos
• Sobre o autor
• Comentários

Conheça a IBM da sua cidade

A IBM está mais perto do que você imagina!

---

Saiba mais