# Summary of IDE Windows and Wizards for Page Flows

This topic describes the various windows and wizards that are available to assist your work as you create page flows and JavaServer Pages. The IDE components discussed here are:

- Application Window
- Palette Window for Page Flows
- Data Palette Window for Page Flows
- Document Structure Window for Page Flows
- Property Editor Window When Action View is Open and Form Bean Selected
- Palette Window for JSP Tags
- Property Editor Window for JSP Tags
- Table Navigator Window for JSP Files
- Page Flow Wizard
- New Action Window
- JSP Tag Wizards, Including the Form Wizard

####

#### Application Window

The application window shows the hierarchy of directories for the open application. The following sample screen shows the SamplesApp application window, with comments that identify how directories correspond to web application, project, and page flow components.

This application is installed in:

<WEBLOGIC_HOME>\samples\workshop\SamplesApp

To open an application, use File-->Open-->Application in the IDE.

Note: each application uses a *.work file that is located in the application's root directory. If you use File-->Open-->File to open the application's .work file, the IDE will assume that you want to edit the file instead of opening the application.

#### Palette Window for Page Flows

Before you can open a page flow, the application it is part of must be open in the IDE. When the application is open, choose the web project directory that contains the page flow. Then open the page flow's *.jpf file name, which by default is <page flow name>Controller.jpf.

When a page flow's *Controller.jpf file is open, you can use its Palette window:

To add an action, a new JSP, or a reference to another existing page flow to the current page flow, you can select an icon an icon from this palette with your cursor, hold down the mouse button, and move (or "drag") the icon onto the page flow's Flow View canvas. When you drag an action icon onto the Flow View, WebLogic Workshop presents a New Action dialog window. For an introduction to that window, see New Action Window. For more information about the Flow View canvas, see Summary of Flow View Icons.

#### Data Palette Window for Page Flows

When a page flow is open, its Data Palette window identifies any Controls or Form Beans that are defined. You can also click the Add button to add items to the current page flow.

####

#### Document Structure Window for Page Flows

When a page flow is open, its Document Structure window identifies the Java class, methods and signatures, any inner classes, and so on. This window provides a helpful visual summary of the Java entities that make up your page flow class.

####

#### Property Editor Window When Action View is Open and Form Bean Selected

When a page flow is open and an action method that uses a form bean is selected in the Action View, the Property Editor window identifies the action name, the form bean it uses, and related information such as the Forward object's name and the web component (such as a JSP file) that is forwarded to when this action runs.

####

#### Palette Window for JSP Tags

When a JSP file is open, its Palette window shows the special JSP tags that are provided by WebLogic Workshop tag libraries. These JSP tags are designed to save you coding time by implementing commonly used functions, such as user interface controls that can be associated with actions and dynamic data. You can "drag and drop" these tags from the palette to the JSP Design View canvas. In some cases, a dialog window will appear that allows you to assign actions to tags that work with form beans.

The preceding diagram shows a portion of the tags provided. The categories of tags are Netui, Netui Databinding, Netui Templates, and HTML. For more information about these tags, see Designing User Interfaces in JSPs, Using Form Beans to Encapsulate Data, and Presenting Complex Data Sets in JSPs.

####

#### Property Editor Window for JSP Tags

When a JSP file is open in Design View, you can select an item on the page to view, set, or modify its properties in the Property Editor window. For example, if on the JSP Design View canvas we selected the small GO! button:

Then the Property Editor would contain values, such as the following example:

Notice how the Property Editor has identified the netui:imageButton tag, and two other properties: the URL of the images that is presented first, and the URL of the rollover image. (This tag automatically generates a rollover script for you; you do not have to create the script.)

Note: when you use the JSP Property Editor, make sure you select the precise item on the JSP canvas for which you want to see properties. Notice how in this example the GO! button is selected, but no action is identified in the Property Editor. That is because the action name is identified in a netui:form that contains this netui:imageButton tag. For example:

<netui:form action="toSimple">
<netui:imageButton
rolloverImage="resources/images/go-button-rollover.gif"
url="resources/images/go-button.gif" />
</netui:form>

To view the Property Editor values for the form in this example, you must click the netui:form area just outside of the GO! button area. For example:

Now the Property Editor presents the netui:form properties, which includes the action name:

You can find the installed location of a sample JSP that we referenced in this example here:

<WEBLOGIC_HOME>\samples\workshop\SamplesApp\WebApp\index.jsp

####

#### Table Navigator Window for JSP Files

Formatting HTML and JSP files is easier if you use tables to create areas on the page. When you have a JSP file open in Design View, you can use the Table Navigator window to see where a selected item is located in a table. You can also use the Table Navigator to add, merge, or delete table cells and rows.

