WebSphere Studio Application Developer Version 5 Programming Guide part 52 pptx

484 WebSphere Studio Application Developer Version 5 Programming Guide As you make changes to either the Design view or the Source view, Visual Editor will maintain the other model for you by performing synchronization. The status of the synchronization of the two models can be seen on the right-hand side of the status bar at the bottom of the Workbench window (Figure 14-16). Figure 14-16 Synchronization status - In Sync There is a performance overhead associated with synchronizing the two models, so the processes to do this are run in background threads on a delay timer. If changes are made to a model, by either manipulating the Java beans in a view or by editing the source, the other model needs to be updated or it will no longer be synchronized. To show that the models are not synchronized, the status label changes from In Sync to Out of Sync (Figure 14-17). Figure 14-17 Synchronization status - Out of Sync After a period of inactivity, for example when you have stopped typing code in the editor, synchronization will occur. While synchronization is taking place the flashing arrow will show the direction the update is occurring. For example, the up arrow represents changes from the source to the Java beans model, and the down arrow vice versa. You can also disable synchronization by pressing the pause button between the two arrows. This is a good idea when you wish to make a number of large changes to the source without incurring the overhead of the synchronizer. While the source code is being parsed and analyzed, the synchronizer may determine that the source contains errors, and rather than trying to update the JavaBeans model, it will wait for the errors to be corrected. If this occurs the button will become pressed automatically and the graphic will be changed to this symbol: Note: While the synchronizer is paused, you can make changes to the source without any overhead of parsing source, but you can no longer make changes to the JavaBeans model. All changes in the Design view, the Java Beans view, or the Properties view will not be applied. Chapter 14. Developing GUI applications 485 Add JavaBeans to a visual class The next steps are to add two more JPanels on our existing panel and change their properties. This allows us to place and align the Swing components in a very flexible way. To add another JPanel, follow these steps:  Left-click the JavaBean on the palette view that you want to add. In this case, select the JPanel item from the Swing containers list (Figure 14-18). The background area of the selected bean in the palette view is shaded. Do not hold down the mouse button. Figure 14-18 Palette view - Swing containers  Move the mouse pointer to the Design view and somewhere over the gray panel and click the mouse button again to drop the bean (Figure 14-19). Figure 14-19 Drop a JavaBean on the panel The Design view should now look like shown in Figure 14-20. The additional JPanel has been placed on the top of the main panel. 486 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-20 Sample GUI: stage 1 Now we want to add a second JPanel to our GUI. This time we use another technique:  Select the JPanel item from the Swing containers selection in the Palette view.  Drop the panel on the this object in the Java Beans view (the top element of the tree). Figure 14-21 shows where to point the mouse cursor to drop the panel. Figure 14-21 Adding a JavaBean by using the Java Beans view A more detailed description about the Java Beans view and how to work with this view is provided in the next section “Working with the Java Beans view” on page 490. So far we have shown that there are two ways to add a component to the GUI:  Select a component and drop it on the Design view  Select a component and drop it on the Java Beans view Chapter 14. Developing GUI applications 487 Figure 14-22 shows the sample GUI—including both JPanels—in the Design view. Figure 14-22 Sample GUI: stage 2 Once in a while you should save your work by pressing Ctrl-S. Working with the Properties view By selecting a JavaBean in the Design view, its properties are listed in the Properties view. The list of properties comes from the inspection of the JavaBean. The properties list of the resized JPanel—which is actually root object in the Java Beans view—are shown in Figure 14-23. To select the JPanel and display its properties, simply left-click somewhere in the gray pane of the Design view. The Properties view allows you to view and edit their values. When you change a value in the Properties view, the Design and Source views are updated. For example, you can change the size values and see the panel adjust in the Design view. 488 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-23 JPanel properties Some properties have a restricted set of enumerated values, which means that you cannot change the value in the text field of the Properties pane, but instead pick a value from a list. Examples of property editors that use enumerated lists are:  java.lang.Boolean and boolean  java.awt.Cursor  java.awt.LayoutManager In our sample GUI, we want to change the layout property of our JPanel from its initial value FlowLayout to the value GridLayout . Therefore, click in the cell which contains the value FlowLayout and click the drop-down button to open the value list and select GridLayout . Figure 14-24 shows the list of the layout property. Chapter 14. Developing GUI applications 489 Figure 14-24 Layout properties of the JPanel Java Bean A GridLayout places components in a grid of cells. The GridLayout is the one of the more powerful (and more complex) layouts. Each component takes all the available space within its cell, and each cell has exactly the same size. Notice how the two panels take up half the space in the Design view after the change. For more information according the GridLayout and layout components in general, see Sun’s Java Web site: http://java.sun.com/docs/books/tutorial/uiswing/layout By clicking the drop-down arrow located right to the Properties view title—as shown in Figure 14-25—a menu opens where you can filter the Properties you want to be displayed in the Properties view. Figure 14-25 Properties view filter Note: Some properties, for example the GridLayout value for the layout property shown above, are themselves JavaBeans. This means that you can expand these beans to view and change their properties. This also applies if the nested properties are JavaBeans as well. Tip: The right angle bracket > in front of a property item in the Properties view indicates that the property has been changed from its default value. 490 WebSphere Studio Application Developer Version 5 Programming Guide  Selecting Show null values on the menu lets you distinguish between a property with a null value and one with an empty value. Null values are indicated by displaying <null>.  Show set values toggles the right angle bracket > in front of the modified properties off  Show read only properties displays additional properties that you cannot change. Next we take a closer look at the Java Beans view. Working with the Java Beans view We have seen that the Java Beans view can be used to add beans to your GUI. The Java Beans view also provides you with a tree view of all the components that are used in the class that you are composing. The Java Beans view supports you in accomplishing these tasks:  Selecting a JavaBean  Renaming a JavaBean  Moving a JavaBean  Deleting a JavaBean The selection between the entries in the Java Beans view and those in the Design view is synchronized both ways, so if you select an item or multiple items in the Design view, then they are also selected in the Java Beans view. Also, in the Java Beans view, the icon shown for the entry is the same icon that is used in the palette to represent the bean type. Now we want to rename both JPanels we have created in the previous step. To do this, we open the context menu of the jPanel component as shown in Figure 14-26 and select Rename Field . Tip: The Java Beans view provides an easy way to select and move an object in the Visual Editor. As you start laying components in the Visual Editor, it may be hard to drop a component in the target container in the Design view. Using the Java Beans view helps you also to see what visual components contain other visual components. Chapter 14. Developing GUI applications 491 Figure 14-26 Context menu of a bean in the Java Beans view If we have not saved our file yet, the dialog shown in Figure 14-27 comes up. Click OK to save the file CustomerGUI.java and close the dialog. Figure 14-27 Save all modified resource dialog The Refactoring dialog comes up next. The section “Refactoring” on page 122 provides a detailed description of the refactoring process in Application Developer. Enter jPanelLeft in the new name field (Figure 14-28), leave the other default values in the refactoring dialog as they are, and click Finish . Note: The context menu item Delete allows you to delete the selected JavaBean. By deleting a bean, the Design view and the Source view will be updated and synchronized appropriately. 492 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-28 Refactoring: rename field dialog The Design view and Source view will be synchronized by Application Developer and the code will be changed appropriately. Repeat the refactoring step for the bean jPanel1 and rename it to jPanelRight. The Java Beans view should now look as shown in Figure 14-29. Figure 14-29 Java Beans view with renamed panels Extending the sample GUI In this section we want to improve our sample GUI and add the remaining beans to it. First we want to change the layout property of our two new panels. We change the layout of both panels in the Properties view from FlowLayout to the GridBagLayout as shown in Figure 14-30. Tip: Moving a JavaBean by using the Java Beans view is very simple. Select a bean, move it to the appropriate spot in the tree, and drop it there. When moving a bean, a horizontal line is displayed. This line helps you locate the exact position where you want to drop the bean. Chapter 14. Developing GUI applications 493 Figure 14-30 GridBagLayout property Designing the left panel Now we add a JLabel bean on our jPanelLeft panel. This bean is a display area for a short text string or an image, or both. To add the label, select the JLabel bean from the Swing components of the Palette view and drop it onto the jPanelLeft (Figure 14-31). Alternatively, you can drop the label into the left panel in the Design view. Figure 14-31 Adding a JLabel to the panel Rename the jLabel to jLabelCustomerList and change the Text property from JLabel to Customer List (Figure 14-32). Modifying the text property changes the text of the label which is displayed on the GUI. Figure 14-32 Text property Tip: The GridBagLayout is a flexible layout manager that aligns components vertically and horizontally, without requiring that the components be of the same size. . appropriately. 492 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-28 Refactoring: rename field dialog The Design view and Source view will be synchronized by Application Developer. additional JPanel has been placed on the top of the main panel. 486 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-20 Sample GUI: stage 1 Now we want to add a second. the size values and see the panel adjust in the Design view. 488 WebSphere Studio Application Developer Version 5 Programming Guide Figure 14-23 JPanel properties Some properties have a restricted