Level: Advanced Eugene Konstantinov (ekonstan@ie.ibm.com), Software Engineer, IBM Ireland
01 Sep 2004 This article describes the Fileupload/Download features of the IBM Extended JavaServer Faces components that are integrated into WebSphere Studio V5.1.2.
You can use these components and complementary rapid application development (RAD) tools.to build a Web application that uploads content and then displays it.
The article shows how the Faces components work with data using Websphere Service Data Object (SDO) technology.
 | |
Get the products and tools used in this article
If you are a developerWorks subscriber, you have a single user license to use
WebSphere® Studio Application Developer (and other editions of WebSphere Studio),
and other DB2®, Lotus®, Rational®, Tivoli®, and WebSphere products
-- including the Eclipse-based WebSphere Studio IDE -- to develop, test, evaluate, and demonstrate your applications.
If you are not a subscriber, you can subscribe today.
|
|
Introduction
IBM® WebSphere® Studio V5.1.2 includes a set of components based on the recently released JavaServer Faces technology (JSR 127).
These components were previewed in Websphere Studio V5.1.1 and then reworked to add new features and extend functionality.
This article explains in detail how you can use the Fileupload/Download components to create richer user interfaces.
In this article, we will import a JSF Web project with simple JSP pages that demonstrate Fileupload/Download components in action. Then we will look at those pages
and discuss usage scenarios for the components. Finally, we will discuss usage scenarios of the download components within a datatable.
Create new web project and import resources used in that article
Before beginning, make sure that you have your access to a DB2 server, because we are going to create a new table.
- Download
photoalbum.war at the bottom of this article.
- Select File => Import => WAR file to start importing
photoalbum.war into the new dynamic WEB project.
- Browse to the the downloaded WAR file.
- Click New to create new dynamic project
- Click Next and enter
PhotoAlbum as the name of the project.
- Check Configure advanced options.
- Click Next twice until you get to the Feature page, and then check WDO Relational database runtime.
- Click Finish to create the Web project.
- Click Finish again to import source pages and configuration files.
Create a new data table
- Go to dbsetup folder of your PhotoAlbum project.
- Right-click on dbsetup.sql and select Run on Database Server.
- Go through the pages of the wizard to provide the options to run the script.
Make sure the table PHOTO has been created
- Go to the Data Perspective and find the DB Servers view.
- Select a connection to the PHOTO table you created before (Con1)
- Right-Click and select Refresh. You should be able to see that the table had been created.
Restore the database connection in the project
- In he Web perspective, open upload.jsp from the PhotoAlbum project.
- Switch to the Page Data view and double-click on the new_rec SDO record.
- Go to the Connections tab and click Edit for the Development connection details.
- Select Existing live connections and click Next.
- Select the connection that you created before (Con1) and click Finish.
- Rebuild project
Fileupload component
Feature description
You use the Fileupload component to upload data from client to server. It emits a <input type="file"/> HTML tag at run time.
The Content-Type of the submitted form will be automatically set to multipart/form-data.
| Fileupload component characteristics
- Uploads file using corresponding
hx:fileupload tag.
- Renders standard HTML input tag of the type file.
- Accepts Websphere SDO as data model.
- Accepts JavaBeans as data model, supports
byte[], java.lang.String, java.io.OutputStream.
- Optionally, stores filename and mime type of the uploaded item (
hx:fileProp tags).
- Restricts uploaded items by mime type or file extension (attributes accept and exclude).
- Provides a validation error message if data of the incorrect type is uploaded.
|
|
Figure 1. How Fileupload component gets rendered at run time
Step 1. Run on server experience
The upload.jsp page of our project demonstrates the use of the component. Let's see it in action by selecting that page in the navigator and running it on the WebSphere V5.1 Test Server. Once the server is up and running you should see the following screen:
Figure 2. upload.jsp output
Let's take a closer look how this component works:
Code snippet 1. upload.jsp with hx:fileupload tag
...
<hx:fileupload styleClass="fileupload" id="fileupload1"
value="#{pc_Upload.new_rec.PHOTO}" accept="image/*">
<hx:fileProp name="fileName" value="#{pc_Upload.new_rec.FILENAME}" />
<hx:fileProp name="contentType" value="#{pc_Upload.new_rec.FILETYPE}" />
</hx:fileupload>
... |
As we can see, the Fileupload component has a corresponding tag hx:fileupload that can be bound to the model via its value attribute.
The value binding exClickion "#{pc_Upload.new_rec.PHOTO}" sets up a connection to the WebSphere SDO (relational record) that
was mapped to the PHOTO column of the type BLOB of our table. To be more precise, the exClickion pc_Upload refers to the managed bean that represents a page code for upload.jsp. new_rec is a property of page code bean that represents an SDO record,
while PHOTO is a property of the SDO object that mapped to the PHOTO column(BLOB) of our table.
|
New feature: hx:fileProp tag
In Websphere Studio V.5.1.1, nested hx:fileProp tags were missing.
The proprietary information was kept in the BLOB itself, making data readable only by the IBM components.
|
|
The attribute accept=image/* specifies that only images can be uploaded; otherwise an error is displayed. Finally, two
hx:fileProp tags are needed to specify extra information about the uploaded item in the same table. The uploaded data may be useless without this meta information. Hence, keeping information about filename and mime type is important if it is possible to upload data of an arbitrary nature.
The attribute excluded="comma-delimited-list-of-extensions" is rarely used and makes sense only in Windows.
This attribute throws an error if there is an attempt to submit a file with an extension that is listed as a value of that attribute.
For example,excluded="exe,bat" means that upload exe or bat files is not allowed.
Download components
|
List of download components
- hx:graphicImageEx
- hx:outputLinkEx
- hx:playerGenericPlayer
- hx:playerFlash
- hx:playerMediaPlayer
- hx:playerShockwave
- hx:playerRealPlayer
General characteristics
- Download data from back-end server to client
- Use Websphere SDO as data model
- Use JavaBeans as data model, support
byte[],java.lang.String,java.io.InputStream
- Don't rely on HTTP session or server file system to read value resource
|
|
Step 2. Displaying uploaded image using Image component
Type in a number such as 1 in the ID text box and browse to the image file you want to upload (maximum size is 150 KB). Make sure this is a valid image type (.jpg, .gif, .bmp, and so on) -- otherwise you will get an error stating that an invalid content type was provided.
Try to click Submit, which inserts a new record in the table and navigates to the display.jsp that shows the uploaded image:
Figure 3. display.jsp shows an uploaded image
The hx:graphicImageEx tag deals with uploaded image downloading uploaded bytes from the table. By its nature, this component always deals with download. In order to identify the type of the image correctly, it needs to pass that information with help of the "mimeType" attribute, which also works with value binding exClickions. Here's a code snippet that helps clarify:
Code snippet 2. display.jsp with hx:graphicImageEx tag
...
<hx:graphicImageEx id="imageEx1" value="#{pc_Display.disp_rec.PHOTO}"
styleClass="graphicImageEx"
mimeType="#{pc_Display.disp_rec.FILETYPE}" >
</hx:graphicImageEx>
... |
Step 3. Submit more images to the database
Before going on to read the usage scenarios for download within a datatable, try to upload a few more images to the table. Just click the Back button on your browser to return to the upload.jsp and submit more files. Don't forget to give unique IDs, or else you will be updating the same record and overwriting the image that was previously uploaded.
Usage Scenarios for download within Datatable
The Datatable component (formerly known as Datagrid) consists of columns that may contain other components. At run time, it displays records out of the data model, such as a Websphere SDO list. Thus Datatable iterates through the elements of the list and provides values to the child components
via a variable defined by the var attribute.
The next section discusses issues related to the download in the Datable.
Default usage scenario
The fact that this scenario is supported by tooling makes it the default. All you need to do is drag and drop download components
from the palette to the Datable column.
Step 4. Run on server download.jsp
Try to run the download.jsp page to see the example results.
Figure 4. Datatable with hx:graphicImageEx and hx:outputLinkEx
In this scenario, the component that deals with download uses the variable (defined by the var attribute) of the
parent Datatable component. The photos is the SDO List and mapped to the PHOTO table. Notice how the value attribute of the
hx:graphicImageEx and hx:outputLinkEx are set (all marked bold):
Code snippet 3. "download.jsp" uses Datatable variable
...
<h:dataTable id="table1" value="#{pc_Download.photos}" var="varphotos" >
<h:column id="column1" >
<f:facet name="header">
<h:outputText value="Id" id="text1"></h:outputText>
</f:facet>
<h:outputText id="text2" value="#{varphotos.ID}" >
</h:outputText>
</h:column>
<h:column id="column2" >
<f:facet name="header">
<h:outputText value="Photo" id="text3"></h:outputText>
</f:facet>
<hx:graphicImageEx id="imageEx1" value="#{varphotos.PHOTO}"
mimeType="#{varphotos.FILETYPE}"
</hx:graphicImageEx>
</h:column>
<h:column id="column3">
<f:facet name="header">
<h:outputText value="Download" id="text4"></h:outputText>
</f:facet>
<hx:outputLinkEx id="linkEx1" value="#{varphotos.PHOTO}"
mimeType="#{varphotos.FILETYPE}">
<h:outputText id="text5" value="#{varphotos.FILENAME}"></h:outputText>
</hx:outputLinkEx>
</h:column>
</h:dataTable>
...
|
In this scenario, Websphere Record List of the parent Datatable is being used by the nested components. The side effect is that the download request will be generated the same number of times as the number of records displayed by the Datatable. This happens because the ValueResourcePhaseListener
that deals with download requests has to instantiate the Websphere Record List (SDO List) each time it processes the request. The inefficiency is that, while we only need to get one row, in fact all rows of the Datatable will be populated. This may considerably delay displaying records from a table with a large number of records.
Benefits
- Easy to generate code (use drag and drop of the Datalist column from the Page Data View)
- No need to create extra Websphere SDO records
Disadvantage:
- Excessive access to the underlying database
Step 5. Improved usage scenario: Run on server download_2.jsp
This time try to run download_2.jsp. This page shows exactly the same results as download.jsp. However, this time we created an extra SDO record that eliminates the above problem with the default scenario. Then, any download component can use that SDO record to perform a download. In order to set up a filter condition on that SDO Record, you must use nested f:parameter tags on the download component with a value that identifies a key for the record.
Code snippet 4. "download_2.jsp" is efficient on data access
...
<h:dataTable id="table1" value="#{pc_Download_2.photos}" var="varphotos" >
<h:column id="column1" >
<f:facet name="header">
<h:outputText value="Id" id="text1"></h:outputText>
</f:facet>
<h:outputText id="text2" value="#{varphotos.ID}" >
</h:outputText>
</h:column>
<h:column id="column2" >
<f:facet name="header">
<h:outputText value="Photo" id="text3"></h:outputText>
</f:facet>
<hx:graphicImageEx id="imageEx1" value="#{pc_Download_2.disp_rec2.PHOTO}"
mimeType="#{pc_Download_2.disp_rec2.FILETYPE}"
<f:param id="param1" name="ID" value="#{varphotos.ID}"></f:param>
</hx:graphicImageEx>
</h:column>
<h:column id="column3">
<f:facet name="header">
<h:outputText value="Download" id="text4"></h:outputText>
</f:facet>
<hx:outputLinkEx id="linkEx1" value="#{pc_Download_2.disp_rec2.PHOTO}"
mimeType="#{pc_Download_2.disp_rec2.FILETYPE}">
<h:outputText id="text5" value="#{varphotos.FILENAME}"></h:outputText>
<f:param id="param2" name="ID" value="#{varphotos.ID}"></f:param>
</hx:outputLinkEx>
</h:column>
</h:dataTable>
...
|
Benefits:
- Efficient access of the underlying data
Disadvantage:
- No default tool support for this scenario
- Need to create an extra SDO record
Summary
This article described the Fileupload and Download extended JSF components. Together with the sample Web project, they illustrate how
they can be used to build dynamic Web pages. This article also demonstrated the use of the download in the Datatable component.
Download | Name | Size | Download method |
|---|
| photoalbum.zip | 2.6 MB | FTP|HTTP |
Resources
About the author | 
| | Eugene Konstantinov works on the Websphere Studio RAD Tools team, developing Fileupload/Download components and working on the Visual Editor
for Java open source project at the IBM Dublin Software Lab. He is a Sun Certified Web Developer and Java Developer. You can reach Eugene at
ekonstan@ie.ibm.com |
Rate this page
| 
