474 WebSphere Studio Application Developer Version 5 Programming Guide Table 14-1 User interface classes Clicking Finish creates the new CustomerGUI class and opens the Visual Editor. Figure 14-5 shows the new class CustomerGUI in the Visual Editor. Figure 14-5 Visual Editor for a new class Name Swing class AWT class Description Frame javax.swing.JFrame java.awt.Frame A Frame is a top-level window with a title and a border. Panel javax.swing.JPanel java.awt.Panel Panel is the simplest container class. A panel provides space in which an application can attach any other component, including other panels. Applet javax.swing.JApplet java.awt.Applet An applet is a small program that is intended not to be run on its own, but rather is embedded inside another application, for example a Web browser. Other Any superclass, probably inheriting from one of the Swing or AWT classes Choose your own superclass. Chapter 14. Developing GUI applications 475 Open an existing class with the Visual Editor Alternatively, you can open any other Java class with the Visual Editor by using the context menu. Select the class and Open With -> Visual Editor (Figure 14-6). Figure 14-6 Open With context menu Visual Editor look and feel The Visual Editor consists of three panes with views (Figure 14-7): A graphical canvas is located in the top section of the Visual Editor. This is the Design view, where you compose the GUI. The source file is displayed beneath it, in the Java editor, respectively, the Source view. The Source view is an embedded version of the standard Java editor included with Application Developer. Here you can set breakpoints in the source, use content assist, and benefit from all the other functions available with the Java editor. The section “Programming assists” on page 115 provides more information about the Java editor in Application Developer. A palette of common JavaBeans is available on the left, that allows you to control the selection of JavaBeans in the design pane and also lets you add new JavaBeans. Each area is separated by split bars that can be selected and moved to new positions so that you can make the most out of the available space. Note: The big dot in front of the Visual Editor menu item of the context menu indicates that the last editor used was the Visual Editor. 476 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-7 Visual Editor layout When the Visual Editor is launched, some additional views open automatically: The Java Beans view, in the bottom left corner of the workspace, displays the structure of the JavaBeans in a tree view. The Properties view lets you view and modify attribute settings. The Properties view is opened in the same pane where the Outline view is located, by default, on the right-hand side of the workspace. Figure 14-8 shows the default Workbench of the Visual Editor, including the Java Beans view and the Properties view. Tip: Clicking the Overview button, which is located at the bottom right corner of the Design view, brings up a new subpane where you can navigate to a specific section on you GUI. This is practical when you work with larger GUIs. Design Source Bean Palette Chapter 14. Developing GUI applications 477 Figure 14-8 Workbench of the Visual Editor Tip: By double-clicking the class name tab, CustomerGUI.java, the Visual Editor is resized to the size of the Workbench. This allows you to maximize your work area. 478 WebSphere Studio Application Developer Version 5 Programming Guide Customizing the appearance of the Visual Editor You can also customize the appearance of the Visual Editor. By default, the Visual Editor shows the Design and the Source views on a split pane. If you click the down arrow located in the center right of the separator between the Design view and the Source view, the Design view will be maximized to allow you to work with a large area for the JavaBeans (Figure 14-9). Figure 14-9 Design and Source view You can hide the bean palette by clicking the left arrow button on the separator to the right of the palette. You can also change the default appearance of the Visual Editor by modifying its preferences. If you prefer to have more space to work in, you can choose to stack the Design and Source views rather than tiling them. You can also choose to show or hide the bean palettes by default. Click Window -> Preferences , open the Java tree and select Visual Editor . This will bring up the Visual Editor preferences (Figure 14-10). Maximize the Design view or maximize the Source view Hide the bean palette Chapter 14. Developing GUI applications 479 Figure 14-10 Visual Editor Preferences The section Show the Visual Editor and Source Editor allows you to choose if you want to stack the Visual Editor and the Source Editor or to split them. If you choose to stack the Design and Source views, you can switch between them by clicking the Design and Source tabs that now appear in the editor area (Figure 14-11). The check box with palette in editor part indicates if the Palette view with the JavaBeans will be displayed in the Visual Editor or not. Figure 14-11 Visual Editor and Source Editor tabs 480 WebSphere Studio Application Developer Version 5 Programming Guide The Generate a comment for new expressions check box in the Visual Editor preferences helps you as a user to distinguish which methods have been generated by the Visual Editor. When this option is enabled, a comment //Generated will be put at the end of any new statements generated by the Visual Editor. The Generate try{}catch{} block check box will generate, if enabled, a try{} catch{} statement in your source code when modelling JavaBeans. The Source Synchronization Delay settings can be changed to change the delay time that is used to make updates from the Java Beans model to the source code from its initial value of 500 milliseconds. Making updates from the source code to the Java Beans is initially set to a larger factor. See “Code synchronization” on page 483 for more information according the synchronization between the source model and the JavaBeans model. You have to close and reopen an existing Visual Editor to see the changes. Changing the default Java Editor Application Developer provides two editors for editing Java source files: Java editor (text-based) Visual Editor By default, when you create a new Java class, the Java editor opens. When you open an existing .java file, the editor that you last used for editing that file opens. To change the default editor that opens for .java files, click Window -> Preferences , expand the Workbench category and select File Associations (Figure 14-12). Select .java from the File types list and select the editor that you want to set as default, then click Default . In the next section we show how to work with the Visual Editor and its JavaBeans. Chapter 14. Developing GUI applications 481 Figure 14-12 File associations Working with the Visual Editor When you created the class CustomerGUI, Application Developer created a small gray square in the Design view (Figure 14-5 on page 474) and the following code skeleton in the Source view (Figure 14-13). Figure 14-13 CustomerGUI code skeleton package itso.gui; import javax.swing.JPanel; /** * @author IBM Itso * * */ public class CustomerGUI extends JPanel { public static void main(String[] args) { } } 482 WebSphere Studio Application Developer Version 5 Programming Guide Resizing a JavaBean component After creating the new Visual class, we build a GUI with the Visual Editor. The first step is to resize the JPanel. The canvas lets you select Java beans. To resize the JPanel, select the panel (the little square) and use the mouse to move and resize it. To make the JPanel larger, move the cursor over its bottom right edge so that it becomes a southeast arrow, then left-click and move the cursor to the desired size, and finally release it. After performing this action your JPanel should look like Figure 14-14. Figure 14-14 Resized JPanel Once you have resized the panel, Visual Editor synchronized the changes with the source editor. A constructor and an initialize method have been added to the sample class including the line of code that sets the new size for the panel. The initialize method is called from the CustomerGUI constructor. Chapter 14. Developing GUI applications 483 The new source code should have changed now and displayed in the Source view, as shown in Figure 14-15. Figure 14-15 CustomerGUI source code after resizing Code synchronization When you are working with the Design and the Source views, this forces Visual Editor to maintain both internal modules: The representation of the JavaBeans, used in the Design view, the Properties view, and the Java Beans view The source that represents the code package itso.gui; import javax.swing.JPanel; /** */ public class CustomerGUI extends JPanel { /** * This method initializes * */ public CustomerGUI() { super(); initialize(); } public static void main(String[] args) { } /** * This method initializes this * * @return void */ private void initialize() { this.setSize(310, 180); } } // @jve:visual-info decl-index=0 visual-constraint="0,0" Tip: The bold highlighted statement this.setSize(310, 180); indicates the code which has been added to the class when resizing the panel. The setSize method resizes a component with the two parameters, width and height. . 474 WebSphere Studio Application Developer Version 5 Programming Guide Table 14-1 User interface classes Clicking Finish creates. menu indicates that the last editor used was the Visual Editor. 476 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-7 Visual Editor layout When the Visual Editor is. of the Workbench. This allows you to maximize your work area. 478 WebSphere Studio Application Developer Version 5 Programming Guide Customizing the appearance of the Visual Editor You can also