Bookmarkable Pages

Build a Bookmarkable Edit Page with JDeveloper 11g Purpose In this tutorial, you use Oracle JDeveloper 11g to build a web application that allows the bookmarking of URL. Based on a predefined application, you implement a functionality that enables to bookmark an edit page from a Browse / Edit type of application. The data model uses Business Components. For the web client, Java Server Faces (JSF) is used. A browse page and an edit page are included in the user interface. Time to Complete 20 minutes Topics The tutorial covers the following topics: Overview Scenario Prerequisites Explore the Stratup Application Prepare the Browse Departments Page Make the Edit Page Bookmarkable Run the Bookmarkable 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. The predefined application includes two pages, a Browse page and an Edit page. The Browse page provides the list of departments and allows you to select a department from the list to edit the department details. The Edit page displays the department details. The problem is that when the edit page is displayed for a specific department, the URL in the address is still referencing the entry point of the application (the Browse page). This default behavior stops from being able to bookmark the Edit page reference. Back to Topic List Scenario In order to make the Edit page bookmarkable, you add an action listener to the Edit button of the Browse page. In the Edit page, you use a method defined in a managed bean and set the bookmark properties providing the ability to to bookmark the record information based on the currentRowKeyString value. Back to Topic List Prerequisites Before starting any section of the tutorial, you should: Download the Required Components and Start JDeveloper 11g Upload the Startup Application Create a Database Connection Back to Topic List Downloading the Required Components and Start JDeveloper 11g In the following steps, you download JDeveloper 11g and other files required for this tutorial. 1. Have access to or have installed Oracle JDeveloper 11g Production. 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 WebLogic > JDeveloper Studio 11.1.1.0.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 Back to Topic List Uploading the Starter Application Before you create any component, you must first open the startup application. To do this, perform the following steps: 1. Download the URL_Bookmark.zip file. Right click the following link and chooseSave Target As... from context to download the URL_Bookmark.zip file on a local directory of your choice. 2. Unzip the URL_Bookmark.zip file on a local directory of your choice (i.e. temp) 3. From the Application Navigator, click the Open Application link. Locate the workspace c:\temp\TaskFlowHandsOn\TaskFlowHandsOn.jws. Click Open. If you are prompted to migrate the project, click Yes to confirm. 4. The Application is loaded up in JDeveloper. Back to Topic Back to Topic List Creating a Database Connection You need to create a Database Connection to the HR schema. To do this, perform the following steps: 1. From the Menu Bar, select View | Database Navigator. 2. In the Database Navigator, right click TaskFlowHandsOn and select New Connection from context. 3. In the Create Database Connection, enter the following values: Connection Name HRConn UserName hr Password hr Deploy Password checked Driver thin Host Name localhost JDBC Port 1521 SID or Service Name ORCL/XE 4. Click the Test Connection button. If the database is available and the connection details are correct, you seeSuccess! in the Status window then click OK. If an error occurs, verify the settings, make any changes necessary, and then retest the connection. If you still cannot connect, there may be a problem with the database, or it may not be running. 5. In the Application Navigator, expand the Connections and Database nodes in the Application Resources panel to see the HR connection you just created. You can expand the HRConn node to view the database objects. Back to Topic Back to Topic List Exploring the Startup Application The startup application uses Departments and Employees entity objects and their corresponding view objects. 1. Open the Application Navigator and expand the Model project nodes. Notice the existing Entities, Views, Links objects and the AppModule. The model project contains all the necessary components needed for the application. 2. Prior to test the module in the Business Component tester, right click the AppModulenode and select Configurations from context. 3. In the Manage Configurations dialog, select the AppModuleLocal and click Edit. 4. In the Edit Business Components Configuration dialog, for the AppModuleLocal, select the Connection Type to JDBC URL and the Connection Name to HRConn. Click OK, then OK again. 5. in the Application Navigator, right-click AppModule and choose Run. 6. In the Business Component Configuration dialog, click Connect. Wait for the Browser window to open. 7. In the Oracle Business Component Browser, double-click DepartmentsView1. 8. Use the navigation buttons to browse through the Departments. 9. Close the Business Component Browser window. 10. Expand the ViewController project nodes. Double click Web Content | Page Flows | adfc-config node to open the page flow diagram. 11. The page flow display, showing two pages. A BrowseDepartments page and anEditDepartment page. 12. Right click the BrowseDepartments page and select Run from context. 13. In the Set Run Configuration dialog, click OK to accept Default. 14. Examine the URL displayed in the Browser. 15. Select any department from the list and click the Edit Departments button. 16. The corresponding department detail info are displayed. Notice that the URL in the address field of your browser is the same as the BrowseDepartments page one, stopping you from being able to bookmark this specific department details page: 17. Close you browser window. In the following sections, you see how to have the edit page keep track of the selected department. Back to Topic List Preparing the BrowseDepartments Page To be able to provide bookmarkable information about the selected department in the browse page, you add an action listener that holds the referenced department based on the currentRowKeyString property. To do this, perform the following steps: 1. Back into JDeveloper within the page flow, double click theBrowseDepartments icon to open the page. 2. The BrowseDepartments page opens in the editor. 3. Select the Edit Departments button to display its properties. 4. The Property Inspector shows an Action mapped to the edit control flow. We need to create an action listener to the Edit Departments button. 5. Select the Set Action Listener from the ADF Faces Operations and drop it onto the Edit Departments button.   6. In the Insert Set Action Listener dialog, next to the From field, selectExpression Builder from the down arrow. 7. In the Expression Builder dialog, expand ADF Bindings | bindings | DepartmentView1Iterator and select currentRowKeyString. Click OK. 8. Back to the dialog, type the following in the To field: #{pageFlowScope.rowKey}. Select the content of the To field and copy it (Ctrl + C) to the clipboard (we will need it later on). Click OK. 9. The properties for the Set Action Listener should look like this: Back to Topic List Making the Edit Page Bookmarkable Pages have bookmark properties allowing you to propagate into the URL of the linked page the reference of the current row. For this purpose we use a managed bean holding the current row value. To do this, perform the following steps: 1. Open the Diagram view of the page flow and select the EditDepartment page to view the page properties. 2. In the Property Inspector, select the Bookmark tab and set the bookmark property to true and click the Add button  to create a bookmark URL parameter. 3. For the bookmark URL parameter type rowKey as the name and paste the content of the clipboard in the value field: #{pageFlowScope.rowKey}. 4. Next to the method field, click the down arrow and select the Expression Builder option. 5. In the Expression Builder dialog, expand ADF Managed Beans | pageFlowScope | BookmarkHandler nodes and select handleBookMarkRequest. Click OK. 6. To review the content of the managed bean that was created in the predefined application, in the Application Navigator, double click the BookmarkHandler.java to open the java class. 7. The handleBookMarkRequest method displays in the editor. 8. Click the EditDepartment.jspx tab to open the page in the editor. 9. Right click in the EditDepartment page and select Go to Page Definition from context. 10. Click the EditDepartment.jspx tab to open the page in the editor. 11. Using the Structure pane for the page definition, right click the bindings node and from context select Insert inside bindings --> Generic Bindings --> action. 12. In the Create Action Bindings dialog, in the Select an Iterator field selectDepartmentsView1Iterator and in the Operation choose setCurrentRowWithKey. In the Parameters section, paste the content of the clipboard in the value field #{pageFlowScope.rowKey}. Click OK. 13. Now, the page definition should look like this: and the Structure window... 14. Click the save all  icon to save the application. Back to Topic List Running the Application and Bookmarking the Edit Page You now use JDeveloper's JSF Navigation Modeler to diagrammatically plan and create your application's pages, and the navigation between them. 1. Open the page flow diagram by clicking the adfc-config.xml tab. 2. Right click the BrowseDepartments page and select Run from context. 3. The page loads up in your browser. Notice the URL in the address bar. 4. Select a department from the list and click the Edit Departments button. 5. The corresponding department details display. Notice the URL now displayed in the address bar. 6. Using your browser menu bar, bookmark the page. Select a location folder for your bookmark. Close your browser. 7. Open a new browser window, and select the bookmark you just saved. 8. The browser returns the page corresponding to the department number you bookmarked. 11. You can close your browser window. Back to Topic List Summary In this tutorial, you learned how to: Prepare the Browse Department Page Make the Edit Page Bookmarkable Test the Bookmark Functionality Back to Topic List  Place the cursor over this icon to hide all screenshots.