Developing Rich Web Applications With Oracle ADF

Developing Rich Web Applications With Oracle ADF

This tutorial shows you how to build a rich Web application that interacts with a database. You'll be using Oracle JDeveloper 12c Version 12.1.2 and the Oracle ADF framework to build the application, and in the process you'll work with Oracle ADF Business Components, Oracle ADF Faces Rich Client Components and Oracle ADF Task Flows.

The tutorial takes you through a simple scenario of building a Web application that provides a user interface to access database tables. You use Oracle JDeveloper 12c Version 12.1.2 and Oracle ADF to create a complete application including business services, user interface and page flows. The focus of the tutorial is to illustrate the visual and declarative approach that Oracle ADF provides for Java EE application development. While working through the tutorial notice how ADF saves you from writing low level code and speeds up your development process.

Before starting this tutorial you should:

1. Have access to or have installed Oracle JDeveloper 12.1.2. You can download it from Oracle Technology Network. Install it into a directory of your choice, which, in this tutorial is referred to as JDEVELOPER_HOME.
2. Have access to, or have installed an Oracle 11g database, including the HR schema. (Note that the schema may be locked for security purposes. If this is the case you will need to log in to sqlplus using the system user, and unlock it). The image below shows you an example of the page you'll create.

Purpose	Duration	Application
The application that you create displays information about departments and employees. You create several JSF pages that enable you to query and update the data in the database. You also create a page that is used as a display container for several task flows. To see the completed application, click the Download button to download a zip of the completed application, and then unzip it in your JDeveloper mywork folder.	2 hours

Part 1: Creating a Fusion Web Application and Building the Business Service

When you work in JDeveloper, you organize your work in projects within an application. JDeveloper provides several template applications that you can use when creating an application and projects. The template applications are pre-configured with a basic set of technologies that are needed for developing the various types of applications. You create your working environment by selecting the template that best fits your needs and then configure it to add any additional technologies you plan to use.

In the first part of this tutorial you are going to create a new Fusion Web application and build reusable business components that will access the database.
You'll be using Oracle ADF Business Components to map Java objects to existing tables in your database.

Step 1: Create a Fusion Web Application

1. Start JDeveloper by selecting Start - Programs - <JDEVELOPER_HOME>- OracleHome - Oracle JDeveloper Studio - Oracle JDeveloper Studio
   
2. In the Select Role dialog, select Studio Developer (All Features) and click OK.
   
   
   
Shaping, which is based on the role of the user, allows the JDeveloper environment to tailor itself. It does this by removing unneeded items from the menus, preferences, new gallery, and even individual fields on dialogs.

Shaping can even control the default values for fields on dialogs within the tool. When you first start JDeveloper, you are prompted to choose a role that describes how you are going to use JDeveloper. If you choose a role of "Java Developer" versus "Database Developer " versus "Customization Developer " you will get a totally different experience!
If a dialog box opens asking if you would like to import preferences from a previous JDeveloper installation, click NO. Close the Tip of the Day window.
3. Once loaded, the JDeveloper IDE appears. The very first time you open JDeveloper, the Start Page displays. You can re-invoke the Start Page later by choosing Help > Start Page.
   
   Notice the various options available to help you learn about JDeveloper. After exploring some of these options, close the Start Page by clicking the X on its tab (the X appears when you mouse over the tab).
   
   
4. Click the New Application link in the Applications window.
   
5. In the New Gallery, select ADF Fusion Web Application and click OK.
   
6. JDeveloper loads the required features for a Fusion Web application and the Create Fusion Web Application (ADF) wizard launches.
   In the Name your application page of the wizard, type HRSystem as the name. If required, you can change the directory path to create your files in another location.
   In the Application Package Prefix field set the value to be demo and click Next.
   
7. In the Name your project page ensure that the project name is Model (the default). Notice that ADF Business Components and Java are listed as the project features of a Fusion Web application.
   
   Click Next.
8. The Configure Java settings page allows you to define a default package, a Java source path and an output directory. Click Next to accept the default values.
   
9. In the second Name your project page, ensure that the Project Name is ViewController. Scroll through the list of project features to see the types of technologies that can be used with a Fusion Web application.
   
   Click Next.
10. In the Configure Java settings page accept the defaults and click Finish to create your Fusion Web application and projects.
    
11. The HRSystem application and the two projects are displayed in the Applications Navigator on the left of the screen. Save your work.
    
    Notice too, the Checklist on the right side of the screen.
    
    This checklist is displayed by default when a Fusion Web application is created. It is designed as a guide to lead you through the tasks involved in building this type of application. The next steps show you how the checklist might be used while developing an application.

Step 2: Build the Business Service

1. In the CheckList Overview, click the Connect to a Database step.
   
2. The step expands showing useful information such as prerequisites required for performing the task and detailed instructions on how to perform the task. Click the Create a Database Connection button.
   
3. Specify the following properties for the new connection you are creating:

   Connection Name	HRConn
   UserName	hr
   Password	hr

   Enter the appropriate Oracle JDBC Settings to point to the right host, port and SID for your database. Click the Test Connection button to verify that you can connect successfully.
   
   Click OK.
4. Click the down arrow to shrink the Connect to a Database step.
   
