Working with Bounded Task Flows, Regions and Routers in JDeveloper 11g

Purpose In this tutorial, you use Oracle JDeveloper 11g to create 2 task flows. One that includes views, and return components, the other one including views and a router. Then after creating each of the components in the first task flow, you bind data controls to the views. In the second task flow, you define the router rules. Finally you create a JSF Page and bind the task flow as a region in the page. The data model uses Business Components, and for the web client, Java Server Faces (JSF) is used. Time to Complete 50 minutes

Topics
The tutorial covers the following topics: Overview Scenario Prerequisites Create a New Fusion Application and Business Components Create a Bounded Task Flow Build the Task Flow Pages Bind the Task Flow Pages to Data Controls Set the Transaction Control for the Task Flow Define a Second Task Flow Define the Task Flow Components and the Router Rules Create the JSF Page and Bind the Task Flow as a Region to the Page Run the master Page Summary Viewing Screenshots Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.) Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview
The model is provided by business components, while the view and controller are provided by Java Server Faces. You create bounded task flow diagrams using views, returns and a router and also you create a managed bean. Back to Topic List Scenario You create two bounded task flows with various components in it. Using a router, views, and returns, you design the task flows to be able to support search and update functionalities. You bind the view components with data controls. You define a managed bean to handle a typed password . You define the rules for the router where the password is verified allowing you to login to the application. You create a JSF Page and bind the task flow as a region in the JSF page, creating a parameter value for the username. Back to Topic List Prerequisites Before starting the tutorial, you should set up your environment. To install JDeveloper, perform the following steps: 1. Have access to or have installed Oracle JDeveloper 11g Version 11.1.1.2.0. You can download it from Oracle Technology Network.

2. Have access to or have installed the Oracle Sample Schemas, included with the Oracle 10g or Oracle 11g database. The tutorial uses the HR schema. Specifically, the pages work with the DEPARTMENT and EMPLOYEES tables. Instructions for installing the HR schema and creating a connection to it in JDeveloper are available online at: http://www.oracle.com/technology/obe/obe11jdev/11/common/connection11g.htm

3. Start JDeveloper by selecting Start > All Programs > Oracle Fusion Middleware 11.1.1.2.0 >JDeveloper Studio 11.1.1.2.0

4. If the Migrate User Settings dialog box opens, click NO. If prompted for a User Role, choose Default.

Close the Tip of the Day window.

5. The JDeveloper IDE should now be displayed.

Back to Topic List

Creating a New Fusion Application and Business Components

When you work in JDeveloper, you organize your work in projects within an application. JDeveloper provides several templates that you can use to create an Application and projects. The templates are pre configured with a basic set of technologies that are needed for developing various types of applications, and you create your working environment by selecting the template that fits your needs. You can then configure it to add any other technologies you plan to use. In the first section you are going to create a new Application using the Fusion technology and build reusable business components that will access the database. To create the application and the model components, perform the following steps: 1. In the Applications Navigator, click New Application. Another option is to use the File->New... menu option to create a new application.

2. In the Create Application dialog box, specify the Application Name to be TaskFlow. Notice that the directory changes to match the new name. You can change the C:\JDeveloper\mywork part of the path to create your files in another location. In the Application Package Prefix field set the value to be demo. In the Application Templates choose the Fusion Web Application (ADF) and click Finish.

The Overview pane displays a Checklist you can refer to as a guide for developing a Fusion Web Application.

The Checklist is displayed by default when a Fusion Web application is created.

3. In the Application Navigator you'll see two new projects now. The default naming rules for these projects are Model for one and ViewController for the other.

4. We start creating the model components using theCheckList Overview. Click the Connect to a Database step.

5. The step expands showing useful information such as prerequisites required for performing this task. Click the Create a Database Connection button.

6. Specify the following properties for the new connection you are creating: Connection Name Username Password HRConn hr hr

Enter the Oracle JDBC Settings properly to point to the right host, port and SID for your database. Click the Test Connection button and verify that you got success.

Once done click the OK button.

7. In the Checklist pane, set the status of the Connect to a Database step to Done.

8. Click the Build Business Services step to expand it, then click the Go to Substeps button.

9. In the subtask list, click the Create Entity Objects and Associations subtask.

Then click the Create Entity Objects and Associations button.

10. In the Select Project for Action dialog, select the Model project.

11. In the Initialize Business Components Project dialog the HRConn connection should be selected.

Click OK.

12. In the Entity Objects page, click the Query button to examine the data dictionary and see available tables.

13. Select the EMPLOYEES table in theAvailable list, and click the right arrow to move your selections to the Selected list. This step creates updateable Entity Objects based on the tables you chose.

Click Next to continue.

14. In the Updateable View Objects dialog, move Employees (HR.EMPLOYEES) to the Selected list. This step creates matching view objects to perform queries on the entity object you created before.

Click Next to continue.

15. In the Read Only View Objects dialog, Click Next to continue.

16. In the Application Module dialog, click Finish to create the business components in the Model project.

17. In the Checklist, set the status of the Create Entity Objects and Associations step to Done. Then click the Close Step 3 button.

Note: Since steps 3.2, 3.3 and 3.4 have also been completed, we could as well set their status to done, but we'll do it at a higher level.

18. Set the status of the Build Business Services step to Done.

19. The work on the model project is performed. Expanding the Model project, the Application Navigator should look like the following:

20. Click the Save All

icon on the JDeveloper menu bar, or select File | Save All from the menu.

Next we'll work on the ViewController project. Back to Topic List Creating a Bounded Task Flow With the TaskFlow application loaded in JDeveloper, you create a bounded task flow diagram including views, and returns. To do this, perform the following steps: 1. In the Application Navigator, right click the ViewController node and select New from context.

2. In the New Gallery, click the Web Tier | JSF node and select ADF Task Flow.

Click OK.

