Uploading documents

On this page an upload form, allowing both creating and editing documents, is defined. This page is build with XHTML and JSF tags explained as follows.

upload.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:fx="http://www.flexive.com/jsf/core">
<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>

    <h:messages globalOnly="true"/> <!-- (9) -->
        
    <h:form enctype="multipart/form-data"> <!-- (7) -->

        <ul id="mainmenu">
            <li>
                <h:outputLink value="index.xhtml">Return to overview</h:outputLink> <!-- (8) -->
            </li>
        </ul>


        <!--
             Create a new content of type document01 or edit an existing content instance if set in fxContentViewBean.
        -->
        <fx:content typeName="document01" content="#{fxContentViewBean.content}" var="document"> <!-- (1) -->

            <fx:fieldSet legend="Document Upload"> <!-- (5) -->
                <!-- Render the input form -->
                <fx:value property="file"/>
                <fx:value property="caption"/>

                <!-- Render the submit button -->
                <fx:formRow> <!-- (6) -->
                    <h:commandButton action="#{fxContentViewBean.save}" value="Save"> <!-- (2) -->
                        <f:setPropertyActionListener target="#{fxContentViewBean.content}" value="#{document_content}"/> <!-- (3) -->
                        <f:setPropertyActionListener target="#{fxContentViewBean.successMessage}"
                                                     value="Successfully saved the document."/> <!-- (4) -->
                    </h:commandButton>
                </fx:formRow>

            </fx:fieldSet>

        </fx:content>

    </h:form>
</body>
</html>

(1) <fx:content/> from the [fleXive] component library is used to create or load a document instance, if one exists in the JSF managed fxContentViewBean. The fxContentViewBean is a wrapper for basic content handling operations.
(2) The Save command link's action is bound to the save() method of the JSF managed fxContentViewBean, which finally persists the document instance. The save() method is used for both update and create operations. If an error occurs, an error message is added.

There are two PropertyActionListeners defined.

(3) The first one's value attribute is mapped to document instances loaded or created by <fx:content/>. They are stored to the JSF managed fxContentViewBean.
(4) For the fxContentViewBean's customizable success message a second PropertyActionListeners has been defined.

Form utility components

To simplify form building, [fleXive] provides ready to use form utility components used in this tutorial application.

(5) <fx:fieldSet/> renders an HTML fieldset surrounding the input elements.

(6) <fx:formRow/> renders a row container (a CSS formatted <div/>) and generates a tooltip, if specified, for the button.

Note: For file uploads, the enctype attribute of the HTML form must be set to multipart/form-data. (7)

Error messages and navigation

A basic navigation is implemented on this page. It's positioned on top of the form and shows a link back to the overview page, where the thumbnails are listed (8).

(9) Error and info messages are rendered by <h:messages/>.