5. In the Checklist, set the status of the Connect to a Database step to Done.
   
6. Click the Build Business Services step to expand it, then click the Go to Substeps button.
   
7. In the list of substeps, click the Create Entity Objects and Associations sub step.
   
8. Click the Create Entity Objects and Associations button.
   
9. In the Select Project for Action dialog, select the Model project and click OK.
   
10. In the Initialize Business Components Project dialog select the HRConn connection if it is not already selected. Click OK.
    
11. The Create Business Components from Tables wizard launches. In the Entity Objects page, click the Query button to examine the data dictionary and see available tables.
    
12. Select the DEPARTMENTS and EMPLOYEES tables in the Available list, and click the right arrow to move your selections to the Selected list. This step creates updatable entity objects based on the tables selected.
    
    Click Next to continue.
13. In the Entity-based View Objects page of the wizard, move Departments (HR.DEPARTMENTS) and Employees (HR.EMPLOYEES) to the Selected list. This step creates matching view objects DepartmentsView and EmployeesView for performing queries on the entity objects you just created.
    
    Click Next to continue.
14. In the Query-based View Objects page, click the Query button and then move JOBS to the Selected list. This step creates a read-only view object that queries the Jobs table. Then click Next to continue.
    
15. In the Application Module page, click Finish to create the business components in the Model project.
    
16. In the Checklist, set the status of the Create Entity Objects and Associations step to Done.
    
17. Click the Close Step 3 button.
    
18. Click the Back to Checklist link and set the status of the Build Business Services step to Done
    
19. In the Applications Navigator right-click AppModule and select Run to invoke the application module tester. This is a small Swing-based application that allows you to test the ADF Business Components you have just created.
    
20. In the Oracle ADF Model Tester window, double-click the EmpDeptFkLink1 node to show the department and employees data. Navigate between the records using the Next button and notice the automatic master-detail synchronization.
    
21. Click the Specify View Criteria button (binocular icon)  in the master toolbar, to enter search criteria for your data. Specify 1700 in the LocationID field and click the Find button to execute the query.
    
22. The form now only shows departments in this location. Use the Next button to scroll through the departments at Location 1700.
    
    You need to remove the parameter value of the search criteria to access all departments again.
23. Close the Oracle ADF Model Tester window, and back in JDeveloper, click the Save All  icon on the JDeveloper menu bar, or select File > Save All from the menu.

Part 2: Developing the User Interface

JavaServer Faces (JSF) is a standard Java EE technology that simplifies Web development.
In this part of the tutorial you create a JSF page to access the business components that you created in the previous part.

You create a form that can be used to display and modify data. You use a master-detail relationship to display information about employees in a department. To build the page you'll use Oracle ADF Faces Rich Client components. These components allow you to build an Ajax-based rich Web UI without writing low-level HTML and Javascript code.

Step 1: Create a JSF Page

1. Right-click the ViewController project node in the Applications window, and select New > From Gallery...
   
The Web part of the application is developed in a separate project called the ViewController project, which you created in the previous part of this tutorial when you created the Fusion Web application.

Maintaining a separation between the Model layer and the user interface by developing them in separate projects, makes the business services layer more reusable.
2. In the New Gallery, navigate to JSF/Facelets under the Web Tier node, and choose Page in the Items pane. Click OK.
   
3. In the Create JSF Page dialog, rename the page to DeptEmpPage.jsf; make sure the Document Type radio button is set to Facelets, and in the Page Layout tab select the Reference ADF Page Template radio button and choose Oracle Three Column Layout.
   
4. Click OK.
5. The page displays in the Design Editor. The template has three columns in it, but you only need two in the page, so delete the third one.
   In the Structure window,expand af:form > af:pageTemplate > Template facets. Right-click af:facet - end and choose Delete. You will notice that the end facet is not deleted from the list of page template facets. It is however removed from the page usage.
   
6. With af:pageTemplate selected in the Structure window, in the Properties window set the startColumnSize property to 350.
   
Next, add some layout components to the page.
7. In the Components window expand the Layout group of components and locate the Panel Accordion component in the Interactive Containers and Headers section. Drag it into the start facet of your page.
   
8. Select af:showDetailItem (the panel accordion that you just added to the page in the previous step) in the Structure window and in the Properties window change its Text property to Departments.
   
9. Right-click the new Departments Show Detail Item, and choose Insert after Show Detail Item - Departments > Show Detail Item. This adds another accordion to your page.
   
10. Change the Text property to More Info.
    
    This is another way of adding components to a page using context menus directly inside the Design Editor (instead of dragging and dropping from the Components window).
11. From the Layout components, click and drag a Panel Splitter component onto the center facet of your page.
    
12. In the Properties window change the Orientation property of the new splitter to vertical.
    
13. From the Layout components, drag a Panel Collection component into the first facet at the top of the splitter on your page.
    
    It might be easiest to use the Structure window to drop the component in the correct position.
    
    A panel collection is a component that aggregates collection components like table, treeTable and tree to display standard/application menus, toolbars and status bar items.
14. Using the Structure window, drag a Panel Tabbed component into the second facet of the splitter on your page.
    
15. Double-click the tab DeptEmpPage.jsf at the top of the page to view it in its entirety. The page should look like the screen shot below.
    
