This chapter provides full-length code examples of user-defined JSP pages using the Oracle Multimedia JSP Tag Library with the Oracle Multimedia JSP Tag Library Photograph Album Demonstration sample application.
The material in this chapter assumes prior knowledge of SQL, PL/SQL, Java Database Connectivity (JDBC), JSP, HTML, and XML.
This chapter includes the following sections:
Note:
This chapter contains examples of Java, SQL, and HTML code. This code might not match the code in the files shipped as a sample application on OTN. To run an example on your system, use the files provided with the Oracle Multimedia JSP Tag Library software on OTN; do not attempt to compile and run the code presented in this chapter.You can download the Oracle Multimedia JSP Tag Library software from the Oracle Multimedia Software section of the Oracle Technology Network Web site at
The media retrieval and media upload examples in this chapter use the database table named photos, which is defined as follows:
photos( id NUMBER UNIQUE NOT NULL,
description VARCHAR2(40) NOT NULL,
location VARCHAR2(40),
image ORDSYS.ORDIMAGE,
thumb ORDSYS.ORDIMAGE);
For more information about the photos table, see Oracle Multimedia User's Guide.
The media retrieval and media upload examples also use tags from the JavaServer Pages Standard Tag Library (JSTL) to access the database. For more information about JSTL, see the Sun Microsystems Web site at
This section describes the PhotoAlbum.jsp file, which is one component of a sample JSP application that uses tags from the Oracle Multimedia JSP Tag Library to retrieve media data from the database and deliver it to a browser. The browser then displays the media in a simple photograph album application. Example 2-1 shows how to use the JSP tag embedImage to retrieve and deliver the media data.
The PhotoAlbum.jsp file generates the HTML code that displays the contents of the database table named photos, including the contents of the description, location, and thumb columns. The contents of the thumb column are displayed as thumbnail images that link to the full-size images, which are stored in the image column in the photos table. From the browser, users can click a thumbnail image to view the full-size image.
In Example 2-1, appropriate statements are highlighted in bold to show where the main actions occur.
Example 2-1 Media Retrieval (PhotoAlbum.jsp)
<%@ page language="java" %> <%@ page isELIgnored ="false" %> <%@ taglib prefix="ord" uri="http://xmlns.oracle.com/jsp/ord/multimedia-taglib.tld" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- HTML header --%> <HTML LANG="EN"> <HEAD> <TITLE>Oracle Multimedia JSP Tag Library Photograph Album Demonstration</TITLE> </HEAD> <BODY> <%-- Page heading --%> <TABLE BORDER="0" WIDTH="100%"> <TR> <TD COLSPAN="2" BGCOLOR="#F7F7E7" ALIGN="CENTER"><FONT SIZE="+2"> Oracle Multimedia JSP Tag Library Photograph Album Demonstration</FONT> </TD> </TR> </TABLE> <%-- Display the thumbnail images in a table; output the table headers. --%> <P> <TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%" SUMMARY="Table of thumbnail images"> <TR BGCOLOR="#336699"> <TH id="description"><FONT COLOR="#FFFFFF">Description</FONT></TH> <TH id="location"><FONT COLOR="#FFFFFF">Location</FONT></TH> <TH id="image"><FONT COLOR="#FFFFFF">Image</FONT></TH> </TR> <%-- Display all the entries --%> <sql:query var="photoQuery" dataSource="jdbc/OracleDS"> SELECT Id, Description, Location from Photos order by Description </sql:query> <c:forEach var="row" items = "${photoQuery.rows}"> <c:set var="id" value="${row.ID}"/> <c:set var="description" value="${fn:escapeXml(row.DESCRIPTION)}"/> <c:set var="location" value="${fn:escapeXml(row.LOCATION)}"/> <%-- Display an entry in the album --%> <TR> <TD HEADERS="description"> ${description} </TD> <TD HEADERS="location"> ${location} </TD> <TD HEADERS="image"> <A HREF="PhotoAlbumEntryViewer.jsp?id=${id}"> <%-- Use thumbnail image for anchor tag. --%> <ord:embedImage dataSourceName="jdbc/OracleDS" table = "Photos" column = "Thumb" key = "${id} " keyColumn = "Id" retrievalPath="OrdGetMediaJsp.jsp" alt = "${description}" border="1" /> </A> </TD> </TR> </c:forEach> <%-- Display a message if the album is empty; otherwise, output a message telling the user how to view the full-size entry. --%> <TR> <TD SCOPE="col" COLSPAN="3" ALIGN="CENTER"><FONT COLOR="#336699"><B><I> <c:choose> <c:when test="${photoQuery.rowCount==0}"> The photograph album is empty </c:when> <c:otherwise> Select the thumbnail image to view the full-size image </c:otherwise> </c:choose> </I></B></FONT></TD> </TR> <%-- Finish the table --%> </TABLE> </P> <%-- Output a link to the upload form --%> <P> <TABLE WIDTH="100%"> <TR BGCOLOR="#F7F7E7"> <TD COLSPAN="3" ALIGN="CENTER"> <A HREF="PhotoAlbumUploadForm.jsp">Upload new photograph</A> </TD> </TR> </TABLE> </P> </BODY> </HTML>
The bolded Java, SQL, and HTML statements, in order of appearance in Example 2-1, perform the following operations:
Provide the required prefix and uri attributes in the JSP directives. The value of the prefix attribute specifies the XML namespace identifier, which must be inserted before each occurrence of the library's tags in the JSP page. The value of the uri attribute indicates the location of the tag library descriptor (TLD) file for the specified tag library. In this example, the value "ord" specifies the XML namespace identifier for the Oracle Multimedia JSP Tag Library. And, the prefix attribute values "sql", "c", and "fn" specify the namespace identifiers for the JSTL sql, core, and functions tag libraries, respectively.
Use an HTML table to display the entries of the photos table in the database.
Use the JSTL sql tag to open a database connection and perform a query on the photos table.
Use JSTL core tags to loop over the result set to retrieve data.
Use the JSP tag embedImage to generate the HTML <IMG> tag that displays the thumb column of the photos table (see embedImage for information about the HTML output). The HTML <A HREF> tag uses the JSP tag embedImage as the link anchor.
This section describes the PhotoAlbumInsertPhoto.jsp file, which is one component of a sample JSP application that uses tags from the Oracle Multimedia JSP Tag Library to upload media files into a database. Example 2-2 shows how to use the JSP tags uploadFormData, uploadFile, and storeMedia to upload the media files.
In Example 2-2, appropriate statements are highlighted in bold to show where the main actions occur.
Example 2-2 Media Upload (PhotoAlbumInsertPhoto.jsp)
<%@ page language="java" %> <%@ page isELIgnored ="false" %> <%@ taglib prefix="ord" uri="http://xmlns.oracle.com/jsp/ord/multimedia-taglib.tld" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %> <%-- Upload the data into the database --%> <ord:uploadFormData formDataId = "fd"> <ord:uploadFile parameter = "photograph" fullFileName = "ffName" shortFileName = "sfName" length = "fLength" > <%-- //check if an image file is specified. --%> <c:choose> <c:when test="${(ffName==null) or empty(ffName)}"> <c:redirect url="PhotoAlbumUploadForm.jsp?error=Please+supply+a+file+name."/> </c:when> <c:when test="${fLength eq 0}"> <c:redirect url="PhotoAlbumUploadForm.jsp?error=Please+supply+a+valid+image+file."/> </c:when> <c:otherwise> <% // Use file name as description if not supplied. String description = fd.getParameter("description"); String location = fd.getParameter("location"); if ( description == null || description.length() == 0 ) { description = "Image from file: " + sfName + "."; if(description.length() > 40) { description = description.substring(0, 40); } } } java.util.Vector otherValuesVector = new java.util.Vector(); otherValuesVector.add(description); otherValuesVector.add(location); %> <sql:setDataSource dataSource = "jdbc/OracleDS" var="myDS" scope="page"/> <sql:transaction dataSource="${myDS}"> <%-- Get the next id in the database sequence --%> <sql:query var="idQuery" > SELECT photos_sequence.nextval from Dual </sql:query> <%-- here should be just one result --%> <c:forEach var="row" items="${idQuery.rows}"> <c:set var="photoid" value="${row.NEXTVAL}"/> </c:forEach> <%-- Upload the media data into the database --%> <ord:storeMedia conn = "${myDS.connection}" table = "Photos" key = "${photoid}" keyColumn = "Id" mediaColumns = "Image" mediaParameters = "photograph" otherColumns = "Description, Location" otherValues = "<%=otherValuesVector%>" /> <%-- update the thumbnail image column --%> <sql:update sql="call generateThumbnail(?)"> <sql:param value = "${photoid}"/> </sql:update> </sql:transaction> </c:otherwise> </c:choose> </ord:uploadFile> </ord:uploadFormData> <%-- HTML header --%> <HTML LANG="EN"> <HEAD> <TITLE>Oracle Multimedia JSP Tag Library Photograph Album Demonstration</TITLE> </HEAD> <%-- Direct the browser to the main page --%> <META HTTP-EQUIV="REFRESH" CONTENT="2;URL=PhotoAlbum.jsp"> <BODY> <%-- Page heading --%> <TABLE BORDER="0" WIDTH="100%"> <TR> <TD COLSPAN="2" BGCOLOR="#F7F7E7" ALIGN="CENTER"><FONT SIZE="+2"> Oracle Multimedia JSP Tag Library Photograph Album Demonstration</FONT> </TD> </TR> </TABLE> <%-- Display header and instructions --%> <P> <FONT SIZE=3 COLOR="#336699"> <B>Photograph successfully uploaded into photograph album</B> </FONT> <HR SIZE=1> </P> <P> Please click the link that follows or wait for the browser to refresh the page. </P> <%-- Output link to return to the main page --%> <P> <TABLE WIDTH="100%"> <TR BGCOLOR="#F7F7E7"> <TD COLSPAN="3" ALIGN="CENTER"> <A HREF="PhotoAlbum.jsp">Return to photograph album</A> </TD> </TR> </TABLE> </P> <%-- Finish the page --%> </BODY> </HTML>
The bolded Java, SQL, and HTML statements, in order of appearance in the PhotoAlbumInsertPhoto.jsp file, perform the following operations:
Provide the required prefix and uri attributes in the JSP directives. The value of the prefix attribute specifies the XML namespace identifier, which must be inserted before each occurrence of the library's tags in the JSP page. The value of the uri attribute indicates the location of the tag library descriptor (TLD) file for the specified tag library. In this example, the value "ord" specifies the XML namespace identifier for the Oracle Multimedia JSP Tag Library. And, the prefix attribute values "sql" and "c" specify the namespace identifiers for the JSTL sql and core tag libraries, respectively.
Use the JSP tag uploadFormData to create a script variable named fd, which is an instance of the oracle.ord.im.OrdHttpUploadFormData object that holds the uploaded media.
Use the JSP tag uploadFile to create the script variables: ffName, sfName, and fLength, which contain the full file name, short file name, and file length of the uploaded media, respectively.
Use JSTL core tags to perform error checking.
Use the JSTL sql tag to create a database DataSource.
Use the JSTL sql tag to query the next unique id for the photos table in the database.
Use a JSTL core tag to retrieve the next unique id from the query result.
Use the JSP tag storeMedia to upload the media data into the image column of the photos table, and the description and location information into the description and location columns of the photos table.
Use the JSTL sql tag to call a PL/SQL procedure to populate the thumb column of the photos table from the uploaded image column.