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, select 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 Create Panel Accordion pane, set the Text to Dept. If you want to, you could add more detail item components by clicking the green plus sign. Just click OK.

    Property Inspector

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

    Property Inspector

  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. In the Create Panel Tabbed pane, set the Text property to Emp. Then click OK.

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

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

    The page design  layout
  14. 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 Create Form, delete all columns except the following:

    Edit Form Fields dialog
  4. Check the Include Controls for Row Navigation 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 Create Table 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 showDetailItem.

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

    Create menu
  16. In the Create Form dialog delete all columns except the following:

    and check the Include Controls for Submit Button checkbox.

  17. Click OK.

  18. The page should now look like this:

    Page design
  19. 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.

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

  5. Click the Up arrow in the salary column to sort salaries in ascending order.

    Page displayed in web browser

  6. 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
  7. 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
  8. In the menubar click the Detach button to isolate the Employee's table from the page context.

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

    Page displayed in web browser

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

    Page displayed in web browser

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

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

    Page displayed in web browser
  13. 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 window, 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 select 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 © 2014, Oracle and/or its affiliates. All rights reserved.