3. In the Create Task Flow dialog, type emp-update-flow as the File Name. Select the following checkboxes:
Create as Bounded Task Flow Create with Page Fragments Create Train Checked Checked Checked

Click OK.

4. A new empty task flow diagram displays and a new entry is created in the Application Navigator.

5. Select the View component

from the Component Palette and drag and drop it onto the

diagram surface.

6. Change the default name to intro.

7. Create a new view

on the diagram next to the intro one.

Rename it search.

8. Create a third view

on the diagram.

Rename it update. Your diagram should look similar to that:

Back to Topic List Building the Task Flow Pages The intro page is the entry point of this task flow and you'll see how to create a train within the pages. To do this, perform the following steps: 1. On the emp-update-flow diagram, double click the intro view component to create the page.

2. In the Create New JSF Page Fragment dialog, click OK to accept default values.

3. The page design pane opens up. From the Component Palette, in the ADF Faces Common Components group, select the Train component surface. and drop it onto the page design

In the Bind Train dialog, click OK to accept the default value.

4. Select the Train Button Bar component component.

and drop it underneath the Train

In the Bind trainButtonBar dialog, click OK to accept the default value.

5. From the Component Palette, in the ADF Faces Common Components group, select the Output Text component and drop it underneath the Train Button Bar.

Open the Property Inspector if not already there (View | Property Inspector or use the key combination [Ctrl] + [Shift] + [I]), and enter Welcome to the Employee updater in the value field

The page should look like this:

6. Click the emp-update-flow tab to reopen the task flow diagram.

7. Double click the search view component to create the search page.

8. In the Create New JSF Page Fragment dialog, click OK to accept default values.

9. The page design pane opens up. From the Component Palette, in the ADF Faces Common Components group, select the Train component surface. and drop it onto the page design

In the Bind Train dialog, click OK to accept the default value.

10. Select the Train Button Bar component component.

and drop it underneath the Train

In the Bind trainButtonBar dialog, click OK to accept the default value.

11. Click the emp-update-flow tab to reopen the task flow diagram.

12. Double click the update view component to create the update page.

13. In the Create New JSF Page Fragment dialog, click OK to accept default values.

14. The page design pane opens up. From the Component Palette, in the ADF Faces Common Components group, select the Train component surface. and drop it onto the page design

In the Bind Train dialog, click OK to accept the default value.

15. Select the Train Button Bar component component.

and drop it underneath the Train

In the Bind trainButtonBar dialog, click OK to accept the default value.

16. Click the save all

icon to save the application. Back to Topic List

Binding the Task Flow Pages to Data Controls The search and update pages need to bind data control components. The search page for querying employees on any column criteria and the update page for displaying and updating an employee's salary. To do so, perform the following steps: 1. Click the search tab to reopen the page.

2. Open the Data Controls accordion and expand the following nodes AppModuleDataControl | EmployeesView1 | Named Criteria and drag and drop the All Queriable Attributes on the page.

3. From the pop up menu, select Create | Quick Query --> ADF Quick Query with Table option.

4. In the Edit Table Columns dialog, select the Row Selection and Sorting check boxes.

Click OK.

5. The page should look like the following:

6. Click the update tab to open the page.

7. From the Data Controls pane, select AppModuleDataControl | EmployeesView1 then drag and drop it onto the update page.

8. From the pop up menu select Create | Form --> ADF Form option.

9. In the Edit Form Fields select the last 3 rows (CommissionPct, ManagerID and DepartmentId) and click the Delete button to discard the fields. Then select the Include Submit Button option and click OK.

10. In the Component Palette, select the Button icon Submit button.

and drag and drop it next to the

11. In the Property Inspector, type Cancel in the Text field for the button.

13. The page should look like the following:

14. Click the save all

icon to save the application. Back to Topic List

Setting the Transaction Control for the Task Flow To end a transaction, you can either use a return activity or you can use a button bound to an operation action. If possible, use a task flow return activity. Using a task flow return activity will commit all data controls used by the ADF task flow. It also makes it easier to see where your application is doing commits and rollbacks, and is therefore easier to maintain. To implement return activities for transaction controls, perform the following steps: 1. Click the emp-update-flow tab to reopen the task flow diagram.

2. Click the Overview tab and then select the Behavior tab.

3. In the Transaction group, set the following properties from the list: Always Begin New Transaction.

This way, each individual employee update is seen as a single row granularity transaction.

4. Select the Task Flow Return component view.

and drop it underneath the update

Rename it commit.

5. Select again the Task Flow Return component update view. Rename it rollback.

and drop it underneath the

6. Select the Control Flow Case component from the Component Palette and clicking in the update view, drag and drop it into the commit return.

Rename it commit.

7. Select the Control Flow Case component from the Component Palette and clicking in the update view, drag and drop it into the rollback return. Rename it rollback.

8. The task flow diagram should look like the following:

9. Select the commit return component and in the property inspector, in the Behavior tab, for the End Transaction field, select commit, from the list of values.

10. Repeat the same operation selecting the rollback return and select rollback from the list for the End Transaction field.

11. Click the save all

icon to save the application.

12. Click the update tab to open the update page design, and select the Submit button.

In the Property Inspector, in the Action field, select commit from the list.

13. Select the Cancel button.

In the Property Inspector, in the Action field, select rollback from the list.

14. Click the save all

icon to save the application. Back to Topic List

Defining a Second Task Flow We want to restrict the access to the application through a login process. We create a login page, a router, an error page and the previously created task flow. To create this task flow, perform the following steps: 1. In the Application Navigator, right click the ViewController node and select New from context.

2. In the New Gallery, click the Web Tier | JSF node and select ADF Task Flow.

Click OK.

3. In the Create Task Flow dialog, type security-flow as the File Name. Select the following checkboxes:
Create as Bounded Task Flow Create with Page Fragments Checked Checked

Click OK.

4. A new empty task flow diagram displays and a new entry is created in the Application Navigator.

5. Select the View component diagram surface.

