Docs.oracle2

7/23/2019 Docs.oracle2

1/31

Part 2: Developing the User Interface

JavaServer Faces (JSF) is a standard Java EE technology that simplifies Web development.In this part of the tutorial you create a JSF page to access the business components that you created in the previous part.

Step 1: Create a JSF Page

Right-click the ViewControllerproject node in the Application Navigator, and select New...1.

In the New Gallery, navigate to JSF/Faceletsunder the Web Tiernode, and choose Pagein the Items pane. Click OK.2.

In the Create JSF Page dialog, rename the page to DeptEmpPage.jsf; make sure the Document Type radio button is set toFacelets, and in the Page Layout tab select the Page Template radio button and choose Oracle Three Column Layout.

3.

The Web part of the application is developed in a separate project called the Viewcontroller project, which you created in theprevious part of this tutorial when you created the Fusion Web application.

Page 1 of 31Oracle JDeveloper 11g Release 2 Tutorials - Developing Rich Web Applications With...

27/03/2012http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2_55_2.html


2/31

Click OK.

The page displays in the Design Editor. The template has three columns in it, but you only need two in the page, so delete thethird one.Place your cursor in the right-most section called endand right-click to choose Delete.

4.

With af:pageTemplateselected in the Structure pane, in the Property Inspector set the startColumnSizeproperty to 350.




3/31

Add some layout components to the page.In the Component Palette expand the Layoutgroup of components and locate the Panel Accordioncomponent in theInteractive Containers and Headerssection. Drag it into the startfacet of your page.

5.

Select af:showDetailItem (the panel accordion that you just added to the page in the previous step) in the Structure window andin the Property Inspector change its Text property to Departments.

6.

Right-click the new Departmentsaccordion and choose Insert after Show Detail Item - Departments > Show Detail Item. Thisadds another accordion to your page.

7.

Change the Textproperty to More Info.8.




4/31

This is another way of adding components to a page using context menus directly inside the Design Editor (instead of draggingand dropping from the Component Palette).

From the Layoutcomponents, click and drag a Panel Splittercomponent onto the centerfacet of your page.9.

In the Property Inspector change the Orientationproperty of the new splitter to vertical.10.

From the Layoutcomponents, drag a Panel Collectioncomponent into the firstfacet at the top of the splitter on your page.11.




5/31

A panel collection is a component that aggregates collection components like table, treeTable and tree to displaystandard/application menus, toolbars and statusbar items.

Using the Structure window, drag a Panel Tabbedcomponent into the secondfacet of the splitter on your page.12.

Double-click the tab DeptEmpPage.jsf at the top of the page to view it in its entirety. The page should look like the screenshotbelow.

13.




6/31

Click the Save Allicon on the JDeveloper menu bar to save your work.14.

Step 2: Bind Data Controls to the Page

In this step you bind the business components you created in Part 1 of this tutorial to the user interface. You do this with simple drag anddrop operations; behind the scenes the ADF Model layer takes care of binding the data for you.

In the Design Editor click the Departmentsaccordion to expand it.1.

In the Application Navigator expand the Data Controlsaccordion, and in it expand AppModuleDataControlto expose thebusiness services you defined in the first part of this tutorial.

2.




7/31

Drag the DepartmentsView1data control into the Departments accordion in your JSF page. When prompted to choose the typeof component you want to create, choose Form > ADF Read-Only Form.

3.

In the Edit Form Fieldsdialog, check the Include Navigation Controlscheckbox and click OK.4.

In the Data Controls accordion expand DepartmentsView1 to expose the fields it contains, as well as the relatedEmployeesView3control for the employees in each department. Note that these are the "detail" employees for the "master"departments - they are linked and therefore the employees you see in this view object are the ones who belong to the particulardepartment you are looking at.

5.




8/31

Drag the EmployeesView3data control onto the Panel Collectionthat you created in the first facet of the PanelSplitter. Createit as an ADF Read-Only Table.

6.

In the Edit Table Columns dialog, choose Single Row in Row Selection,and check the checkboxes for Sorting and Filtering.Click OK.7.

Drag the EmployeesView3data control again but this time onto ShowDetailItemin the panelTabbed component in the secondfacet of the panelSplitter. Create it as an ADF Form.

8.




9/31

In the Edit Form Fields dialog, check the Include Submit Buttoncheck box. Using your mouse and the Shift key select thebottom three fields from the list: CommissionPCT, ManagerId, DepartmentIDand delete them by pressing the Delete button