16. Click the Save All icon on the JDeveloper menu bar to save your work.
    

Step 2: Bind Data Controls to the Page

In this step you bind the business components you created in Part 1 of this tutorial to the user interface. You do this with simple drag and drop operations; behind the scenes the ADF Model layer takes care of binding the data for you.

1. In the Design Editor click the Departments accordion to expand it.
   
2. In the Applications Navigator expand the Data Controls accordion, and in it expand AppModuleDataControl to expose the business services you defined in the first part of this tutorial.
   
3. Drag the DepartmentsView1 data control into the Departments accordion in your JSF page. When prompted to choose the type of component you want to create, choose ADF Form.
   
4. In the Edit Form Fields dialog, check the Read-Only Form and Row Navigation Controls checkbox and click OK.
   
5. In the Data Controls accordion expand DepartmentsView1 to expose the fields it contains, as well as the related EmployeesView3 control for the employees in each department. Note that these are the "detail" employees for the "master" departments - they are linked and therefore at runtime, the employees you see in this view object are the ones who belong to the selected (or viewable) department.
   
6. Drag the EmployeesView3 data control onto the Panel Collection that you created in the first facet of the PanelSplitter. Create it as an ADF Table...
   
7. In the Edit Table Columns dialog, choose Single Row in Row Selection, and check the checkboxes for Sorting and Filtering and Read-Only Table checkboxes. Click OK.
   
8. Drag the EmployeesView3 data control again but this time onto showDetailItem 1 in the panelTabbed component in the second facet of the panelSplitter. Create it as an ADF Form.
   
9. In the Edit Form Fields dialog, check the Include Submit Button check box. Using your mouse and the Shift key select the bottom three fields from the list: CommissionPCT, ManagerId, DepartmentID and delete them by clicking the Delete button .
   
   Click OK.
   
10. Click the Save All  icon on the JDeveloper menu bar to save your work.
    Right-click in the page and choose Run. This will compile your project, build it, and launch the integrated WebLogic Server to run it. The default web browser opens to display the page. You can follow the progress of these steps in the Log window in JDeveloper.
    
11. Once the page displays in the browser, resize the page area using the splitter to display the department data. Then use the Next button to scroll through the departments. Notice that the employee data changes to show the employees within the displayed department. Notice also that the employee form displays the currently selected employee.
    
12. Close the browser window.

Step 3: Refine the Business Services

In these steps you refine the business services by adding validation rules, formatting and default values.

1. In the Applications window under the Model project, locate the Employees entity object and double-click it to open it for editing.
   
2. In the Employees.xml window, click the Attributes finger tab and locate and select the Salary attribute. Scroll down in the page to the Validation Rules tab and click the Add icon to add a new validation rule.
   
3. Keep the default Name and in the Add Validation Rule dialog choose Range from the Rule Type drop down list. Note the various other types of rules you can define here. In the Operator field ensure that the value is set to Between, and type 0 for the minimum value and 99000 for the maximum value fields.
   
4. Click the Failure Handling tab to define an error message that will display when the validation fails. In the Message Text field type an error message like "Salary out of range 0 to 99,000" and click OK.
   
5. Next you add a default value to the hire date field - so that when a new employee is created the hire date defaults to the current date.
   In the Employees.xml window, locate the HireDate attribute, and select it. In the Value section of the Properties window, locate the Default Value Type property and select Expression, then set the Default Value property to adf.currentDate. This will ensure the default value for a new record is set to today's date.
   
You can also specify UI Hints for attributes to control how they display by default in the forms and pages that use them. In this step you add a default format mask for the hire date field. You can also specify labels and tooltip help here.
6. In the UI Hints section of the Properties window locate the Format Type property and select Simple Date.
   
   Set the Format property to dd/MMM/yyyy. You should get a warning message indicating that this will change the format in a resource bundle. Click Yes to acknowledge the message.
   
7. Run the page again to test the refinements you have made.
   
8. Test the HireDate field. Notice that as soon as you click in the field you are provided with an example of the format for the date (as you defined it).
   
9. Use the Clock/Calendar icon next to the field to display a pop-up calendar and choose a valid date.
   
10. Update the Salary field to a value that will break the validation you created earlier (e.g. -9) and click the Submit button to see the error message you created.
    
11. Browse to department 50 and notice that you can now sort the data in the employees table. Click on one of the column headers in the table to sort the data in the table.
    
12. Click a column heading in the table and drag it to reposition it in the table.
    
    The new column order looks as follows:
    
13. In the Filter field above the LastName column, type B% and press Enter to filter the table to show only those employees whose surname begins with the letter B.
    
14. Experiment with the other menus and buttons of the table to see additional functionality. Once you are finished, close the browser and return to JDeveloper.

Step 4: Enhance the JSF Page

In the next steps you enhance the user interface by modifying the table of employees to add the ability to do column selection, by reordering the fields in the Employee details tab, and by binding the business components to a graph representation. You do this with simple drag and drop operations - behind the scenes the ADF Model layer handles the data binding for you.

1. Click the DeptEmpPage.jsf tab to return to the page in the Design Editor. Select the Employees (t1) table in the Design Editor or in the Structure window. Set the Column Selection property of the table to Single.
   
