Part 2: Building the View Project
In this section you will start creating a JSF page using data controls based on EJ/JPA components.

You can design a databound user interface by dragging an item from the Data Controls panel and dropping it on a page as a specific UI component. When you use data controls to create a UI component, JDeveloper automatically creates the various code and objects needed to bind the component to the data control you selected.
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 Gallery from context.

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

    Selecting the Page item from the new gallery
  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.

    Create JSF Page wizard

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

    Empty page layout

    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.

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

    Dragging a Panel Accordion on the page
  6. In the Structure window, expand the panelAccordion component, then select the Show Detail Item component and enter Dept in the Text field.

    Property Inspector
  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:

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

    drop a Panel Tabbed component onto the page
  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.

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

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

    Dropping a Panel Collection onto the page
  15. The page skeleton should look like the following:

    The page design  layout
  16. Click the Save all Save All button 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 HRFacadeBean node, then drag and drop the departmentsFindAll node to the first facet.

    Dropping data control onto the page

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

    Create dialog
  3. In the Edit Form Fields, delete all columns except the following:

    Edit Form Fields dialog
  4. Check the Include Navigation Controls option.

    Edit Form Fields dialog
  5. Click OK.

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

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

    .Dropping a data control onto the page
  8. In the Create pop up menu, select ADF Table.

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

    Edit Table Columns dialog
  10. Move up lastName, firstName using the right side arrows.

    Edit Table Columns dialog
  11. Multi select firstName and lastName and click the Group button.

    Edit Table Columns dialog
  12. 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.

    Edit Table Columns dialog
  13. Click OK.

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

    Dropping a data control onto the page
  15. Select the ADF Form menu option.

    Create menu
  16. In the Edit Table Columns dialog delete all columns except the following:

    and check the Include Submit Button checkbox.

  17. Click OK.

  18. The page should now look like this:

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

    Dropping a data control
  20. Select Graph from context.

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

    Graph Component Gallery
  22. Click OK.

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

    Create Bar Graph page
  24. Click the Swap Bars with X Axis button to reorganize fields.

    Create Bar Graph page
  25. Click OK.

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

    Property Inspector
  27. Your page should now look like the following:

    Page design
  28. Click the Save all Save All button icon to save your work.

Step 3: Run and Test the Page
  1. In the page editor, right-click anywhere on the page and select Run.

    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. Notice the labels in the Dept form on the page. The form is using the labels that you set in the UI Hints.

    Page displayed in web browser

  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.

    Page displayed in web browser

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

    Page displayed in web browser

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

    Page displayed in web browser

  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.

    Page displayed in web browser

  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.

    Page displayed in web browser
  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.

    Page displayed in web browser
  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.

    Page displayed in web browser
  10. In the menubar click the Detach button to isolate the Employee's table from the page context.

    Page displayed in web browser
  11. Click the Detach button to return to the original display.

    Page displayed in web browser

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

    Page displayed in web browser

  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.

    Page displayed in web browser

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

    Page displayed in web browser
  15. Close your Browser window.

Step 4: Add Create and Delete Functions to the Page
In this step, you add Create, Persist and Delete native functions that JDeveloper provides. To implement it in your page, perform the following steps:
  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.

    Dropping the Create operation
  2. Select ADF Button from the context menu.

    Context menu
  3. Repeat the same operation with the Delete method.

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

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

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

    Variables dialog
  7. Click OK.

  8. Variables dialog
  9. Then click OK again.

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

    Property Inspector
  11. The Structure window and the Dept part of the page should look like the following:

    Structure pane for the page
  12. Right-click within the page and choose Run.

    Run option from context menu
  13. In the Browser window, click the Create button to display an empty form.

    Create button in running page
  14. Type a new value for each of the fields (i.e. 400 - Stock - 1800).

    Persist button in running page

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

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

    First navigation button
  16. Close the browser window and return to JDeveloper.

Bookmark Print Expand all | Hide all
Back to top
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.