Visualize Java interface design with eclipse

Design Preface

Recently, the Eclipse Open source project has finally launched the long-awaited Visual Editor Project (VEP). ve projects have enabled the powerful Eclipse platform to add a Visual Java Component Development tool to Java development. It allows Java developers to no longer rely on other IDE products to do GUI interface work. All development, from the application interface to the development of business logic, can now be done on the Eclipse platform. This article will guide developers on how to install the configuration and use visual Editor.

About Visual Editor

Before we begin, let's look at a Java program interface designed by the author with Visual Editor (hereafter referred to as VE):


How, its visual interface design, is not inferior to other Java Visual Interface development tools.

Visual Editor is an open source Eclipse editor. Like JDT, Pde and other Eclipse tool projects, it is a brand new Eclipse tool project. It can be visualized to edit Java GUI programs, as well as to edit visual Java Bean components. It integrates with Eclipse's Java editor, and immediately feeds into the code in the Java editor when editing the graphical interface in Visual editor. Vice versa.

ve is a visual development of a framework, the current version of VE is 0.5.0RC1 version, this version of VE support Swing and AWT visual Java Component development. Because of the generality of this framework design, it is also easy to implement visual development in C + + or other languages. Its future version (starting at 1.0) will support SWT development. For more information about visual editor, see the links to resources.

Download and install

Because visual editor is written in pure Java, it should be able to run on any operating system. But the current version of VE is 0.5.0RC1, tested only on Windows and Linux platforms. So if you are using an operating system other than these two operating systems, you should first read the Readme file for ve, before installing and using VE, you must first install the following versions of Eclipse and related support 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)

For the convenience of Chinese developers, Eclipse also provides a Chinese language pack, and after downloading and installing, the ELCIPSE environment will become an all-Chinese interface. In this article, the author's eclipse also installs this Chinese language pack. You can then download the visual editor from the following address:

Http://download.eclips.org/vep .....

After the download of ve is a zip file, please extract the contents of the plugins and features directories in its compressed package into the corresponding directory in the Eclipse installation directory. If your eclipse is running, please shut down and restart eclipse.

Start a design task

Now that all programs are installed, the author will use an example to explain the use of visual editor. In this example, I want to design a mail delivery panel, which is the following sketch:


This panel includes the sender, receiver, message subject, message content, and the Send and Purge buttons,

Enter Visual Editor

Start the Eclipse platform. At first, you may feel that eclipse has not changed much. Don't worry, please create a new item, click on the "New" submenu under the "File" menu, and choose and create a "Java project". Then on the toolbar, on the new Java class icon, click the small arrow on the right to expand the menu in the following image:


On this menu, there is one more "visual Calss" submenu, which is one of the portals to the visual editor. Click "Visual Class" to pop up the following dialog box:


In this dialog box, you need to enter the name of the class (for example, Mark 0 1), where we enter "Messagepanel" and the visual class (such as Mark position) you want to inherit. You can choose to inherit any of the interface components from swing or AWT, such as inheriting other types of classes, select "Other" and click the "Browse" button to select the class you want to inherit. Here, we choose the Panel and swing options, inherit JPanel, and then click the "Finish" button and you'll see the Visual editor Interface:


Because of the high customization of the Eclipse Workbench, the interface that readers now see is not the initial layout of VE, but the perspective that the author has been able to rearrange by way of preference, but this does not affect the reader's understanding of the contents of this article.

As shown in Figure 1, is the tool panel of VE, providing selection tools such as "Selection", "Box selection" and so on. There are swing components, swing containers, swing menus, and AWT control design tools. At the bottom of the panel there are "design" and "Source" two tabs, which are used to toggle the designer interface and Java source Code view.

Figure 2 is the toolbar for ve, including some common buttons in the tool panel.

Figure 3 is the Java Beans view and the Properties view, and two views can toggle the display. The Java Beans view uses a tree structure to instantly display the various levels of Java bean components used in the design. The Properties view displays a list of property values that displays the currently selected Java Bean component, where you can edit the property values for each Java bean.
The gray rectangular area of the figure is the JPanel we started with, and all the work starts with it.

Device Swing Components

As anyone who has done the swing GUI interface design knows, the element position on the Java application interface is managed with LayoutManager. The default layout manager for JPanel is FlowLayout. ve currently supports all traditional layout managers (the traditional layout manager referred to here refers to the layout manager before JDK1.4.) Unfortunately, I do not currently support the beginning of the springlayout from JDK1.4.

To set the JPanel layout, first select JPanel in the design interface, and then switch to the Properties view to find the Layout property, as shown in the following illustration:


The diagram shows the preset layoutmanager for the JPanel. On the right side of the "Layout" property, you can specify different types of LayoutManager by clicking the combo box. Different layoutmanager will display different parameters in the property editor, and if you choose GridLayout, the Layout property in the property editor will display several different parameters, as shown in the following figure:


The previous flowlayout's three parameters alignment, horizontal gap and vertical gap became GridLayout's other four parameters: columns, horizontal gap, rows, vertical Gap

In order to facilitate the design, the author in this example will use NULL, that is, do not use any LayoutManager to design the interface.

Once the layout is set up, you can put a variety of swing components on the JPanel. According to the sketch we first designed, the interface should be placed on four label:from, to, Subject and message. As well as four text components, the fourth should be textarea, which is used to edit multiple lines of text. We select the relevant components on the tool panel and then drag and choose a rectangle on the JPanel, which is displayed in this rectangular area in the appropriate size and position. Then edit the "text" property of each JLabel and JButton to the appropriate value in the Properties view. Now look at the following author "draw" Out of the interface:


Look, how's the design? The author is not a painter, "painting" Out of the interface appears to be a bit messy. Never mind, ve also provided some tool buttons to let us adjust the position of each component. Please click on the "Show Alignment Window" button on the VE toolbar:


Display a window with the following image:


This window enables you to align the selected components to the top and bottom directions. You can also make the selected components the same height and width. Let's look at the layout of the interface following the adjusted position of the figure:


Does it look more beautiful now?

Add Event Handling

After the previous steps, ve visual design of the task is basically completed. In our design interface, there are "Send" and "clear" buttons. Let's take a look at how ve added event handling to them.

Right-click the "Send" button on the Design interface, pop-up menu, as shown below:


In the Event menu item, you see a "actionperformed" event. If you want to add other types of events, you can click "Add Events" to select other types of events. After we click on the "Actionperformed" event, a "actionperformed" event type is added under the "jbutton-" Send "component of the Java Beans view, as shown in the following figure:


In the Java Beans view, select the "Actionperformed" event, and then in the window of ve, switch from "design" to "Source" view.


The code area labeled 1 above is the button event that we just added. The author calls a Send method in the event, as shown in the Figure 2 code area. The specific message sent by the author of the code here will not be implemented.

The same method, you can add an event for another button "clear".

To use a custom component in a program

Before we designed our own Java components, let's look at how to invoke this component in our own program--a window.

Using the method described earlier, click on the "New Java Class" button on the toolbar to create a JFrame visual class class. You can also find a JFrame class by using the menu "file"-> "new"-> "Visual class". Here, we name this class "MyApp".

When the Ve window appears, you can see a blank jframe displayed in Design view. At this point, click on the "Choose Bean" button on the tools panel of VE and enter the class name "Messagepane" of the Java component we designed in the pop-up dialog box, then click OK. At this point, when we move the mouse over the JFrame, the JFrame is divided into five parts with a green line, as shown in the following figure:


This is because the preset layoutmanager of JFrame is BorderLayout, in ve, if the Java component is selected in the tool panel, when the mouse is moved over a container component with a specific LayoutManager (the container component is a jframe in the figure above), ve will indicate the location of your current mouse hover in the appropriate form. In the above figure in ve tells us that we are now in the center of the BorderLayout, and then click once in that position, our chosen Java component is placed to this location.

ve designed the program interface, you can switch to the "source" view of the specific code coding. Here we are not tired to state.

Customizing the Environment for VE

Before the explanation, we learned how to use ve to visualize the Java interface design. In order to adapt to different developers, ve also provided some options for developers to design their favorite ve environment.

Open the Menu window-> "preferences"-> "Java"-> "Visual Editor", where the various preferences interfaces for ve appear. This interface is still an English interface because the Eclipse Chinese Language pack I installed is older than VE. Here, ve's preferences are divided into three categories: "Appearance", "Code Generation", "Pattern Style." The following graphics are described separately:

1. Appearance (appearance) settings:


This content can be set in this panel:

(1) Set the layout of the visual editor and source editor, one is a layout that is separated from top to bottom, the other is the layout (that is, the style seen in this example diagram) where the page should be switched.

(2) Whether the settings display the Properties view and the Java Beans view.

(3) Set the interface style of swing at design time.

2. Code generation (Generation) settings


This panel includes the following:

(1) Sets whether the annotation and Try{}...catch () block are generated for the new expression.

(2) Set the code synchronization time between the visual design interface and the Code Editor.

3. Code template style (pattern style) settings


This panel includes the following:

(1) The code style used by ve for accessing Java beans.

(2) The initialization method that is attempted when the VE initialization is used. ve currently provides support for initialization of Java component code generated by other IDE product visual editors, such as JBuilder, Netbean, and so on.

Summarize

In this way, we have a complete understanding of Eclipse's new tools, visual editor, from the installation of VE to the Java component design and the settings of the VE environment. With Visual Editor, all of our development work, from the graphical user interface to the business logic, can all be done on the Eclipse platform.