A graphical tool for building a graphical interface
Level: Intermediate
David Gallardo
(David@gallardo.org) Software Consultant June 2004
Similar to many Eclipse.org projects, the Target of the Visual Editor project is to build a tool for building a tool (here is a tool for building a graphical user interface). The most interesting thing about Visual Editor project is that it has released a reference implementation. Visual Editor Version 0.5 is a GUI builder for building a AWT / Swing application, which is a long-awaited Eclipse feature. If you are going to be released soon, you will increase the support for SWT in version 1.0 submitted in mid-2004. In this article, you will get an overview of Visual Editor and its back technology, as well as a short exemplary for the feature of the AWT / Swing application, and previews for SWT support in Visual Editor 1.0.
Eclipse Visual Editor project introduces any discussion clues about the advantages and disadvantages of Eclipse and its competitors, you will find information about the various features, these features are in terms of perspective, or completely lacking. Until recently, for Eclipse, things that seem often to be filed are it lacking the GUI builder: a graphical tool for building a graphical user interface. It is worthy of the Eclipse Visual Editor project initiated in November 2003 and the rapid release of Visual Editor 0.5, this situation has been compensated. Visual Editor 0.5 allows you to create an AWT / SWING application via a complete WysiwyG (see what you get).
Similar to Eclipse itself, Visual Editor is also based on IBM's code contribution. Developers who are familiar with WebSphere Studio Application Developer 5.x will find that Eclipse's Visual Editor is almost identical. To learn how to use Visual Editor, see the WebSphere Studio Visual Editor document, which is listed in the reference information at the end of this article.
Similar to many other items (including Eclipse) under Eclipse.org, the target determined by the Visual Editor project is very magnificent: Build a tool for building a graphical editing tool. Although the initial release of AWT / SWING has been completed, the Plan of Visual Editor is far from here. The technical foundation is being redesigned, making it unrelated to programming languages and supported graphics tools.
In the future, you will see other Visual Editor implementations other than AWT / SWING implementation (such as SWT), as well as potential implementation (such as C ) in addition to the Java language. The work on adding SWT support is already in progress, in fact, this will be included in the Visual Editor version 1.0, which is scheduled to be completed in the same period of Eclipse 3.0 in 2004.
The first concrete implementation of Visual Editor, as a GUI builder for AWT / SWING, is already satisfactoring for GUI developers, but if you are the kind of development People can also see many things: Visual Editor uses some very interesting technologies, which are useful. If you are interested in building your own graphical editor or interested in tools, the existing Visual Editor implementation is just a clue for what you can complete. The most obvious tool used by Visual Editor is GEF, a graphical editing framework. GEF is built on the local Eclipse graphics tool set SWT so that it is easier to develop a graphical editor or the desired text editor. If you are familiar with SWT (or AWT / Swing, in this regard there are similar graphics, you will know that any shape (such as rectangles, arrows, and ellipses) is more difficult, not to say Manage the relationship between them and the data model they represent.
GEF is divided into two parts: The first part is a Draw2D plugin, which is a lightweight drawing and presentation package to help you draw graphics. The second part is the GEF plug-in, in addition to other tools, this part also adds a selection and creation tool, tool tab, and a controller framework for mapping between data models and views.
GEF is a model-independent frame, but as part of Visual Editor (and other graphical tools), it uses the Eclipse Modeling Framework (EMF) in the background to model, Java class, and graphicalization The representation is mapped, where the model is stored internally using XML metadata interchange, XMI). One of the important features of EMF is that it ensures that all of these mappings are one-on-one; so, although XMI can be considered a model of the model, it is not lost in code and graphics. This is why Visual Editor only needs to save a model (ie Java source code), and the developer can freely edit the source code outside the graphical editor.
To learn more about GEF and EMF, see the links in this article in the section.
Developing the AWT / SWING application using the Visual Editor, as mentioned earlier, currently available version 0.5 is a complete AWT / Swing GUI builder. It works with Eclipse 2.1.x and is not inferior to the GUI builder in other IDEs. First, it generates high quality code that can be comparable to a manual development code with an experienced GUI developer and does not bring a special workpiece that makes modifications become difficult. Second, its powerful analysis capabilities allow full code to turn back, so the modification of the source code is almost immediately reflected in the graphical editor.
One of the most boring tasks is one of the most boring tasks to manage the location of the component using the Layout Manager. Because Visual Editor is a graphical editor you see, so it is easy to get the appearance and behavior you want in the user interface. Moreover, because it can automatically map between different layout managers, you can use a NULL layout to create your application appearance and then switch to a grid unit (Grid-Bag) layout. Using the NULL layout can easily accurately obtain the layout you want, the raster unit layout allows the layout to operate well when the window size changes. In the following sections, we will quickly browse Visual Editor 0.5 and some of its most interesting features. If you want to do with practice, you need to install Eclipse 2.1.x and Visual Editor 0.5. Moreover, Visual Editor also requires two additional plugins, ie EMF and GEF. For download links and installation information, see Resources Sections.
The Visual Editor tool After you have installed the Visual Editor, you will find some new features when you create a new Java project next time. Suppose you have created a project called Vepexample. If you right-click the item name in Package Explorer and select New from the context menu, you will see a new option for creating a Visual Class. Clicking this option will pop up a familiar dialog, but has a new name: "Create a new java class useing the Visual Editor". You will also notice that there are multiple radio buttons and a check box for selecting parent class. In general, you will create a JPANEL to include the UI element of the application, then add the panel to JFrame. For short, here will create a framework and add an element directly to it. For more information on developing Swing applications, see the series tutorials listed in the reference information section.
Enter a name for this class, such as Test, and make sure "frame" and "swing" are selected in the "Which Visual Class Would you like to extend?" Area. In addition, main () is also enabled (as shown in Figure 1) in "Which Method Stubs Would You Like to Create?".
Figure 1. Creating a new visual class
After selecting, press Finish to create a visual class and open it with Visual Editor. You will notice that Visual Editor has three different parts with a regular Java editor. The top is a graphical editor, which displays a possible shape of your visual class at runtime. 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. Edit Swing class with Visual Editor
By scrolling the source code and find the initialize () method, you can see the interaction between the source code and the graphical view (). Method is used to set the initial size of the application window:
Private vidinitialize () {
THIS.SETSIZE (300, 200);
THIS.SETCONTENTPANE (GetjContentPane ());
}
If the first number (ie, width) is changed to a new value, such as 600, you will see that the graphical representation of the above will change the width to reflect this new value. If you are doing a lot of source code, you can click the STOP Round Tripping button in the Eclipse status bar to close the synchronization; otherwise, the editor may become no longer in the same reaction. In addition to Visual Editor, you will notice that there are two new views in the Java perspective: the Java Beans view at the lower left and the Properties view located on the uppermost part. You may know that one of Swing's design features is that each component, such as the framework you just created, and any other window components added above it, are a Java Bean. The Java Beans view allows you to easily navigate to these components in the class. Initially, in "this" (referring to the only entrance below the Class in Visual Editor) is JCONTENTPANEL. You may know that you don't add components directly to JFrame, but add components to its content panel. Click JCONTENTPANEL to point to the getjcontentPanel () method in the frame class (see Figure 3).
Figure 3. Java Beans view
Another view added to the Visual Editor is a Properties view, which shows the properties of a Java Bean. Here, after, for example, Javabeans View Select JContentPane, you can change the layout manager it uses. (Before doing this, you may want to browse the source code in the Editor window, check it by calling the JContentPane.setLayout () method with a Java.awt.BorderLayout object.) Some properties allow You will be free to enter text, but other properties provide a more appropriate interface; use a drop-down list for layout management, allowing you to choose from in a valid layout manager. Click Distribution Value BorderLayout and scroll up the displayed list and select the NULL layout manager (see Figure 4).
Figure 4. Select NULL Layout Manager
After making this change, you will see in the source code, JContentPane.setLayout () is now called by a NULL value. If you want you to confirm that the interaction between the Properties view and Editor can work in both directions, you can try null to replace NULL back to new java.awt.BorderLayout () in the source code, and confirm that in the Properties view This value automatically changes.
Creating and Enabling User Interfaces Once a frame has been created for your application, you can start adding a window component to allow users to interact with your application. Let's add a check box for switch messages. First, click the JCheckbox window component and click within the frame in the graphical editor. If you are using Null Layout Manager, you will notice anywhere in the content panel; if you are using BorderLayout, you can choose to place it in the north, south, eastern, western or middle.
Next, click Next in the check box added to the JLabel window part and add in the previously added. Use the Properties view to change the text to "unchecked", then adjust the size of the text box so that the text can be in a great way. (Another method is to extend the box first, click on the upper left corner; this will open a text domain, where you can type text.) Now, if you prefer, you can use the adjustment tool (Alignment Tool) to organize window parts. . Select them by pressing the Control key and click Each component, then click the Show Alignment Window button and the Align Top button, as shown in Figure 5.
Figure 5. Align the components using the adjustment tool
Now, your framework should look similar to Figure 6.
Figure 6. Frame with two widgets
If you start running the app now, there is of course too much thing. You can click the check box to turn it on or off, because Swing will be responsible for this matter, but if you want it to do something, you also need to add some code. If you are familiar with the swing event model, you know that you need to add an activity listener to the check box, so that whenever the user changes it, the listener can perform actions. To add a listener using Visual Editor, right click on the check box in the graphical editor and select Events> Action Performed from the displayed context menu. This will add the code that implements the activity listener of 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 (45, 75, 21, 21);
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;
}
You can see that a TODO annotation has been identified using a place where you need to add code. Let us change the code so that whenever the check box changes, the label next to it changes to reflect the status of the check box. After you make 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");
}
});
It's time to test the application now.
Running Visual Classvisual Editor allows you to easily launch Java Beans without having a main () class. This will be particularly convenient when you are testing a component (such as JPANel), and the component is sometimes convenient to eventually separate it. To start the simple test application you created in this way, make sure Test.java has been selected in Editor, then select Run> Run as> Java Bean from the Eclipse main menu. Another method is that because this is a JFrame, you can also run Test as a Java application by completing the main () method below to run TEST as a Java application:
Public static void main (String [] args) {
Test test = new test ();
Test.setDefaultCloseOperation (EXIT_ON_CLOSE);
Test.setVisible (TRUE);
}
Select Run> Run As> Java Application from the main menu to run it. Whether you run it in any way, you should see that the label changes accordingly whenever you click the check box.
If you don't follow the practice in Eclipse, you want to see the code, you can download it using the links provided in the reference.
Understanding SWT Support in Visual Editor 1.0 provides a preview for SWT support when writing this article. Although the final version may be different. Here we will quickly learn, but pay attention to if you are using an updated version, you may need to make adjustments.
When you download a non-release version (Non-Release Build) Visual Editor 1.0, for example, the I20040325 integration version (Integration Build) used here, you also need to download the appropriate Eclipse, EMF, and GEG version (Build). These don't have to publish the release building, and you cannot mix and match the version. VEP Download Page (see Resources) Which versions you need to specify and include links to these versions.
When Eclipse, Visual Editor, EMF, and GEF are installed, starting Eclipse and creates a new Java project. To use SWT, you need to add the SWT library to the Java build path of the project. Right-click on the item and select Properties> Java Build Path. Click the Libraries tab, click the Add library button, select Standard Widget Toolkit (SWT), and then click Next. In the next dialog, accept the default "Use Platform Swt Level" and click Finish. Click OK to close the Properties dialog.
Like the previous, create a new Visual Class by right-clicking on the item and selecting New> Visual Class. Enter names for this class, such as SWTTest. However, "Frame" is not selected here as the visible class to be extended, but the "Other". In addition, you must also ensure that the parent class is java.lang.object, and check the box next to the main () method (see Figure 7) in "Which Method Stubs Would You Like to Create?". Figure 7. Creating a SWT visible class
The canvas that starts, the graphics editor is empty. In order to create an application, you will need to add a SWT Shell. You should find that the selection item of the SWT window component (except for the AWT and SWING widgets) in the Window Parts Options panel on the left side of Visual Editor. Click the shell and click and drag on the canvas to create an application window (see Figure 8).
Figure 8. Add the SWT Shell to the graphical editor
Now you can add a window component for the shell. Here I just add a single text domain. Click Text and click and drag in the shell to place the text. Click on the top left corner of the domain to add some text, such as "Hello, SWT!".
Figure 9. Hello, SWT!
After completing these steps, you will find that Visual Editor has created a Createsshell () method, which initializes the shell as follows:
Private void createsshell () {
SSHELL = new org.eclipse.swt.widgets.shell ();
Text = new org.eclipse.swt.widgets.text (sshell,
Org.eclipse.swt.swt.none;
sshell.setsize (new org.eclipse.swt.graphics.point (209, 85));
Text.setBounds (new org.eclipse.swt.graphics.Rectangle (23,
9, 153, 27));
Text.setText ("Hello, SWT!");
}
Next, we need to add some code to the main () method to instantiate the class and run the SWT code:
Public static void main (String [] args) {
SWTTEST TEST = New SWTTEST ();
Display display = new display () and DISPLAY ();
Test.createsshell ();
Test.sshell.open ();
While (! test.sshell.isdisposed ()) {
IF (! display.readDispatch ())
Display.sleep ();
}
System.out.println ("Finishing ...");
Display.dispose ();
}
After you type these code, you can right click in the source window and select Source> Reorganize Imports to resolve the reference to Display.
In order to run the app, you will need to add a platform-specific SWT shared library or DLL to your path. One way is to use the start configuration. Select Run> Run from the Eclipse main menu, and then click the Arguments tab in the displayed dialog. In the VM Arguments box, add a -D parameter with library paths; in Windows, if you have installed Eclipse to C: / Eclipse, then complete parameters will be: -djava.library.path = C: / Eclipse / plugins / org.eclipse.swt.win32_3.0.0 / os / Win32 / x86. See Figure 10. Figure 10. Add the path to the Windows Swt DLL to the startup configuration
After entering this parameter, click the RUN to start the SWT application. If everything is correct, the application window will open and with "Hello, SWT!" Message, as shown in Figure 11.
Figure 11. "Hello, SWT!" Application window
Conclusion The Visual Editor item will be added to the Eclipse for a long-awaited GUI constructor. The initial 0.5 versions include support for AWT / SWING, which even makes Eclipse and other IDEs equally in GUI development. The next version 1.0, it is expected to be launched soon and will include SWT support for enthusiastic. In addition to these, others are still uncertain, but due to its reliable technical foundation, many things, including support for other programming languages and tool sets, are possible.
Reference
Download the source code used herein. To download the Eclipse 2.1 and Visual Editor 0.5, as well as the required GEF and EMF plugins, in the Visual Editor Project page located in Eclipse.org, and select the Download Page link below "Developer Resources". Here, Latest Release 0.5.0 is selected under Build Type. You will also find links to the appropriate version of Eclipse, EMF, GEF, and Visual Editor runtime. Download the Ide of Eclipse-based WebSphere Studio trial version under Windows and Linux. Details of Visual Editor in WebSphere Studio Application Developer 5.x from Comparing WebSphere Studio Application Developer WIBSPHERE Studio Application Developer WebSphere Studio Application Developer Weth. To use Visual Editor, you need GEF and EMF plugins. Create an Eclipse-based application (DeveloperWorks, July 2003), use Eclipse Modeling Framework to implement Model Drive Development, Part 1 (DeveloperWorks, March 2004) and Eclipse Development Using the Graphical Editing Framework and the graphical Editing Framework Eclipse Modeling Framework (IBM Red Book, PDF Format) For more information on Graphical Editing Framework, GEF and Eclipse Model Modeling Frame (EMF). For further information on installing and using Eclipse and these plugins, see the Eclipse platform entry (DeveloperWorks, November 2002). Read the Creating a Gui with JFC / SWING tutorial. There are more articles for Eclipse users in the Open Source Project Access area on developerWorks. You can also view the Eclipse technology download on AlphaWorks. Buy the developer bookstore Open source code book for sale. You will find a variety of books about Eclipse, including Eclipse In Action: a guide for Java Developers, David is one of the authors. DeveloperWorks Subscription by using the latest IBM tools and middleware to develop and test your applications: You can customize Websphere, DB2, Lotus, Rational and IBM Tivoli software acquisition, such as the Eclipse-based WebSphere Studio Application Developer for Linux and WebSphere Studio Application Developer for Windows, and a license that can be used within 12 months, all cost is lower than what you imagined.