2. In the Structure window select the panelFormLayout that surrounds the employee details fields in the showDetailItem tab.
   
3. In the Properties window set the Rows property to 5.
   
   
   When you run the page in a later step you will see that the fields in the tab are now arranged in two columns.
   Notice that you can control layout of the objects within a layout container by setting the properties of the container.
Next you add a graph representation of the data to the page; this is done using the ADF Data Visualization set of JSF components.
4. In the Design Editor click the More Info accordion to expand it. Then drag the EmployeesView3 data control into the More Info accordion and create it as a Graph.
   
   The graph can be displayed as static PNG image or an interactive Flash component.
   
   You control these behaviors through the properties of the graph component.
5. In the Component Gallery choose Pie from the list of graphs on the left and Pie again as the graph type. In the bottom pane, select the third Quick Start Layout.
   
   Click the OK.
6. In the Create Pie Graph dialog select Salary in the Pie drop down and then, drag and drop LastName into the Slices field. Click OK.
   
   
   
   Click OK.
7. Click the Save All  icon on the JDeveloper menu bar to save your work and then right-click within the page and select Run from the context menu.
   
8. Browse to department 50. Because you set the column selection to single, note the additional behaviors for the table that are available once you choose a column - such as Freeze and Wrap.
   
   Select a column, then click the Freeze button. Now use the horizontal scroll bar to view the right-most columns. The Columns Frozen value is the number of columns (inclusive) to the left of the frozen column.
   
   
   
   
   
   
9. In department 50 expand the More Info accordion and notice the graph and the popup that displays when you hover over it with your mouse.
   Since we plotted salary by last name, each slice of the pie represents the salary amount relative to the other employees. In this case Weiss, Fripp and Kaufling make the most.
   
10. Scroll over to the showDetailItem1 tab, and notice how the fields have been reordered into two columns.
    
When you are done, close the browser and return to JDeveloper.

Step 5: Add More Complexity to the Business Services

In this step you add a new business service to the application to display a subset of the fields from the Employees table, along with the department name from the Departments table. You also add a field that calculates the annual salary of an employee and a list of values field for department names. Oracle ADF Business Components allows you to create such complex updatable components in a declarative way.

1. In the Applications window right-click the demo.model package and choose New View Object.
   
2. In the Name page of the Create View Object wizard, type EmpDetails as the Name and retain Entity object as the default data source.
   
   Click Next.
3. In the Entity Objects page of the wizard first select Employees and shuttle it to the right, and then select the Departments entity and add it also to the Selected pane.
   
   Note that only the Employees entity has the updatable checkbox checked - the departments entity is used to read data only.
   
   
   
   
   Click Next.
4. In the Attributes page of the wizard, shuttle the following Employees attributes into the Selected pane:
   EmployeeId, FirstName, LastName, Email, Salary, HireDate, JobId. The order you select the attributes will become the order they're displayed.
   
   And from the Departments entity, shuttle the following attributes into the Selected pane:
   DepartmentId, DepartmentName.
   
   Click Finish to complete the view object creation.
5. Next you add a calculated attribute to the view object, that displays the employee's annual salary.
   If it is not already open, double-click EmpDetails in the Applications Navigator.
   
6. Click the Attributes finger tab and from the drop down list select New Attribute...
   
7. In the New View Object Attribute dialog type AnnualSalary as the name for the new attribute and Number as the Type, then click OK.
   
8. In the Details tab at the bottom of the attributes list, set the following properties for the AnnualSalary attribute:

   Field	Value
   Name	AnnualSalary
   Type	Number
   Default Value	Expression (Checked)
   Value	(Salary == null ? 0 : Salary) * 12

   .
   In the next steps you add a list of values to a field based on a set of values stored in another table. In this case you create a list of values for possible job titles based on the Jobs table.
9. In the EmpDetails.xml editor click the Attributes tab and select the JobId attribute. Click the List Of Values tab at the bottom of the attributes list.
   
10. In the List of Values tab click the Add button to create a list of values.
    
11. In the Create List of Values dialog click the green plus to the right of the List Data Source field. In the View Accessors dialog, select JobsView.
    
    Click OK.
12. Back in the Create List of Values dialog, choose JobId as the List Attribute.
    
13. Still in the Create List of Values dialog click the UI Hints tab and choose Combo Box with List Of Values as the Default List Type and then shuttle the Job Title attribute into the Selected pane.
    
14. Click OK and save your work.
Now you add the new object that you've created to the data model.
15. In the Applications window double-click AppModule to open it for editing and choose the Data Model tab.
    
16. Click the EmpDetails view object and shuttle it into the Data Model pane. Notice how the name for the new instance is EmpDetails1.
    Save your work.
    
17. Use the Business Component Browser to test the new functionality you have just incorporated through the EmpDetails view object. In the Applications window right-click AppModule and select Run to invoke the tester.
    
18. Double-click the EmpDetails1 view object.
    
19. Notice that the new calculated AnnualSalary field is displayed, along with DepartmentId and DepartmentName. None of the them are updatable here.
    
20. Use the drop down list for the JobId field to choose a new job.
    
21. The field is populated with the new job.
    