at the top right corner of the dialog box. Click OK.

9.

Click the Save All icon on the JDeveloper menu bar to save your work.Right-click in the page and choose Run. This will compile your project, build it, and launch the integrated WebLogic Server to runit. Then a Web browser opens up to display the page. You can follow the progress of these steps in the Log window inJDeveloper.

10.




10/31

Once the page displays in the browser, resize the page area using the splitterto display the department data. Then use the Nextbutton to scroll through the departments. Notice that the employee data changes accordingly in the table and the form beneath it.

11.

Close the browser window.12.

Step 3: Refine the Business Services

In these steps you refine the business services by adding validation rules, formatting and default values.

In the Application Navigator under the Modelproject, locate the Employeesentity object and double-click it to open it for editing.1.

Page 10 of 31Oracle JDeveloper 11g Release 2 Tutorials - Developing Rich Web Applications W...



11/31

In the Employees.xml window, click the Attributesfinger tab and locate the Salaryattribute, and select it. Scroll down in thepage to the Validation Rules tab and click the Add icon to add a new validation rule.

2.

In the Add Validation Rule dialog choose Rangefrom the Rule Type drop down list. Note the various other types of rules you candefine here. In the Operator field ensure that the value is set to Between, and type 0for the minimum value and 99000for themaximum value fields.

3.




12/31

Click the Failure Handlingtab to define an error message that will display when the validation fails. In the Message Textfieldtype an error message like "Salary out of range 0 to 99,000"and click OK.

4.

Next you add a default value to the hire date field - so that when a new employee is created the hire date defaults to the currentdate.In the Employees.xmlwindow, locate the HireDateattribute, and select it. In the Valuesection of the Property Inspector, locatethe Default Value Typeproperty and choose Expression, then set the Default Valueproperty to adf.currentDate. This willensure the default value for a new record is set to today's date.

5.




13/31

You can also specify UI Hints for attributes to control how they display by default in the forms and pages that use them. In thisstep you add a default format mask for the hire date field. You can also specify labels and tooltip help here.In the UI Hintssection of the Property Inspector locate the Format Typeproperty and select Simple Date.

6.

Set the Formatproperty to dd/MMM/yyyy.




14/31

Run the page again to test the refinements you have made.7.

Test the HireDatefield. Notice that as soon as you click in the field you are provided with an example of the format for the date(as you defined it).

8.




15/31

Try to update the field for one of the employees with an invalid date such as 11/11/123and notice the error message when youclick the Submit button.

9.

Use the Clock/Calendar icon next to the field to display a pop-up calendar and choose a valid date.




16/31

Update the Salaryfield to a value that will break the validation you created earlier (e.g -9) and click the Submitbutton to see theerror message you created.

10.

Browse to department 50and notice that you can now scroll the data in the employees table. Click on one of the column headersin the table to sort the data in the table.

11.




17/31

Click a column heading in the table and drag it to reposition it in the table.12.

The new column order looks as follows:

In the Filter field above the LastNamecolumn, type B%and press Enterto filter the table to show only those employees whosesurname begins with the letter B.

13.




18/31

Experiment with the other menus and buttons of the table to see additional functionality. Once you are finished, close the browserand return to JDeveloper.

14.

Step 4: Enhance the JSF Page

In the next steps you enhance the user interface by modifying the table of employees to add the ability to do column selection, byreordering the fields in the Employee details tab, and by binding the business components to a graph representation. You do this withsimple drag and drop operations - behind the scenes the ADF Model layer handles the data binding for you.

Click the DeptEmpPage.jsf tab to return to the page in the Design Editor. Select the Employeestable in the Design Editor or inthe Structure pane. Set the Column Selectionproperty of the table to Single.

1.

In the Structure window select the panelFormLayoutthat surrounds the employee details fields in the showDetailItem tab.2.

In the Property Inspector set the Rowsproperty to 5.3.




19/31

Next you add a graph representation of the data to the page; this is done using the ADF Data Visualization set of JSFcomponents.In the Design Editor click the More Infoaccordion to expand it. Then drag the EmployeesView3data control into the More Infoaccordion and create it as a Graph.

4.

In the Component Gallery choose Piefrom the list of graphs on the left and Pieagain as the graph type. In the bottom pane,select the thirdQuick Start Layout.

5.

