7/27/2019 Developing Rich Web Applications With Oracle ADF
1/146
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2_55_1.html
Developing Rich Web Applications With Oracle ADF
This tutorial shows you how to build a rich Web application that interacts with a database. You'll be usingOracle JDeveloper 11gVersion 11.1.2 and the Oracle ADF framework to build the application, and in theprocess you'll work with Oracle ADF Business Components, Oracle ADF Faces Rich Client Componentsand Oracle ADF Task Flows.
Read more...
Purpose Duration Application
The application that you create displays information on departmentsand employees. You create several JSF pages that enable you to
query and update the data in the database.To see the complete application you will create, click the Downloadbutton to download a zip of the final application, and then unzip it inyour JDevelopermywork folder.
2hours
Part 1: Creating a Fusion Web Application and Building the Business Service
When you work in JDeveloper, you organize your work in projects within an application. JDeveloperprovides several template applications that you can use when creating an application and projects. Thetemplate applications are pre-configured with a basic set of technologies that are needed for developingthe various types of applications, and you create your working environment by selecting the template thatbest fits your needs. You can then configure it to add any other technologies you plan to use.
In the first part of this tutorial you are going to create a new Fusion Web application and build reusablebusiness components that will access the database.You'll be using the Oracle ADF Business Components technology to map Java objects to existing tablesin your database.
Step 1: Create a Fusion Web Application
1. Start JDeveloper by selecting Start > Programs > Oracle Fusion Middleware 11.1.2.0.0 >JDeveloper Studio 11.1.2.0.0
2. In the Select Role dialog, choose Studio Developerand click OK.
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2_55_1.htmlhttp://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2_55_1.htmlhttp://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/labs/richclient.ziphttp://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/labs/richclient.ziphttp://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/labs/richclient.ziphttp://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2_55_1.html7/27/2019 Developing Rich Web Applications With Oracle ADF
2/146
Shaping, which is based on the role of the user, allows the JDeveloper environment to tailor itself.It does this by removing unneeded items from the menus, preferences, new gallery, and evenindividual fields on dialogs. Read more...
If a dialog box opens asking if you would like to import preferences from a previous JDeveloperinstallation, click NO. Close the Tip of the Day window.
3. Once loaded, the JDeveloper IDE appears. The very first time you open JDeveloper, the StartPage displays. You can re-invoke the Start Page later by choosing Help > Start Page.
Notice the various options available to help you learn about JDeveloper. After exploring some ofthese options, close the Start Page by clicking the X on its tab (the X appears when you mouse
7/27/2019 Developing Rich Web Applications With Oracle ADF
3/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
4/146
6. JDeveloper loads the required features for a Fusion Web application and the Create Fusion WebApplication (ADF) wizard launches.In the Name your application page of the wizard, type HRSystem as the name. If required, youcan change the directory path to create your files in another location.In the Application Package Prefix field set the value to be demo and click Next.
7/27/2019 Developing Rich Web Applications With Oracle ADF
5/146
7. In the Name your project page ensure that the project name is Model (the default). Notice thatADF Business Components and Java are listed as the project features of a Fusion Webapplication.
Click Next.
8. The Configure Java settings page allows you to define a default package, a Java source path andan output directory. Click Next to accept the default values.
7/27/2019 Developing Rich Web Applications With Oracle ADF
6/146
9. In the second Name your project page, ensure that the Project Name is ViewController. Scrollthrough the list of project features to see the types of technologies that can be used with a FusionWeb application.
7/27/2019 Developing Rich Web Applications With Oracle ADF
7/146
Click Next.
10. In the Configure Java settings page accept the defaults and click Finish to create your FusionWeb application and projects.
7/27/2019 Developing Rich Web Applications With Oracle ADF
8/146
11. The HRSystem application and the two projects are displayed in the Application Navigator on theleft of the screen.
7/27/2019 Developing Rich Web Applications With Oracle ADF
9/146
Notice too the Checklist on the right side of the screen. Read more...
Step 2: Build the Business Service
1. In the CheckList Overview, click the Connect to a Database step.
7/27/2019 Developing Rich Web Applications With Oracle ADF
10/146
2. The step expands showing useful information such as prerequisites required for performing thetask and detailed instructions on how to perform the task. Click the Create a DatabaseConnection button.
3. Specify the following properties for the new connection you are creating:
Connection Name HRConn
7/27/2019 Developing Rich Web Applications With Oracle ADF
11/146
UserName hr
Password hr
4. Enter the appropriate Oracle JDBC Settings to point to the right host, port and SID for yourdatabase. Click the Test Connection button to verify that you can connect successfully.
5.6. Click OK.7. Click the down arrow to shrink the Connect to a Database step.
7/27/2019 Developing Rich Web Applications With Oracle ADF
12/146
8. In the Checklist, set the status of the Connect to a Database step to Done.
9. Click the Build Business Services step to expand it, then click the Go to Substeps button.
7/27/2019 Developing Rich Web Applications With Oracle ADF
13/146
10. In the list of substeps, click the Create Entity Objects and Associations substep.
11. Click the Create Entity Objects and Associations button.
7/27/2019 Developing Rich Web Applications With Oracle ADF
14/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
15/146
14. The Create Business Components from Tables wizard launches. In the Entity Objects page, clickthe Query button to examine the data dictionary and see available tables.
7/27/2019 Developing Rich Web Applications With Oracle ADF
16/146
15. Select the DEPARTMENTS and EMPLOYEES tables in the Available list, and click the rightarrow to move your selections to the Selected list. This step creates updatable entity objectsbased on the tables selected.
7/27/2019 Developing Rich Web Applications With Oracle ADF
17/146
Click Next to continue.
16. In the Entity-based View Objects page of the wizard, move Departments (HR.DEPARTMENTS)and Employees (HR.EMPLOYEES) to the Selected list. This step creates matching view objectsDepartmentsView and EmployeesView for performing queries on the entity objects you justcreated.
7/27/2019 Developing Rich Web Applications With Oracle ADF
18/146
Click Next to continue.
17. In the Query-based View Objects page, click the Query button and then move JOBS to theSelected list. This step creates a read-only view object that queries the Jobs table. Then clickNext to continue.
7/27/2019 Developing Rich Web Applications With Oracle ADF
19/146
18. In the Application Module page, click Finish to create the business components in the Modelproject.
7/27/2019 Developing Rich Web Applications With Oracle ADF
20/146
19. In the Checklist, set the status of the Create Entity Objects and Associations step to Done.
7/27/2019 Developing Rich Web Applications With Oracle ADF
21/146
20. Click the Close Step 3 button.
7/27/2019 Developing Rich Web Applications With Oracle ADF
22/146
21. Click the Back to Checklist link and set the status of the Build Business Services step to Done
7/27/2019 Developing Rich Web Applications With Oracle ADF
23/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
24/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
25/146
25. The form now only shows departments in this location. Use the Next button to scroll through thedepartments at Location 1700.
7/27/2019 Developing Rich Web Applications With Oracle ADF
26/146
You need to remove the parameter value of the search criteria to access all departments again.
26. Close the Oracle Business Component Browser window, and back in JDeveloper, click the Save
All icon on the JDeveloper menu bar, or select File > Save All from the menu.
7/27/2019 Developing Rich Web Applications With Oracle ADF
27/146
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 inthe previous part.
Hide...
You create a form that can be used to display and modify data. You use a master-detail relationship todisplay information about employees in a department. To build the page you'll use Oracle ADF FacesRich Client components. These components allow you to build an Ajax-based rich Web UI without writinglow-level HTML and Javascript code.
Step 1: Create a JSF Page
1. Right-click the ViewControllerproject node in the Application Navigator, and select New...
7/27/2019 Developing Rich Web Applications With Oracle ADF
28/146
The Web part of the application is developed in a separate project called the Viewcontrollerproject, which you created in the previous part of this tutorial when you created the Fusion Webapplication. Read more...
2. In the New Gallery, navigate to JSF/Facelets under the Web Tiernode, and choose Page in theItems pane. Click OK.
3. In the Create JSF Page dialog, rename the page to DeptEmpPage.jsf; make sure the DocumentType radio button is set to Facelets, and in the Page Layout tab select the Page Template radiobutton and choose Oracle Three Column Layout.
7/27/2019 Developing Rich Web Applications With Oracle ADF
29/146
Click OK.
4. The page displays in the Design Editor. The template has three columns in it, but you only needtwo in the page, so delete the third one.Place your cursor in the right-most section called end and right-click to choose Delete.
7/27/2019 Developing Rich Web Applications With Oracle ADF
30/146
With af:pageTemplate selected in the Structure pane, in the Property Inspector set thestartColumnSize property to 350.
7/27/2019 Developing Rich Web Applications With Oracle ADF
31/146
5. Add some layout components to the page.In the Component Palette expand the Layout group of components and locate the PanelAccordion component in the Interactive Containers and Headers section. Drag it into the startfacet of your page.
6. Select af:showDetailItem (the panel accordion that you just added to the page in the previousstep) in the Structure window and in the Property Inspector change its Text property toDepartments.
7. Right-click the new Departments accordion and choose Insert after Show Detail Item -Departments > Show Detail Item. This adds another accordion to your page.
7/27/2019 Developing Rich Web Applications With Oracle ADF
32/146
8. Change the Text property to More Info.
This is another way of adding components to a page using context menus directly inside theDesign Editor (instead of dragging and dropping from the Component Palette).
9. From the Layout components, click and drag a Panel Splittercomponent onto the centerfacetof your page.
7/27/2019 Developing Rich Web Applications With Oracle ADF
33/146
10. In the Property Inspector change the Orientation property of the new splitter to vertical.
11. From the Layout components, drag a Panel Collection component into the first facet at the topof the splitter on your page.
7/27/2019 Developing Rich Web Applications With Oracle ADF
34/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
35/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
36/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
37/146
2. In the Application Navigator expand the Data Controls accordion, and in it expandAppModuleDataControl to expose the business services you defined in the first part of thistutorial.
3. Drag the DepartmentsView1 data control into the Departments accordion in your JSF page.When prompted to choose the type of component you want to create, choose Form > ADF Read-Only Form.
7/27/2019 Developing Rich Web Applications With Oracle ADF
38/146
4. In the Edit Form Fields dialog, check the Include Navigation Controls checkbox and click OK.
5. In the Data Controls accordion expand DepartmentsView1 to expose the fields it contains, aswell as the related EmployeesView3 control for the employees in each department. Note thatthese are the "detail" employees for the "master" departments - they are linked and therefore theemployees you see in this view object are the ones who belong to the particular department youare looking at.
7/27/2019 Developing Rich Web Applications With Oracle ADF
39/146
6. Drag the EmployeesView3 data control onto the Panel Collection that you created in the firstfacet of the PanelSplitter. Create it as an ADF Read-Only Table.
7. In the Edit Table Columns dialog, choose Single Row in Row Selection, and check thecheckboxes forSorting and Filtering. Click OK.
7/27/2019 Developing Rich Web Applications With Oracle ADF
40/146
8. Drag the EmployeesView3 data control again but this time onto ShowDetailItem in thepanelTabbed component in the second facet of the panelSplitter. Create it as an ADF Form.
7/27/2019 Developing Rich Web Applications With Oracle ADF
41/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
42/146
10. 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 theintegrated WebLogic Server to run it. Then a Web browser opens up to display the page. You canfollow the progress of these steps in the Log window in JDeveloper.
7/27/2019 Developing Rich Web Applications With Oracle ADF
43/146
11. Once the page displays in the browser, resize the page area using the splitterto display thedepartment data. Then use the Next button to scroll through the departments. Notice that theemployee data changes accordingly in the table and the form beneath it.
7/27/2019 Developing Rich Web Applications With Oracle ADF
44/146
12. Close the browser window.
Step 3: Refine the Business Services
In these steps you refine the business services by adding validation rules, formatting and default values.
1. In the Application Navigator under the Model project, locate the Employees entity object anddouble-click it to open it for editing.
7/27/2019 Developing Rich Web Applications With Oracle ADF
45/146
2. In the Employees.xml window, click the Attributes finger tab and locate the Salary attribute, andselect it. Scroll down in the page to the Validation Rules tab and click the Add icon to add a newvalidation rule.
7/27/2019 Developing Rich Web Applications With Oracle ADF
46/146
3. In the Add Validation Rule dialog choose Range from the Rule Type drop down list. Note thevarious other types of rules you can define here. In the Operator field ensure that the value is setto Between, and type 0 for the minimum value and 99000 for the maximum value fields.
7/27/2019 Developing Rich Web Applications With Oracle ADF
47/146
4. Click the Failure Handling tab to define an error message that will display when the validationfails. In the Message Text field type an error message like "Salary out of range 0 to 99,000"and click OK.
7/27/2019 Developing Rich Web Applications With Oracle ADF
48/146
5. Next you add a default value to the hire date field - so that when a new employee is created thehire date defaults to the current date.In the Employees.xml window, locate the HireDate attribute, and select it. In the Value sectionof the Property Inspector, locate the Default Value Type property and choose Expression, thenset the Default Value property to adf.currentDate. This will ensure the default value for a newrecord is set to today's date.
6. You can also specify UI Hints for attributes to control how they display by default in the forms andpages that use them. In this step you add a default format mask for the hire date field. You canalso specify labels and tooltip help here.In the UI Hints section of the Property Inspector locate the Format Type property and select
Simple Date.
7/27/2019 Developing Rich Web Applications With Oracle ADF
49/146
Set the Format property to dd/MMM/yyyy.
7/27/2019 Developing Rich Web Applications With Oracle ADF
50/146
7. Run the page again to test the refinements you have made.
7/27/2019 Developing Rich Web Applications With Oracle ADF
51/146
8. Test the HireDate field. Notice that as soon as you click in the field you are provided with anexample of the format for the date (as you defined it).
7/27/2019 Developing Rich Web Applications With Oracle ADF
52/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
53/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
54/146
10. Update the Salary field to a value that will break the validation you created earlier (e.g -9) andclick the Submit button to see the error message you created.
7/27/2019 Developing Rich Web Applications With Oracle ADF
55/146
11. Browse to department 50 and notice that you can now scroll the data in the employees table.Click on one of the column headers in the table to sort the data in the table.
7/27/2019 Developing Rich Web Applications With Oracle ADF
56/146
12. Click a column heading in the table and drag it to reposition it in the table.
The new column order looks as follows:
7/27/2019 Developing Rich Web Applications With Oracle ADF
57/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
58/146
2. In the Structure window select the panelFormLayout that surrounds the employee details fieldsin the showDetailItem tab.
3. In the Property Inspector set the Rows property to 5.
7/27/2019 Developing Rich Web Applications With Oracle ADF
59/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
60/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
61/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
62/146
7. Click the Save All icon on the JDeveloper menu bar to save your work and then right-clickwithin the page and select Run from the context menu.
7/27/2019 Developing Rich Web Applications With Oracle ADF
63/146
8. Browse to department 50. Because you set the column selection to single, note the additionalbehaviors for the table that are available once you choose a column - such as Freeze and Wrap.Select a column, then click the Freeze button. Now use the horizontal scroll bar to view the right-most columns.
7/27/2019 Developing Rich Web Applications With Oracle ADF
64/146
9. In department 50 expand the More Info accordion and notice the graph and the popup it displayswhen you hover over it with your mouse.
10. Scroll over to the showDetailItem1 tab, and notice how the fields have been reordered into twocolumns.
7/27/2019 Developing Rich Web Applications With Oracle ADF
65/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
66/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
67/146
Click Next.
4. In the Attributes page of the wizard, shuttle the following Employees attributes into the Selectedpane:EmployeeId, FirstName, LastName, Email, Salary, HireDate, JobId .
And from the Departments entity, shuttle the following attributes into the Selected pane:DepartmentId, DepartmentName.
7/27/2019 Developing Rich Web Applications With Oracle ADF
68/146
Click Finish to complete the view object creation.
5. Next you add a calculated attribute to the view object - an attribute that displays the employee'sannual salary.In the Application Navigator double-click EmpDetails to open it.
6. Click the Attributes finger tab and from the drop down list choose New Attribute.
7/27/2019 Developing Rich Web Applications With Oracle ADF
69/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
70/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
71/146
11. In the List of Values tab click the Add button to create a list of values.
7/27/2019 Developing Rich Web Applications With Oracle ADF
72/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
73/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
74/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
75/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
76/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
77/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
78/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
79/146
21. The field is populated with the new job.
7/27/2019 Developing Rich Web Applications With Oracle ADF
80/146
22. Close the Business Component Browser window without committing the changes.
7/27/2019 Developing Rich Web Applications With Oracle ADF
81/146
Part 3: Enhancing the User Interface
Web applications usually have more than one page in them. In this part of the tutorial you add anotherpage - a Search page - to your application and use the ADF Task Flow Diagrammer to define thenavigation rules between the two pages. You then use features of the ADF Faces Framework to addextra functionality to the pages. Finally you create a reusable page fragment and add it to the
DeptEmpPage page.
Read more...
Step 1: Create a Page Flow
1. In the Application Navigator locate the adfc-config file under the Page Flows node in theViewControllerproject. Double-click it to open it in the editor. This is where you are going todefine the application's navigation.
2. Drag the DeptEmpPage.jsf file from the Application Navigator into the empty adfc-configdiagram.
7/27/2019 Developing Rich Web Applications With Oracle ADF
82/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
83/146
5. From the Component Palette choose anotherControl Flow Case and then create an oppositeflow from the query page to the DeptEmpPage. Name this flow back.
6. Double-click the query view in the diagram to create the new page. In the Create JSF Pagedialog accept the default Facelets radio button, and with the Quick Start Layout radio buttonselected, click Browse.
7/27/2019 Developing Rich Web Applications With Oracle ADF
84/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
85/146
Click OK and OK again to create the page.
8. To add the employees search functionality to the page, open the Data Controls accordion, andlocate EmpDetails1. (If you do not see it click the Refresh button).
7/27/2019 Developing Rich Web Applications With Oracle ADF
86/146
9. Expand the EmpDetails1 data control and expand the Named Criteria node below it. Select AllQueriable Attributes and drag it into the new query.jsf page. Create it as a Query > ADF QueryPanel.
10. In the Data Controls accordion select the EmpDetails1 data control and drag it into the centerarea of the page below the query component. Create it as a Form > ADF Form.
7/27/2019 Developing Rich Web Applications With Oracle ADF
87/146
In the Edit Forms Details, check both the Include Navigation Controls and the Include SubmitButton checkboxes. Click OK.
7/27/2019 Developing Rich Web Applications With Oracle ADF
88/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
89/146
12. In the Structure window locate the Submit button, right-click it and choose Insert afteraf:command:Button - Submit > Button.
7/27/2019 Developing Rich Web Applications With Oracle ADF
90/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
91/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
92/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
93/146
16. In the Property Inspector, for the Rollback and for the Commit buttons, reset the Disabledproperty to default to make both buttons always selectable.
17. Double-click the Query.jsftab to maximise the page in the Design Editor. Your page should lookas follows:
7/27/2019 Developing Rich Web Applications With Oracle ADF
94/146
18. Click the DeptEmpPage.jsftab to switch back to the page. A quick way to navigate to this or anyother file is by using the global find box at the top right of JDeveloper and typing the file namethere.
7/27/2019 Developing Rich Web Applications With Oracle ADF
95/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
96/146
21. Click the Save All icon on the JDeveloper menu bar to save your work, and then right-clickthe DeptEmpPage.jsfpage and choose Run.
7/27/2019 Developing Rich Web Applications With Oracle ADF
97/146
22. When the page displays in your browser click the Query button to navigate to the new page. Inthe Search page click Advanced to display detailed search criteria.
7/27/2019 Developing Rich Web Applications With Oracle ADF
98/146
23. In the FirstName field accept the default Starts with, and type the letterG.Press Search.The form below displays the record for Guy Himuro.
7/27/2019 Developing Rich Web Applications With Oracle ADF
99/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
100/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
101/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
102/146
4. In the Edit Property dialog locate the Salary field and shuttle it to the right using the blue arrow.Click OK.
5. Click the Save All icon on the JDeveloper menu bar to save your work, and runDeptEmpPage.jsf.
7/27/2019 Developing Rich Web Applications With Oracle ADF
103/146
6. When the page displays, click the Query button in the Departments panel.
7. In the Search page search for employees whose first name begins with A%.
7/27/2019 Developing Rich Web Applications With Oracle ADF
104/146
Note the salary and annual salary values.
7/27/2019 Developing Rich Web Applications With Oracle ADF
105/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
106/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
107/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
108/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
109/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
110/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
111/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
112/146
2. In the Property Inspector set the Text property to My Options.
3. In the Property Inspector expand the Behaviornode and set the Detachable property to true.
7/27/2019 Developing Rich Web Applications With Oracle ADF
113/146
4. In the Structure window right-click the menu component and choose Insert inside af:menu - MyOptions > Menu Item.
7/27/2019 Developing Rich Web Applications With Oracle ADF
114/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
115/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
116/146
10. Add another menu option to the menu. In the Structure window right-click the Export to Excelmenu component and from the context menu choose Insert After af:commandMenuItem -Export to Excel > Menu Item.
11. Set the Text property of this new menu option to Printable Page.
7/27/2019 Developing Rich Web Applications With Oracle ADF
117/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
118/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
119/146
The page is ready for printing.
Close the browser window.
Step 5: Add CRUD Operation Components to your Page
The next few tasks examine some of the data operations that JDeveloper makes available to viewobjects. Read more... You see how to add a Delete operation and a CreateInsert operation. When theuser clicks the CreateInsert button to insert the new row you want the table to refresh to display the newempty row. To do this you again use the Partial Page Refresh feature that was covered in Step 2 of thispart of the tutorial.The view object uses a bind variable to pass the employee's email into the query.
1. Click the query.jsftab to return to the Query page, opening the Structure pane. In the DataControls accordion expand the EmpDetails1 node and then the Operations node below it.Select the CreateInsert operation.
7/27/2019 Developing Rich Web Applications With Oracle ADF
120/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
121/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
122/146
5. In the Edit window scroll through the page's components until you find the CreateInsert button.Shuttle it into the Selected pane.
7/27/2019 Developing Rich Web Applications With Oracle ADF
123/146
Click OK. This action defines the CreateInsert component as the trigger that will cause the tableto refresh.
6. In the same way add a Delete operation by dropping the Delete operation from EmpDetails1
onto the panelGroupLayout in the page footer. As before, create it as an ADF button.
7/27/2019 Developing Rich Web Applications With Oracle ADF
124/146
7. The two buttons display at the bottom of the query page.
7/27/2019 Developing Rich Web Applications With Oracle ADF
125/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
126/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
127/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
128/146
2. In the Create View Object wizard set the Name property to EmpByEmail and choose the SQLQuery radio button as the data source. Click Next.
3. In Step 2 of the Create View Object wizard type the following query:
select first_name,last_name from employees where email=:p_email
The ':' before p_email means that it is a variable that will be passed to the query.
Click the Testand Explain button to verify your query.
7/27/2019 Developing Rich Web Applications With Oracle ADF
129/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
130/146
Click the Control Hints tab and set the Label Text to Email.
7/27/2019 Developing Rich Web Applications With Oracle ADF
131/146
5. Click Next a few more times to accept all the defaults, until you get to step 8 of the wizard.Here check the Add to Application Module check box to include your new view in the datamodel.Click the Finish button.
7/27/2019 Developing Rich Web Applications With Oracle ADF
132/146
6. Save your work and then run the Business Component Browser to test the new view. Double-click the new EmpByEmail1 view and when prompted to insert a value for the variable enterSKING and press OK to get the results for this email address.
Running the Business Component Tester. Read more...
7/27/2019 Developing Rich Web Applications With Oracle ADF
133/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
134/146
7. To try another value click the Edit Bind Variables button.
7/27/2019 Developing Rich Web Applications With Oracle ADF
135/146
Close the Business Component Browser.
Step 7: Create a Reusable Page Fragment
In this step you create a reusable page fragment. Read more...
1. First create a new task flow specifically for this page.In the Application Navigator right-click the ViewControllerproject and choose New...
7/27/2019 Developing Rich Web Applications With Oracle ADF
136/146
2. In the Web Tier > JSF/Facelets category choose ADF Task Flow.
7/27/2019 Developing Rich Web Applications With Oracle ADF
137/146
Click OK.
3. In the Create Task Flow dialog set the File Name property to search-email-flow.xml.Verify that the Create As Bounded Task Flow and Create with Page Fragments checkboxesare both checked.
Click OK.
4. In the Design Editor drag a View component from the Component Palette onto the emptydiagram and name it searchEmail. You only use a single page in this flow, but you can havebounded task flows with multiple pages and still include them in other JSF pages.
7/27/2019 Developing Rich Web Applications With Oracle ADF
138/146
5. Double-click the new searchEmail view component to create the page fragment for it.Accept all the defaults in the dialog that displays and make sure the file name issearchEmail.jsff. This creates the page as a page fragment that can be included in other JSFpages. Click OK.
7/27/2019 Developing Rich Web Applications With Oracle ADF
139/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
140/146
9. In the Edit Form Fields dialog change the display label for the p_email value from default toEmail. Click OK.
10. In the Design Editor for the page, click the ExecuteWithParams button and use the PropertyInspector to change the Text property to Find Details.
7/27/2019 Developing Rich Web Applications With Oracle ADF
141/146
11. From the Data Controls accordion, drag the EmpByEmail1 view onto the page beneath the
button. Create it as a Form > ADF Read-only Form....
12. Accept the defaults presented in the Edit Form Fields dialog and click OK. Save your work.
7/27/2019 Developing Rich Web Applications With Oracle ADF
142/146
The page should look like this:
13. The new bounded task flow now contains a page fragment; next you include the completebounded task flow inside another JSF page.In the Application Navigator locate the DeptEmpPage.jsffile and open it in the Design Editor, if it
is not already open. From the Component Palette Layout section drag and drop a Separatorcomponent into the left accordion in the DeptEmpPage.jsf page beneath the Departments form.
7/27/2019 Developing Rich Web Applications With Oracle ADF
143/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
144/146
7/27/2019 Developing Rich Web Applications With Oracle ADF
145/146
17. The employee name information is returned.
Summary
7/27/2019 Developing Rich Web Applications With Oracle ADF
146/146
In this tutorial you built a small Web application that interacts with a database. You learned how to:
Build the business services that supply the data to the application
Create a data-bound JSF page
Enhance the page by adding more complex operations
Add a second JSF page to the application and create a page flow diagram to define the navigation between
the pages Create a reusable page fragment containing a business service based on parameters
To learn more about building rich Web applications, refer to:
"Developing Applications Using Web Page Tools" in User's Guide for Oracle JDeveloper
Web User Interface Developer's Guide for Oracle ADF
http://www.oracle.com/pls/as111200/lookup?id=OJDUG3441http://www.oracle.com/pls/as111200/lookup?id=OJDUG3441http://www.oracle.com/pls/as111200/lookup?id=ADFUIhttp://www.oracle.com/pls/as111200/lookup?id=ADFUIhttp://www.oracle.com/pls/as111200/lookup?id=ADFUIhttp://www.oracle.com/pls/as111200/lookup?id=OJDUG3441