| ☰ See All Chapters |
JSF HTML Passthrough Attributes and Passthrough Elements
In facelets we can use tags and attributes of plain HTML. But when attributes of plain HTML are used in JSF tags they are not supported.
Since JSF supports client-specific rendering JSF does not support the new attributes of HTML5 automatically. (Elements specific to the client or markup are defined in renderer classes. Renderer classes are responsible from encapsulation of the content that is client device-specific and then rendering to the client.)
In order to include HTML5 attributes to JSF components (before JSF 2.2), programmers used to write custom render kits which was an obligation.
JSF 2.2 provided a compromise solution to support HTML 5 input tags.
Through a new namespace (https://xmlns.jcp.org/jsf/passthrough ), you can add extra HTML 5 attributes freely to existed JSF input components.
Alternatively, using new namespace (https://xmlns.jcp.org/jsf ) you can use plain HTML input tags and attributes, and add JSF specific attributes.
They are called Passthrough Attributes and Passthrough Elements respectively.
Ways to set in pass-through attributes
JSF 2.2 offers 4 ways to set in pass-through attributes:
By a name-spaced attribute on component tag
By f:passThroughAttribute as inner element
By f:passThroughAttributes from managed bean
By enhancing HTML with JSF
JSF HTML Passthrough Attributes and Passthrough Elements Example
pom.xml
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.java4coding</groupId> <artifactId>JSFPassthroughAttribute</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <dependencies> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.2.6</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.2.6</version> </dependency> </dependencies> <build> <finalName>JSFPassthroughAttribute</finalName> </build> </project> |
UserBean.java
package com.java4coding;
import java.util.HashMap; import java.util.Map; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped;
@ManagedBean @RequestScoped public class UserBean {
private String text1; private String text2; private String text3; private String text4;
private Map<String, String> html5Attributes = new HashMap<String, String>();
public UserBean(){ html5Attributes.put("autofocus", "true"); html5Attributes.put("placeholder", "Enter Text"); }
public String getText1() { return text1; }
public void setText1(String text1) { this.text1 = text1; }
public String getText2() { return text2; }
public void setText2(String text2) { this.text2 = text2; }
public String getText3() { return text3; }
public void setText3(String text3) { this.text3 = text3; }
public String getText4() { return text4; }
public void setText4(String text4) { this.text4 = text4; }
public Map<String, String> getHtml5Attributes() { return html5Attributes; }
public void setHtml5Attributes(Map<String, String> html5Attributes) { this.html5Attributes = html5Attributes; }
} |
login.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html" xmlns:p="https://xmlns.jcp.org/jsf/passthrough" xmlns:jsf="https://xmlns.jcp.org/jsf" xmlns:f="https://xmlns.jcp.org/jsf/core"> <head jsf:id="head"> <link jsf:rel="stylesheet" jsf:href="style.css" jsf:name="style.css" /> </head> <h:body>
<h2>JSF HTML Passthrough Attributes and Passthrough Elements Example</h2>
<h:form id="form"> <p>By a name-spaced attribute on component tag</p> <h:inputText id="text1" value="#{userBean.text1}" p:type="text" p:placeholder="Enter Text" />
<p>By f:passThroughAttribute as inner element</p> <h:inputText id="text2" value="#{userBean.text2}"> <f:passThroughAttribute name="type" value="text" /> <f:passThroughAttribute name="placeholder" value="Enter Text" /> </h:inputText>
<p>By f:passThroughAttributes from managed bean</p> <h:inputText id="text3" value="#{userBean.text3}"> <f:passThroughAttributes value="#{userBean.html5Attributes}" /> </h:inputText>
<p>By enhancing html with jsf</p> <input type="text" jsf:id="text4" placeholder="Enter Text" jsf:value="#{userBean.text4}"> <f:validateLength minimum="5" /> </input>
</h:form>
</h:body> </html> |
web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "https://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> </web-app> |
Project Directory Structure
Output
All Chapters
