Building the view using Facelets

This application uses Facelets as presentation technology technology for building JavaServer Faces.

Facelets emphasizes its ability to template content in your application. Templating promotes re-use and eases long term maintenance of your application, allowing content to be changed in one spot, but used in multiple pages.

Our template page, will contain an header, a central div and a footer.

jboss as 6 facelets

This is the template.xhtml file:

<!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/jsp/jstl/core">

    <h:head>
        <style type="text/css">
            <!-- omitted for brevity -->
        </style>
    </h:head>

    <h:body>
        <div class="page">
            <div class="header">

                <ui:include src="/header.xhtml" />

            </div>

            <div class="content">

                <ui:insert name="content">
                </ui:insert>

            </div>
            <br />
            <div class="footer">

                <ui:include src="/footer.xhtml" />

            </div>
        </div>

    </h:body>
</html>


And this is the home.xhtml page:

<!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/jsp/jstl/core">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition template="../template.xhtml">
            <ui:define name="content">
                <h:panelGrid columns="1" styleClass="default">

                    <h:form id="listOrdersForm">
                        <h:outputText value="Select Customer:" />
                        <h:selectOneMenu id="selectCustomer" styleClass="buttons"
                            value="#{customerView.customerId}">
                            <f:selectItems value="#{storeManager.listCustomers}" />
                        </h:selectOneMenu>
                        <h:commandButton action="#{storeManager.findOrders}"
                            value="ListOrders" styleClass="buttons" />

                        <h:dataTable value="#{storeManager.listOrders}" var="orders"
                            styleClass="table" headerClass="table-header" rowClasses="table-odd-row,table-even-row">

                            <h:column>
                                <f:facet name="header">
                                    <h:outputText value="Product" />
                                </f:facet>
                                <h:outputText value="#{orders.product}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText value="Price" />
                                </f:facet>
                                <h:outputText value="#{orders.price}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText value="Quantity" />
                                </f:facet>
                                <h:outputText value="#{orders.quantity}" />
                            </h:column>

                        </h:dataTable>

                        <h:commandButton action="newCustomer" styleClass="buttons"
                            value="Insert Customer" />
                        <h:commandButton action="newOrder" styleClass="buttons"
                            value="Insert Order" />
                    </h:form>
                </h:panelGrid>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

    
product-list
Things to notice:
1) One thing to notice is the <ui:composition> tag which tells that we are using the template.xhtml file as a template. Then, we are defining (through the <ui:define> tag) the content of the "content" section.

<ui:composition template="../template.xhtml">
   <ui:define name="content">
   </ui:define>
</ui:composition>        

2) All the navigation buttons contained in this application use implicit navigation: that is, since no navigation rule is defined in face-config.xml, they refer to the view that has the same name as the action: in our case to newCustomer.xhtml and newOrder.xhtml

<h:commandButton action="newCustomer" styleClass="buttons"
 value="Insert Customer" />
<h:commandButton action="newOrder" styleClass="buttons"
 value="Insert Order" />

The remaining part of this application are the newCustomer.xhtml and newOrder.xhtml views which are used respectively to create new Customers and new Orders:

Here's newCustomer.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/jsp/jstl/core">

    <h:body>
        <ui:composition template="../template.xhtml">
            <ui:define name="content">

                <h:form id="newCustomerForm">
                    <h:panelGrid columns="2" styleClass="default">
                        <f:facet name="header">
                            <h:outputText value="Insert new Customer" />
                        </f:facet>
                        <h:outputText value="Name" />
                        <h:inputText id="name" value="#{customerView.customerName}">
                            <f:ajax event="blur" render="name"
                                listener="#{customerView.customerListener}" />
                        </h:inputText>
                        <h:outputText value="Country" />
                        <h:inputText id="country" value="#{customerView.customerCountry}">
                            <f:ajax event="blur" render="country"
                                listener="#{customerView.countryListener}" />
                        </h:inputText>
                        <h:commandButton action="#{storeManager.insertCustomer}"
                            styleClass="buttons" value="Insert Customer" />

                    </h:panelGrid>
                    <h:messages />

                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

new-customer
Here's newOrder.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/jsp/jstl/core">

    <h:body>
        <ui:composition template="../template.xhtml">
            <ui:define name="content">
                <h:form id="newOrderForm">

                    <h:panelGrid columns="2" styleClass="default">
                        <f:facet name="header">
                            <h:outputText value="Insert new Order" />
                        </f:facet>
                        <h:outputText value="Product" />
                        <h:inputText id="name" value="#{itemView.orderProduct}">
                            <f:ajax event="blur" render="name" listener="#{itemView.productListener}" />
                        </h:inputText>

                        <h:outputText value="Quantity" />
                        <h:inputText value="#{itemView.orderQuantity}" />

                        <h:outputText value="Price" />
                        <h:inputText value="#{itemView.orderPrice}" />

                        <h:outputText value="Customer" />
                        <h:selectOneMenu id="selectCustomerforOrder"
                            styleClass="buttons" value="#{customerView.customerId}">
                            <f:selectItems value="#{storeManager.listCustomers}" />
                        </h:selectOneMenu>
                        <h:commandButton action="#{storeManager.saveOrder}"
                            styleClass="buttons" value="Save Order" />

                    </h:panelGrid>
                    <h:messages />
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

new-order
Things to notice:
The inputText fields are bound to a JSF 2 Ajax listener which is triggered when the blur event is triggered.As we have seen, the purpose of this listener is to simply uppercase the text field.

<h:inputText id="name" value="#{customerView.customerName}">
 <f:ajax event="blur" render="name"
 listener="#{customerView.customerListener}" />
 </h:inputText>        

Well that's all folks! All you need to do is deploying the Web application on JBoss AS 6. For the sake of brevity some smaller parts (header.xhtml, footer.xhtml) were omitted, however you can download the full Eclipse Project from here:

Download code here !

0
0
0
s2sdefault