 |
|
Oracle Tips by Burleson |
Using
HTML Expressions
Understanding HTML Expressions can be bit tricky.
However, once you get the hang of them there is almost nothing that
cannot be done with a report column.
An HTML Expression modifies how the column will be
displayed to the user and gives a great deal of flexibility. An
earlier section covered how to add a column link to a report column to
provide navigation to another page. The HTML Expression allows the
same thing but takes it a step further. Knowing how to write HTML
code will enable the use of the HTML Expression to its full potential.
This tutorial will show how to modify a report
column in order to display images that reside on the file system in
the directory referenced by the #IMAGE_PREFIX# substitution string.
The names of the image files are stored in a table in the database.
The HTML Expression will use the values from the report and display
the image using HTML tags. It will also show how to deal with
thumbnails and full size images. This is a common task for developers
of web sites to provide, which is a small image that loads quickly and
a link for the user to see the full size image.
To follow this tutorial, load and run the script
named easy_report_image.sqlfrom
the code depot into the SQL Script Repository of the SQL Workshop.
This script creates a table and loads the names of several image files
included with the installation of HTML DB. The data in the table is
shown in Figure 7.12.
To keep this example simple, the same filename is
loaded into both the IMAGE_THUMBNAIL and IMAGE_FULL_SIZE columns. In
a real situation, there would be two separate file names, but this
will give an idea of how this can be put to use in your own
applications.
Navigate to the Easy HTML DB Book application and
create a new report page. To do this:
1.
Click on the Application Builder tab at the top of the window.
2.
Click on the Easy HTML DB Book application link.
3.
On the Application Home page, click the Create Page button.
4.
On the Create Page screen, choose the Report option and click
Next.
5.
On the next page, choose the Wizard Report option and click
Next.
6.
Previously in this chapter, a report was created using the SQL
Report type. For that wizard, a SQL statement was provided. For the
Wizard Report, it will be possible to select Tables and Columns and
build the query
7.
On the Page Attributes page:
·
Page: 1070
·
Page Title: Reports - HTML Expression
·
Region Title: Images
·
Region Template: Reports Region, Alternative 1
·
Click Next.
8.
On the Tab page click Next.
9.
On the Tables and Columns page:
·
Table/View: EASY_REPORT_IMAGE
·
Select all available columns and move them to the
Displayed Columns list by clicking on the  icon.
·
Click Next.
Figure 7.13 shows the columns being selected for
the EASY_REPORT_IMAGE table. The ID column has already been moved
over and the remaining columns are selected to be moved also.
Building a query for the report using the Wizard Report will create
what is referred to as a structured query.
10.
On the Report Options page click Next.
11.
Finally, click the Create Report Page button.
12.
Click on the Run Page icon.
Take a look at the report because the HTML
Expression is going to be used to change the way it looks.
13.
Click on the Edit Page 1070 link in the developer toolbar.
14.
Click on the RPT link for the Images regions.
15.
On the Report Attributes page:
·
Click off the Show checkbox for the IMAGE_FULL_SIZE
column.
The
IMAGE_FULL_SIZE column will not be displayed, but it still has to be
selected so the value can be used in the HTML Expression. In this
example, both images are the same, but as mentioned, in a real life
application there would be another image file for the full size.
·
Click on the Edit icon to the left of the
IMAGE_THUBMNAIL column.
16.
On the Column Attributes page, enter the following text in the
HTML Expression text area and click Apply Changes.
This is creating an anchor tag to provide a link
to the full size image. It is also displaying the thumbnail image in
the report column. The #IMAGE_PREFIX# substitution string is used
because the image files are stored in that location in the file
system. If the developer is using a windows machine that location is:
C:\oracle\product\10.2.0\ohs\Apache\Apache\images
To create a sub-directory under the \images
directory such as \images\easy_image, and store the images there, it
would be referenced as follows:
<a href="#IMAGE_PREFIX#easy_image/#IMAGE_FULL_SIZE#"
target="_blank">
<img src="#IMAGE_PREFIX#easy_image/#IMAGE_THUMBNAIL#"></a>
It is not necessary to put a forward-slash after
the #IMAGE_PREFIX# substitution string because it is included in the
dads.conf alias parameter.
Run the report. The images will be displayed in
the report. Clicking on the images in the report will display another
browser window with the full size image.
 |
For more details and scripts, see my new book "
Oracle
Tuning: The Definitive Reference", over 900 pages
of BC's favorite tuning tips & scripts.
You can buy it direct from the publisher for 30%-off and get
instant access to the code depot. |
|
