For visual interface design of Java with Eclipse: Chenxian Bo (turbochen@163.com) Cyberon Technology in November 2003 Preface recently, eclipse open source project has finally launched the 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 sending panel, below is its sketch: This panel includes senders, recipients, mail topics, mail content, and send and clear buttons, enters the 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 (in the above figure, the container component is a jframe), VE will indicate the location of your current mouse in the appropriate form. Tell us in the picture in VE, now at the center of BorderLayout, then click once at this location, and we choose a good Java component to place it. With the VE design program interface, you can switch to the "Source" view to coding the specific code. We don't have to be present here. The explanation before customizing the VE environment, and everyone learned how to use VE to perform visualization Java interface design. In order to adapt to different developers, VE also provides some options to allow developers to design your favorite VE environment. Please open the menu "Window" -> "Preference" -> "Java" -> "Visual Editor", which appears in VE's various preferred interfaces. This interface is still an English interface because the author is published earlier than VE earlier than VE. Here, the preferred item of VE is divided into three categories: "APPEARANCE", "Code Generation", "Pattern Style". The following combined with graphics, respectively: 1. Appeaance setting: This content can be set in this panel: (1) Set the layout of the visual editor and the source editor, one is the upper and lower separation layout, the other is the layout for switching with the page (I.e., the style seen in this example figure). (2) Set whether to display the "Properties" view and "Java Beans" view. (3) Set the interface style when designing the design. 2. Code Generation Settings This panel includes the following: (1) Set whether to generate a comment and try {} ... catch () blocks for new expressions. (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) VE to access the Java Bean code style. (2) Try used in the initialization method of VE. VE is currently provided with support for Java component code generated by other IDE product visual editing editors such as JBuilder, NetBean. Summarize the text to this, we are installed from VE to the Java component design and the VE environment setting, basically has a comprehensive understanding of the Eclipse's new tool Visual Editor. With Visual Editor, all our development work, from the graphical user interface to business logic, all can be done on the Eclipse platform.