22. Close the Business Component Browser window without committing the changes.

Part 3: Enhancing the User Interface

Web applications usually have more than one page in them. In this part of the tutorial you add another page - a Search page - to your application and use the ADF Task Flow Diagrammer to define the navigation rules between the two pages. You then use features of the ADF Faces Framework to add extra functionality to the pages. Finally you create a reusable page fragment and add it to the DeptEmpPage page.

This is the Search page for the application. Notice the list of values for the JobId and the relationship between the Salary and Annual Salary fields. In this section you'll see how to coordinate the salary values and to add a auto suggest behavior to the jobId.

Step 1: Create a Page Flow

1. In the Applications window locate the adfc-config file under the Page Flows node in the ViewController project. Double-click it to open it in the editor. This is where you are going to define the application's navigation.
   
2. Drag the DeptEmpPage.jsf file from the Applications window into the empty adfc-config diagram.
   
3. From the Components window drag and drop a View activity into the adfc-config diagram, and rename it query. This represents the new JSF page that you are about to create.
   
4. From the Components window click Control Flow Case and then click DeptEmpPage,and next click the query page.
   
   Name this line goQuery.
   
5. From the Components window choose another Control Flow Case and then create an opposite flow from the query page to the DeptEmpPage. Name this flow back.
   
6. Double-click the query activity in the diagram to create the new page. In the Create JSF Page dialog accept the default Facelets radio button, and click the Quick Start Layout radio button.
   
   Select the default One Column category, type and layout, then click OK.
   
7. To add the employees search functionality to the page, open the Data Controls accordion, and locate EmpDetails1. (If you do not see it click the Refresh button).
   
   
8. Expand the EmpDetails1 data control and expand the Named Criteria node below it. Select All Queriable Attributes and drag it into the new query.jsf page. Create it as a Query > ADF Query Panel.
   
9. In the Data Controls accordion select the EmpDetails1 data control and drag it into the center area of the page below the query component. Create it as an ADF Form...
   
   In the Edit Forms Details, check both the Row Navigation and the Submit Button checkboxes. Click OK.
   
10. With the panelFormLayout still selected, use the Properties window to set the Rows property to 5.
    
    Also, set the Short Desc property to salary graph
    
11. In the Structure window locate the Submit button, right-click it and choose Insert After Button > Button.
    
12. In the Properties window change the Text of the new button to Back and for the Action property select back from the drop down list. This causes the button to perform the navigation you defined in the page flow diagram.
    
13. Next you add transaction operations to the page to allow you to commit and rollback changes. In the Data Controls Palette expand the application module level Operations node to locate the commit and rollback operations. Drag the Commit operation into the Structure window before the First Button. When prompted for a drop target choose ADF Button.
    
    
    
    
14. Repeat the same steps for the Rollback operation.
    
15. In the Properties window, for the Rollback and for the Commit buttons, reset the Disabled property to default to make both buttons always selectable.
    
    Move the mouse over then end of the property field and you'll see a light blue gear appear. Click it to perform this operation.
    
    
    
16. Double-click the Query.jsf tab to maximize the page in the Design Editor. Your page should look as follows:
    
17. Double-click the query.jsf tab again to return it to normal size.
18. Click the DeptEmpPage.jsf tab to switch back to the page. A quick way to navigate to this or any other file is by using the global find box at the top right of JDeveloper and typing the file name there.
    
    Then just click the file name to open it in the editor.
19. In the page design, expand the Departments accordion. From the Components window, choose a Button component and drag it into the Departments accordion between the First and Previous buttons. Alternatively you can right-click the First button and choose insert after > button to add the new button.
    
20. Using the Properties window change the Text of the button to Query and for the Action property type goQuery or select it from the drop down list if available. This causes the button to perform the navigation you defined in the page flow diagram.
    
21. Click the Save All  icon on the JDeveloper menu bar to save your work, and then right-click the DeptEmpPage.jsf page and choose Run.
    
22. When the page displays in your browser click the Query button to navigate to the new page. In the Search page click Advanced to display detailed search criteria.
    
23. In the FirstName field accept the default Starts with, and type the letter G.
    Press Search.The form below displays the record for Guy Himuro.
    
24. Experiment with the form, saving your search criteria, creating more complex queries and updating data for employees. Note how this form displays a view of the data that matches the definition in the view object you created - including information for Department name as well as a list of values for the Job id and the employee's annual salary.
    You can also make changes to the data and commit and rollback your transactions as needed.
    
    When you are finished close the browser window.

Step 2: Use Partial Page Refresh

In the next steps you become acquainted with some of the features of the ADF Faces Framework. You enhance your pages with additional Ajax functionality leveraging the declarative development features offered by ADF Faces components.

In the next few steps you use the partial page refresh capability offered by ADF Faces. You want to make sure that if the Salary field is updated, that the Annual Salary is recalculated. In addition, you don't want the entire page to refresh but rather just the affected fields. You will use an ADF Faces feature called Partial Page Rendering or PPR to accomplish that behavior.

1. Open the query.jsf file in the Design Editor, if it is not already open. Select the Salary field. In the Properties window set the value of the Id property to sal.
   
2. Still in the Properties window expand the Behavior node and set the AutoSubmit property to True.
   
