Build GUI applications with Eclipse Visual Editor projects

A graphical tool for building graphical interfaces

Similar to many eclipse.org projects, the goal of the Visual Editor project is to build a tool for building tools (here is a tool for building graphical user interfaces). The most interesting thing about the Visual Editor project is that it has published a reference implementation. Version 0.5 of Visual Editor is the GUI builder for building awt/swing applications, which is a long-awaited Eclipse feature. The support for SWT will be increased in the 1.0 release, which is due to be released soon and scheduled for mid-2004. In this article, you will get an overview of visual editor and the techniques behind it, as well as a short demonstration of the features of Visual editor 0.5 for building awt/swing applications, and a preview of SWT support in Visual Editor 1.0 。

Introduction to the Eclipse Visual Editor project

Read through any discussion about the pros and cons of Eclipse and its competitors, and you'll find tips on the various features that are either good or bad for each other or are completely lacking. Until recently, for Eclipse, what seemed to be often mentioned was that it lacked a GUI builder: A graphical tool for building graphical user interfaces. Happily, this has been remedied by the Eclipse Visual Editor project launched in November 2003 and the subsequent rapid release of visual editor 0.5. Visual Editor 0.5 allows you to create a awt/swing application with a fully WYSIWYG (what you see is what you get) graphical editor.

Like Eclipse itself, Visual Editor is also based on IBM's code contributions. Developers familiar with visual editor in Websphere Studio application Developer 5.x will find that Eclipse's visual editor is almost exactly the same. To learn how to use Visual editor, see the Websphere Studio Visual editor documentation, which is listed in the Resources section at the end of this article.

Similar to many other projects under the Eclipse.org organization, including Eclipse, the Visual Editor project has a very ambitious goal: building a tool for building graphical editing tools. Although support for Awt/swing has been completed in the initial release, the Visual Editor's plan is much more than that. The technology base is being redesigned to make it irrelevant for programming languages and supported graphical toolsets.

In the future, you will see Visual Editor implementations other than awt/swing (such as SWT), as well as potential implementations of languages other than the Java language (such as C + +). The work on increasing SWT support is already underway, in fact, it will be included in the Visual Editor version 1.0, scheduled for the middle of 2004, about the same period as Eclipse 3.0.

Back to top Visual Editor Insider

The first concrete implementation of Visual Editor, as a GUI builder for awt/swing, is already satisfying enough for GUI developers, but if you're the kind of developer who wants to get inside, you can see a lot of things too: Visual Editor uses some very interesting techniques, which are useful in their own right. If you are interested in building your own graphical editor or modeling tools, the existing Visual editor implementation is only a clue to what you can accomplish.

The most obvious tool used by Visual Editor is GEF, the graphical editing framework (graphical Editing framework). GEF is built on the local Eclipse graphical toolset SWT to make it easier to develop a graphical editor or WYSIWYG text editor. If you are familiar with the graphical primitives in SWT (or awt/swing, in which they are similar), you will know that it is difficult to draw and manipulate arbitrary shapes (such as rectangles, arrows, and ellipses), let alone manage their relationships and the data models they represent.

The GEF is divided into two parts: the first part is the draw2d plugin, a lightweight drawing and rendering package that helps you draw graphics. The second part is the GEF plug-in, which, among other tools, adds a selection and creation tool, a tool palette, and a controller framework for mapping between the data model and the view.

GEF is a model-independent framework, but as part of Visual Editor (and other graphical tools for generating code), it uses the Eclipse Modeling Framework (Eclipse Modeling Framework, EMF) in the background to model, Java Class and graphical representations, where the model is stored internally using XML Metadata Exchange (XML Metadata interchange, XMI). One of the important features of EMF is that it ensures that all of these mappings are single-to-none, so although XMI can be considered a standard representation of the model, switching back and forth between code and graphics does not lose any information. That's why Visual editor only needs to save a representation of the model (that is, the Java source code) and why the developer is free to edit the source code outside of the graphical editor.

To learn more about GEF and EMF, see the links in the Resources section of this article.

Back to top developing awt/swing applications with Visual Editor

