1. Right-click the ViewController project and select New > From Gallery from context.

   

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

   

3. Enter mainHR.jsf as the file name.
   
   Check the Facelets checkbox, and in the Page Layout section, click the Copy Quick Start Layout radio button. It is best practice to use the quick start layouts to avoid display issues.
   
   In the Page Layout section of the dialog, click the Two Column category and select the first layout in the list. Click OK to create the page.

   

   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 the employees belonging to the department.

4. In the Structure window, select the panelSplitter component and in the Properties window, set the SplitterPosition to 300.

   

5. In the Components window, ADF Faces library, expand the layout section and drag a Panel Accordion component onto the first facet.

   

6. In the Structure window, expand the panelAccordion component, then select the Show Detail Item component and enter Dept in the Text field.

   

7. From the Components window, drag a Panel Splitter component onto the second facet of the page.

8. In the Properties window, set the Orientation property to vertical.

9. The Structure window should look like the following:

   

10. From the Components window, drag and drop a Panel Tabbed component onto the second facet.

    

11. Expand the af:panelTabbed item in the Structure window and change the text property of the Detail Item to Emp.

    

12. In the visual editor, right-click the Emp tab and select Insert after Show Detail Item > Show Detail Item.

    

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

    

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

    

15. The page skeleton should look like the following:

    

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

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 HRFacadeBean node, then drag and drop the departmentsFindAll node to the first facet.

   
   
   

2. In the pop up create menu, select ADF Form... .

   

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

   

4. Check the Include Navigation Controls option.

   

5. Click OK.

When you drag an item from the Data Controls panel and drop it on a page, JDeveloper performs a number of actions. It creates a DataBindings.cpx file in the default package for the project (if one does not already exist), and adds an entry for the page.
It creates the adfm.xml file in the META-INF directory. This file creates a registry for the DataBindings.cpx file, and is used by the applications metadata layer to allow customization and personalization of the application. It also adds a page definition file (if one does not already exist for the page) to the page definition subpackage. The default subpackage is view.pageDefs in the adfmsrc directory.

6. In the Data Controls accordion, expand the HRFacadeBean > departmentsFindAll nodes. Drag the employeesList1 collection to the upper right facet in the visual editor (the Panel Collection.)

   .

7. In the Create pop up menu, select ADF Table.

   

8. In the Edit Table Columns dialog, select Single Row, Enable Sorting and Enable Filtering. Select all the columns after salary (inclusive) and delete them.

   

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

   

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

    

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

    

12. Click OK.

13. Click the Emp tab in the page designer and from the Data Controls accordion, drag the employeesList1 to the Emp pane.

    

14. Select the ADF Form menu option.

    

15. 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.

    
    
    

16. Click OK.

17. The page should now look like this:

    

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

    

19. Select Graph from context.

    

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

    

21. Click OK.

22. In the Create Bar Graph page, drag and drop salary in the Bars field and firstName in the X Axis field.

    

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

    

24. Click OK.

25. In the Properties window, for the Bar component, set the Appearance > ThreeDEffect property to true and the ShortDesc to Emps Salaries.

    

26. Your page should now look like the following:

    

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

1. In the page editor, right-click anywhere on the page and select Run.

   

2. Wait for the page to upload in your default browser window. Once loaded, the page displays. Click the Next button to display a department having several employees. Notice the labels in the Dept form on the page. The form is using the labels that you set in the UI Hints.
   
   

3. Notice that as you change department, employees change accordingly.In the Employees table, select another row, the employee detail should 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 ordering criterion.
   
   

7. Click the Emp tab to display the employee data and change the salary. (For example, change Karen Colmenares salary from 2500 to 5000). 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. Click the Emp tab again. Enter a salary that is less than 100 and click Submit. Notice that the validation that you entered is executed and the error message is displayed.. Change the value back to a valid value and click Submit again.

   

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

    

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

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

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

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

    

15. Close your Browser window.

1. Back in JDeveloper, in the Data Controls palette, expand the Operations node under departmentsFindAll, then drag and drop the Create operation in the Panel Group Layout facet of the Dept form.

   

2. Select ADF Button from the context menu.

   

3. Repeat the same operation with the Delete method.

   

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

   

5. In the Edit Action Binding dialog, click the down arrow in the Value field and select Show EL Expression Builder.

   

6. In the Variables dialog, expand ADF Bindings > bindings > departmentsFindAllIterator > currentRow and select dataProvider.

   

7. Click OK.



8. Then click OK again.

9. In the Properties window, type Persist in the Text field for the persistDepartments button.

   

10. The Structure window and the Dept part of the page should look like the following:

    

11. Right-click within the page and choose Run.

    

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

    

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

    

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

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

    

15. Close the browser window and return to JDeveloper.

Expand all | Hide all