3. Either in the Design Editor or the Structure window locate the AnnualSalary field. Locate the PartialTriggers property under the Behavior section and click the gear icon to its right to choose Edit.
   
4. In the Edit Property dialog locate the Salary field and shuttle it to the right using the blue arrow. Click OK.
   
5. Click the Save All  icon on the JDeveloper menu bar to save your work, and Run DeptEmpPage.jsf.
   
6. When the page displays, click the Query button in the Departments panel.
   
7. In the Search page search for employees whose first name begins with A%.
   
   Note the salary and annual salary values.
   
8. Update the Salary field and then tab out of it. Notice the immediate change to the AnnualSalary field once you leave the Salary field. However this is the only field that is refreshed (not the whole page).
   
9. Close the browser. 

Step 3: Use the ADF Auto Suggest Behavior

The af:autoSuggestBehavior component displays a drop down list of suggested items when the user types into an input component. To use the auto-suggest functionality in a declarative way you need a model-driven list of values on your model project, which will be the base for the suggestedItems list. Earlier you added a list of values to the JobId field so in this example you use that field.

1. 
   In the query page, select the JobId field.
   
2. In the Components window expand the Operations node, and locate Auto Suggest Behavior in the Behavior section. Drag and drop the Auto Suggest Behavior operation onto the JobId field.
   
3. Select the af:autoSuggestBehavior component in the Structure window. In the Properties window, set the SuggestedItems property to #{bindings.JobId.suggestedItems}. You can enter the value or use the Method Expression Builder by clicking the gear icon next to the property.
   
4. Save your work and then Run the query page.
   
5. Type 121 in the EmployeeId field, and click the Search button. In the record for Adam Fripp update the JobId field by typing 's' in it. A number of jobs beginning with 's' are suggested.
   
6. Add 'a' after the 's' and see the list of suggestions modified accordingly.
   
7. Choose Sales Representative from the remaining options, to populate the field.
   
8. Close the browser without saving the change.

Step 4: Use Drop Down Menus and Operation Components

In this step you add a drop down menu to a page and use a couple of ADF Faces operation components to add Javascript-based operations to the page. On component will export table data into an Excel spreadsheet and the other will create a printable page.

1. In the DeptEmpPage.jsf file click inside the menus facet in the panel collection surrounding the Employees table. Right-click and from the context menu choose Insert Inside Facet menus > Menu.
   
2. In the Properties window set the Text property to My Options.
   
3. In the Properties window expand the Behavior node and set the Detachable property to true.
   
4. In the Structure window right-click the menu component and choose Insert inside af:menu - My Options > Menu Item.
   
5. In the Properties window set the Text property of the new menu item to Export to Excel.
   
6. With the new Export to Excel menu item still selected in the Structure window, expand the Listeners section of the Operations node of the the ADF Faces components in the Components window.
   Locate the Export Collection Action Listener component and drag it onto the Export to Excel menu option in the Structure window.
   
7. In the Insert Export Collection Action Listener dialog click the gear icon next to ExportedId field and choose Edit.
   
8. In the Edit Property dialog navigate through the page structure to locate the table - t1 component and select it. Click OK.
   
9. From the Type drop down list select excelHTML and click OK.
   
10. Add another menu option to the menu. In the Structure window right-click the Export to Excel menu component and from the context menu choose Insert After Menu Item > Menu Item.
    
11. Set the Text property of this new menu option to Printable Page.
    
12. In the Behavior section under the Operations node of the Components window select the Show Printable Page Behavior operation to add it to the new menu item. Drag and drop it onto the new menu option you created.
    
13. Click the Save All  icon on the JDeveloper menu bar to save your work, and then choose Run.
14. When the page displays click the new menu and detach it.
    
    Click the 'x' to close the menu.
    
15. Then invoke each one of the menu options you created, for example Export to Excel.
    
    You may need to accept the download of the file in the browser window to be able to access the Excel file, and it should be found in your default 'download'. directory..
    
16. Try the Printable Page menu option.
    
    The page is ready for printing.
    
    Close the browser window.

Step 5: Add CRUD Operation Components to your Page

The next few tasks examine some of the data operations that JDeveloper makes available to view objects. You see how to add a Delete operation and a CreateInsert operation. When the user clicks the CreateInsert button to insert the new row you want the table to refresh to display the new empty row. To do this you again use the Partial Page Refresh feature that was covered in Step 2 of this part of the tutorial.The view object uses a bind variable to pass the employee's email into the query.

1. Click the query.jsf tab to return to the Query page, opening the Structure window. In the Data Controls accordion expand the EmpDetails1 node and then the Operations node below it. Select the CreateInsert operation.
   
2. Drag the CreateInsert operation in the Structure window onto the af:panelGroupLayout - horizontal in the footer facet of the employees form. Create it as an ADF Button. Hint: expand af:panelFormlayout -5 > Panel Form Layout Facets > af:panelGroupLayout - vertical > af:panelGroupLayout - horizontal.
   
3. In the Properties window set the Id property for the button to CreateInsert.
   
4. Still in the Properties window expand the Behavior node and in the PartialTriggers property choose Edit from the drop down list.
   
