Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA, And...

11/22/11 Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Usi…

1/23download.oracle.com/docs/cd/E18941_01/tutorials/…/jdtut_11r2_51_2.html

Part 2: Building the View Project

In this section you will start creating a JSF page using data controls based on EJB/JPA components.

Step 1: Create the Global Layout for the JavaServer Faces Page

In the next few steps, you create a JavaServer Faces Page using ADF Faces components for the Departments Employees Master Detail page.

1. Right-click the ViewController project and select New from the context menu .

2. In the New Gallery, select the Web Tier > JSF/Facelets category and select Page as the item.

Click OK.

3. Enter mainHR.jsf as the file name. Check the Facelets checkbox, and in the Page Layout section, click the Quick Start Layout radiobutton. It is best practice to use the quick start layouts to avoid display issues. Click Browse to select a layout.



4. In the Component Gallery select the Two Column layout category, and select the first type and first layout.



Click OK to save the layout selection. In the Create JSF Page dialog click OK to create the page.

5. You now have an empty mainHR.jsf page open in the Design Editor.

In the next few steps, you add data-bound ADF Faces components to the page. These components display a department along with theemployees belonging to the department.

6. In the Structure pane, select the panelSplitter component and in the Property Inspector, set the SplitterPosition to 300.

You can apply themes by checking the box in the Options pane.



7. In the Component Palette, ADF Faces library, expand the layout section and drag a Panel Accordion component onto the first facet.

8. In the Structure Pane, expand the panelAccordion component, then select the Show Detail Item component and enter Dept in theText field.

9. From the Component Palette, drag a Panel Splitter component onto the second facet of the page.

Your file or page components are organized in pages in the Component Palette.



10. In the Property Inspector, set the Orientation property to vertical.

11. The Structure pane should look like the following:

12. From the Component Palette, drag and drop a Panel Tabbed component onto the second facet.



13. Rename the Show Detail Item Emp.

14. Right-click the Emp tab and select Insert after Show Detail Item > Show Detail Item from the context menu .

15. Enter Graph as the Text for the Show Detail Item component.

16. Drag and drop a Panel Collection onto the first facet (top right one).



17. The page skeleton should look like the following:

18. Click the Save all icon to save your work.

Step 2: Bind Data Control Components to the Page

In the next few steps, you use ADF Faces to build a query page to edit employee data.

1. Open the Data Controls accordion and expand the HRFacadeLocal node, then drag and drop the departmentsFindAll node within thefirst facet.

In the pop up menu, select Forms > ADF Form



2. In the Edit Form Fields, delete all columns except the following: departmentId departmentName locationId

Check the Include Navigation Controls option.

Click OK.

3. In the Data Controls accordion, expand the HRFacadeLocal > departmentsFindAll nodes, then drag and drop the employeesList nodewithin the upper right facet.

When you drag an item from the Data Controls panel and drop it on a page, JDeveloper performs a number of actions.



4. In the pop up menu, select Table > ADF Read-only Table.

5. In the Edit Table Columns dialog, select Single Row, Enable Sorting and Enable Filtering. Select all the columns after salary anddelete them.

6. Move up lastName, firstName using the right side arrows.



7. Multi select firstName and lastName and click the Group button.

8. In the new row created on top, enter Name as the display label. Notice the indentation of firstName and lastName indicating that they aresubcomponents of the Name group component.

Click OK.

9. Click the Emp tab in the page designer and from the Data Controls accordion, drag and drop the employeesList within the Emp pane.

10. Select the Form > ADF Form menu option.



11. In the Edit Table Columns dialog delete all columns except the following:commissionPct,email,employeeId, firstName, hiredate, jobId, lastName, phoneNumber, salary, and check the Include Submit Button checkbox.

Click OK.

12. The page should now look like this:



13. Click the Graph tab to switch pane. From the data control accordion, drag and drop employeesList onto the Graph pane.

14. Select Graph from the context menu .

