Skip Headers

Oracle® Application Server 10g Multimedia Tag Library for JSP User's Guide and Reference
10g (9.0.4)
Part No. B10445-01
  Go To Documentation Library
Home
Go To Product List
Solution Area
Go To Table Of Contents
Contents
Go To Index
Index

Previous Next  

2 Program Examples Using Multimedia JSP Tags

This chapter provides full-length code examples of user-defined JSP pages using Oracle Application Server 10g Multimedia Tag Library for JSP ("Multimedia Tag Library"). The material in this chapter assumes prior knowledge of SQL, PL/SQL, Java Database Connectivity (JDBC), OC4J, and JSP. For a list of related documentation, see the Preface in this guide.

This code will not necessarily match the code in the files shipped as a sample application on OTN. If you want to run an example on your system, use the files provided with the Multimedia Tag Library software on OTN; do not attempt to compile and run the code presented in this chapter.

The media retrieval and media upload examples also use the SQL tag library to access the database. The prefix for these tags is sql. For more information about the SQL tag library, see the material on SQL tags for data access in Oracle Application Server Containers for J2EE JSP Tag Libraries and Utilities Reference.

Both the media retrieval and media upload examples use the database table named photos. The table definition for the photos table is as follows:

photos( id      NUMBER UNIQUE NOT NULL,
        description VARCHAR2(40) NOT NULL, 
        location    VARCHAR2(40),
        image       ORDSYS.ORDIMAGE,
        thumb       ORDSYS.ORDIMAGE);


Note:

This chapter contains examples of Java and HTML code. The code examples display numbers enclosed in brackets; these indicate that further explanation of that code will be in the numbered list immediately following the example.

2.1 Media Retrieval Example

The PhotoAlbum.jsp file is one component of a sample JSP application that uses tags from Multimedia Tag Library to retrieve media data from the database and deliver it to a browser, which displays the media in a simple photograph album application. Example 2-1 shows the following tags: mediaUrl and embedImage.

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 in the photos table 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.

Example 2-1 Contents of PhotoAlbum.jsp

[1] <%@ page language="java" %>
[2] <%@ taglib prefix="ord" uri="/Web-inf/intermedia-taglib.tld" %>
<%@ taglib prefix="sql" uri="/web-inf/sqltaglib.tld" %>
 
<%
 [3] public static final String escapeHtmlString(String input)
    {
        StringBuffer sb = new StringBuffer();
 
        for (int i = 0; i < input.length(); i++) 
        {
            char ch = input.charAt(i);
            switch (ch) 
            {
                case '<': 
                    sb.append("&lt;"); 
                    break;
                case '>': 
                    sb.append("&gt;"); 
                    break;
                case '&': 
                    sb.append("&amp;"); 
                    break;
                case '"': 
                    sb.append("&quot;"); 
                    break;
                case ' ': 
                    sb.append("&nbsp;");
                    break;         
         
                default:  
                    sb.append(ch);
            }
        }
        
        return sb.toString();
    }
%>
 
<%-- HTML header --%>
<HTML LANG="EN">
<HEAD>
<TITLE>interMedia JavaServer Pages Photo Album Demo</TITLE>
</HEAD>
 
<BODY>
 
<%-- Page heading --%>
[4] <TABLE BORDER="0" WIDTH="100%">
  <TR>
    <TD COLSPAN="2" BGCOLOR="#F7F7E7" ALIGN="CENTER"><FONT SIZE="+2">
      <I>inter</I>Media JavaServer Pages Photo Album Demo</FONT>
    </TD>
  </TR>
</TABLE>
 
<P>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%"
  SUMMARY="Table of thumb nail 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>
 
<% int rowCount = 0; %>
[5] <sql:dbOpen connId = "myConn" dataSource="jdbc/OracleDS" />
<sql:dbQuery connId = "myConn" queryId="myQuery" output="jdbc">
    SELECT id, description, location from photos order by description
</sql:dbQuery>
<sql:dbNextRow queryId="myQuery">
  <%
[6]   String id = myQuery.getString(1);
      String description = myQuery.getString(2);
      String location = myQuery.getString(3);
   %>
[7]     <TR>
        <TD HEADERS="description">
          <%= escapeHtmlString(description) %>
        </TD>
  <%
       if ( location != null )
            out.print( "<TD HEADERS=\"location\">" + 
              escapeHtmlString(location) + "</TD>" );
        else
            out.print( "<TD HEADERS=\"location\">&nbsp;</TD>" );
  %>
        <TD HEADERS="image">
   [8]      <ord:mediaUrl dataSourcename="jdbc/OracleDS"
                          table = "photos"
                          column = "image"
                          key = "<%=id%>"
                          keyColumn = "id"
                          id = "urlId">
    [9]     <A HREF="<%= urlId.getUrl()%>">
    [10]      <ord:embedImage dataSourceName="jdbc/OracleDS"
                               table = "photos"
                               column = "thumb"
                               key = "<%= id %>"
                               keyColumn = "id"
                               alt = "<%=escapeHtmlString(description)%>"
                               border="1" />

            </A>
           </ord:mediaUrl>
      </TD></TR>

[11] <% rowCount ++; %>
</sql:dbNextRow>
<sql:dbCloseQuery queryId="myQuery"/>
<sql:dbClose connId="myConn"/>

 <TR>
     <TD SCOPE="col" COLSPAN="3" ALIGN="CENTER"><FONT COLOR="#336699"><B><I>
<%
        if (rowCount == 0)
        {
          out.println(" The photo album is empty");
        }
        else
        {
          out.println(" Select the thumb-nail to view the full-size image");
        }
 %>
      </I></B></FONT></TD>
    </TR>
<%-- Finish the table --%>
</TABLE>
</P>

 <P>
