Visual Java interface design with eclipse

Preface
　　
Recently, the Eclipse open-source project finally launched the long-awaited visual editor Project (VEP ). The ve project adds a visual Java component development tool for the powerful eclipse platform in Java development. It allows Java developers no longer to rely on other ide products for GUI work. All development, from application interface to business logic development, can now be completed on the eclipse platform. This article guides developers how to install and configure and use visual editor.
　　
About visual editor
　　
Before getting started, let's look at a Java program interface designed by the author using visual editor (VE:
　　　
Its visual interface design is no inferior to other Java visual interface development tools.
　　
Visual editor is an open-source eclipse editor. Similar to other eclipse tool projects such as jdt and PDE, It is a brand new eclipse tool project. It can visually edit the Java GUI program and edit the visualized Java Bean component. It can be integrated with Eclipse's Java editor. When you edit the graphic interface in visual editor, the code in Java editor is immediately fed back. And vice versa.
　　
Ve is a visual development framework. The current version of VE is 0.5.0rc1. This version of VE supports visual Java component development of swing and AWT. Because this framework is designed to be universal, it can also easily implement visual development in C ++ or other languages. Its future version (starting from 1.0) will support SWT development. For more information about visual editor, see references.
Because visual editor is written in pure Java, it should be able to run on any operating system. However, the current version of VE is 0.5.0rc1, which is only tested on Windows and Linux platforms. Therefore, if you are using an operating system other than the two operating systems, you should first read the README file of VE, before installing and using ve, you must first install the following versions of eclipse and related support Class Libraries:
　　
Eclipse build 2.1.2 (build page) (download zip)
EMF build 1.1.1: (build page) (download zip)
GEF build 2.1.2: (build page) (download zip)
　　
To facilitate Chinese developers, eclipse also provides a Chinese Language Pack. After downloading and installing the pack, the elcipse environment will become a full Chinese interface. In this article, the Chinese Language Pack is also installed in eclipse. Then you can download visual editor from the following address:
　　
Http://download.eclips.org/vep ....
　　
The downloaded VE is a zip file. Extract the contents in the plugins and features directories in the compressed package to the corresponding directory in the eclipse installation directory. If your eclipse is running, close and restart eclipse.
　　
Start a design task
　　
Now, after all the programs are installed, I will use an example to explain how to use visual editor. In this example, I want to design an email sending panel. Below is a sketch of it:
　　　
This Panel includes the sender, recipient, subject, content, and send and clear buttons.
Go to visual editor
　　
Start the eclipse platform. At the beginning, you may think eclipse has not changed much. Do not worry. Please create a new project. Click "new" under the "file" menu and select and create a new "Java project ". On the toolbar, click the "Create Java class" icon and click the arrow on the right to expand the menu, as shown in:
　　　
In this menu, a "visual calss" sub-menu is added, which is one of the entrances to visual editor. Click "visual class" to bring up the following dialog box:
　　　
In this dialog box, enter the class name (for example, Mark ○ 1). Here we enter "messagepanel ", and the visual class you want to inherit (such as marking the ○ 2 position ). You can choose to inherit any interface components from swing or AWT. to inherit other types of classes, select "other" and click "Browse" to select the class you want to inherit. Here, we select the "Panel" and swing options, inherit the jpanel, and click the "finish" button to see the visual editor interface:
　　　
Due to the high customization of the eclipse workbench, the current interface that the reader sees is not the initial layout of VE, but the perspective that the author re-layout as he prefers, however, this does not affect the reader's understanding of this article.
　　
As shown in figure 1, it is the tool panel of VE and provides selection tools such as "select" and "box select. There are also swing components, swing containers, swing menus, and AWT control design tools. There are two tabs "design" and "Source" below the Panel to switch between the design interface and the Java source code view.
　　
2 is the toolbar of VE, including some common buttons in the tool panel.
　　
In the figure 3, the "Java Beans" view and "attribute" view are displayed. You can switch between the two views. The "Java Beans" view uses a tree structure to instantly display various Java Bean component layers used in the design. The "attribute" View displays the list of attribute values of the currently selected Java Bean component. You can edit the attribute values of each Java Bean in this list.
The gray rectangle area in the figure is the jpanel we selected at the beginning, and all the work starts from it.
Swing Components
　　
Anyone who has done swing GUI Design knows that layoutmanager is used to manage the element positions on the Java application interface. The default layout manager of jpanel is flowlayout. Ve currently supports all traditional layout managers (the traditional layout manager mentioned here refers to the layout manager before jdk1.4. Unfortunately, ve does not currently support springlayout from jdk1.4 ).
　　
To set the layout of a jpanel, select jpanel on the design page, switch to the "properties" view, and find the "layout" attribute, as shown in:
　　　
The figure shows the default layoutmanager of jpanel. On the right side of the "layout" attribute, you can click the combo box to specify different types of layoutmanager. Different layoutmanagers will display different parameters in the property editor. If gridlayout is selected, the layout attribute in the property editor will display several other parameters, as shown in:

The preceding three flowlayout parameters alignment, horizontal gap and vertical gap are changed to the other four parameters of gridlayout: columns, horizontal gap, rows, and vertical gap.
For ease of design, I will use null in this example, that is, no layoutmanager is needed to design the interface.
　　
After the layout is set, you can set various swing components on the jpanel. According to the sketch we first designed, there are four labels on the Interface: from, to, subject, and message. And four text components, the fourth of which should be textarea, used to edit multi-line text. Select related components on the tool panel, and drag a rectangle on the jpanel. The component is displayed in the rectangle area according to the corresponding size and position. Edit the "text" attribute of each jlabel and jbutton in the "attribute" view as the corresponding value. Now let's take a look at the following interface:
　　　
Let's see, how is the design? I am not a painter, and the "painted" interface looks messy. It doesn't matter. ve also provides some tool buttons for us to adjust the positions of each component. Click the "show alignment window" button on the ve toolbar:
　　　
Display window for example:
　　　
In this window, you can align the selected components to the top, bottom, left, and right directions. You can also make the selected component have the same height and width. Let's take a look at the page layout after the location is adjusted:
　　　
Does it look more beautiful now?
　　
Add event processing
　　
After the previous steps, the visual design task of VE is basically completed. The "send" and "clear" buttons are available in the interface we designed. Let's take a look at how ve adds events for them.
　　
Right-click the "send" button in the design field and a menu is displayed, such:
　　　
In the "event" menu, you can see an "actionreceivmed" event. To add other types of events, click "add events" to select other types of events. After clicking the "actionreceivmed" event, an "actionreceivmed" event type is added to the "jbutton-" send "" component in the "Java Beans" view, as shown in:
　　　
In the "Java Beans" view, select the "actionreceivmed" event and switch from "design" to "Source" in the ve window.
　　　
In the code area marked with 1, it is the button event we just added. The author calls a send method in the event, marking the code area 2. The specific email sending code is not implemented here.
　　
In the same way, you can add events to another button "clear.
Use custom components in programs
　　
We have designed our own Java component before. Now let's take a look at how to call this component in a window in our own program.
　　
Using the method described above, click "create Java class" in the toolbar to create a jframe visual class. You can also find a jframe class in the menu "file"> "new"> "visual class. Here, we name this class "MyApp ".
　　
When the ve window appears, a blank jframe is displayed in the design view. Click the "choose Bean" button on the tool panel of VE, enter the Class Name of the Java component we designed "messagepane" in the pop-up dialog box, and then click "OK ". At this time, when we move the mouse over the jframe, The jframe will be split into five parts with green lines, as shown in:
　　
This is because the default layoutmanager of jframe is borderlayout. in VE, if Java components are selected on the tool panel, when you move the cursor over a container component with a specific layoutmanager (in which the container component is a jframe), ve will give an appropriate indication of the position of your current mouse hover. In ve, we told us that we are in the center of borderlayout, and click here again. The selected Java component is placed here.
　　
After designing the program interface with VE, you can switch to the "Source" view to encode the specific code. Here we will not go into detail.
　　
Customize the ve Environment
　　
Previously, we learned how to use VE for visual Java interface design. To adapt to different developers, ve also provides some options for developers to design their preferred ve environment.
　　
Open the menu "window"-> "Preferences"-> "Java"-> "visual editor", and various ve preferences are displayed. Since the eclipse Chinese Language Pack installed by the author was released earlier than ve, this interface is still an English interface. Here, there are three types of VE preferences: "appearance", "code generation", and "pattern style ". The following is a combination of graphics:
　　
1. Appearance (appearance) settings:
　　
You can set this content in this panel:
　　
(1) set the layout of the visual editor and the source code editor. One is the vertical and vertical la S, the other is to switch the layout with a page answer (that is, the style shown in the figure below ).
　　
(2) set whether to display the "attribute" view and "Java Beans" view.
　　
(3) set the swing interface style during design.
　　
2. code generation settings
　　
This Panel includes the following:
　　
(1) set whether to generate comments and try {}… for the new expression {}... Catch () block.
　　
(2) set the Code Synchronization time between the visual design interface and the code editor.
　　
3. Pattern style settings
　　
This Panel includes the following:
　　
(1) Java Bean code style used by VE.
　　
(2) The initialization method tried during ve initialization. Ve currently provides support for Java component code initialization methods generated by visual editors of other ide products such as JBuilder and netbean.
　　
Summary
　　
So far, we have made a comprehensive understanding of visual editor, a new eclipse tool, from ve installation to Java Component Design and VE environment settings. With visual editor, all our development work, from the graphical user interface to the business logic, can be completed on the eclipse platform.