• Java IO
  • Struts
  • Spring
  • JavaScript
  • Servlet
  • SQL Tutorial
  • RubyonRails
  • Core Java
  • JSP

  • <

    HTML5-Friendly Markup

    JavaServer Faces supports HTML5 for allowing you to use HTML5 markup directly in your web page. It also allows you to use JavaServer Faces attributes within HTML5 elements. JavaServer Faces supports for HTML5 falls into two categories:

  • Pass-through elements

  • Pass-through attributes

  • The HTML5-friendly markup feature offers the complete control of Facelets page over the rendered page output rather than having to pass this control to the component. You can mix and match JavaServer Faces and HTML5 components and elements.

    Using Pass-Through Elements

    It allows you to use HTML5 tags and attributes in your application. JSF treats it as equivalent to JavaServer Faces components associated with a server-side UIComponent instance.

    You must specify namespace http://xmlns.jcp.org/jsfTo make an element that is not a JavaServer Faces element a pass-through element. In the following example, code declares the namespace with the short name jsf:

    index.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:h="http://xmlns.jcp.org/jsf/html"  
    xmlns:jsf="http://xmlns.jcp.org/jsf"  
    >  
    <h:head>  
    <title>HTML5-Friendly-markup</title>  
    </h:head>  
    <h:body>  
    <h:form>  
    <h:outputLabel for="username" value="User Name "/>  
    <h:inputText value="#{user.name}"/><br/>  
    <h:outputLabel for="email" value="Email ID "/>  
    <input type="email" jsf:id="email" name="email" value="#{user.email}"/><br/><br/>  
    <h:commandButton action="response.xhtml" value="submit"/>  
    </h:form>  
    </h:body>  
    </html>  
    


    User.java
    import javax.faces.bean.ManagedBean;  
    import javax.faces.bean.RequestScoped;  
    @ManagedBean  
    @RequestScoped  
    public class User {  
    String name;  
    String email;  
    public String getName() {  
    return name;  
    }  
    public void setName(String name) {  
    this.name = name;  
    }  
    public String getEmail() {  
    return email;  
    }  
    public void setEmail(String email) {  
    this.email = email;  
    }  
    }  
    


    response.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:h="http://xmlns.jcp.org/jsf/html">  
    <h:head>  
    <title>Response Page</title>  
    </h:head>  
    <h:body>  
    <h1>  
    <h:outputText value="Hello #{user.name}"/>  
    </h1>  
    <h4><h:outputText value="Your email is: #{user.email}" /></h4>  
    </h:body>  
    </html>  
    


    Using Pass-Through Attributes

    Pass through attributes allow you to pass attributes that are not JavaServer Faces attributes to the browser. If you specify a pass-through attribute in a JavaServer Faces UIComponent, the attribute name and value are passed straight through to the browser without being interpreted by JavaServer Faces components or renderers.

    You must use the JavaServer Faces namespace for pass-through attributes to prefix the attribute names within a JavaServer Faces component. In the following example, we are passing attributes attributes through to the HTML5 input component.

    Pass-Through Attributes Example



    index.xhtml
    <?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://xmlns.jcp.org/jsf/html"  
    xmlns:f="http://xmlns.jcp.org/jsf/core">  
    <h:head>  
    <title>Pass-Through Attributes</title>  
    </h:head>  
    <h:body>  
    <h:form>  
    <h:outputLabel for="username" value="User Name "/>  
    <h:inputText value="#{user.name}">  
    <f:passThroughAttribute name="type" value="text" />  
    </h:inputText><br/>  
    <h:outputLabel for="email" value="Email ID "/>  
    <h:inputText value="#{user.email}">  
    <f:passThroughAttribute name="type" value="email" />  
    </h:inputText><br/><br/>  
    <h:commandButton action="response.xhtml" value="submit"/>  
    </h:form>  
    </h:body>  
    </html>  
    


    User.java
    import javax.faces.bean.ManagedBean;  
    import javax.faces.bean.RequestScoped;  
    @ManagedBean  
    @RequestScoped  
    public class User {  
    String name;  
    String email;  
    public String getName() {  
    return name;  
    }  
    public void setName(String name) {  
    this.name = name;  
    }  
    public String getEmail() {  
    return email;  
    }  
    public void setEmail(String email) {  
    this.email = email;  
    }  
    }  
    


    response.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:h="http://xmlns.jcp.org/jsf/html">  
    <h:head>  
    <title>Response Page</title>  
    </h:head>  
    <h:body>  
    <h1>  
    <h:outputText value="Hello #{user.name}"/>  
    </h1>  
    <h4><h:outputText value="Your email is: #{user.email}" /></h4>  
    </h:body>  
    </html>  
    
    
    
















    © copyright 2017-2021 Completedone pvt ltd.