15. In the Component Gallery, select the Bar category and select the Bar type and the first Quick Start layout.



Click OK.

16. In the Create Bar Graph page, drag and drop salary in the Bars field and firstName in the X Axis field.(If the Available area does not show your data control attributes, then cancel this step, reopen the application and perform the step again.)

17. Click the Swap Bars with X Axis button to reorganize fields.



Click OK.

18. In the Property Inspector, for the Bar component, set the Appearance > 3D Effect property to true.

19. Your page should now look like the following:

20. Click the Save all icon to save your work.

Step 3: Run and Test the Page



Step 3: Run and Test the Page

In the next few steps, you use ADF Faces to build a search page using the new ADF query feature.

1. In the page editor, right-click and select Run from the context menu .

2. Wait for the page to upload in your default browser window. Once loaded, the page displays. Click the Next button to display adepartment having several employees.

3. Notice that as you change department, employees change accordingly. In the Employees table, select another row, the employee detailshould follow in the bottom pane.



4. Click the Graph tab to display salary bars for the corresponding department.

5. In the Employees table look for the salary column in the far right and move it next to the Name group.



6. Click the Up arrow in the salary column to sort salaries in ascending order. Notice that the graph changes to reflect the new orderingcriterion.

7. Click the Emp tab to display the employee data and change the salary. (For example, change Karen Colmenares salary from 2500 to5000). Click Submit.

8. Click the Graph tab now and notice that the graph now reflects the new value. It is also displayed in the Employee's table above.



9. In the menubar click the Detach button to isolate the Employee's table from the page context.

10. Click the Detach button to return to the original display.

11. In the menubar select View > Columns to display the columns that are currently active. .



12. From the menubar select View > Reorder Columns and in the Reorder Columns dialog, using the up and down arrows experiment withmoving columns around and then click OK.

13. The new column order now appears in the Employees's table.

14. Close your Browser window.

Step 4: Add Create and Delete Functionalities to the Page

In this step, you add Create, Persist and Delete native functionalities that JDeveloper provides. To implement it in your page, perform the followingsteps:

1. Back in JDeveloper, in the Data Controls pane, expand the Operations node under departmentsFindAll, then drag and drop the Createoperation in the Panel Group Layout facet.



2. Select ADF Button from the context menu.

3. Repeat the same operation with the Delete method.

4. Under the HRFacadeLocal node, drag and drop the persistDepartments(Departments) as an ADF Button between the Create andDelete buttons.

5. In the Edit Action Binding dialog, click the down arrow in the Value field and select Show EL Expression Builder. The EL ExpressionBuilder is an editor to write EL code, declaratively by selecting object as you build your expression.

If, when you created your session bean, you chose to expose the merge and persist methods for a structured object, then thosemethods appear in the Data Controls panel and you can use them to create buttons that allow the user to merge and persist thecurrent instance of the object.



6. In the Variables dialog, expand ADF Bindings > bindings > departmentsFindAllIterator > currentRow and select dataProvider. Atthis point you are associating the current row with the parameter.

Click OK.

Then click OK again.

7. In the Property Inspector, type Persist in the Text field for the persistDepartments button.



8. In the Structure pane, right-click the facet-separator tag and select Delete from the context menu.

9. The Structure Pane and the Dept part of the page should look like the following:

10. Save all your work and then right-click within the page and select Run.

11. In the Browser window, click the Create button to display an empty form.

12. Type a new value for each of the fields (i.e. 400 - Stock - 1800).



Click the Persists button to insert the new row in the department table.

13. You can experiment adding new departments and navigating through the department records.

14. Close the browser window and return to JDeveloper.

Previous 1 2 3 4 Next

Copy right © 2011, Oracle and/or its af f iliates. All rights reserv ed.

Date post:	07-Aug-2015
Category:	Documents
Upload:	sajarwo-anggai
View:	33 times
Download:	4 times

Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA, And...

Documents