from the Component Palette and drag and drop it onto the

Rename the view login.

6. Select the Router component

and drop it next to the login view.

7. Select the emp-update-flow in the Application Navigator then drag and drop it on the diagram below the router.

8. Select the View icon surface.

from the component palette then drag and drop it on the diagram

Rename the view error.

9. Select the Control Flow Case icon flow into the router.

and clicking in the login view, drag the

10. Repeat the previous operation to draw a Control Flow Case the error view.

from the router to

Rename the flow bad.

11. Repeat the previous operation to draw a Control Flow Case the emp-update-flow flow. Rename the flow good.

from the router to

12. Repeat the previous operation to draw a Control Flow Case from the error view to the login view.Rename the flow login. Your diagram should look like the following:

13. The task flow is now defined.

14. Click the save all

icon to save the application. Back to Topic List

Defining the Task Flow Components and the Router Rules We create a login page with a password field, then we create a backing bean for the password value. Then the router depending on the password value leads to an error page or to the empupdate flow. To create the pages and implement the router rules, perform the following steps: 1. In the diagram, double click the login view icon to create the page. In the Create New JSF Page Fragment, click OK to accept default values.

2. In the Component Palette, drag and drop the Input Text icon onto the login page.

Enter password as the label.

3. In the Advanced tab, next to the Binding field, select Edit from the drop down list.

In the Edit Property dialog, click the New button to create a Managed Bean to hold the password value.

In the Create Managed Bean dialog, enter the following values:

Bean Name Class Name Package Extends scope Generate Class If It Does Not Exist backing_login backing_login backing java.lang.Object request (checked)

Click OK.

4. Back in the Edit Property, click the New button next to the Property field.

In the Create Property dialog, enter password as the Property Name.

Click OK. Click OK again.

5. The Property Inspector for the input text component should look like the following:

Notice that for a realistic password field, you would also set the Advanced | Visible property to false to hide the typed password value.

6. Drag and drop a Button component

underneath the password field.

Change the Text field to login.

7. Click the security-flow tab to open the task flow diagram and click the router component.

8. In the Property Inspector for the router, select bad from the drop down list as the default outcome. In the Cases click the Add button to create a condition.

9. In the Expression field select the Expression Builder option from the list.

Expand the following nodes ADF Managed Beans | backing_login | password and select the value variable, then select the '==' operand and type 'oracle'.

Click OK. In this example we have coded oracle as a hard coded value for the password.

10. Back in the Property Inspector, select good as the outcome, so that if the password entered is equal to oracle, the flow takes you through the 'good' flow to the emp-update flow, otherwise to the error page.

11. In the security-flow diagram, click the Overview tab and then the Parameters tab.

12. In the Input Parameter Definitions, click the Addbutton

13. Type the following values:

Name Class Value Required username java.lang.String (auto populated) (Checked)

14. Click the login.jsff tab to open the page, and drag and drop an Output Text component above the password input text.

15. In the Property Inspector, select the Expression Builder option from the Value field list.

16. In the Expression Builder make sure to clear out the expression field, then expand ADF Managed Beans | pageFlowScope and select username.

Click OK.

17. Click the security-flow tab to open the task flow diagram and double click the error view to create the page.

In the Create New JSF Page Fragment dialog, click OK to accept default values.

18. From the Component Palette, drag and drop an Output Text

onto the page.

In the Property Inspector, enter Error, wrong password in the Value field.

19. In the Design, press Enter to add a new row and drag and drop a button component underneath the error text.

In the Property Inspector, change the Text field to Retry, and from the list, select login as the action.

20. Click the save all

icon to save the application. Back to Topic List

Creating the JSP Page and Binding the Task Flow as a Region to the Page To create JSF Page that uses the task flow, perform the following steps: 1. Right click the ViewController node in the Application Navigator and select New from context.

2. In the New Gallery, select Web Tier JSF as the Category and JSF Page as the Item.

Click OK.

3. In the Create JSF Page dialog, enter master as the File Name and checking the Page Template option, select the Oracle Three Column Layout.

Click OK.

4. The page is displayed in the editor.

5. From the Component Palette, drag and drop an Output Text component start facet.

onto the

Change the Value field to Welcome in the Property Inspector.

6. In the ViewController | Web Content | WEB-INF node, drag and drop security-flow.xml onto the Facet center.

Choose Region from the menu.

In the Edit Task Flow Binding, in the Value field, enter #{'Scott'}.

7. The master page should now look like the following:

8. Click the save all

icon to save the application. Back to Topic List

Running the Master Page Now that the task flow is integrated as a region to the master page you can run it. To do this, perform the following steps: 1. In the editor for the master page, right click and select Run from context.

2. The page loads up in your browser displaying the username variable (Scott) and waiting for a password to be typed in.

3. Try entering a wrong password value (different from oracle).

Then click the login button. The router drives you to the error page.

4. Click the Retry button to logon with the correct password.

5. Back in the login page, enter oracle as the password value.

Click login.

6. The new page appears displaying the train.

7. In the new page, click the Next button or the second button on the train.

8. In the second step of the train, in the search page, select LastName from the drop down list as the searching column.

Enter A% in the search field to retrieve all employee's name starting with an A.

Click the search button.

9. In the returned list, select one employee of your choice and then click the Next button.

10. In the Edit page for the selected employee, update the salary to the value of your choice, then click Submit.

11. The application takes you back to the login page.

12. Switch back to JDeveloper and open the Database Navigator. (if not visible, use View | Database | Database Navigator)

13. Expand the TaskFlow | HRConn | Tables nodes and double click the Employees table to open it.

14. Click the Data tab to display employee's values.

Click the Sort button.

15. To retrieve more easily the information about the employee you're looking for, you can use the Filter field or use a Sort operation. Click the Sort button and in the Sort Columns dialog, move LAST_NAME in the Selected Columns pane.

Click OK.

