Developing Rich Web Applications With Oracle ADF

Embed Size (px)

Citation preview

  • 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.html
  • 7/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