5. In the Edit window scroll through the page's components until you find the CreateInsert button. Shuttle it into the Selected pane.
   
   Click OK. This action defines the CreateInsert component as the trigger that will cause the table to refresh.
6. In the same way add a Delete operation by dropping the Delete operation from EmpDetails1 onto the panelGroupLayout in the page footer. As before, create it as an ADF button.
   
7. The two new buttons display at the bottom of the query page.
   
8. Save your work and then Run the Query page.
9. When the page displays type F% in the LastName field and click the Search button. The first F% employee record displays.
   
10. Click the CreateInsert button. The page refreshes and the fields are cleared (except for the HireDate field, which you set to default to the current date) so that a new record can be inserted.
    
11. Close the browser without committing.

Step 6: Create a Query-only Business Service Based on Parameters

In this step you create a view object that allows end users to search for an employee's name based on their email address. The view object uses a bind variable to pass the employee's email into the query.

1. In the Applications window locate the demo.model package and right-click it to choose New View Object....
   
2. In the Create View Object wizard set the Name property to EmpByEmail and choose the SQL Query radio button as the data source. Click Next.
   
3. In Step 2 of the Create View Object wizard type the following query:
   select first_name, last_name from employees where email = :p_email
   The ':' before p_email means that it is a variable that will be passed to the query.
   Click the Test and Explain button to verify your query.
   
   Click Close and then click Next.
4. In Step 3 of the Create View Object wizard, click the New button to define a new bind variable. Set the Name property to p_email.
   
   Click the Control Hints tab and set the Label Text to Email.
   
5. Click Next a few more times to accept all the defaults, until you get to step 8 of the wizard.
   
   Do NOT specify a Key Attribute, when prompted.
   
   Here check the Add to Application Module check box to include your new view in the data model.
   Click the Finish button.
   
6. Save your work and then run the Business Component Browser to test the new view. Double-click the new EmpByEmail1 view and when prompted to insert a value for the variable enter SKING and press OK to get the results for this email address. (To run the Business Components Tester, right-click the application module and select Run) 
   
   
   
   
7. Notice that the Business Components Browser shows only King.
8. Close the Business Component Browser.

Step 7: Create a Reusable Page Fragment

In this step you create a reusable page fragment. You then embed the view object you created in the last step into the page fragment, and finally you use the page fragment in the DeptEmpPage page

1. First create a new task flow specifically for this page. In the Applications Navigator right-click the ViewController project and choose New > From Gallery.
   
2. In the Web Tier > JSF/Facelets category choose ADF Task Flow.
   
   Click OK.
3. In the Create Task Flow dialog set the File Name property to search-email-flow.xml.
   Verify that the Create As Bounded Task Flow and Create with Page Fragments checkboxes are both checked.
   
   Click OK.
4. In the Design Editor drag a View component from the Components window onto the empty diagram and name it searchEmail. You only use a single page in this flow, but you can have bounded task flows with multiple pages and still include them in other JSF pages.
   
5. Double-click the new searchEmail view component to create the page fragment for it.
   Accept all the defaults in the dialog that displays and make sure the file name is searchEmail.jsff. This creates the page as a page fragment that can be included in other JSF pages. Click OK.
   
6. An empty page displays in the Design Editor. Expand the Data Controls accordion and, if necessary, click the Refresh button to ensure that the new EmpByEmail1 data control appears in the list.
   
7. Expand the new EmpByEmail1 view and the Operations node beneath it. Select the ExecuteWithParams operation. You are going to use this operation to execute the query for this view passing it the necessary parameter.
   
8. 
   Drag the ExecuteWithParams operation to your new page, and create it as an ADF Parameter Form.
   
9. In the Edit Form Fields dialog change the display label for the p_email value from default to Email. Click OK.
   
10. In the Design Editor for the page, click the ExecuteWithParams button and use the Properties window to change the Text property to Find Details.
    
11. From the Data Controls accordion, drag the EmpByEmail1 collection onto the page beneath the button. Create it as a Form > ADF Form....
    
12. Select Read-Only Form and accept the remaining defaults presented in the Edit Form Fields dialog. Then click OK. 
    Save your work.
    
    The page should look like this:
    
13. The new bounded task flow now contains a page fragment; next you include the complete bounded task flow inside another JSF page.
    In the Applications window locate the DeptEmpPage.jsf file and open it in the Design Editor, if it is not already open. From the Components window Layout section drag and drop a Separator component into the left accordion in the DeptEmpPage.jsf page beneath the Departments form.
    
14. Add the new flow you created as a region to the existing page.
    From the Applications window drag and drop search-email-flow.xml into the left accordion in the DeptEmpPage.jsf page beneath the new separator. Create it as a Region.
    
15. Your page should now look like the screen shot below.
    
16. Save your work and then Run the updated DeptEmpPage.jsf page.
    When the page displays in your browser test the new functionality by entering an email value (SKING) in the Email field and pressing the Find Details button.
    
17. The employee name information is returned.
    
18. Close the browser when you are done.

Step 8: Launching Pages with a Panel Springboard

In this step you use a panel springboard as a launch pad fro your pages. Once you've created your pages and task flows, you can hook them together using a panelSpringboard component. All pages must be packaged in bounded task flows as page fragments and added as regions. Each page or task flow can have an icon associated with it and you can determine the behavior of the items, once one is selected.