As mentioned earlier, the currently available version 0.5 is a full awt/swing GUI builder. It works with Eclipse 2.1.x and is no less comparable to the GUI builders in other Ides. First, it generates high-quality code that is comparable to an experienced GUI developer by hand-developed code and does not have a special artifact (artifact) that makes the modification difficult. Second, its powerful analytical capabilities allow full code to be converted back and forth, so modifications to the source code are almost immediately reflected in the graphical editor.

One of the most tedious tasks when building a Swing application manually is to use the layout manager to manage the location of the component. Because Visual Editor is a WYSIWYG graphical editor, it's easy to use it to get the look and behavior you want in the user interface. Also, because it can be automatically mapped between different layout managers, you can use a null layout to create your application appearance, and then switch to a raster cell (grid-bag) layout. Using a null layout makes it easy to get exactly the layout you want, and the grid cell layout allows the layout to work well when the window size changes.

In the following sections, we will quickly explore Visual Editor 0.5 and some of its most interesting features. If you want to accompany the practice, you need to install Eclipse 2.1.x and Visual Editor 0.5. Also, Visual Editor requires two additional plugins, EMF and GEF. For download links and installation information, see the Resources section.

Back to top Visual Editor Tools

After you install Visual Editor, you will find some new features the next time you create a new Java project. Assume that you have created a project named Vepexample. If you right-click the project name in the package Explorer and choose New from the context menu, you will see a new option to create the Visual Class. Clicking this option will bring up a familiar dialog box, but with a new name: "Create a new Java Class using the Visual Editor". Another difference you'll notice is that there are multiple radio buttons and a check box for selecting the parent class. In general, you will create a JPanel to contain the UI elements of your application, and then add the panel to JFrame. For brevity, a framework is created and elements are added directly to it. For more information on developing Swing applications, see the series of tutorials listed in the Resources section.

Enter a name for the class, such as Test, and make sure that you are in the which visual class would to extend? Area, select frame and swing. In addition, the "which method stubs would you like to create?" Select Main () (as shown in Figure 1). Figure 1. Create a new visual class

When you're finished, create a visual class by finish and open it using visual Editor. You'll notice that, unlike a regular Java editor, Visual editor has three different parts. The top is a graphical editor that shows the possible shapes of your visual classes at run time. On the left is a list of widgets that can be dragged and dropped into your application. The bottom is the source code (see Figure 2). Figure 2: Editing the Swing class with Visual editor

By scrolling down the source code and finding the Initialize () method, you can see the interaction between the source code and the graphical view Initialize (). method to set the initial size of the application window:

     private void Initialize () {
            this.setsize (+);
            This.setcontentpane (Getjcontentpane ());
     }

If you change the first number (that is, the width) to a new value, such as 600, you will see that the graphical representation above will immediately change the width to reflect the new value. If you are making a lot of changes to your source code, you can turn off synchronization by clicking the Stop Round tripping button in the Eclipse status bar, or the editor may become less responsive than you would like.

In addition to Visual Editor, you'll notice that there are two new views in the Java perspective: the Java Beans view in the lower left and the Properties view in the upper right. As you might know, one of the design features of Swing is that each component, such as the framework class you just created and any other widgets added to it, is a Java Bean. The Java Beans view allows you to easily navigate to these components in your class. Initially, the only entry under "This" (referred to as the class currently in Visual Editor) is Jcontentpanel. As you might know, instead of adding components directly to JFrame, you add components to its content panel. Click Jcontentpanel to point to the Getjcontentpanel () method in the Framework class (see Figure 3). Figure 3. Java Beans View

Another view added by Visual Editor is the Properties view, which displays the attributes of a Java Bean. Here, for example, after you select Jcontentpane in the JavaBeans view, you can change the layout manager that it uses. (Before you do this, you might want to browse through the source code in the Editor window to see if it sets the layout manager by calling the Jcontentpane.setlayout () method with a Java.awt.BorderLayout object.) Some properties allow you to enter text at will, but other properties provide a more appropriate interface, and a drop-down list is used for layout-managed properties, allowing you to select only in a valid layout manager. Click the default value of BorderLayout, and then scroll up the displayed list and select the Null layout manager (see Figure 4). Figure 4. Select the null layout manager

After making this change, you will see that in the source code, Jcontentpane.setlayout () is now called by a null value. If you want to prove that the interaction between the Properties view and Editor works in two directions, you can try to change null back to the new Java.awt.BorderLayout () in the source code and confirm that the properties The value changes automatically in the view.