16. Locate the employee you've updated the salary to confirm that the update is committed with the new value.

17. You can reiterate this last process to test the Cancel (rollback) action. You've successfully completed this tutorial. Back to Topic List Summary In this tutorial, you created a task flow and included views, router, operations into it and added it as a region to a JSF page. You learned how to: Create the Model Components Create a bounded task flow diagram

Build the task flow pages Bind the task flow pages to data controls Set the transaction control to the task flow Define a second task flow Define the task flow components and the router rules Create the JSF Page and Bind the Task Flow as a Region to the page

Back to Topic List

Place the cursor over this icon to hide all screenshots.

Use Layout Components

You can work in JDeveloper's IDE to create pages by inserting and nesting various layout components to achieve the desired layouts. Create a New Application: Use the Create Application wizard to create a generic application. Create a JSF Page: Use the Create JSF Page dialog to add a new page. Add layout components to create a stretchable outer frame for your page contents. Create Top and Bottom Content Areas: Add ADF Faces components to create the top and bottom areas of your page. Create Three Splitter Panes in the Middle: Nest Panel Splitter components to create multiple panes on the page, then add contents into the left and right panes. Add Contents in the Center to Complete the Page: Use a variety of ADF Faces components such as Panel Tabbed, Panel Collection and Table.

Create a New Application and Project

Creating a New Application and Project

The JDeveloper application is the highest level in the organizational structure. It stores information about the objects you are working with, while you are creating your application. It keeps track of your projects and the environment settings while you are developing. [ tell me more...]

1. Open the Create Application wizard [ File> New > General > Applications] . 2. To follow along with the example, enter the application name LayoutApp. 3. Select Generic Application in the Applica tion Template list, then click Finish . Application Templates

Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project. [ tell me more...]

4. In the Application Navigator, select the project you just created and open the Project Properties dialog, JSP Tag Libraries Page. [ Application > Project Properties] 5. Select the Distributed Libraries folder, and click Add . 6. In the Choose Tag Libraries dialog, select ADF Faces Components 11 and click OK. JSP Tag Libraries

Libraries are provided for the various APIs and technologies installed with JDeveloper. These libraries are categorized as extension libraries, which are shared by all users of an install. [ tell me more...]

7. Click OK to close the Project Properties dialog. 8. Click Save All to save your work.

In the IDE

When you complete the steps for creating a new application and project, the Projects panel in the Application Navigator should look like this: [ tell me more...]

Create a JSF Page and Add a Panel Stretch Layout

Creating a JSF Page and Adding a Panel Stretch Layout

To follow along with the example, in this step and throughout the cards, enter values as shown in the instructions. Then you will be able to follow the steps in the cue cards exactly as written. [ tell me more...]

1. In the Application Navigator, select the project and open the Create JSF Page dialog. [ File > New > Web Tier > JSF > JSF Page] 2. Enter the file name LayoutPage.jspx and confirm that Create as XML Document (*.jspx) is selected. 3. Under Initial Page Layout and Content, confirm that Blank Page is selected. Quick Start Layout

ADF Faces provides a number of components that you can use to define the overall layout of the page. JDeveloper includes pre-defined page layouts that use these layout components to provide you with a quick and easy way to correctly determine the layout of your pages. [ tell me more...]

4. Make sure Page Implementation shows UI Components are not exposed in managed bean. Click OK. Component Binding

When you create a JSF page using the dialog, you can specify whether or not components on the page are exposed in a managed bean, to allow programmatic manipulation of the UI components. By default components are not exposed to managed beans. If you wish to

bind components to managed beans, expand the Page Implementation section in the Create JSF Page dialog, then select one of the automatic binding options. [ tell me more...]

5. In the Component Palette, ADF Faces page, Layout panel, drag it on the blank page in the visual editor. Layout Components and Stretching

Panel Stretch Layout and drop

By default, when you create a JSF page in a project that uses ADF Faces technology, JDeveloper automatically includes the af:document and af:form tags for you in the .jspx page file, as shown here: [ tell me more...]

6. In the Component Palette, Layout panel, drag and drop Decorative Box into the center facet of the root panel stretch layout. 7. In the Structure window, select af:panelStretchLayout (that is just below af:form). In the Property Inspector, Common section, change the property values of StartWidth and EndWidth to 5px each. Then change BottomHeight to 25px, and press Enter. Panel Stretch Layout

Panel Stretch Layout does not accept direct children; children contents can be placed inside facets only. Panel Stretch Layout supports five facets that specify the panes where children contents can be inserted: top, bottom, start, end, and center: [ tell me more...]

8. Click

Save All to save your work.

In the IDE

When you complete the steps for creating a JSF page and adding the Panel Stretch Layout and Decorative Box components, the page in the visual editor should look similar to this: [ tell me more...]

Create the Top and Bottom Areas on a Page

Creating the Top and Bottom Areas on a Page

In this card, you will be adding contents into the top and bottom facets of the root Panel Stretch Layout to create the top and bottom areas of the page. [ tell me more...]

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Stretch Layout into the top facet of the root panel stretch layout ( psl1). 2. In the Property Inspector, Common section, change the facet widths and heights of the panel stretch layout you just added using these values: StartWidth - 200px EndWidth - 200px TopHeight - 5px BottomHeight - 5px (Press Enter in the Property Inspector after modifying the last value.) 3. To create the top area contents, in the Component Palette, Layout panel, drag and drop Panel Group Layout into the start facet of the panel stretch layout you just modified. In the Property Inspector, Common section, change the Layout value to scroll. In the Component Palette, drag another Panel Group Layout and drop it into the panel group layout component you just added. In the Property Inspector, change the Layout value to horizontal. Panel Group Layout Component

Panel Group Layout does not stretch its children, but the component itself can be stretched by its parent stretching component such as Panel Stretch Layout. The Panel Group Layout component can be stretched only when its Layout attribute is scroll or vertical. When the Layout attribute of Panel Group Layout is horizontal or default, the Panel Group Layout cannot be stretched. [ tell me more...]