1. In preparation for the next set of steps, include some icons into your application. Right click on each of the following 3 images and save the the icons to your application's.../public_html directory.
   
     
   
   
   
2. Then back in JDeveloper, select the ViewController project and click the refresh icon. In the drop down menu, select Refresh ViewController.jpr.
   
   
   
   The Applications navigator will now display the included images.
   
   
Now we are ready to create the components for the springboard.
The first thing we need to do is create a couple of pages and place them on bounded task flows as page fragments. There are a few different ways to do this, we'll show you one.
3. Right click the View Controller project and in the context menu select, New > Page...
   
4. Name it Departments.jsf and create it using a blank page.
   
5. From the Data Controls palette, expand the AppModuleDataControl and drag and drop the DepartmentsView1 onto the page.
   In the popup menu, select Table/List View - ADF Table...
   
6. In the Create Table dialog, click OK to accept all the fields.
   
7. The resulting page should look like the image below. Save your work.
   
8. Select the ViewController project, and from the context menu select New - ADF Task Flow...
   
9. Name it depts-task-flow-definition.xml and deselect the Create with Page Fragments checkbox. Click OK to create the task flow.
   
10. From the Applications navigator, drag the Departments.jsf page onto the task flow and drop it.
    
    
    
    The resulting page is now part of the bounded task flow. .
    
11. Next, right click the task flow and select Convert To Task Flow With Page Fragments...
    
    Later on we'll create a page containing the panel springboard component. We can then add this task flow as a region on the springboard.
    
    
    
    
    In the popup, click OK to complete the conversion process.
    
    Save all your work.
Now we'll do the same process for an employees page and task flow. Then we'll have two different components to add to the springboard.
12. Right click the View Controller project and in the context menu select, New - Page...
    
13. Name it Employees.jsf and create it using a blank page.
    
14. From the Data Controls palette, expand the AppModuleDataControl and drag and drop the EmployeeView1 onto the page.
    In the popup menu, select ADF Form ...
    
15. In the Create Form dialog, select the Read-Only Form checkbox and then delete the following fields.
    
    JobId, Salary, CommissionPct, ManagerId, and DepartmentId
    
    Then click OK.
    
16. The resulting page should look like the image below.
    
    Save your work.
    
17. Select the ViewController project, and from the context menu select New - ADF Task Flow...
    
18. Name it emps-task-flow-definition.xml and deselect the Create with Page Fragments checkbox. Click OK to create the task flow.
    
19. From the Applications navigator, drag the Employees.jsf page onto the task flow and drop it.
    
    
20. Next, right-click inside the task flow and select Convert To Task Flow With Page Fragments...
    
    Remember, later on we'll create a page containing the panel springboard component. We can then add this task flow as a region on the springboard. 
    
21. In the popup, click OK to finish the process.
22. Save your work.
23. Create a page to contain the springboard. Create it in the ViewController project and name it springboard.jsf and select the Create Blank Page radio button. Then click OK.
    
24. From the Components window, expand the Layout node and scroll to the Interactive Containers and Headers section. Then, select and drag and drop a Panel Springboard onto the page
    
25. Select the panelSpringboard component and in the Properties window, set the Display Mode to grid.
    
26. Inside the panelSpringboard component, right click and select Insert Inside Panel SpringBoard - Show Detail item 
    
    
    
    Add another detail item to the springboard
    
27. For each of the showDetailItems, use the Properties window to set the Text values.
    
    showDetailItem 1 = Show Departments
    showDetailItem 2 = Employees 
    
    Save your work.
    
28. For each showDetailItem, select and set the Icon property to the image names as follows..
    
    Show Departments = 36-toolbox.png
    Employee = 19-gear.jpg
    
    To set the property, move your cursor to the right side of the Icon property and click on the blue gear.
    
    
    
    Then click it, and select Edit.
29. 
    
    
    Select the appropriate image and click OK.
    
    
    
    When prompted to allow the image to be put in the 'resources' directory, click No.
    
The next step is to determine and associate what page or task flow the springboard item will invoke. You can do this by dragging and and dropping a page or task flow onto the springboard detail item.
30. Drag depts-task-flow-definition and drop it on the Show Departments detail item.
    When you release the mouse button, you're prompted for how you want the item created. In our case, create the item as a Region.
    
31. Drag the emps-task-flow-definition to the Employees detailItem and create it as a Region. 


32. Save your work.
    
33. Finally, right click in the springboard.jsf page and select Run.
    
34. Click on each of the icons to see the see how the Springboard allows you to launch individual task flows.
    
    
    
    When one item is selected the icons move to the top of the browser, and the page details appear below.
    
    
    
    Click another icon and the page switches.
    
    
    
35. Close your browser and exit JDeveloper.

Summary

In this tutorial you built a small Web application that interacts with a database. You learned how to:

• Build the business services that supply the data to the application
• Create a data-bound JSF page
• Enhance the page by adding more complex operations
• Add a second JSF page to the application and create a task flow to define the navigation between the pages
• Create a reusable page fragment containing a business service based on parameters
• Add a springboard to launch your application components