You can make your selection on an item on the JSP canvas, or a cell in the Table Navigator window. In the following sample screen, the fourth row and fourth column of a table were selected from the navigator tool. Then we used right-mouse click, and displayed the Insert menu.

### Page Flow Wizard

To make your job easier, WebLogic Workshop provides a Page Flow Wizard that creates the initial page flow controller class, two or more methods (depending on the type of page flow), and one or more default JSP files.

Before you start the Page Flow Wizard, make sure you have open the appropriate application open and the correct web project selected in the Application window. Then from the top menu in WebLogic Workshop, choose File-->New-->Page Flow. Or right-mouse click and select the Page Flow option from the menu. For example:

For information about the Page Flow Wizard screens, see How Do I: Create a Page Flow?

The page flow types that are available with the Page Flow Wizard are:

Basic page flow | If you choose the "Basic page flow" option, the Page Flow Wizard creates a simple page flow that does not use any controls. You can add them later, if needed. For details about starting the Page Flow Wizard, see How Do I: Create a Page Flow?
Page flow from a Java control | If you choose the "Page flow from a Java control" option, you can select one of the existing controls. Then choose Next. On the Select Actions screen, select one or more action methods that are defined by the control. Then choose Create. For details about creating new custom Java controls, see the topic Building Custom Java Controls. Another option on the "Select Page Flow Type" screen is to select the "New RowSet Control" option, to start the server and define a new control.

###

### New Action Window

When a page flow is open, you can drag an action icon from the page flow's palette to the Flow View canvas. WebLogic Workshop presents a New Action window. For example:

You can define a new action, which will define the action method in your page flow class. You can also define a form bean that will be associated with this action. The form bean can be defined an inner class within the page flow class, or you can choose the No Form Bean option. Of course you can add a form bean later, if needed.

With this dialog, you can also browse to find actions, form beans, or both that you have defined previously in this web project. Actions defined in other page flow classes are called external actions. For example, if you choose Select Action and click Browse..., WebLogic Workshop displays a Select External Action dialog:

An additional option with this New Action dialog window is to add an action to the current page flow, and associate this action with an existing form bean in this page flow. For example, in the following sample page flow:

<WEBLOGIC_HOME>\samples\workshop\SamplesApp\WebApp\callJavaControl\callJavaControlController.jpf

In this page flow, if you drag the Action icon to the callJavaControlController's Flow View canvas, WebLogic Workshop provides a dialog similar to the following. We have already changed the action name to myAction and selected the UserForm.

On the Flow View canvas, initially the disconnected icon is as follows:

Initially in the page flow class, WebLogic Workshop adds the following method and annotation:

        /**
         * @jpf:action
         */
         protected Forward myAction(UserForm form)
         {
         return new Forward("success");
         }

You can add a tag such as @jpf:forward in the annotations, and conditional logic in the method to indicate what happens when this action is invoked. For more information about the tags that comprise the page flow annotations, see Page Flow Annotations.

###

### JSP Tag Wizards, Including the Form Wizard

When you drag and drop many of the JSP tags provided by WebLogic Workshop onto the JSP Design View canvas, a dialog window helps you define tag attributes. You can change these attributes later, if necessary.

Some of the dialogs are simple, such as when you drag a netui:image tag from the JSP palette to the canvas:

Others present several options, such as the one for the netui:anchor tag drop:

Existing actions that are defined in the page flow class are shown on the drop wizards for those tags that take actions.

You can also use the drop wizards (for JSP tags that have an action attribute) to define new actions that are not yet present in the page flow class. The New Action dialog is invoked, and after completing that dialog, you are returned to the JSP tag drop wizard. After clicking OK, there is a pending addition on the page flow's Flow View. For example, if on the netui:anchor drop wizard we had clicked New..., and created an action named toPageC, the new action is added to the page flow class, but appears in lighter colors, indicating that it has not yet been added to the page flow class. You can right-mouse click on the "ghosted" action icon and select Create from the menu.

Dragging a netui:form tag from the JSP palette to a JSP Design View canvas invokes the Form Wizard. For example, on a new JSP file in the following sample page flow:

<WEBLOGIC_HOME>\samples\workshop\SamplesApp\WebApp\createacct\

We dragged the netui:form tag to the (just created) new.jsp file's Design View canvas. On the Form Wizard, we selected the existing NamePageSubmit form bean.

After clicking Create, WebLogic Workshop creates the form for us. The following shows a portion of the JSP Design View canvas:

For more information about using the Form Wizard, see Tutorial: Your First Page Flow Application.

Related Topics

Guide to Building Page Flows

Page Flow and JSP Reference