Part 2: Building the View Project In this section you will start creating a JSF page using data controls based on EJB/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. Right-click the ViewController project and select New from the context menu . 1. In the New Gallery, select the Web Tier > JSF/Facelets category and select Page as the item. 2. Click OK. 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. 3. Page 1 of 17 Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA... 08/03/2012 http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_51/jdtut_11r2_51_2.html
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Part 2: Building the View Project
In this section you will start creating a JSF page using data controls based on EJB/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.
Right-click the ViewController project and select New from the context menu . 1.
In the New Gallery, select the Web Tier > JSF/Facelets category and select Page as the item. 2.
Click OK.
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.
3.
Page 1 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA...
In the Component Gallery select the Two Column layout category, and select the first type and first layout.4.
Click OK to save the layout selection. In the Create JSF Page dialog click OK to create the page.
You now have an empty mainHR.jsf page open in the Design Editor. 5.
You can apply themes by checking the box in the Options pane. Themes add color styling to some of the components used in the quick start layouts and create a nicer-looking page.
Page 2 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA...
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.
In the Structure pane, select the panelSplitter component and in the Property Inspector, set the SplitterPosition to 300. 6.
In the Component Palette, ADF Faces library, expand the layout section and drag a Panel Accordion component onto the first facet.
7.
In the Structure Pane, expand the panelAccordion component, then select the Show Detail Item component and enter Dept in the Text field.
8.
From the Component Palette, drag a Panel Splitter component onto the second facet of the page. 9.
In the Property Inspector, set the Orientation property to vertical. 10.
Your file or page components are organized in pages in the Component Palette. 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.
Page 3 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA...
In the Edit Form Fields, delete all columns except the following: departmentId departmentName locationId
2.
Check the Include Navigation Controls option.
Click OK.
In the Data Controls accordion, expand the HRFacadeLocal > departmentsFindAll nodes, then drag and drop the employeesList node within the upper right facet.
3.
In the pop up menu, select Table > ADF Read-only Table.4.
In the Edit Table Columns dialog, select Single Row, Enable Sorting and Enable Filtering. Select all the columns after salary and delete them.
5.
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 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.
Page 6 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA...
Move up lastName, firstName using the right side arrows.6.
Multi select firstName and lastName and click the Group button. 7.
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.
8.
Click OK.
Click the Emp tab in the page designer and from the Data Controls accordion, drag and drop the employeesList within the Emp pane.
9.
Page 7 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA...
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.
11.
Click OK.
The page should now look like this:12.
Page 8 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, JPA...
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.)
16.
Click the Swap Bars with X Axis button to reorganize fields. 17.
Click OK.
In the Property Inspector, for the Bar component, set the Appearance > 3D Effect property to true.18.
Your page should now look like the following: 19.
Click the Save all icon to save your work.20.
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.
Page 10 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, J...
In the page editor, right-click and select Run from the context menu . 1.
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.
2.
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.
3.
Page 11 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, J...
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.
12.
The new column order now appears in the Employees's table. 13.
Close your Browser window. 14.
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 following steps:
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.
1.
Select ADF Button from the context menu.2.
Page 14 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, J...
Repeat the same operation with the Delete method. 3.
Under the HRFacadeLocal node, drag and drop the persistDepartments(Departments) as an ADF Button between the Create and Delete buttons.
4.
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.
5.
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.
6.
Click OK.
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. 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.
Page 15 of 17Oracle JDeveloper 11g Release 2 Tutorials - Building a Web Application Using EJB, J...