Generating thumbnails
On this page thumbnails of images or icons representing the document type are listed. This page is build with XHTML and JSF tags explained as follows.
<!DOCTYPE html PUBLIC "-
"http:>
<html xmlns="http:
xmlns:ui="http:
xmlns:h="http:
xmlns:f="http:
xmlns:c="http:
xmlns:fx="http:>
<head>
<!-- Add flexive includes -->
<fx:includes/>
<!-- Add our own stylesheet for the result page -->
<link rel="stylesheet" type="text/css" href="css/tutorial01.css"/>
</head>
<body>
<!-- Output JSF error or info messages here -->
<h:messages globalOnly="true"/> <!-- (6) -->
...
<!-- The main menu -->
<ul id="mainmenu">
<li>
<h:outputLink value="upload.xhtml">Upload document</h:outputLink> <!-- (5) -->
</li>
</ul>
<!-- Render all available document objects, provided by #{tutorialBean.documents} -->
<h:form id="frm">
<ul class="documents">
<!-- Iterate over all document objects -->
<ui:repeat var="row" value="#{tutorialBean.documents}"> <!-- (1) -->
<li>
<!-- Render the file (preview image) -->
<fx:resultValue id="preview" value="#{row[1]}"/> <!-- (2) -->
<!-- Render the document caption -->
<span class="caption">
<fx:resultValue id="caption" value="#{row[2]}"/>
</span>
<!-- Add an edit button below the image -->
<h:commandLink action="edit" styleClass="editButton"> <!-- (3) -->
<!--
Load the content instance of the current row and store it in
#{fxContentViewBean.content}. The edit page will then use this
content instance.
Note that this listener will only be fired when the user actually
clicks on the commandLink.
-->
<f:setPropertyActionListener target="#{fxContentViewBean.content}"
value="#{fxSystemBean.content[row[0]]}"/> <!-- (4) -->
Edit...
</h:commandLink>
</li>
</ui:repeat>
</ul>
</h:form>
</body>
</html>
(1) To iterate over the list of submitted documents Facelet's
<ui:repeat/> tag is used. The list is wrapped by a javax.faces.model.DataModel returned by the JSF managed Tutorial01Bean.
A row of the datamodel provides indexed access to the columns selected in the search query. In this case, #{column[1]} would be the document, #{column[2]} returns the document caption, and so on.
(2) <fx:resultValue> essentially renders read-only <fx:valueInput> components for more sophisticated output formatting. If a binary is provided for an <fx:resultValue> tag, it renders a thumbnail in case of an image, otherwise an icon corresponding to the document type (e.g. a PDF icon).
(3) In faces-config.xml, a static navigation rule has been defined for the Edit command link, taking the user to the upload page.
...
<navigation-case>
<from-outcome>edit</from-outcome>
<to-view-id>/upload.xhtml</to-view-id>
</navigation-case>
...
(4) To store the selected document in the JSF managed fxContentViewBean, a PropertyActionListener has been defined. Therefore the document will be available for the upload page. The fxContentViewBean is a wrapper for basic content handling operations.
(5) A basic navigation is implemented on this page. It's positioned on top of the form and shows a link to the upload page.
(6) Error and info messages are rendered by <h:messages/>
JSF managed Tutorial01Bean
public class Tutorial01Bean {
private DataModel documents;
public DataModel getDocuments() throws FxApplicationException {
if (documents == null) {
final FxResultSet result = new SqlQueryBuilder()
.select("@pk", "document01/file", "caption", "created_at")
.type("document01")
.orderBy("created_at", SortDirection.DESCENDING)
.getResult();
documents = new FxResultSetDataModel(result);
}
return documents;
}
}
Thumbnail Servlet
To serve the image URLs rendered by <fx:resultValue> to the browser, a servlet providing those images is needed.
...
<servlet>
<servlet-name>Thumbnail</servlet-name>
<servlet-class>com.flexive.war.servlet.ThumbnailServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Thumbnail</servlet-name>
<url-pattern>/thumbnail/*</url-pattern>
</servlet-mapping>
...
