For visual interface design of Java with Eclipse: Chenxian Bo (turbochen@163.com) Cyberon Technology November 2003
Foreword Recently, the Eclipse open source project finally launched a long-awaited Visual Editor Project (VEP). The VE project has enabled the powerful Eclipse platform in Java development, also adds a visual Java component development weapon. It makes Java developers no longer serve other IDE products to do the GUI interface. All developments from the application interface to business logic, and now you can do it on the Eclipse platform. This article will boot how developers are installed and configured and use Visual Editor.
About Visual Editor Before you begin, you will see a Java program interface designed with Visual Editor (hereinafter referred to as VE): how to visualize the interface design, not as follows for other Java visual interface development tools. Visual Editor is an open source Eclipse editor. As with other Eclipse, such as JDT, PDE, is a new Eclipse tool project. It can perform visualization Java GUI programs that also edit visual Java Bean components. It can be integrated with Eclipse's Java Editor, and when you edit the graphical interface in Visual Editor, you will immediately feed back the code in Java Editor. vice versa. Ve is a visualized Framework, the current version of VE is 0.5.0rc1, this version of VE supports Swing and AWT visual Java component development. Since this Framework design is versatile, it can also be easily visualized under C or other languages. The future version (starting from 1.0) will support SWT development. For more information on Visual Editor, please see the relevant links of the reference materials.
Download and Installation Because Visual Editor is written in pure Java, it should be able to run on any operating system. However, the current VE version is 0.5.0rc1, which is only tested on Windows and Linux platforms. So if you use other operating systems outside of these two operating systems, you should read the README file, install and use VE, you must install the following versions of Eclipse and related support category: Eclipse Build 2.1. 2 (Build Page) EMF Build 1.1.1: (Download Zip) Gef Build 2.1.2: (Download Zip) In order to facilitate China's developers, Eclipse also provides a Chinese. Language packs, after downloading, the Elcipse environment will become a full Chinese interface. In this article, the author's Eclipse also installed this Chinese language package. You can download Visual Editor from the following address: http://download.eclips.org/Vep.... Download VE is a zip file, extract the contents of the Plugins and Features directory in the compressed package to Eclipse installation You can in the corresponding directory of the directory. If your Eclipse is running, turn off and restart Eclipse.
Start a design task now, all program installations are complete, and the author will use an example to explain the use of Visual Editor. In this example, the author wants to design a mail send panel, below is its sketch: This panel includes senders, recipients, email topics, mail content, and send and clear buttons,
Enter Visual Editor to start the Eclipse platform. Just start, you may think that Eclipse has not changed. Don't worry, please create a new project, click on the "New" submenu under the File menu, select and create a new "Java project". Then on the "New Java Class" icon on the toolbar, click on the small arrow on the right, will expand the menu as shown below: On this menu, there is a submenu of "Visual Calss", which is the entrance to Visual Editor. one. Click "Visual Class" to pop up the following dialog: In this dialog, you request the name of the name (such as tag ○ 1), here we enter "MessagePanel", and you want to inherit the visualty class ( Such as marking ○ 2 position). You can choose to inherit any 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 "Panel" and Swing options, inherit the JPANEL, then click the "Finish" button, you can see the interface of Visual Editor: Due to the height of the Eclipse workbencture, the reader now see the interface Not VE initial layout, but the author is re-layout through the writer, but this does not affect the reader's understanding of this article. As shown in Figure 1, it is the tool panel of VE, providing "select", "box selection", etc. Selecting tools. There is also a SWING component, Swing container, Swing menu, and AWT control design tool. There are "Design" and "Source" below the panel to switch the design interface and the Java source code view. 2 is the toolbar of VE, including some of the common buttons in the tool panel. 3 is a "Java Beans" view and "Properties" view, two views can be switched. The "Java Beans" view uses the tree structure instantly display the level of various Java Bean components used in the design. The "Properties" view displays the list of property values that display the currently selected Java Bean component, you can edit the properties values of each Java bean in this list. The gray rectangular area in the figure is JPanel we started to start, and all work starts from it.
People who have a Swing component have done the Swing GUI interface design that the elements position on the Java application interface is managed with LayoutManager. JPanel's preset layout manager is FlowLayout. Ve currently supports all traditional layout managers (the traditional layout manager referred to herein refers to the layout manager before JDK1.4. Unfortunately, VE currently does not support SpringLayout from JDK1.4). To set the jPanel's Layout, please select JPANEL in the design interface, then switch to the Properties view, find the "layout" property, as shown below: The diagram shows the JPanel's preset LayoutManager. On the right side of the "Layout" property, you can specify different types of LayoutManager by clicking the combo box. Different LayoutManager displays different parameters in the property editor. If you select GridLayout, the layout attribute in the Properties Editor will display another different parameters, as shown below: The three parameters of the previous FlowLayout Alignment, Horizontal GAP And Vertical GAP has become a four parameters of GridLayout: Column, Horizontal Gap, Rows, Vertical Gap. For the convenience of design, the author will use null in this example, ie no LayoutManager to design the interface. After the layout is set, you can set a variety of Swing components on the JPANel. According to the sketch of our start design, you should put four label: from, to, subject, message. As well as four text components, its fourth should be Textarea for editing multi-line text. We select the relevant components on the tool panel, then drag out a rectangle on the JPANel, and the component is displayed in this rectangular area according to the corresponding size and position. Edit the "Text" property of each JLabel and JButton in the "Properties" view to the corresponding value. Now let's take a look at the interface of the author "draw": see, how is the design? The author is not a painter, and the interface "draw" is a bit messy. It doesn't matter, VE also provides some tool buttons to let us adjust the location of each component. Please click on the "Show Alignment Window" button on the VE toolbar: Show the window as shown below: Through this window, you can align the selected components up and down. It is also possible to have the selected components to have the same height and width. Let's take a look at the interface layout after the adjustment position: Is it still beautiful?
Adding an event handling After the previous step, the task of VE's visual design is basically completed. In our design interface, there is a "send" and "clean" button. Let's take a look at how VE is handled for them. ] At the "Send" button on the design interface, click the right mouse button, pop up the menu, as shown below: In the "Event" menu item, you can see an "ActionPerformed" event. If you want to add other types of events, you can click on "Add Events" to select other types of events. After you click on the "ActionPerformed" event, the "JButton-" Send "component of the Java Beans" view is more, as shown in the figure below: In the Java Beans view, select "ActionPerformed" "In the event, in the VE window, switch from" Design "to the" Source "view. The code area of the above-figure mark 1 is the button event we just added. The author calls a Send method in the event, as shown in the figure, the 2code area. The specific code author of the specific email is not implemented here. The same method, you can add events to another button "Clear". Using custom components in the program, we design our Java components in front. Now let's take a look at how to call this component in your own program - a window. Use the previously described ways to clicking the "New Java Class" button on the toolbar to create a JFrame's Visual Class class. You can also find a JFRAME class through the menu "file" -> "New" -> "Visual Class". Here, we name this class "myApp". When the VE window appears, you can see a blank JFRAME is displayed in the design view. At this time, click the "Choose Bean" button on the VE tool panel, then enter the class name "MessagePane" of our Java component in the pop-up dialog box, then click "OK". At this time, when our mouse moves to JFrame, JFrame is cut into five copies, as shown below: This is because JFrame's preset LayoutManager is BorderLayout, in VE, if you select it on the Tool panel A good Java component, when the mouse is moved on a container component with a specific LayoutManager (container% in the above figure)
