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 radio button. 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.

   
   You can apply themes by checking the box in the Options pane. Read more...
   
   Themes add color styling to some of the components used in the quick start layouts and create a nicer-looking page.

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

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

   

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

   
   Your file or page components are organized in pages in the Component Palette.Read more...
   
   Select the palette page you want from the dropdown list at the top of the palette. To insert a component into a file open in the active editor, drag the component from the palette to an insertion point in the editor. In some file types you click a component in the palette and then click in the editor to insert the component.

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

   

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

   

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.

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 the first 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.

   When you drag an item from the Data Controls panel and drop it on a page, JDeveloper performs a number of actions. Read more...
   
   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 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.

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

   

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 and delete 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 are subcomponents 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.

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 a department having several employees.
   
   

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. 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 with moving columns around and then click OK.
    
    

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

    

14. Close your Browser window.

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

1. Back in JDeveloper, in the Data Controls pane, expand the Operations node under departmentsFindAll, then drag and drop the Create operation 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 and Delete buttons.

   
   If, when you created your session bean, you chose to expose the merge and persist methods for a structured object, then those methods appear in the Data Controls panel and you can use them to create buttons that allow the user to merge and persist the current instance of the object. Read more...
   
   Which you use depends on whether the page will need to interact with the instance once updates are made. If you want to be able to continue to work with the instance, then you need to use the persist method.
   
   

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

   

6. In the Variables dialog, expand ADF Bindings > bindings > departmentsFindAllIterator > currentRow and select dataProvider. At this 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.