6

I want to use plain HTML 5 in my JSF page as some UI functionality cannot be achieved by HTML support provided by JSF2.

In JSF 2.0, some attributes of HTML 5 form elements cannot be rendered correctly in the standard JSF input components.

For eg,<input type="email" cannot be rendered by <h:inputText type="email".

In the below given link, they have used some pure HTML 5 tags like <canvas> <header> <footer> <small> etc.

Now my questions are:

  1. When I try to use the pure html input tag with type "text" in my JSF page, I cant able to retrieve the value from my Managed Bean and set it to this text box. why the value is not displayed?

  2. Only some plain HTML 5 tags will be supported in xhtml page or all the plain HTML 5 tags will be supported

wittich
  • 2,079
  • 2
  • 27
  • 50
Mogana
  • 262
  • 1
  • 4
  • 14

1 Answers1

12

HTML5 Support was added in JSF2.2. Since then you can add passthrough Attributes to JSF-Components:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://java.sun.com/jsf/passthrough">
  <h:form>
    <h:inputText p:type="email" />
  </h:form>
</html>

Attributes which are not known will be ignored by JSF (2.0 and 2.2). If you need to render HTML5-Attributes with JSF2.0 you can use Omnifaces HTML5 Renderkit.

Pure HTML-Tags are just pure HTML-Tags. They are no JSF components. So they will be rendered to the view but JSF won't care about them and won't update your Model.

JSF2.2 came also with Passthrough Elements. Now it's possible to turn a HTML-Tag to a JSF-Component:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:jsf="http://java.sun.com/jsf" 
  xmlns:f="http://java.sun.com/jsf/core">
  <input jsf:id="foo" type="text" jsf:value="#{bean.bar}">
</html>

JSF knows that there is a corresponding UIComponent and will convert this HTML-Tag to a h:inputText. If there is no corresponding UIComponent JSF will create a special one which supports ajax.

See also: JSF 2.2: HTML5 friendly markup

lefloh
  • 10,653
  • 3
  • 28
  • 50