WebSphere Studio Application Developer Version 5 Programming Guide part 51 pptx

Open an existing class with the Visual EditorAlternatively, you can open any other Java class with the Visual Editor by using the context menu.. Select the class and Open With -> Visual

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

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

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

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

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

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

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

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

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

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)

package itso.gui;

import javax.swing.JPanel;

/**

* @author IBM Itso *

*

*/

public class CustomerGUI extends JPanel {

public static void main(String[] args) { }

}

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

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:

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