4. In the Component Palette, Common Components panel, drag and drop Image into the panel group layout you just added. In the Insert Image dialog, click the dropdown menu next to the Source field and choose Edit. Use the dialog to locate and select an image file. Click Yes to add the icon image under the document root and then click Save. Click OK to close the Insert Image dialog. Adding Images

In the Insert Image dialog, you can add an image by entering the image file name in the Source field. Alternatively you can use the Edit Property dialog to navigate to a source

and select an image file. To use the Edit Property dialog, click at the end of the Source field and choose Edit. [ tell me more...]

5. In the breadcrumb links at the bottom of the visual editor, click the component name af:panelgrouplayout that is just before af:image. In the visual editor move your cursor over at the top right corner of the selected panel group layout. (You should see Panel Group Layout Actions on the page.) Click and choose Insert inside Spacer from the dropdown menu. Using the Editor Breadcrumbs and Actions Context Menu

When editing a page in the visual editor, you can use the breadcrumb links at the bottom of the editor window (just above the Design and other editor tabs) to select a component on the page. The editor breadcrumb links show the path of names from the currently selected component back to its root parent component. The last name in the path (shown in bold font) is the currently selected component; the names preceding the last name are the parent components. If a component has its Id attribute set, the Id attribute value is appended to the component name (for example, af:panelgrouplayout#pgl2, where pgl2 is the Id attribute value): [ tell me more...]

6. In the visual editor breadcrumbs, click af:panelgrouplayout that is before af:spacer. On the page, click and choose Insert inside Output Formatted. In the Property Inspector, Common section, change the Value property to Layout Example. Expand the Style section. In the InlineStyle field, enter font-size:small; color:Red; font-weight:bold; and press Enter. 7. In the Component Palette, Layout panel, drag and drop Panel Group Layout into the end facet of the nested panel stretch layout ( psl2) you added in step 1 of this card. In the Property Inspector, Common section, change the Halign value to end, and the Layout value to scroll. 8. In the Component Palette, Layout panel, drag and drop Navigation Pane into the panel group layout you just modified. In the Property Inspector, Common section, change the Hint value to buttons. In the Style section, enter padding-top:5px in the InlineStyle field and press Enter. Navigation Pane

The Navigation Pane component is used to create the navigation items for one level in a page hierarchy. A page hierarchy is a tree-like hierarchy of nodes that represent a series of related pages in an application. End users gain access to information on the pages by drilling down a path of links. [ tell me more...]

9. In the Structure window, right-click af:navigationPane and choose Insert inside af:navigationPane Navigation Item from the context menu. In the Property Inspector, Common section, change the Text property to Home and press Enter. 10. Repeat the procedure to add two more navigation item components, using the Text values Preferences and Help. 11. Click Save All to save your work. 12. To create the bottom area contents, in the Component Palette, Layout panel, drag and drop Panel Group Layout into the bottom facet of the root panel stretch layout component ( psl1). In the Property Inspector, Common section, change Halign to end, and Layout to scroll. In the Component Palette, drag another Panel Group Layout and drop it into the panel group layout component you just added. In the Property Inspector, change Layout to horizontal. Expand the Style and Theme section. In the InlineStyle field, enter padding-top:5px and press Enter. 13. On the selected panel group layout component in the visual editor, click and choose Design This Container from the dropdown menu. Design This Container

When you click at the top right corner of the selected panel group layout on the page, you will see a context dropdown menu of action items. One of the menu items is Design This Container , which lets you edit the selected component (container) and its contents. [ tell me more...]

14. In the Component Palette, Common Components panel, drag and drop Output Formatted into the panel group layout. In the Property Inspector, Common section, change Value to Copyright © 2009 and press Enter. In the Style section, enter margin:0 6px 0 6px; display:block in the InlineStyle field, and press Enter. Components that Use Span

The margin property can have four values, such as 5px 5px 2px 1px to specify the top, right, bottom and left margins, respectively. [ tell me more...]

15. In the visual editor breadcrumbs, click af:panelgrouplayout that is before af:outputformatted. Then click on the selected component and choose Insert inside Go Link. In the Property Inspector, Common section, change Text to About XYZ and press Enter. 16. Click on the selected go link component and choose Design Main Page . 17. In the Application Navigator, right-click LayoutPage.jspx and choose R un from the context menu.

Running and Testing a JSF Page

By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages. [ tell me more...]

In the IDE

When you complete the steps for adding contents to the top and bottom areas on the page, the visual editor should look something like this: [ tell me more...]

Divide the Middle Area of a Page into Three Panes

Dividing the Middle Area of a Page into Three Panes

In this card, you will be working in the center facet of Decorative Box, which will contain everything on the page that is in between the top and bottom content areas. [ tell me more...]

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Splitter into the center facet of the decorative box in the middle of the page to create two panes. 2. Drag another Panel Splitter and drop it into the second facet of the panel splitter you just added to split the right pane into two. In the Property Inspector of the second panel splitter, Common section, change PositionedFromEnd to true. Panel Splitter

The Panel Splitter component creates two resizable panes separated by an adjustable splitter. The panes can be placed horizontally (side by side) or vertically (top to bottom),

as determined by the Orientation attribute. By default, Orientation is horizontal. [ tell me more...]

3. To create the left pane contents, in the Component Palette, Layout panel, drag and drop Panel Accordion into the first facet of the first panel splitter ( ps1) you added in step 1 of this card. In the Property Inspector, Common section, change DiscloseMany to true. 4. In the Structure window, expand af:panelAccordion. Click the child af:showDetailItem. In the Property Inspector, Common section, change the Text value to Pane 1. In the Appearance section, change Flex to 1. Then change the value of StretchChildren to first. Show Detail Item

Show Detail Item cannot be used on its own; it must be used inside of a Panel Accordion or a Panel Tabbed to contain a group of children contents. [ tell me more...]

5. In the Structure window, right-click af:panelAccordion and choose Insert inside af:panelAccordion Show Detail Item to add a second pane. In the Property Inspector, Common section, change the Text value to Pane 2. In the Appearance section, change Flex to 2. Then change StretchChildren to first. 6. Click Save All to save your work. 7. To add contents into the right pane, in the Component Palette, Layout panel, drag and drop Panel Group Layout into the second facet on the visual editor. In the Property Inspector, Common section, change Layout to scroll. 8. In the Component Palette, drag and drop Panel List into the panel group layout you just added. In the Structure window, right-click af:panelList and choose Insert inside af:panelList Go Link to add a link. Repeat the procedure to insert two more links in the same manner. 9. To set up the center pane, in the Component Palette, Layout panel, drag and drop Decorative Box into the first facet on the visual editor. In the Property Inspector, Common section, change the TopHeight value to 30px and press Enter. Decorative Box

By nesting a Decorative Box into the first facet of the second panel splitter ( ps2), you are setting up the center area before you add the center contents. [ tell me more...]

10. In the Component Palette, drag and drop Panel Group Layout into the top facet of the decorative box you just added. In the Property Inspector, Common section, change Layout to scroll.

11. In the Component Palette, Common Components panel, drag and drop Bread Crumbs into the panel group layout you just added. In the Structure window, right-click af:breadCrumbs and choose Insert inside af:breadCrumbs Navigation Item to add a link. In the Property Inspector, Common section, change the Text value to Crumb 1 and press Enter. 12. In the Structure window, right-click af:breadCrumbs and choose Insert inside af:breadCrumbs Navigation Item to add a second item. In the Property Inspector, Common section, change the Text value to Crumb 2 and press Enter. Then repeat the procedure to insert a third navigation item in the same manner, using the Text value of Crumb 3. Bread Crumbs Component

The Bread Crumbs component is used to create a path of links from the current page back to the root page. Like the Navigation Pane component, the Bread Crumbs component accepts a series of Command Navigation Item components as children, with each Command Navigation Item representing one link. [ tell me more...]

13. In the Application Navigator, right-click menu. In the IDE

LayoutPage.jspx and choose R un from the context

When you complete the steps for creating three horizontal splitter panes in the page, the visual editor should look similar to this: [ tell me more...]

Add a Panel Tabbed, Panel Collection, and Tables

Adding a Panel Tabbed, Panel Collection, and Tables

In this card, you will be creating the rest of the center pane contents in the center facet of Decorative Box. [ tell me more...]

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Stretch Layout into the center facet below the bread crumb links. In the Property Inspector, Common section,

change the property values of StartWidth, EndWidth, and TopHeight to 5px each. Then change BottomHeight to 25px and press Enter. 2. In the Component Palette, Layout panel, drag and drop Panel Tabbed into the center facet of the panel stretch layout. In the Structure window, expand af:panelTabbed. Click the child af:showDetailItem. In the Property Inspector, Common section, change the Text value to Tab 1. In the Appearance section, change StretchChildren to first. Panel Tabbed

The Panel Tabbed component is used to create a series of tabbed panes with contents. When you add a Panel Tabbed, JDeveloper uses above as the default value for the Position attribute. This means the tabs will display above the pane contents only. Other valid values of Position are below and both. The following illustration shows a Panel Tabbed component with its Position attribute set to both: [ tell me more...]

3. In the Structure window, right-click af:panelTabbed and choose Insert inside af:panelTabbed Show Detail Item to add a second tab. In the Property Inspector, Common section, change the Text value to Tab 2. In the Appearance section, change StretchChildren to first. 4. In the visual editor, click the first tab Tab 1. (If you don't see the first tab, click next to Tab 2, then select Tab 1 .) 5. In the Component Palette, Common Components panel, drag and drop Table into the first tab component. In the Create ADF Faces Table dialog, make sure Bind Data Now is not selected, then click OK. 6. In the Property Inspector of the table component, Appearance section, select blank from the ColumnStretching dropdown list. Column Stretching in Tables

When a Table component is inserted into Show Detail Item, certain conditions must be met for Show Detail Item to allow the Table component to be stretched, namely: [ tell me more...]

7. In the visual editor, click the second tab Tab 2. (If you don't see the second tab, click next to Tab 1, then select Tab 2 .) 8. In the Component Palette, Layout panel, drag and drop Panel Collection into the second tab component. In the Component Palette, Common Components panel, drag and drop Table into the panel collection you just added. In the Create ADF Faces Table dialog, make sure Bind Data Now is not selected, then click OK. In the Property Inspector of the table component, Appearance section, select last from the ColumnStretching dropdown list.

Panel Collection

The Panel Collection component is used to wrap direct children components such as Table, Tree, and Tree Table to provide menu, toolbar, and status bar items. The type of top level default menu and toolbar items it provides will vary according to the child component it contains. For example, when the child is Table, Tree, or Tree Table, the default top level menu item is View, and the default toolbar item is Detach. [ tell me more...]

9. In the Component Palette, drag and drop Panel Group Layout into the bottom facet below the tab components. In the Property Inspector, Common section, change Halign to center, and Layout to scroll. 10. In the Component Palette, Common Components panel, drag and drop Button into the panel group layout you just added and modified. In the Property Inspector, change the Text value to Show Printable Page and press Enter. 11. In the Component Palette, expand the Operations panel. Drag and drop Show Printable Page Behavior into the command button you just added. Show Printable Page Behavior

Show Printable Page Behavior is a client behavior tag that provides a declarative solution to a common client operation that you would otherwise have to write yourself using JavaScript. When associated with a Command Button component, Show Printable Page Behavior generates and displays a printable version of the current page when users activate the command component. [ tell me more...]

12. In the Application Navigator, right-click menu. In the IDE

LayoutPage.jspx and choose R un from the context

When you complete the steps for adding tables into Panel Tabbed and Panel Collection, the visual editor should look similar to this: [ tell me more...]

Copyright 1997, 2009, Oracle. All rights reserved.

E-mail this page Printer View

Implement Drag and Drop

You can work in JDeveloper's IDE to add drag and drop functionality on a page by defining components as drag sources and drop targets. Create a New Application: Use the Create Application wizard to create a generic application. Create a JSF Page: Use the Create JSF Page dialog to add a new page. Define the Drag Source Component: Add an Image component. Then use the af:attributeDragSource tag and Insert Attribute Drag Source dialog to specify an attribute of the component as the drag source. Define the Drop Target Component: Add an InputText component. Then use the af:attributeDropTarget tag and Insert Attribute Drop Target dialog to specify an attribute of the component as the target to receive a drop. Create Custom Code to Handle a Drop Event: Create a managed bean and add a DndAction drop event listener method to the bean. Use the Drop Event Listener on a Drop Target: Add a SelectOneListbox component to use as a new target component. Then use the af:dropTarget tag and Insert Drop Target dialog to specify the custom method to invoke on the dropListener attribute of the target component.

Create a New Application and Project

Creating a New Application and Project

The JDeveloper application is the highest level in the organizational structure. It stores information about the objects you are working with, while you are creating your application. It

keeps track of your projects and the environment settings while you are developing. [ tell me more...]

1. Open the Create Application wizard [ File> New > General > Applications] . 2. To follow along with the example, enter DndApp as the application name. 3. Select Generic Application in the Applica tion Template list, then click Finish . Application Templates

Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project. [ tell me more...]

4. In the Application Navigator, select the project you just created and open the Project Properties dialog, JSP Tag Libraries Page. [ Application > Project Properties] 5. Select the Distributed Libraries folder, and click Add . 6. In the Choose Tag Libraries dialog, select ADF Faces Components 11 and click OK. JSP Tag Libraries

Libraries are provided for the various APIs and technologies installed with JDeveloper. These libraries are categorized as extension libraries, which are shared by all users of an install. [ tell me more...]

7. Click OK to close the Project Properties dialog. 8. Click Save All to save your work. In the IDE

When you complete the steps for creating a new application and project, the Projects panel in the Application Navigator looks similar to this: [ tell me more...]

Create a JSF Page

Creating a JSF Page

To follow along with the example, in this step and throughout the cards, enter values as shown in the instructions. Then you will be able to follow the steps in the cue cards exactly as written. [ tell me more...]

1. In the Application Navigator, select the project and open the Create JSF Page dialog. [ File > New > Web Tier > JSF > JSF Page] 2. Enter the file name myPage.jspx and confirm that Create as XML Document (*.jspx) . 3. Under Initial Page Layout and Content, select Quick Start Layout , then click Bro wse . Quick Start Layout

ADF Faces provides a number of components that you can use to define the overall layout of the page. JDeveloper includes pre-defined page layouts that use these layout components to provide you with a quick and easy way to correctly determine the layout of your pages. [ tell me more...]

4. In the Component Gallery, under Categories select Two Column. 5. Under Types , select the third pane type on the first row (Two Column Left, Partial Header). 6. Under Layouts , select the third layout behavior on the first row (Two Splits, Stretched). You should see Two Column Left, Partial Header (Two Splits, Stretched) under Options . Click OK. 7. In the Create JSF Page dialog, make sure Page Implementation shows UI Components are not exposed in managed bean. Click OK. Component Binding

When you create a JSF page using the dialog, you can specify whether or not components on the page are exposed in a managed bean, to allow programmatic manipulation of the UI components. By default components are not exposed to managed beans. If you wish to bind components to managed beans, expand the Page Implementation section in the Create JSF Page dialog, then select one of the automatic binding options. [ tell me more...]

8. Click

Save All to save your work.

In the IDE

When you complete the steps for creating a JSF page using a quick start layout, the visual editor should look similar to this: [ tell me more...]

Define the Component to Use as the Drag Source

Defining the Component to Use as the Drag Source

You can drag a single object using a component and one of its attributes as the drag value, or you can drag a collection of objects such as a table or tree component. To define a component as a drag source, first add the non-collection or collection component to your page, then embed either the af:attributeDragSource tag or af:collectionDragSource tag into the non-collection or collection source component, respectively. [ tell me more...]

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Box into the first splitter pane on the left column. In the Property Inspector, Common section, change the Text property to Drag this. 2. In the Component Palette, Common Components panel, drag and drop Image into the panel box component you just added. In the Insert Image dialog, click the dropdown menu next to the Source field and choose Edit. Use the dialog to locate and select an image file. Click Yes to add the icon image under the document root and then click Save. Click OK to close the Insert Image dialog. Adding Images

In the Insert Image dialog, you can add any image by entering the image file name in the Source field. Alternatively you can use the Edit Property dialog to navigate to a source and select an image file. To use the Edit Property dialog, click at the end of the Source field and choose Edit. [ tell me more...]

3. In the Component Palette, expand the Operations panel. Drag and drop Client Attribute into the image component you just added. In the Property Inspector, enter cup in the Name field, and Coffee in the Value field.

Client Attributes

The ADF Faces tag af:clientAttribute lets you specify the name and value of an attribute to add to a component. For example: [ tell me more...]

4. In the Component Palette, Operations panel, drag and drop Attribute Drag Source into the image component. In the Insert Attribute Drag Source dialog, enter cup in the Attribute field or select it from the dropdown list. Then click OK. Tags for Enabling a Component as a Drag Source

ADF Faces provides two tags for declaratively enabling a component as a drag source, namely, af:attributeDragSource and af:componentDragSource. The tags are nested within those components you wish to enable as drag source components. For example: [ tell me more...]

5. Click

Save All to save your work.

In the IDE

When you complete the steps for defining the component and component attribute to use as the drag source, the visual editor should look similar to this: [ tell me more...]

Define the Component to Use as the Drop Target

Defining the Component to Use as the Drop Target

A drop target can be a collection or non-collection component. For instance you can drag and drop onto a single object using a component and one of its attributes as the drop target, or you can drag and drop onto a collection of objects such as a table or tree component. To define a component as a drop target, first add the component to your page, then embed either the af:attributeDropTarget tag or af:collectionDropTarget tag into the non-collection or collection target component, respectively. [ tell me more...]

1. In the visual editor, move the horizontal splitter bar down to about half the page. 2. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Box into the first splitter pane on the right column. In the Property Inspector, Common section, change the Text property to Drop here. 3. In the Component Palette, Common Components panel, drag and drop Input Text into the panel box component you just added. In the Property Inspector, Common section, change the Label property value to Cup. 4. In the Component Palette, Operations panel, drag and drop Attribute Drop Target into the input text component. In the Insert Attribute Drop Target dialog, select value from the Attribute dropdown list, and click OK. Tags for Enabling a Component as a Drop Target

The af:attributeDropTarget tag lets you specify a component attribute (such as value) to be set when a compatible value is dragged and dropped onto the component. For example, if the target component is af:inputText, to enable the component and its value attribute as the drop target, you would embed af:attributeDropTarget within af:inputText and specify value as the drop target attribute, as shown here: [ tell me more...]

5. In the Application Navigator, right-click Running and Testing a JSF Page

myPage.jspx and choose R un from the context menu.

By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages. [ tell me more...]

In the IDE

When you complete the steps for defining the component and component attribute to use as the drop target, the visual editor should look similar to this: [ tell me more...]

Create a Custom Drop Event Listener

Creating a Custom Drop Event Listener

To invoke custom code when a drop event is fired, register a drop event listener on the drop target component. The drop event listener is a method in a managed bean that contains your custom code for handling and processing the drop event. At runtime, when a source component is dragged and dropped on the target component, the drop event listener method is automatically invoked. [ tell me more...]

1. In the Application Navigator, double-click faces-config.xml to open the file. In the editor window, click the Overview tab at the bottom of the editor. 2. In the Managed Beans section of the overview editor, click Add to open the Create Managed Bean dialog. JSF Managed Beans

While JSF allows you to bind a component in the user interface directly to any JavaBean, the best choice is to use JSF managed beans. [ tell me more...]

3. Enter dnd as the bean name, and MyPage as the bean class. Change Scope to session. Make sure Generate Class If It Does Not Exist is selected. Click OK. 4. In the editor window, click the MyPage.java tab at the top to bring the document forward. Editing a Java Class

The tabs at the top of the editor window are document tabs. Selecting a document tab gives that file focus, bringing it to the foreground of the editor window. [ tell me more...]

5. In the source editor, add a property and getter method that creates a list of items for populating a select input component. Then add a DndAction method handler for a drop event. Use sample code Writing Methods

The first method you will write is a getter method for returning a List of javax.faces.model.SelectItem instances. This is for populating a listbox component, which you will add in the next card. To write the method, first declare a property of type List<SelectItem>, then use a set of add(new SelectItem("some value", "some label")) statements to create the list. [ tell me more...]

6. In the Application Navigator, right-click MyPage.java and choose Make . You should see the message Successful compilation: 0 errors, 0 warnings in the Messages Log window. In the IDE

When you complete the steps for creating a custom drop event listener, the Application Navigator should look like this: [ tell me more...]

Register the Custom Drop Event Listener on a Drop Target

Registering the Custom Drop Event Listener on a Drop Target

The drop event listener method you created in the previous card adds a dropped value to a list of items in a listbox. Thus, in this example, you will add the af:selectOneListbox component and use it as the drop target. [ tell me more...]

1. In the editor window, click the myPage.jspx tab at the top to bring the page forward. 2. In the Component Palette, ADF Faces page, Common Components panel, drag and drop Select One Listbox into the second splitter pane on the page.

Binding to a Dynamic List

The af:selectOneListbox component (and other similar select input components) can contain one f:selectItems component for representing the items in the list. For the af:selectOneListbox component to be populated with an initial list of items at runtime, you value bind the f:selectItems component (through its value attribute) to a getter method on a managed bean that returns an array of javax.faces.model.SelectItem instances. [ tell me more...]

3. In the Insert Select One Listbox wizard, Select page, make sure Bind to list (select items) is selected. Click Bin d... next to the Value field. 4. In the Expression Builder, expand JSF Managed Beans | dnd. Select choices to create the expression, and click OK. Then click Finish to complete the wizard. Binding by Using JSF EL Expressions

JSF 1.2 supports the Java EE 5 unified expression language (EL), which unifies the JSF and JSP expression languages. [ tell me more...]

5. In the Property Inspector for the select one listbox component, Common section, change the Label property value to Beverage choices and press Enter. 6. In the Component Palette, Operations panel, drag and drop Drop Target into the select one listbox component on the page. 7. In the Insert Drop Target dialog, choose Edit from the dropdown menu next to the DropListener field. 8. In the Edit Property dialog, select dnd from the Managed Bean dropdown list, then select handleItemDrop from the Method dropdown list. Click OK. You should see #{dnd.handleItemDrop} in the DropListener field. Click OK to close the Insert Drop Target dialog. DropTarget and DataFlavor Tags

When af:attributeDropTarget, af:collectionDropTarget, or af:calendarDropTarget meets your drag and drop functionality needs, or when you have custom code to perform upon a drop action, you can use the af:dropTarget tag with a component to make that component eligible for accepting drops. [ tell me more...]

9. In the Insert Data Flavor dialog, enter java.lang.String in the FlavorClass field, and click OK. 10. In the Application Navigator, right-click myPage.jspx and choose R un from the context menu.

In the IDE

When you complete the steps for specifying a drop target with a data flavor, and registering the drop event listener on the drop target, the visual editor should look similar to this: [ tell me more...]