上QQ阅读APP看书，第一时间看更新

Pass-through attributes

JSF allows the definition of any arbitrary attributes (not processed by the JSF engine); these attributes are simply rendered as-is on the generated HTML displayed in the browser. The following example is a new version of an earlier example in this chapter, modified to take advantage of the HTML5 pass-through attributes:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
        <title>Enter Customer Data</title>
    </h:head>
    <h:body>
        <h:outputStylesheet library="css" name="styles.css"/>
        <h:form id="customerForm">
            <h:messages/>
            <h:panelGrid columns="2"
             columnClasses="rightAlign,leftAlign">
                <h:outputLabel for="firstName" value="First Name:">                
                </h:outputLabel>
                <h:inputText id="firstName"
                 label="First Name"
                 value="#{customer.firstName}"
                 required="true"
                 p:placeholder="First Name">
                    <f:validateLength minimum="2" maximum="30">
                    </f:validateLength>
                </h:inputText>
                <h:outputLabel for="lastName" value="Last Name:">
                </h:outputLabel>
                <h:inputText id="lastName"
                 label="Last Name"
                 value="#{customer.lastName}"
                 required="true"
                 p:placeholder="Last Name">
                   <f:validateLength minimum="2" maximum="30">                    
                    </f:validateLength>
                </h:inputText>
                <h:outputLabel for="email" value="Email:">
                </h:outputLabel>
                <h:inputText id="email"
                 label="Email"
                 value="#{customer.email}"
                 p:placeholder="Email Address">
                    <f:validateLength minimum="3" maximum="30">
                    </f:validateLength>
                </h:inputText>
                <h:panelGroup></h:panelGroup>
                <h:commandButton action="confirmation" 
                 value="Save">
                </h:commandButton>
            </h:panelGrid>
        </h:form>
    </h:body>
</html>

The first thing we should notice about this example is the addition of the xmlns:p="http://xmlns.jcp.org/jsf/passthrough namespace, which allows us to add any arbitrary attributes to our JSF components.

In our example, we added the HTML5 placeholder attribute to all input text fields in our page; as we can see, we need it to be prefixed by the defined prefix for the namespace at the top of the application (p, in our case). The placeholder HTML attribute simply adds some placeholder text to input fields that are automatically deleted once the user starts typing on the input field (this technique was commonly implemented by hand using JavaScript before HTML5).

The following screenshot shows our updated page in action: