Visual Component Development

Double-clicking any file in the Application, Files, or Document Structure panes opens it for editing in the Edit pane, which changes appearance based on the type of file being edited. For most components , the Edit pane provides both a Design View, for visual development, and a Source View, for code-level development.

As an example, use the Application pane to navigate in the sample application to the Chap2Web/index.jsp file and double-click it. In the Design View tab, the Web page layout of a single text line is displayed.

Right-clicking elements in the Design View displays a pop-up menu (see Figure 2.7); its options vary depending on the type of element being edited. For the line of text in the index.jsp file, these options include the standard Cut, Copy, and Paste as well as options for compiling and viewing this page or the Web application containing this page.

Figure 2.7. This Design View pop-up menu displays common actions to take on a JSP element of a Workshop application.

As an example, in the Edit pane, select the text line and use the right-click menu to copy and subsequently paste the line. The Edit pane automatically inserts a second text line onscreen.

As you develop in the Design View, Workshop automatically creates and updates all corresponding source files. You can then switch to the Source View and edit the code directly to round out the implementation with appropriate business logic or fine-tune the auto-generated code. Moreover, Workshop provides two-way editing so that all changes made in the Source View are reflected in the Design View. This tight coupling between views is accomplished with a Workshop-specific set of javadoc annotations, visible in the comments above the class, attribute, and method definitions in each source file.

To demonstrate this point, in the Design View, double-click the second text line. The Edit pane automatically switches to the Source View and highlights the line of HTML code corresponding to the line on the rendered Web page. Now replace the text inside the <p> and </p> HTML tags with Two-way editing is great. If you flip back to the Design View, you'll see that the second line of text has indeed been changed.

The Workshop environment provides the means to build much more sophisticated components than the JSP just described. As an example, double-click the pageflow .jpf file in the Application pane. The Edit pane then shows two Design View tabs in addition to the Source View: the Flow View and the Action View.

These panes are used to model the operations of an entire Web site, not simply the layout of a single JSP, as in the previous example. The Flow View is used in this case to define the presentation flow of a Web site ”how individual pages are linked. The Action View, on the other hand, shows the Web site's flow of business logic ”how calls to components such as EJBs, Web services, and databases are linked.

Operations that you can perform from the Edit pane fall into four categories, described in more detail in the following sections:

• Adding items directly to the component being developed

• Modifying the properties of existing items

• Defining interactions between existing items

• Linking the component being developed to external items

Adding Items via the Palette

When the Edit pane is visible, the Palette pane, which defaults to the lower-left corner of the window, lists the available items that can be directly added to the component being developed (see Figure 2.8). To add an item, click it in the Palette and then drag it onto the Edit pane. If needed, a dialog box is displayed during this operation, where you can set required properties for the item.

Figure 2.8. The Palette pane is used to add items directly to the component currently being edited.

For Page Flows, the list includes Page and Action items. Each Page item is a JSP. Each Action item is similar to a decision node in a flowchart; it is a point where business logic can be inserted to determine which page to display next .

To add a page to the Edit pane, click and drag the Page item onto the Flow View. A new JSP is displayed with the name newPage1.jsp . To add an action, click and drag the Action item onto the Flow View. Actions require definitions of some properties, so a dialog box opens where you can create a new action or create a copy of one that already exists. For this example, select the Create New radio button and click the OK button. A new action is displayed with the name newAction1 .

Modifying Existing Items via the Property Editor

When you click on any item in the Edit pane, the Property Editor pane, which defaults to the upper-right corner of the window, shows a table with attribute names and values (see Figure 2.9). If a property is editable, it can be updated simply by clicking on the value. Some fields are revised through an editable text field, and some through a pull-down list box. Some attributes are grouped into categories, which can be expanded and minimized with the + or - symbol to the left of the category. If the attribute is particularly complex, clicking on the value opens a dialog box with multiple fields.

Figure 2.9. The Property Editor pane provides an easy, nonprogrammatic way of tweaking settings for the edited component.

The Description section of the Property Editor pane is a valuable reference guide during edit operations. As you click on an item in the Edit pane, a definition of that item is provided. When you click on an attribute in the Property Editor, a definition of that attribute is supplied.

As an example, click on the new action you added to the Flow View. The Property Editor shows a number of attributes. Click on the Name value field, edit the text to read Chap2Action , and press Enter. The label of the new action is automatically changed in the Flow View.

Defining Interactions Between Items in Design View

The Design View pane often has context-specific drag-and-drop functionality to define how items interact with each other.

In the sample Page Flow, clicking on any item and dragging it to a new location simply changes the item's position in relation to the others in the pane. However, when the mouse pointer is positioned immediately above, left, or right of the item or below the label, a faint image of three boxes in a vertical row appears. If you hold down the mouse button and drag toward another item, an arrow linking the items appears. The resulting diagram is shown in Figure 2.10. Note that actions can be linked to both actions and pages, but pages can be linked only to actions. For more details on Page Flows and their interactions, see Chapter 4, "Developing with Page Flow."

Figure 2.10. The Flow View visually represents logical connections between actions and JSPs.

As a second example, double-click index.jsp in the Application pane, and then click the second text line and change its innerText property to some other value in the Property Editor. You can then see that clicking on the second text line and dragging it above the first line does indeed change the order in which the two lines are rendered onscreen.

CONTINUING THE TOUR OF THE IDE

To continue following the tour of the IDE's features, make sure you double-click the Controller.jpf file before continuing to the next section.

Linking Items to External Components via the Data Palette

When the Edit pane is visible, the Data Palette pane, which defaults to the lower-right corner of the window, provides a means of extending an item's business logic with external components (see Figure 2.11). Again, the components that are available to add depend on the type of item being edited.

Figure 2.11. The Data Palette pane is used to link external components to the item currently being edited.

One set of important components that are available almost universally in the Data Palette are controls . Controls are components that encapsulate business logic or access to other back-end resources (such as a database or messaging resources). The motivation behind controls is two-fold:

• Simplify the interface exposed to application developers.

• Provide a mechanism for reuse of application code.

Built-in controls offer simplified access to J2EE components, such as EJBs and Java Message Service (JMS) resources. Custom Java controls can be used to group multiple calls to business logic.

Each control in Workshop is made available as a single Java class, and the complexity is managed by Workshop-specific javadoc annotations. With this strategy, Workshop helps realize one of the primary goals of the Sun Microsystems Java 2 Enterprise Edition: allowing developers to focus on the business logic. All infrastructure code, including deployment descriptors and stub files, are created and managed by the Workshop environment, not the developer.

To add a control to the Edit pane, click the word Add to the right of the Controls heading in the Data Palette and select a control from the pop-up menu. For this example, add a Timer control, one of the easiest to configure. A Timer control notifies an application after a prescribed period of time. In Web application development, it can be used to simulate the delay experienced when waiting for a back-end service to complete its work.

Clicking the Timer control option in the pop-up menu opens a dialog box with a number of required and optional fields. Enter the values for the fields specified on Table 2.4, and click the Create button.

Table 2.4. Insert Control ”Timer Dialog Box Settings

PARAMETER	SETTING
Variable name for this control	Chap2TimerControl
Timeout	5 seconds

As displayed in Figure 2.12, the new control is added to the right side of the Action View pane. In addition, the Data Palette displays the specific instance of the control. In both windows , the items with arrows pointing right represent the methods that the client (in this case, the Web application) can call on the control. In the Action View pane, the item with the left- facing arrow ( onTimeout , in this case) represents a callback ”a method that the control can call on the client.

Figure 2.12. The Action View gives you a visual representation of the methods and callbacks of controls.

If you start to work with many controls in the Edit pane, the amount of information displayed can get overwhelming. To address this, you can hide or show the methods of any control by clicking the double up-arrow icon in the upper-right corner of the control box.

ALTERNATIVE METHOD FOR ADDING COMPONENTS

The add operations discussed in this section can also be selected by right-clicking anywhere but directly on an item in the Design View.