testcontent
Adding a BI Beans Graph in an ADF Business Components/JSP/Struts Application
Purpose
This lesson shows how you can graphically display some of the information in your application.
Topics
This lesson will discuss the following:
 |
Overview | |
| |
Prerequisites | |
| |
Step 1 - Creating a Business Service with ADF Business Components | |
| |
||
| |
Step 3 - Customizing the Graph Component | |
| |
Step 4 - Running the Application | |
| |
||
| |
Summary | |
Time to complete
This exercise takes approximately 45 minutes to complete.
Viewing Screenshots
Move your mouse over this icon to show all screenshots. You can also move your mouse over each individual icon to see only the screenshot associated with it.
Overview
This lesson describes the steps to create a JSP-Struts application with ADF Business Components. The application built in this script is a master view with one detail, where the detail is rendered as a Business Intelligence Beans Graph (BI Graph).
Scenario
You want to graphically represent some portion of an application that you are developing.
Prerequisites
In order for this lesson to work successfully, you will need to have performed the following:
| 1. |
Install Oracle JDeveloper10g.
|
| 2. |
Install the sample schemas and create a connection to the HR or HR8 schema to use in this lesson. See Installing the Sample Schemas and Establishing a Database Connection.
|
0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //-->
Step 1 - Creating a Business Service with ADF Business Components
Java Server Pages can be used with any business service such as ADF Business Components, TopLink, Enterprise Java Beans, Web services and Java Beans. ADF Business Components is used in this topic as an example. After finishing this exercise you may want to practice what you've learned by using one of the other business services.
In this step you create a new application workspace and then create an ADF Business Components model that is based on the Departments and Employees database tables in the HR schema. To create a business service with ADF business components, perform the following steps:
| 1. |
In the Application Navigator, right mouse click on the Applications node. Select New A pplication Workspace from the context menu.
|
| 2. |
Enter an Application Name of BIBeansApp. As an Applica tion Template select Web Application [Default]. This sets the technologies scope to only those technologies that are commonly used when building JSP-Struts applications. Click OK.. This creates an application workspace with two empty projects, ViewController and Model.
|
| 3. |
You will create the Business Component mode in the Model project. Right-click the Model project in the Application Navigator, then select New from the context menu.
|
| 4. |
The technologies shown in the New Gallery are determined by the application template that you chose when you created the workspace. Expand the Business Tier node. Select Business Components in the Categories list and Business Components from Tables in the Items list. Click OK.
|
| 5. |
In the connection dialog select the HR connection and click OK. In this example, the connection is named MyHRConn, but you can use any database connection to the HR or HR8 schema. For information on how to set up this connection, see Prerequisites.
|
| 6. |
If the Welcome page of the Create Business Components from Tables wizard is displayed, click Next . In the Entity Objects page of the wizard select (Control-click) the
Departmentsand
Employees tables in the
Available
list. Click the Copy button
Click Next.
|
| 7. |
In the View Objects page click the Add All button
Click Next .
|
| 8. |
In the Application Module page click Next to accept all default settings. In the Finish page, click Finish to create the Business Component model.
|
| 9. |
With the
Model project selected in the Application Navigator, click the
Save button
|
to move the selected tables to the
Selecte
d
list on the right.
to move both entries to the
Selected
list on the right. This defines both selected Entity Objects as the source of View Objects.
and then
Make
in the JDeveloper toolbar to save and compile your project.
0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //-->
Step 2 - Creating a Struts Project for JSP
In this topic you create a JSP page that uses a button bar to navigate through the rows of a master read-only form displaying information about departments. On the same page, detail information about employees of the selected department is shown in a bar chart.
To create this master-detail JSP with a bar chart, perform the following steps:
| 1. |
From the View menu open the following JDeveloper windows if not already open: Data Control Palette , Property Inspector , Str ucture window, Com ponent Palette . Note: Optionally, to save some space in the editor, you can drag the Component Palette on top of the Data Control Palettel. You navigate between them using tabs at the bottom.
|
| 2. |
Expand the
ViewController node. Expand
Web Content and
WEB-INF then double-click the
|
| 3. |
In the Component Palette select
Struts Page Flow in the drop-down list, then drag the
Data Page icon
|
| 4. |
Rename the data page: change /dataPage1 to /deptemp.
|
| 5. |
To create a JSP page, double-click the /deptemp icon. Accept the suggested JSP page name /deptemp.jsp and click OK.
|
| 6. |
The visual JSP editor opens automatically for you to create the application's view. Type JSP Graph Example into the page, highlight the words with the mouse, and select Heading 1 from the Block Format drop-down list at the top of the page editor. Press [Enter] to insert a blank line.
|
| 7. |
In the Component Palette, select CSS in the drop-down list. From the stylesheets shown, click Blaf. Note that the appearance of the JSP changes to the new look and feel.
|
|
8 . |
Navigate to the Data Control Palette that shows the entries of the model created earlier (if it doesn't, use the right mouse context menu to refresh the Data Control Palette.) Select DepartmentsView1 and select Read-Only Form from the Dr ag and Drop As drop-down list. Drag DepartmentsView1 to the deptemp.jsp page to a location below the title.
|
| 9. |
In the Data Control palette, again select DepartmentsView1, but this time select Navigation Buttons from the Dr ag and Drop As drop-down list. Drag the Navigation Buttons into the form frame at the end of the existing table on the JSP page. This automatically adds the navigation bar to the form tag of the DepartmentsView1 Read Only Form.
|
| 10. |
Expand the DepartmentsView1 node in the Data Control Palette. Select the EmployeesView3 entry and choose Graph in the Dr ag and Drop As drop-down list. Drag the EmployeesView3 to the deptemp.jsp page to a location below the DeptEmpView1 Read Only Form.
|
to the empty Struts Page Flow Diagram.
0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //-->
Step 3 - Customizing the Graph Component
The Graph component needs to be customized to show employee salary data only. To customize the graph, perform the following steps:
| 1. |
In the Application Navigator, expand the ViewController node, then Application Sources, then view. Select the deptempUIModel.xml entry.
|
| 2. |
In the Structure window right-click the EmployeesView3 entry at the end of the list and select Edit... from the context menu.
|
| 3. |
On the
Select Data Collection dialog page click
Next
because
EmployeesView3 is already selected.
|
| 4. |
In the Select Attributes dialog select LastName from the Series Attributes drop-down list. In the D ata Attributes list box, select Salary, then click Finish.
|
Step 4 - Running the Application
Next you run the application to test that it functions properly. To run the JSP, perform the following steps:
| 1. |
Select the struts-config.xml tab at the top of the editor window to open the Struts Page Flow editor.
|
| 2. |
Right-click the /deptemp icon and from the context menu select Run to run the application
|
| 3. |
The application should display the departments: The salaries of the employees in the displayed department are presented in a bar graph:
|
Step 5 - Changing the Graph Component
You can change the type of graph that is displayed. To change the graph type, perform the following steps:
| 1. |
To invoke a WYSIWYG graph editor, in the Application Navigator expand ViewController > Application Sources > view, then double-click he BIGraphDef1.xml file..
|
| 2. |
In the Graph Editor, click the Graph Type button
.
|
| 3. |
Select Pie as the Graph Type and click OK.
|
| 4. |
You can run the application again to see the effects of the change.
|
at the upper left of the editor.
In this lesson you accomplished the following:
| |
Used ADF Business Components to create a business service | |
| |
Created a Struts Page Flow Diagram with a data page | |
| |
Created a JSP with data from the business service | |
| |
Added a data-bound graph to the JSP |
|
| |
Modified the graph to show only the employee salary labeled with the last name | |
| |
Ran the application to test it | |
| |
Changed the graph from a bar chart to a pie chart |
|
Related topics
For additional information, documentation, and demos, see the
JDeveloper Products page on OTN.
Move your mouse over this icon to hide all screenshots
 | Popular Downloads |  |
Printer View