In this lesson, you will learn how to develop a customized
business intelligence JSP application by using BI Beans JSP tags. All of the
application code that you need will be generated by HTML and JSP tag wizards.
You will incorporate two BI Beans presentations, a crosstab
and a graph, into a JSP page that you have designed with a custom layout. You
will also add custom application features that enhance the user interaction
with the presenations.
Optionally, you can add a second page to the application that
contains a graph and additional custom JSP application features. If you choose
to create the second page, you will also learn how to add navigation between
the pages.
As you develop the application, you will test it by running
it from within JDeveloper.
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
In JDeveloper, you can create a customized business intelligence
JSP application easily by using BI Beans JSP tags. From the Component Palette,
you select tags that you need to incorporate specific functionality into your
JSP page.
Oracle BI Beans provides JSP tags that exploit Oracle OLAP
query analysis features and new presentation formatting capabilities for the
web.
Business Intelligence Beans provides
a set of samples to help you learn how to use the product. These samples
use the Oracle Common Schema analytic workspace as the sample data set.
The BI Beans OBE lessons also use the Common Schema analytic workspace
as the sample data set.
Therefore, if the BI Beans samples have been installed,
you should have access to the analytic workspace for the BI Beans OBE
lessons. If the BI Beans samples have not been installed, see Installing
the Oracle Business Intelligence Samples.
2.
Complete the first three lessons in
the Develop Business Intelligence Objects focus area.
Or,
You can use a BI Beans Project that contains all of the files that would
result from the completion of the tutorials in the first focus area. To
use this project, follow the instructions in Download,
Extract, and Open the BI Beans OBE Project.
Note: If you have completed any other lesson in this
focus area, then you already have the BI Beans OBE project that is required
for this lesson.
Additional Practice
The goal of this lesson is to teach you how to
perform certain development tasks while creating a customized BI Beans JSP application.
For more practice on how to use a BI Beans JSP
application as an end-user, please complete the OBE lesson entitled Generating
a BI Beans JSP Application, which is part of this OBE Focus Area. In that
particular lesson, the topic entitled Run the Application covers
much of the end-user functionality that is provided in a BI Beans JSP application.
If you have not completed the first three lessons
in the Develop Business Intelligence Objects focus area, or if you have not
already downloaded and extracted the BI Beans OBE Project as part of another
lesson in this focus area, use this optional topic. Otherwise, skip this topic
and move directly to the Create a BI-Enabled
JSP Page topic.
This topic contains
instructions for downloading and opening the JDeveloper Project that contains
all of the files and objects that you need for this lesson.
To download and open the BI Beans OBE
Project, follow these steps:
1.
First create a new Workspace. From the File
menu, select New. The New Gallery Dialog box opens.
2.
In the New Gallery dialog box, under
Categories, select General; under Items, select Workspace
and click OK.
The Create Workspace dialog box opens.
3.
In the Create Workspace dialog box, accept the default
name and directory for the workspace.
Note: Make note of the path for your workspace Directory
Name.
Ensure that the Add a New Empty Project box is not
checked, as shown in the screen shot below:
Click OK to create the Workspace. Click the Save
All tool to save the Workspace.
4.
Save the following self-extracting
archive, Project1.exe, to your local
machine.
For example, use your browser's right-mouse menu
to perform a Save As.
Note: Due to virus protection rules, the self-extracting
archive may copy to your machine with the name Project1,
rather than Project1.exe. If this is the case, you will
need to rename the file on your local machine by adding the .exe
extension before extracting its contents.
Once you have downloaded the archive, and renamed it if necessary, extract
the contents of the archive using the following steps:
A.
Double-click
on the self-extracting archive, Project1.exe.
B.
In the WinZip Self- Extractor dialog
box, use the Browse button to navigate to
the directory that was just established by the creation of your
new JDeveloper Workspace. For example, <JDeveloper_home>\jdev\mywork\Workspace1.
C.
Click the Unzip button.
The BI Beans OBE project is upzipped into your workspace directory.
Close the WinZip Self- Extractor dialog.
5.
In the JDeveloper Applications-Navigator,
select the new Workspace that you just created in Steps 1. - 3.
Then, from the main menu select File > Open.
6.
In the Open dialog, navigate to the Project1
directory below your workspace directory. This directory was created when
you extracted the archive in Step 4.
Select Project1.jpr
Click Open.
The Workspace and associated Project are displayed in the Applications-Navigator.
7.
Expand all of the
nodes in the Workspace, and you should see the following project files
in the Applications-Navigator:
8.
Now, you must specify your database connection to the Oracle
Common Schema analytic workspace in the BIDesigner. To do this, perform
the following:
A.
Right-mouse click on
Project1BIDesigner and select Settings
from the popup menu.
B.
In the BI Designer Settings dialog
box, click the Edit button just beneath the Connection
drop-down box.
The OLAP Connection Editor is displayed.
C.
Select the Connection
tab in the OLAP Connection Editor. Modify the connection details
for your Oracle OLAP data source.
D.
Select the Test
tab. Then, click Test Connection to verify that
your connection is valid.
Click OK to close the OLAP Connection Editor.
Notes:
If the connection fails, return to the Connection tab and re-enter
the connection information for your Oracle Common Schema analytic
workspace data source.
If you have not installed the Common Schema sample data set, follow
the instructions in Installing
the Oracle Common Schema, which is described in the Prerequistes
section.
E.
Click OK to close
the BI Beans Settings dialog box.
9.
From the File menu, choose Save
All.
Create a BI-Enabled
JSP Page
In this topic, you will use a BI Beans wizard
to generate an empty JSP page that is preconfigured for the incorporation of
BI functionality.
When you create an empty BI JSP page as described
in this topic, the wizard generates the definition of a BIThinSession
and a form that will be used
to handle BI Beans events such as drilling and paging. These two objects are
necessary for creating any JSP page for a BI Beans application.
In the first Focus Area of BI Beans OBE lessons,
Develop Business Intelligence Objects, you learned how to create
analytic objects such as Crosstabs, Graphs, Calculations, and Saved Selections.
You also learned how to enhance these objects by using the Query Editor, Crosstab
Customizer, and Graph Customizer.
Here, before you create the first BI-enabled
JSP page for your application, you will create a simple crosstab and a calculation
that will be used to display three key profitability indicators (KPIs) for the
JSP application.
To create the new crosstab and calculation for
the JSP application, follow these steps:
1.
First, create the crosstab.
In the Applications-Navigator pane, locate the project that contains
your BIDesigner. Then, right-click Project1BIDesigner1
and select New Crosstab from the menu.
The Presentation Wizard is launched. Click Next
in the Welcome page.
2.
In Step 1, specify the presentation name and
description that will be associated with the crosstab as follows:
Presentation Location
and Name:
KPI Analysis
Description:
KPI Analysis
Click Next to continue.
3.
In Step 2, select the measures for this crosstab, and
then remove the Promotion dimension from the query.
A.
Expand the Electronics-KPIs
measure folder in the Available list. Then, multi-select the measures
Sales Revenue and Sales Cost.
B.
Use the Add Selected Items
button (">") to move these measures
to the Selected list.
C.
Then, in the Selected list, choose
Promotion and click the Remove
Selected Items button ("<")
The completed Items selection should look like this:
Click Next to continue.
4.
In Step 3, modify the layout of the crosstab.
To rearrange dimensions, select a dimension, and use a drag-and-drop
operation to move the dimension to the desired position. Rearrange the
dimensions so that the layout appears as follows:
Page Items:
Product, Time,
Channel
Columns:
Measure
Rows:
Geography
Bypass the remaining steps in the wizard and click Finish
to create the crosstab, which should look like this:
5.
The KPI Analysis crosstab is added to your Local Catalog
in the Applications Navigator.
From the File Menu, select Save All to save your work.
Then choose File > Close to close
the crosstab.
6.
Now, create a calculation for Profit.
In the Applications-Navigator pane, right-click Project1BIDesigner1
and select New Calculation from the menu.
The Calculation Wizard is launched. Click Next
in the Welcome page.
7.
In Step 1 of the wizard, name the calculation Profit.
Here, you also specify the calculation type. For Calculation type, open
the Basic Arithmetic folder and select Subtraction.
Click Next to continue.
8.
In Step 2, select Sales Revenue in the
Value box, and Sales Cost in the Minus box.
If the measure you want is not listed in the drop-down box, select More
to display a list of all available measures. In the Select Measure dialog
box, open the Electronics-KPIs folder, select the appropriate
measure from this folder, and then click OK.
For example:
The completed Subtraction step should look like this:
9.
Click Finish to create the calculation.
The Profit calculation is added to your Local Catalog in the Applications
Navigator.
10.
From the File Menu, select Save All to
save your work.
Follow these steps to generate a pre-configured, empty BI
JSP page:
1.
In the Navigator, right-click on the Project
that you just created in the previous subtopic. Select New
from the popup menu.
2.
In the New Gallery dialog box, perform the
following:
A.
In the Categories box,
expand the Business Intelligence Beans node and
then expand the Web Tier node. Select JavaServer
Pages.
B.
In the Items box, select Empty
BI JSP Page.
C.
Click OK.
The Empty BI JSP Page wizard is opened.
Enter analyze.jsp as the Page Name. Accept the default
runtime configuration file that was previously created for the BIDesigner,
and also accept the default id for the BIThinSession tag (i.e. bisession1).
Click OK.
Note: The BIThinSession tag, which is required for building
BI Beans applications for the web, encapsulates the connection to your
OLAP data and to the BI Beans Catalog, where the definitions of your BI
Beans objects are stored.
When your empty BI JSP Page is generated,
a .jsp file and other support files are added to the Applications-Navigator
window under the project.
The JDeveloper window layout should be divided into five areas as descibed
below.
Area 1: Applications-Navigator
– Shows a list of project components, such as Designers, Java
files, XML files, JSP files, HTML files, and so on.
Area 2: Design/Source Window –
Consists of two tabs:
- The Design tab – Displays the UI view
of the application and allows a developer to edit the design visually.
- The Source tab – Displays the JSP tags
and allows a developer to edit the application code directly.
Area 3: Structure Window –
Displays a view of application objects in a hierarchical drillable
tree mode. This display is dependent on the tab that is selected
in Area 2, and it refreshes automatically when you select a different
tab.
Area 4: Component Palette –
Displays a list of JSP and HTML components that can be used within
an application.
Area 5: Property Inspector –
Displays a window that is linked to the Structure window. Selecting
a component in the Structure window updates the Property Inspector.
3.
From the main menu, choose File > Save
All.
4.
Now, take a closer look at the generated application code.
Click on the Source tab at the bottom of the Design Editor
to display the JSP code.
BI Beans JSP tag libraries are required for building BI applications
for the web. The tag library descriptors for these libraries are included
in the generated JSP as shown below:
The JSP Page dialog also generates a BIThinSession
tag, and an HTML document with a head and body containing a form, as shown
below:
5.
You are ready to add BI objects to this BI-enabled JSP
page.
Click on the Design tab at the bottom of the Design/Source
Editor.
Add Presentations
to the JSP Page
In this topic, you will add two presentations
to the first JSP page. In addition, you will add the Presentation Toolbar which
enables users to modify the format of presentations. Finally, you will add a
button that invokes the Presentation Builder, which enables modification of
presentation queries.
To add the application functionality, you will use HTML and
JSP tags that are accesible from the JDeveloper Component Palette. As you add
these tags to your application, wizards are displayed to gather the appropriate
information from you. These wizards generate the JSP code that is required for
the application to run.
Please complete the following subtopics in the sequence listed
below to add the required functionality:
The analyze.jsp page will contain four primary
elements: a crosstab, a graph, a list to display available measures, and a list
to display available dimension members. In this subtopic, you will add an HTML
table to the page that contains four cells. Each cell in this table will be
used as the container for a particular page element.
To add the HTML table to the page, follow these
steps:
1.
In the Design Editor, position the cursor
between the “InitBITags” and “InsertHiddenFields”
tags.
Hint: To ensure that the cursor is positioned appropriately,
look at the Structure window. The paragraph ("p")
tag that immediately follows the "Insert your Business Intelligence
tags here" comment should be selected.
You may add an additional paragraph tag to the page by pressing Enter
while the cursor is in the Design tab.
2.
In the Component Palette, select the HTML
tag library, and click the Table tag.
The Insert Table dialog is displayed.
3.
Use the Insert Table dialog to specify an HTML table with
2 rows and 2 columns, and border width 0, as shown below:
Click OK to create the table, which is inserted into
the JSP page.
The Structure window is also updated with the table object:
Add a Crosstab to
the Page
Previously, BI Beans presentation objects (crosstabs
and graphs) were created. The definitions for these objects are in your local
BI Beans Catalog, which is referenced in the BIDesigner that is in Project1.
Now, you will add one of these presentations, the KPI Analysis crosstab, to
the JSP page by placing it in the upper-right cell of the HTML table.
To add the crosstab to the page, follow these
steps:
1.
In the Design Editor, position the cursor
inside the top right cell of the table, as shown here.
2.
In the Component Palette, select the BI
Beans General Tags library. Then, scroll down and click the Presentation
tag.
The Presentation tag wizard is displayed.
3.
In the Presentation tag wizard, perform the following:
A.
Accept the default
value (analyze_pres1) for the id property.
B.
Click in the location
box, and then click the ellipses (…) button
that appears to the right of the box.
The Location dialog, which displays objects from your local BI
Beans Catalog, is opened.
C.
In the Location dialog, select
KPI Analysis.
Click OK.
A reference to the crosstab is added as the location property
value in the Presentation tag wizard.
D.
Click Finish to create
the Presentation tag.
The Design Editor is refreshed to display the crosstab with its paging
control.
4.
From the File menu, select Save All,
or click the Save All tool.
Add a Linked Graph
to the Page
Now, you will add a graph to the application
that will share the query with the crosstab. This graph will be placed below
the crosstab by placing it in the lower-right cell of the HTML table.
In the Design Editor, position the cursor
inside the bottom right cell of the table, as shown here:
2.
On the Component Palette, under the BI Beans
General Tags, click on the Presentation tag.
3.
In the Presentation tag wizard, perform the following:
A.
Accept the default
value (analyze_pres2) for the id property.
B.
For the newViewType
property, select Graph.
C.
For the linkedQuery
property, select analyze_pres1 (which is the id
property value for the crosstab).
The Presentation tag properties should look like this:
D.
Click Finish to create
the Presentation tag.
The Design Editor is refreshed to display the linked graph below the
crosstab.
4.
From the File menu, select Save All,
or click the Save All tool.
5.
In the Applications-Navigator window, right-click analyze.jsp
and select Run.
This action initiates the embedded servlet container (OC4J) in JDeveloper
and opens the JSP in a browser.
6.
Although the current state of the application is simplistic,
the crosstab and graph provide live access to the underlying OLAP data
source.
For example, in the crosstab, click on the drill symbol ("+")
next to World total.
The Geography dimension in the crosstab expands to display the drilled
data. The graph also updates to display the same data automatically. This
occurs because the graph is linked to the crosstab based on the layout
and query that is defined for the crosstab.
7.
When you finish experimenting with the application, close
the browser and return to JDeveloper.
Then, from the Run menu, select Terminate
> Embedded OC4J Server to stop the application.
Insert the Presentation
Toolbar
You can enhance the controls of a crosstab or
graph that is displayed in a BI Beans JSP application by adding the Presentation
Toobar. This toolbar allows the user to change view type, modify the layout,
apply formatting, sort the data, and apply saved selections to a presentation.
You will associate the Presentation Toolbar with
the crosstab, since the crosstab is the driver of the query for the presentations
on this page.
To insert the Presentation Toolbar just above
the crosstab, follow these steps:
1.
In the Design Editor, click on the crosstab
so that it is selected, as shown here:
Then, click the Source tab a the bottom of the Design/Source
Editor. The Render tag for the crosstab is selected.
Press the Home key to position the cursor at the beginning
of the code line. Then, press the Enter key to add a
blank line above the Render tag.
On the blank line, enter the following characters: <p/>
(the "p" is lowercase). The resulting new line should look like
this:
2.
Click the Design tab at the
bottom of the Design/Source Editor. A new line has been added just above
the crosstab inside the same table cell. The new line is also indicated
in the Structure window.
3.
On the Component Palette, under the BI Beans General Tags,
click the Toobar tag.
In the Toolbar tag wizard, perform the following:Accept the default value
for the id; for the “presentationId” attribute choose “analyze_pres1
A.
Accept the default
value (analyze_toolbar1) for the id property.
B.
For the presentationId
property, choose analyze_pres1 (which is the id
property value for the crosstab).
C.
Click Finish to create
the Toobar tag.
The Design Editor is refreshed to display the Toolbar above the crosstab.
4.
In the Applications-Navigator window, right-click analyze.jsp
and select Run. Again, the JSP is opened in a browser.
Click on the Layout tool to display the Layout options.
5.
Select the following options in the Layout tool:
option 1:
Swap
option 2:
Product
option 3:
With Geography
Click Go to change the layout.
Now, drill on Product total in the crosstab. The crosstab
and graph are refreshed with the data.
6.
Collapse the Product dimension by clicking on the Drill
Collapse icon next to Product total.
Since the crosstab and the graph share the same query and layout, you
can drill on either presentation object, and the other will update automatically.
In the graph, drill on the Total Product link.
Once again, the crosstab and graph are refreshed with the data, but this
time the graph contains a Drill Collapse link, as shown here:
Collapse the Product dimension by clicking on the Product total
Drill Collapse link in the graph.
7.
When you finish experimenting with the application, close
the browser and return to JDeveloper.
Then, from the Run menu, select Terminate
> Embedded OC4J Server to stop the application.
Add a Button to Invoke
the Presentation Editor
The Presentation Editor is an HTML-based version
of the BI Beans Query Editor. It enables users to easily modify the query of
a presentation in a BI Beans JSP application.
In this subtopic, you will add a button to the
JSP page that invokes the BI Beans Presentation Editor. This button will be
associated with the crosstab, since the crosstab is the driver of the query
for the presentations on this page.
To add the Presentation Editor button, follow
these steps:
1.
Using the Design Editor and the Source Editor,
add another blank line to the table cell that contains the crosstab. Use
the same technique that was used in the previous subtopic for this task.
However, this time, add a blank line after the crosstab.
In the Design Editor, click on the crosstab so that it is selected, as
shown here:
Click the Source tab a the bottom of the Design/Source
Editor. The Render tag for the crosstab (analyze_pres1) is selected.
To add a blank line after the Render tab, press the End
key to position the cursor at the end of the code line, then press Enter
to add a new line below the Render tag.
On the blank line, enter the following characters: <p/>
(the "p" is lowercase). The resulting new line should look like
this:
Note: Also notice the Render tag for the Toolbar (analyze_toobar1)
has been added above the crosstab. The Toolbar tag that you used in the
previous subtopic generated this code.
2.
Click the Design tab a the
bottom of the Design/Source Editor. The new line has been added to the
same table cell, below the crosstab.
3.
On the Component Palette, under the BI Beans General Tags,
click the Button tag.
In the Button tag wizard, perform the following:
A.
Enter analyze_button1
for the id property.
B.
Enter Edit for
the Text property.
The property values should look like this:
C.
Click Finish to
create the Button tag.
The Design Editor is refreshed to display the Edit button below the crosstab.
4.
Right-click on the button and choose Set BI Action
from the menu.
The Set BI Action dialog is displayed.
5.
In the Set BI Action dialog, choose analyze_pres1
in the Target Objects box, and choose Show Presentation Builder
in the Actions box.
Notes:
The Set BI Actions
dialog provides access to many BI Beans wizards and dialogs. For
example, the Show Explorer action will display
an Open dialog box that serves as a BI Beans Catalog browser; the
Show Presentation Builder action will display the
Presentation Editor wizard, as you will see in a moment; and the
Show Save As action will display the Save As dialog
box, which enables you to save a modified presentation to the BI
Beans Catalog. You can asssociate any of the BI Actions listed in
this dialog with an object such as a button or a link.
The BI Action, which displays a
BI Beans wizard or a dialog, will be associated with the object
that you select in the Target Objects box. In this example, the
Presentation Editor will enable the user to edit the query for analyze_pres1,
which is the object id for the crosstab.
Bookmark