<TABLE WIDTH="100%">
  <TR BGCOLOR="#F7F7E7">
    <TD COLSPAN="3" ALIGN="CENTER">
      <A HREF="PhotoAlbumUploadForm.jsp">Upload new photo</A>
    </TD>
  </TR>
</TABLE>
</P>

</BODY>
</HTML>

The Java, SQL, and HTML statements in the PhotoAlbum.jsp file perform the following operations:

  1. Declare Java as the script language used in the JSP page. (This line of code is a JSP directive.)

  2. Provide the prefix and uri attributes. The value of the uri attribute indicates the location of the tag library descriptor (TLD) file for the tag library. The prefix attribute (ord) specifies the XML namespace identifier, which should be inserted before each occurrence of the library’s tags in the JSP page. (These two lines of code are Multimedia Tag Library directives.)

  3. Declare a method that provides escape sequences to interpret some commonly used special characters in HTML. (This is called a method declaration statement.)

  4. Use an HTML table to display the entries of the photos table in the database. (This is an HTML program.)

  5. Open the database connection, perform a query on the photos table, and then loop over the retrieved result set.

  6. Retrieve data from the result set.

  7. Begin to display the entries in the table.

  8. Create a script variable named urlId that points to the image column of the photos table in the database. (This line of code shows the Multimedia JSP tag mediaUrl.)

  9. Provide a link that points to the URL stored in the script variable.

  10. 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 line of code shows the Multimedia JSP tag embedImage.)

  11. End the loop, then close the query and the database connection.

2.2 Media Upload Example

The PhotoAlbumInsertPhoto.jsp file is one component of a sample JSP application that uses tags from Multimedia Tag Library to upload media files into a database. Example 2-2 shows the following tags: uploadFormData, uploadFile, and storeMedia.

Example 2-2 Contents of PhotoAlbumInsertPhoto.jsp

[1] <%@ page language="java" %>
<%@ taglib prefix="ord" uri="/Web-inf/intermedia-taglib.tld" %>
<%@ taglib prefix="sql" uri="/web-inf/sqltaglib.tld" %>
 
 
[2] <ord:uploadFormData formDataId = "fd">
 
[3]  <ord:uploadFile 
         parameter = "photo"
         fullFileName = "ffName" 
         shortFileName = "sfName"
         length = "fLength" >
 
    <%
[4]   if (ffName == null || ffName.length() == 0) 
      {
    %>
        <jsp:forward page="PhotoAlbumUploadForm.jsp?error=Please+supply+a+file+name."/>
    <%
        return;
      }
      
      if (fLength.intValue() == 0)
      {
     %>
        <jsp:forward page="PhotoAlbumUploadForm.jsp?error=Please+supply+a+valid+image+file."/>
 
     <%
        return;
      }
 
      String description = fd.getParameter("description");
      String location = fd.getParameter("location");
[5]   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);
    %>
 
    <%String id = "original"; %>
[6] <sql:dbOpen connId = "myConn" dataSource="jdbc/OracleDS"
                commitOnClose="true"/>
 
    <sql:dbQuery connId = "myConn" queryId="myQuery" output="jdbc">
        SELECT photos_sequence.nextval from dual
    </sql:dbQuery>
 
    <sql:dbNextRow queryId="myQuery">
        <% id = myQuery.getString(1); %>
    </sql:dbNextRow>
 
    <sql:dbCloseQuery queryId="myQuery"/>
 
[7] <ord:storeMedia
       conn = "<%= (oracle.jdbc.driver.OracleConnection)myConn.getConnection() %>"
       table = "photos"
       key = "<%=id%>"
       keyColumn = "id"
       mediaColumns = "image"
       mediaParameters = "photo"
       otherColumns = "description, location"
       otherValues = "<%=otherValuesVector%>"
    />
 
[8] <sql:dbSetParam name = "myid" value = "<%=id%>"/>
    <sql:dbExecute connId = "myConn" bindParams="myid">
      {call generateThumbNail(?)}
    </sql:dbExecute>
 
   <sql:dbClose connId = "myConn" />
 
  </ord:uploadFile>
 
</ord:uploadFormData>
 
 
<%-- HTML header --%>
<HTML LANG="EN">
<HEAD>
<TITLE>interMedia JavaServer Pages Photo Album Demo</TITLE>
</HEAD>
 
[9] <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">
      <I>inter</I>Media JavaServer Pages Photo Album Demo</FONT>
    </TD>
   </TR>
 </TABLE>
 
 <%-- Display header and instructions --%>
 <P>
 <FONT SIZE=3 COLOR="#336699">
 <B>Photo successfully uploaded into photo album</B>
 </FONT>
 <HR SIZE=1>
 </P>
 <P>
Please click the link below 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 photo album</A>
    </TD>
  </TR>
</TABLE>
</P>

<%-- Finish the page --%>
</BODY>
</HTML>

The Java, SQL, and HTML statements in the PhotoAlbumInsertPhoto.jsp file perform the following operations:

  1. Declare Java as the script language used in the JSP page (JSP directive). Provide the location of the TLD file and the required ord and sql prefix attributes (Tag library directives).

  2. Create a script variable named fd, which is an instance of the oracle.ord.im.OrdHttpUploadFormData object. (This line of code shows the Multimedia JSP tag uploadFormData.)

  3. 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. (This line of code shows the Multimedia JSP tag uploadFile.)

  4. Provide error checking.

  5. Generate a default description if no description is provided.

  6. Open the database connection, and get the next unique id for the photos table in the database.

  7. 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. (This line of code shows the Multimedia JSP tag storeMedia.)

  8. Call a PL/SQL procedure to populate the thumb column of the photos table from the uploaded image column.

  9. Display a message of success, and then direct the JSP page back to the main page (PhotoAlbum.jsp).