Back to top Create and enable user interface

Once you have created a framework for your application, you can begin adding widgets to allow users to interact with your application. Let's add a check box for switching messages. First, click the Jcheckbox widget, and then click inside the frame in the graphical editor. If you're using a null layout manager, you'll notice that you can place it anywhere in the content panel, or if you're using BorderLayout, you can choose to place it in the north, south, east, west, or middle.

Next, click the JLabel widget and click Next in the check box that you added earlier. Using the Properties view, change the text to "unchecked", and then adjust the size of the text box to make the text exactly moderate. (Another way is to extend the box first and then click the upper-left corner; This opens a text field where you can type text.) ）

Now, if you want, you can use the Alignment tool to organize the widgets. Select them by pressing the Control key and clicking each component in turn, then click the Show Alignment window button and the Align top button, as shown in Figure 5. Figure 5: Aligning components with the adjustment tool

Your frame should now look similar to Figure 6. Figure 6: Frame with two widgets

If you start running the application now, of course, there won't be too many things going on. You can click the check box to turn it on or off, because Swing will take care of it for you, but you'll need to add some code if you want it to actually do something. If you are familiar with the Swing event model, you know that you need to add an activity listener for the check box so that the listener can perform an action whenever the user changes it. To add a listener using Visual editor, right-click the check box in the graphical editor and choose  events > Action performed from the context menu that appears. This adds the code that implements the activity listener for the anonymous class to the initialization code of the check box:

   Private Javax.swing.JCheckBox Getjcheckbox () {
      if (Jcheckbox = = null) {
         Jcheckbox = new Javax.swing.JCheckBox (); Jcheckbox.setbounds (----
         );
         Jcheckbox
            . addActionListener (New Java.awt.event.ActionListener () {public
            void actionperformed ( Java.awt.event.ActionEvent e) {
               System.out.println ("actionperformed ()");
               TODO auto-generated Event stub actionperformed ()
            }
         );
      }
      return jcheckbox;
   }

As you can see, a TODO comment has been identified where the code needs to be added. Let's change the code so that whenever the check box changes, the label next to it changes to reflect the state of the check box. After you make the changes, the new code should look like this:

         Jcheckbox
            . addActionListener (New Java.awt.event.ActionListener () {public
            void actionperformed ( Java.awt.event.ActionEvent e) {
               jlabel.settext (
                  jcheckbox.isselected)? "Checked": "Unchecked");
            }
         );

Now it's time to test the application.

Run Visual Class at the top of the page

Visual Editor allows you to easily launch Java beans without needing a main () class. This is especially handy when you are testing a component, such as JPanel, that is separate from the application that will eventually contain it. To launch the simple test application you created in this way, make sure that Test.java is selected in the editor and select Run > Run as > Java Bean from the Eclipse main menu.

Another way is that since this is a JFrame, you can also run Test as a Java application by completing the main () method as follows:

   public static void Main (string[] args) {
      test test = new test ();
      Test.setdefaultcloseoperation (exit_on_close);
      Test.setvisible (True);
   }

Run it from the main menu by choosing Run > Run as > Java application. Regardless of the way you run it, you should see that the label changes accordingly whenever you click the check box.

If you don't follow the practice in Eclipse, but want to see what the code looks like, you can download it using the links provided in resources.

Back to the top learn about SWT support in Visual Editor 1.0

At the time of this writing, the preliminary version of Visual Editor 1.0 (Preliminary build) provides a preview of the SWT support, although the final version may be different. Here we will take a quick look, but note that if you are using an updated version, you may need to make an adjustment.

When you download Visual Editor 1.0 for a non-release version (Non-release build), such as the I20040325 integrated version (integration build) that we use here, you will also need to download the appropriate Eclipse, EMF, and GEG version (build). These are not necessarily released versions (release build), and you cannot mix and match versions. The VEP download page (see Resources) specifies which versions are required and contains links to these versions.

When you are finished installing Eclipse, Visual Editor, EMF, and GEF, start Eclipse and create a new Java project. In order to use SWT, you need to add the SWT library to the project's Java build path. Right-click the project and select Properties > Java Build Path. Click the Libraries tab, click the Add Library button, select Standard Widget Toolkit (SWT), and then click