Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Technical topics
Evaluation software
Community
Events
Search developerWorks
developerWorks
Open source
Technical library
Editor's note
This article was written in May 2004, when the current version of Eclipse was 2.1. As a result, some details here not up to date, but it remains a basic introduction to the Eclipse Visual Editor project and related libraries. Back to top
Table of contents Editor's note Introducing the Eclipse Visual Editor project Under the Visual Editor hood Developing AWT/Swing applications with Visual Editor The Visual Editor tools Creating and enabling the UI Running a visual class Sneak preview of Visual Editor V1.0 support for SWT Summary Download Resources About the author Comments
would develop by hand, with no special artifacts that make modifications difficult. For another, its powerful parsing abilities allow full round-tripping of code, so changes made to the source code are reflected nearly immediately in the graphical editor. One of the most tedious tasks in building a Swing application manually is managing the placement of components using layout managers. Because it's a WYSIWYG graphical editor, Visual Editor makes it easy to get the appearance and behavior you want in your user interface. Also, because it can map automatically between different layout managers, you can create your application's appearance using a null layout, which lets you get exactly the layout you want easily, then switch to a grid-bag layout, which allows the layout to behave well when the window is resized. In the following sections, we'll take a quick look at Visual Editor V0.5 and some of its most interesting features. You'll need to have Eclipse V2.1.x installed together with Visual Editor V0.5. In addition, Visual Editor requires two other plug-ins: EMF and GEF (see Resources). Back to top
ruby schemas security service services soa soa_(service-... soap_(simple_... spring standards standards_and_... tips web web_2.0 web_authoring web_developmen... web_services websphere wsdl_(web_serv... xhtml_(extensi... xml xpath_(xml_pat... xquery_(xml_qu... xslt xslt_(xsl_tran...
Skill-building guides for open source, Linux, cloud, Java, business analytics, and more. Special offers
After you make your selections, select Finish to create the visual class and open it using the Visual Editor. You'll notice that unlike the regular Java editor, the Visual Editor has three distinct sections. At the top is a graphical editor that shows what your visual class will look like when rendered at runtime. To the left is a list of widgets you can drag and drop onto your application. At the bottom is the source code. Figure 2. Editing a Swing class with the Visual Editor
converted by Web2PDFConvert.com
You can see the interaction between the source and graphical views by scrolling through source and finding the initialize() method, which sets the initial size of the application window:
private void initialize() { this.setSize(300, 200); this.setContentPane(getJContentPane()); }
If you change the first number, the width, to a new value such as 600, you'll see that within a moment, the graphical representation above it will change width to reflect this new value. If you are making a lot of source code changes, you may wish to turn off synchronization by clicking the Stop Round Tripping button on the Eclipse status bar; otherwise, the editor may not be as responsive as you'd like. In addition to the Visual Editor, you'll also notice two new views in your Java perspective: a JavaBeans view at the lower left and a Properties view at the upper right. As you may know, a design feature of Swing is that each component, such as the frame class you just created and any other widgets you add to it, is a JavaBean. The JavaBeans view allows you to navigate to these components in your class easily. Initially, the only entry below "this" (which refers to the class currently in the Visual Editor) is the jContentPanel. As you may know, you don't add things directly to a JFrame, but instead to its content panel. Clicking jContentPanel will take you to the getJContentPanel() method in the frame class. Figure 3. The JavaBeans view
The other view that the Visual Editor adds is the Properties view, which displays a JavaBeans' properties. Here, for example, after selecting jContentPane in the JavaBeans view, you can change the layout manager it uses. (Before you do, you may want to take a look at the source code in the Editor window to see that it sets the layout manager by calling jContentPane.setLayout() with a java.awt.BorderLayout object.) Some properties allow you to enter free text, but others provide a more appropriate interface; the property for the layout manages uses a drop-down list to limit you to valid layout managers. Click on the default value, BorderLayout, and then scroll up the list that appears to choose the null layout manager. Figure 4. Selecting a null layout manager
converted by Web2PDFConvert.com
After making this change, you'll see that in the source code, jContentPane.setLayout() is now called with a null value. To prove to yourself that the interaction between the Properties view and the Editor works both ways, you might try changing the null in the source code back to new java.awt.BorderLayout() and check that the value changes automatically in the Properties view. Back to top
Your frame should now look something like Figure 6. Figure 6. A frame with two widgets
If you were to run this application at this point, not much would happen, of course. You'd be able to click the checkbox on and off because Swing takes care of that for you, but to have it actually do something, you'll need to add some code. If you are familiar with the Swing event model, you know that you need to add an action listener to the checkbox so that whenever the user changes it, the listener can perform some action. To add a listener using the Visual Editor, right-click the checkbox in the graphical editor and select Events > Action Performed from the context menu that appears. This will add the code for an action listener, implemented as an anonymous class, to the initialization code for the checkbox:
private javax.swing.JCheckBox getJCheckBox() { if (jCheckBox == null) { jCheckBox = new javax.swing.JCheckBox(); jCheckBox.setBounds(45, 75, 21, 21); jCheckBox
converted by Web2PDFConvert.com
.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; }
As you can see, where you need to add code with a TODO annotation is identified. Let's change the code so that whenever the checkbox changes, the label next to it changes, too, to reflect the checkbox's state. This is what the new code should look like after you make the change:
jCheckBox .addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent e) { jLabel.setText( jCheckBox.isSelected() ? "Checked" : "Unchecked"); } });
Select Run > Run As > Java Application from the main menu to start it. Whichever way you run it, you should see that as you click the checkbox, the label changes correspondingly. If you haven't been following along in Eclipse, but want to see what the code looks like, you can download it (see Resources). Back to top
converted by Web2PDFConvert.com
Initially, the graphical editor canvas will be empty. To create an application, you'll need to add an SWT Shell. You should find that the widget palette on the left of the Visual Editor contains a selection of SWT widgets (in addition to the AWT and Swing widgets). Click Shell, then click and drag on the canvas to create the application window. Figure 8. Adding a SWT shell to the graphical editor
Now you can add widgets to the shell. Here we'll just add a single text field. Click Text, then click and drag in the shell to place it. Click in the top-left corner of the field to add some text, such as "Hello, SWT!" Figure 9. Hello, SWT!
converted by Web2PDFConvert.com
After you've finished with these steps, you'll find that Visual Editor has created a method createSSHell(), 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(); test.createSShell(); test.sShell.open(); while (!test.sShell.isDisposed()) { if (!display.readAndDispatch()) display.sleep(); } System.out.println("finishing..."); display.dispose(); }
After typing this in, you can right-click in the source window and select Source > Reorganize Imports to resolve the reference to Display. To run the application, you need to add a platform-specific SWT shared library or DLL to your path. One way to do this is to use a launch configuration. Select Run > Run... from the Eclipse main menu, then click the Arguments tab in the dialog box that appears. In the VM arguments box, add a -D argument with a path to the libraries. In Windows, if you've installed Eclipse in C:\eclipse, the complete argument will be Djava.library.path=C:\eclipse\plugins\org.eclipse.swt.win32_3.0.0\os\win32\x86. Figure 10. Adding a path to the Windows SWT DLLs to the launch configuration
After entering this argument, click Run to start the SWT application. If all has gone well, the application window will open with the message "Hello, SWT!"
converted by Web2PDFConvert.com
Back to top
Summary
The Visual Editor Project adds the long-awaited GUI builder to Eclipse. The initial version, 0.5, contains support for AWT/Swing and puts Eclipse on even par with other IDEs with regard to GUI development. The next version, 1.0, will contain eagerly awaited support for SWT. Beyond that, nothing is certain, but because of its solid technological underpinnings, many things, including support for other programming languages and toolkits, are possible. Back to top
Download
Name os-ecvisual/test.zip Size Download method HTTP
Resources
Learn Get details about Visual Editor in WebSphere Studio Application Developer V5.x in "Comparing WebSphere Studio Application Developer with VisualAge for Java." To use Visual Editor, you need the GEF and EMF plug-ins. Learn more about Graphical Editing Framework (GEF) and Eclipse Modeling Framework (EMF) in "Create an Eclipse-based application using the Graphical Editing Framework," "Model apps with the Eclipse Modeling Framework, Part 1," and "Eclipse Development Using the Graphical Editing Framework and the Eclipse Modeling Framework" (PDF). Read a tutorial on Creating a GUI with JFC/Swing. Compare and contrast Java GUI toolkits in "SWT, Swing or AWT: Which is right for you?" on developerWorks. Check out the "Recommended Eclipse reading list." Browse all the Eclipse content on developerWorks. New to Eclipse? Read the developerWorks article "Get started with Eclipse Platform" to learn its origin and architecture, and how to extend Eclipse with plug-ins. Expand your Eclipse skills by checking out IBM developerWorks' Eclipse project resources. To listen to interesting interviews and discussions for software developers, check out check out developerWorks podcasts. For an introduction to the Eclipse platform, see "Getting started with the Eclipse Platform." Stay current with developerWorks' Technical events and webcasts. Watch and learn about IBM and open source technologies and product functions with the no-cost developerWorks On demand demos. Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers. Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products. Get products and technologies Learn more about the Visual Editor Project at Eclipse.org. Built on Eclipse, WebSphere Studio provides a flexible, portal-like integration of multilanguage, multiplatform, and multidevice application development tools for building, testing, and deploying dynamic applications. Check out the latest Eclipse technology downloads at IBM alphaWorks. Download Eclipse Platform and other projects from the Eclipse Foundation. Download IBM product evaluation versions, and get your hands on application development tools and middleware products from DB2, Lotus, Rational, Tivoli, and WebSphere.
converted by Web2PDFConvert.com
Innovate your next open source development project with IBM trial software, available for download or on DVD. Discuss The Eclipse Platform newsgroups should be your first stop to discuss questions regarding Eclipse. (Selecting this will launch your default Usenet news reader application and open eclipse.platform.) The Eclipse newsgroups has many resources for people interested in using and extending Eclipse. Participate in developerWorks blogs and get involved in the developerWorks community.
Comments
Add comment: Sign in or register to leave a comment. Note: HTML elements are not supported within comments.
Post
Total comments (1) Hi, where is the NEXT as you said "click the JLabel widget and click Next in the checkbox you added." I could not find it.
Posted by Lamber1 on 13 November 2011 Report abuse
Back to top Print this page About Help Contact us Submit content Share this page Follow developerWorks Report abuse Terms of use IBM privacy IBM accessibility Faculty Students Business Partners
converted by Web2PDFConvert.com