Professional Documents
Culture Documents
Oracle 11g Jdeveloper Rich WEB PDF
Oracle 11g Jdeveloper Rich WEB PDF
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Purpose
The application that you create displays information on departments and 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 Download button to
download a zip of the final application, and then unzip it in your JDeveloper mywork
folder.
Duration
Application
2 hours
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. JDeveloper provides several template
applications that you can use when creating an application and projects. The template applications are pre-configured with a basic set
of technologies that are needed for developing the various types of applications, and you create your working environment by selecting
the template that best 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 reusable business components that will
access the database.
You'll be using the Oracle ADF Business Components technology to map Java objects to existing tables in your database.
2. In the Select Role dialog, choose Studio Developer and click OK.
1 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
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 even individual fields on dialogs.
If a dialog box opens asking if you would like to import preferences from a previous JDeveloper installation, click NO. Close the
Tip of the Day window.
3. Once loaded, the JDeveloper IDE appears. The very first time you open JDeveloper, the Start Page displays. You can re-invoke
2 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
5. In the New Gallery, choose Fusion Web Application (ADF) and click OK.
3 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
6. JDeveloper loads the required features for a Fusion Web application and the Create Fusion Web Application (ADF) wizard
launches.
In the Name your application page of the wizard, type HRSystem as the name. If required, you can 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. In the Name your project page ensure that the project name is Model (the default). Notice that ADF Business Components and
4 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click Next.
8. The Configure Java settings page allows you to define a default package, a Java source path and an output directory. Click Next
9. In the second Name your project page, ensure that the Project Name is ViewController. Scroll through the list of project
features to see the types of technologies that can be used with a Fusion Web application.
5 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click Next.
10. In the Configure Java settings page accept the defaults and click Finish to create your Fusion Web application and projects.
11. The HRSystem application and the two projects are displayed in the Application Navigator on the left of the screen.
6 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
2. The step expands showing useful information such as prerequisites required for performing the task and detailed instructions on
how to perform the task. Click the Create a Database Connection button.
7 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
3. Specify the following properties for the new connection you are creating:
Connection Name
HRConn
UserName
hr
Password
hr
Enter the appropriate Oracle JDBC Settings to point to the right host, port and SID for your database. Click the Test Connection
button to verify that you can connect successfully.
8 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click OK.
4. Click the down arrow to shrink the Connect to a Database step.
5. In the Checklist, set the status of the Connect to a Database step to Done.
9 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
6. Click the Build Business Services step to expand it, then click the Go to Substeps button.
7. In the list of substeps, click the Create Entity Objects and Associations substep.
10 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
9. In the Select Project for Action dialog, select the Model project and click OK.
10. In the Initialize Business Components Project dialog select the HRConn connection if it is not already selected. Click OK.
11 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
11. The Create Business Components from Tables wizard launches. In the Entity Objects page, click the Query button to examine
12. Select the DEPARTMENTS and EMPLOYEES tables in the Available list, and click the right arrow to move your selections to the
Selected list. This step creates updatable entity objects based on the tables selected.
12 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
(HR.EMPLOYEES) to the Selected list. This step creates matching view objects DepartmentsView and EmployeesView for
performing queries on the entity objects you just created.
13 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
14. In the Query-based View Objects page, click the Query button and then move JOBS to the Selected list. This step creates a
read-only view object that queries the Jobs table. Then click Next to continue.
15. In the Application Module page, click Finish to create the business components in the Model project.
14 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
16. In the Checklist, set the status of the Create Entity Objects and Associations step to Done.
18. Click the Back to Checklist link and set the status of the Build Business Services step to Done
15 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
19. In the Application Navigator right-click AppModule and select Run to invoke the application module tester. This is a small
Swing-based application that allows you to test the ADF Business Components you have just created.
20. In the Oracle Business Component Browser window, double-click the EmpDeptFkLink1 node to show the department and
employees data. Navigate between the records using the Next button and notice the automatic master-detail synchronization.
16 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
in the master toolbar, to enter search criteria for your data. Specify
1700 in the LocationID field and click the Find button to execute the query.
22. The form now only shows departments in this location. Use the Next button to scroll through the departments at Location 1700.
17 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
You need to remove the parameter value of the search criteria to access all departments again.
23. Close the Oracle Business Component Browser window, and back in JDeveloper, click the Save All
menu bar, or select File > Save All from the menu.
Previous 1 2 3 Next
18 de 18
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
The Web part of the application is developed in a separate project called the Viewcontroller project, which you created in
the previous part of this tutorial when you created the Fusion Web application.
2. In the New Gallery, navigate to JSF/Facelets under the Web Tier node, and choose Page in the Items pane. Click OK.
3. In the Create JSF Page dialog, rename the page to DeptEmpPage.jsf; make sure the Document Type radio button is set to
Facelets, and in the Page Layout tab select the Page Template radio button and choose Oracle Three Column Layout.
1 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click OK.
4. The page displays in the Design Editor. The template has three columns in it, but you only need two in the page, so delete the
third one.
Place your cursor in the right-most section called end and right-click to choose Delete.
With af:pageTemplate selected in the Structure pane, in the Property Inspector set the startColumnSize property to 350.
2 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
In the Component Palette expand the Layout group of components and locate the Panel Accordion component in the
Interactive Containers and Headers section. Drag it into the start facet of your page.
6. Select af:showDetailItem (the panel accordion that you just added to the page in the previous step) in the Structure window and
7. Right-click the new Departments accordion and choose Insert after Show Detail Item - Departments > Show Detail Item.
3 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
This is another way of adding components to a page using context menus directly inside the Design Editor (instead of dragging
and dropping from the Component Palette).
9. From the Layout components, click and drag a Panel Splitter component onto the center facet of your page.
10. In the Property Inspector change the Orientation property of the new splitter to vertical.
4 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
11. From the Layout components, drag a Panel Collection component into the first facet at the top of the splitter on your page.
A panel collection is a component that aggregates collection components like table, treeTable and tree to display
standard/application menus, toolbars and statusbar items.
12. Using the Structure window, drag a Panel Tabbed component into the second facet of the splitter on your page.
5 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
13. Double-click the tab DeptEmpPage.jsf at the top of the page to view it in its entirety. The page should look like the screenshot
below.
14. Click the Save All icon on the JDeveloper menu bar to save your work.
6 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
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
and drop operations; behind the scenes the ADF Model layer takes care of binding the data for you.
1. In the Design Editor click the Departments accordion to expand it.
2. In the Application Navigator expand the Data Controls accordion, and in it expand AppModuleDataControl to expose the
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 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
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, as well as the related
EmployeesView3 control 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 particular
department you are looking at.
6. Drag the EmployeesView3 data control onto the Panel Collection that you created in the first facet of the PanelSplitter. Create
8 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
7. In the Edit Table Columns dialog, choose Single Row in Row Selection, and check the checkboxes for Sorting and Filtering.
Click OK.
8. Drag the EmployeesView3 data control again but this time onto ShowDetailItem in the panelTabbed component in the second
9 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
9. In the Edit Form Fields dialog, check the Include Submit Button check box. Using your mouse and the Shift key select the
bottom three fields from the list: CommissionPCT, ManagerId, DepartmentID and delete them by pressing the Delete button
at the top right corner of the dialog box. Click OK.
10 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
11. Once the page displays in the browser, resize the page area using the splitter to display the department data. Then use the
Next button to scroll through the departments. Notice that the employee data changes accordingly in the table and the form
beneath it.
11 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
2. In the Employees.xml window, click the Attributes finger tab and locate the Salary attribute, and select it. Scroll down in the
page to the Validation Rules tab and click the Add icon to add a new validation rule.
12 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
3. In the Add Validation Rule dialog choose Range from the Rule Type drop down list. Note the various other types of rules you can
define here. In the Operator field ensure that the value is set to Between, and type 0 for the minimum value and 99000 for the
maximum value fields.
4. Click the Failure Handling tab to define an error message that will display when the validation fails. In the Message Text field
type an error message like "Salary out of range 0 to 99,000" and click OK.
5. 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 current
date.
In the Employees.xml window, locate the HireDate attribute, and select it. In the Value section of the Property Inspector, locate
the Default Value Type property and choose Expression, then set the Default Value property to adf.currentDate. This will
ensure the default value for a new record is set to today's date.
13 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
6. You can also specify UI Hints for attributes to control how they display by default in the forms and pages that use them. In this
step you add a default format mask for the hire date field. You can also specify labels and tooltip help here.
In the UI Hints section of the Property Inspector locate the Format Type property and select Simple Date.
14 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
7. Run the page again to test the refinements you have made.
15 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
8. Test the HireDate field. Notice that as soon as you click in the field you are provided with an example of the format for the date
16 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
9. Try to update the field for one of the employees with an invalid date such as 11/11/123 and notice the error message when you
17 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Use the Clock/Calendar icon next to the field to display a pop-up calendar and choose a valid date.
10. Update the Salary field to a value that will break the validation you created earlier (e.g -9) and click the Submit button to see the
18 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
11. Browse to department 50 and notice that you can now scroll the data in the employees table. Click on one of the column
12. Click a column heading in the table and drag it to reposition it in the table.
19 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
13. In the Filter field above the LastName column, type B% and press Enter to filter the table to show only those employees whose
14. Experiment with the other menus and buttons of the table to see additional functionality. Once you are finished, close the
20 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
the Structure pane. Set the Column Selection property of the table to Single.
2. In the Structure window select the panelFormLayout that surrounds the employee details fields in the showDetailItem tab.
21 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
When you run the page in a later step you will see that the fields in the tab are now arranged in two columns.
4. Next you add a graph representation of the data to the page; this is done using the ADF Data Visualization set of JSF
components.
In the Design Editor click the More Info accordion to expand it. Then drag the EmployeesView3 data control into the More Info
accordion and create it as a Graph.
The graph can be displayed as static PNG image or an interactive Flash component.
5. In the Component Gallery choose Pie from the list of graphs on the left and Pie again as the graph type. In the bottom pane,
22 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
icon on the JDeveloper menu bar to save your work and then right-click within the page and select Run
23 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
8. Browse to department 50. Because you set the column selection to single, note the additional behaviors 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.
9. In department 50 expand the More Info accordion and notice the graph and the popup it displays when you hover over it with
your mouse.
24 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
10. Scroll over to the showDetailItem1 tab, and notice how the fields have been reordered into two columns.
When you are done, close the browser and return to JDeveloper.
25 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
2. In the Name page of the Create View Object wizard, type EmpDetails as the Name and retain Entity object as the default data
source.
Click Next.
3. In the Entity Objects page of the wizard first select Employees and shuttle it to the right, and then select the Departments entity
26 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click Next.
4. In the Attributes page of the wizard, shuttle the following Employees attributes into the Selected pane:
27 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
6. Click the Attributes finger tab and from the drop down list choose New Attribute.
7. In the New View Object Attribute dialog type AnnualSalary as the name for the new attribute and click OK.
8. In the Details tab at the bottom of the attributes list, set the following properties for the AnnualSalary attribute:
Field
28 de 35
Value
Name
AnnualSalary
Type
Number
Default Value
Expression (Checked)
Value
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Salary * 12
.
9. 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
10. In the List of Values tab click the Add button to create a list of values.
29 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
11. In the Create List of Values dialog click the green plus to the right of the List Data Source field. In the View Accessors dialog,
Click OK.
12. Back in the Create List of Values dialog, choose JobId as the List Attribute.
30 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
13. Still in the Create List of Values dialog click the UI Hints tab and choose Combo Box with List of Values as the Default List
Type and then shuttle the Job Title attribute into the Selected pane.
In the Application Navigator double-click AppModule to open it for editing and choose the Data Model finger tab.
31 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
15. Click the EmpDetails view object and shuttle it into the Data Model pane.
16. Use the Business Component Browser to test the new functionality you have just incorporated through the EmpDetails view
object. In the Application Navigator right-click AppModel and select Run to invoke the tester.
32 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
18. Notice that the new calculated AnnualSalary field is displayed, along with DepartmentId and DepartmentName. None of the
33 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
19. Use the drop down list for the JobId field to choose a new job.
34 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
21. Close the Business Component Browser window without committing the changes.
Previous 1 2 3 Next
35 de 35
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Web applications usually have more than one page in them. In this part of the tutorial you add another page - a Search page - to your
application and use the ADF Task Flow Diagrammer to define the navigation rules between the two pages. You then use features of the
ADF Faces Framework to add extra functionality to the pages. Finally you create a reusable page fragment and add it to the
DeptEmpPage page.
to open it in the editor. This is where you are going to define the application's navigation.
2. Drag the DeptEmpPage.jsf file from the Application Navigator into the empty adfc-config diagram.
3. From the Component Palette drag and drop a View component into the adf-config diagram, and rename it query. This
represents the new JSF page that you are about to create.
1 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
4. From the Component Palette select Control Flow Case and then click on the DeptEmpPage and drag a line to the query page.
5. From the Component Palette choose another Control Flow Case and then create an opposite flow from the query page to the
2 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
6. Double-click the query view in the diagram to create the new page. In the Create JSF Page dialog accept the default Facelets
radio button, and with the Quick Start Layout radio button selected, click Browse.
7. In the Component Gallery, retain the default One Column category, type and layout, but check the Apply Themes checkbox in
3 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
9. Expand the EmpDetails1 data control and expand the Named Criteria node below it. Select All Queriable Attributes and drag
it into the new query.jsf page. Create it as a Query > ADF Query Panel.
4 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
10. In the Data Controls accordion select the EmpDetails1 data control and drag it into the center area of the page below the query
In the Edit Forms Details, check both the Include Navigation Controls and the Include Submit Button checkboxes. Click OK.
5 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
11. With the panelFormLayout still selected, use the Property Inspector to set the Rows property to 5.
12. In the Structure window locate the Submit button, right-click it and choose Insert after af:command:Button - Submit >
Button.
6 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
13. In the Property Inspector change the Text of the new button to Back and for the Action property select back from the drop down
list. This causes the button to perform the navigation you defined in the page flow diagram.
14. Next you add transaction operations to the page to allow you to commit and rollback changes. In the Data Controls Palette
expand the application module level Operations node to locate the commit and rollback operations. Drag the Commit operation
into the Structure window before the First Button. When prompted for a drop target choose ADF Button.
7 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
8 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
16. In the Property Inspector, for the Rollback and for the Commit buttons, reset the Disabled property to default to make both
17. Double-click the Query.jsf tab to maximise the page in the Design Editor. Your page should look as follows:
9 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
18. Click the DeptEmpPage.jsf tab to switch back to the page. A quick way to navigate to this or any other file is by using the global
find box at the top right of JDeveloper and typing the file name there.
into the Departments accordion between the First and Previous buttons. Alternatively you can right-click the First button and
choose insert after > button to add the new button.
10 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
20. Using the Property Inspector change the Text of the button to Query and for the Action property type goQuery or select it from
the drop down list if available. This causes the button to perform the navigation you defined in the page flow diagram.
icon on the JDeveloper menu bar to save your work, and then right-click the DeptEmpPage.jsf page and
choose Run.
11 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
22. When the page displays in your browser click the Query button to navigate to the new page. In the Search page click Advanced
23. In the FirstName field accept the default Starts with, and type the letter G.
Press Search.The form below displays the record for Guy Himuro.
12 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
24. Experiment with the form, saving your search criteria, creating more complex queries and updating data for employees. Note
how this form displays a view of the data that matches the definition in the view object you created - including information for
Department name as well as a list of values for the Job id and the employee's annual salary.
You can also make changes to the data and commit and rollback your transactions as needed.
When you are finished close the browser window.
In the next steps you become acquainted with some of the features of the ADF Faces Framework. You enhance your pages with
additional Ajax functionality leveraging the declarative development features offered by ADF Faces components.
In the next few substeps you use the partial page refresh capability offered by ADF Faces.
1. Open the query.jsf file in the Design Editor, if it is not already open. Select the Salary field. In the Property Inspector set the
13 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
2. Still in the Property Inspector expand the Behavior node and set the AutoSubmit property to True.
3. In the Structure window locate the AnnualSalary field. (Another option to get to this field is to double-click the query.jsf tab to
maximize the window and then locate the field in the Design Editor).
Locate the PartialTriggers property under the Behavior section and click the arrow to its right to choose Edit.
14 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
4. In the Edit Property dialog locate the Salary field and shuttle it to the right using the blue arrow. Click OK.
15 de 46
icon on the JDeveloper menu bar to save your work, and run DeptEmpPage.jsf.
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
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%.
16 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
8. Update the Salary field and then tab out of it. Notice the immediate change to the AnnualSalary field once you leave the Salary
field. However this is the only field that is refreshed (not the whole page).
17 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
The af:autoSuggestBehavior component displays a drop down list of suggested items when the user types into an input
component.
1.
2. In the Component Palette expand the Operations node, and locate Auto Suggest Behavior in the Behavior section. Drag and
drop the Auto Suggest Behavior operation onto the JobId field.
18 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
3. In the Insert Auto Suggest Behavior dialog box type #{bindings.JobId.suggestedItems}. Click OK.
5. Type 121 in the EmployeeId field, and click the Search button. In the record for Adam Fripp update the JobId field by typing 's' in
19 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
6. Add 'a' after the 's' and see the list of suggestions modified accordingly.
20 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
7. Choose Sales Representative from the three remaining options, to populate the field.
21 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
from the context menu choose Insert Inside Facet menus > Menu.
22 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
3. In the Property Inspector expand the Behavior node and set the Detachable property to true.
4. In the Structure window right-click the menu component and choose Insert inside af:menu - My Options > Menu Item.
23 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
5. In the Property Inspector set the Text property of the new menu item to Export to Excel.
6. With the new Export to Excel menu item still selected in the Structure window, expand the Listeners section of the Operations
7. In the Insert Export Collection Action Listener dialog click the down arrow next to ExportedId field and choose Edit.
8. In the Edit Property dialog navigate through the page structure to locate the table - t1 component and select it. Click OK.
24 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
9. From the Type drop down list select excelHTML and click OK.
10. Add another menu option to the menu. In the Structure window right-click the Export to Excel menu component and from the
context menu choose Insert After af:commandMenuItem - Export to Excel > Menu Item.
25 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
11. Set the Text property of this new menu option to Printable Page.
12. In the Behavior section under the Operations node of the Component Palette select the Show Printable Page Behavior
operation to add it to the new menu item. Drag and drop it onto the new menu option you created.
26 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
icon on the JDeveloper menu bar to save your work, and then choose Run.
14. When the page displays click the new menu and detach it.
15. Then invoke each one of the menu options you created, for example Export to Excel.
You may need to accept the download of the file in the browser window to be able to access the Excel file.
27 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
The next few tasks examine some of the data operations that JDeveloper makes available to view objects. You see how to add a
Delete operation and a CreateInsert operation. When the user clicks the CreateInsert button to insert the new row you want the
table to refresh to display the new empty row. To do this you again use the Partial Page Refresh feature that was covered in Step 2
of this part of the tutorial.The view object uses a bind variable to pass the employee's email into the query.
1. Click the query.jsf tab to return to the Query page, opening the Structure pane. In the Data Controls accordion expand the
EmpDetails1 node and then the Operations node below it. Select the CreateInsert operation.
28 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
2. Drag the CreateInsert operation in the Structure pane onto the panelGroupLayout in the footer facet of the employees form.
3. In the Property Inspector set the Id property for the button to CreateInsert.
29 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
4. Still in the Property Inspector expand the Behavior node and in the PartialTriggers property choose Edit from the dropdown
list.
5. In the Edit window scroll through the page's components until you find the CreateInsert button. Shuttle it into the Selected pane.
30 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click OK. This action defines the CreateInsert component as the trigger that will cause the table to refresh.
6. In the same way add a Delete operation by dropping the Delete operation from EmpDetails1 onto the panelGroupLayout in the
31 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
32 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
10. Click the CreateInsert button. The page refreshes and the fields are cleared down (except for the HireDate field, which you set
In this step you create a view object that allows end users to search for an employee's name based on their email address.
1. In the Application Navigator locate the demo.model package and right-click it to choose New View Object....
2. In the Create View Object wizard set the Name property to EmpByEmail and choose the SQL Query radio button as the data
33 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
3. In Step 2 of the Create View Object wizard type the following query:
The ':' before p_email means that it is a variable that will be passed to the query.
Click the Test and Explain button to verify your query.
p_email.
34 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click the Control Hints tab and set the Label Text to Email.
35 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
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 data model.
Click the Finish button.
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 enter SKING and press OK to get the results for this email address.
36 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
37 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
In the Application Navigator right-click the ViewController project and choose New...
2. In the Web Tier > JSF/Facelets category choose ADF Task Flow.
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 checkboxes are both checked.
38 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Click OK.
4. In the Design Editor drag a View component from the Component Palette onto the empty diagram and name it searchEmail.
You only use a single page in this flow, but you can have bounded task flows with multiple pages and still include them in other
JSF pages.
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 is searchEmail.jsff. This creates the page as a
page fragment that can be included in other JSF pages. Click OK.
39 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
6. An empty page displays in the Design Editor. Expand the Data Controls accordion and, if necessary, click the Refresh button to
ensure that the new EmpByEmail data control appears in the list.
7. Expand the new EmpByEmail1 view and the Operations node beneath it. Select the ExecuteWithParams operation. You are
going to use this operation to execute the query for this view passing it the necessary parameter.
40 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
8.
Drag the ExecuteWithParams operation to your new page, and create it as an ADF Parameter Form....
9. In the Edit Form Fields dialog change the display label for the p_email value from default to Email. Click OK.
41 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
10. In the Design Editor for the page, click the ExecuteWithParams button and use the Property Inspector to change the Text
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.
42 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
13. The new bounded task flow now contains a page fragment; next you include the complete bounded task flow inside another JSF
page.
In the Application Navigator locate the DeptEmpPage.jsf file and open it in the Design Editor, if it is not already open. From the
Component Palette Layout section drag and drop a Separator component into the left accordion in the DeptEmpPage.jsf page
beneath the Departments form.
43 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
14. Add the new flow you created as a region to the existing page.
From the Application Navigator drag and drop the search-email-flow.xml file into the left accordion in the DeptEmpPage.jsf
page beneath the new separator. Create it as a Region.
15. Your page should now look like the screenshot below.
16. Save your work and then run the updated DeptEmpPage.jsf page.
When the page displays in your browser test the new functionality by entering an email value in the Email field and pressing the
Find Details button.
44 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Summary
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
45 de 46
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_55/jdtut_11r2...
Previous 1 2 3 Next
46 de 46