When you run the page in a later step you will see that the fields in the tab are now arranged in two columns.

The graph can be displayed as static PNG image or an interactive Flash component.




20/31

Then click the OKbutton.

In the Create Pie Graph dialog choose Salaryin the Pie field and drag and drop LastNameinto the Slices field. Click OK.6.

Click the Save All icon on the JDeveloper menu bar to save your work and then right-click within the page and select Runfrom the context menu.

7.




21/31

Browse to department 50. Because you set the column selection to single, note the additional behaviors for the table that areavailable once you choose a column - such as Freezeand Wrap. Select a column, then click the Freezebutton. Now use thehorizontal scroll bar to view the right-most columns.

8.

In department 50 expand the More Infoaccordion and notice the graph and the popup it displays when you hover over it withyour mouse.

9.




22/31

Scroll over to the showDetailItem1tab, and notice how the fields have been reordered into two columns.10.

When you are done, close the browser and return to JDeveloper.

Step 5: Add More Complexity to the Business Services

In this step you add a new business service to the application to display a subset of the fields from the Employees table, along with thedepartment name from the Departments table. You also add a calculated field calculating the annual salary of an employee and a list ofvalues field for department names. Oracle ADF Business Components allows you to create such complex updatable components in adeclarative way.

In the Application Navigator right-click the demo.modelpackage and choose New View Object.1.

In the Name page of the Create View Object wizard, type EmpDetailsas the Name and retain Entity object as the default datasource.

2.




23/31

Click Next.

In the Entity Objects page of the wizard first select Employeesand shuttle it to the right, and then select the Departmentsentityand add it also to the Selected pane.Note that only the Employees entity has the updatable checkbox checked - the departments entity is used to read data only.

3.

Click Next.

In the Attributes page of the wizard, shuttle the following Employeesattributes into the Selected pane:EmployeeId, FirstName, LastName, Email, Salary, HireDate, JobId.

And from the Departmentsentity, shuttle the following attributes into the Selected pane:DepartmentId, DepartmentName.

4.




24/31

Click Finishto complete the view object creation.

Next you add a calculated attribute to the view object - an attribute that displays the employee's annual salary.In the Application Navigator double-click EmpDetails to open it.

5.

Click the Attributesfinger tab and from the drop down list choose New Attribute.6.

In the New View Object Attribute dialog type AnnualSalaryas the name for the new attribute and click OK.7.




25/31

In the Details tab at the bottom of the attributes list, set the following properties for the AnnualSalary attribute:8.

Field Value

Name AnnualSalary

Type Number

Default Value Expression (Checked)

Value Salary * 12

.

In the next steps you add a list of values to a field based on a set of values stored in another table. In this case you create a list ofvalues for possible job titles based on the Jobs table.In the EmpDetails.xml editor click the Attributesfinger tab and select the JobIdattribute. Click the List Of Valuestab at thebottom of the attributes list.

9.




26/31

In the List of Values tab click the Addbutton to create a list of values.10.

In the Create List of Values dialog click the green plus to the right of the List Data Sourcefield. In the View Accessors dialog,shuttle JobsViewinto the View Accessors pane.

11.




27/31

Click OK.

Back in the Create List of Values dialog, choose JobIdas the List Attribute.12.

Still in the Create List of Values dialog click the UI Hintstab and choose Combo Box with List of Valuesas the Default ListType and then shuttle the Job Titleattribute into the Selected pane.

13.




28/31

Click OK. Saveyour work.

Now you add the new object that you've created to the data model.In the Application Navigator double-click AppModuleto open it for editing and choose the Data Modelfinger tab.

14.

Click the EmpDetailsview object and shuttle it into the Data Modelpane.Saveyour work.

15.




29/31

Use the Business Component Browser to test the new functionality you have just incorporated through the EmpDetails viewobject. In the Application Navigator right-click AppModeland select Run to invoke the tester.

16.

Double-click the EmpDetails1view object.17.




30/31

Notice that the new calculated AnnualSalary field is displayed, along with DepartmentId and DepartmentName. None of the themare updatable here.

18.

Use the drop down list for the JobIdfield to choose a new job.19.




31/31

The field is populated with the new job.20.

Closethe Business Component Browser window without committing the changes.21.

Previous 1 2 3 Next

Copyright 2011, Oracle and/or its affiliates. All rights reserved.


Docs.oracle2

Documents

Transcript of Docs.oracle2