JSF 2.2: HTML5 Support

最新推荐文章于 2024-07-20 23:59:39 发布

weixin_34258078

最新推荐文章于 2024-07-20 23:59:39 发布

阅读量122

点赞数

文章标签： java

原文链接：https://my.oschina.net/hantsy/blog/145853

版权

为什么80%的码农都做不了架构师？>>>

#JSF 2.2: HTML5 Support#

No doubt HTML 5 is the hottest topic in web application development.

JSF 2.0 is not ready for HTML 5 support. When you are using JSF 2.0/Java EE 6, you can use omnifaces to add HTML5 support.

omnifaces included a Html5RenderKitFactory to render HTML 5 elements.

<pre> <factory> <render-kit-factory>org.omnifaces.renderkit.Html5RenderKitFactory</render-kit-factory> </factory> </pre>

In Java EE 7, HTML 5 is the first class citizen. But refactoring all components in JSF is not a smart decision. JSF 2.2 provided a compromise solution to support HTML 5.

In HTML5, form input elements are improved, the type attribute can be text, email, number, range, url, date etc. Ideally, browser should provide client validation for these input elements.

An example for JSF 2.2 and HTML 5 support.

<pre> <h:form> <h:messages showDetail="false" showSummary="true"/> Text: <h:inputText id="text" value="#{html5Bean.text}" required="true"> <f:passThroughAttribute name="placeholder" value="Type text here..."/> <f:passThroughAttribute name="required" value="true"/> </h:inputText> Url: <h:inputText id="url" value="#{html5Bean.url}"> <f:passThroughAttribute name="type" value="url"/> </h:inputText> Email: <h:inputText id="email" p:type="email" value="#{html5Bean.email}" /> Number: <h:inputText id="number" p:type="number" p:min="1" p:max="10" value="#{html5Bean.number}" > <f:convertNumber minFractionDigits="0"/> </h:inputText> Range: <h:inputText id="range" value="#{html5Bean.range}">  <f:passThroughAttributes value="#{{'type':'range', 'min':'0', 'max':'10', 'step':'2'}}"/> <f:convertNumber minFractionDigits="0"/> </h:inputText> Date: <h:inputText id="date" p:type="date" value="#{html5Bean.date}" > <f:convertDateTime pattern="yyyy-MM-dd"/> </h:inputText> <h:commandButton value="Save" action="#{html5Bean.submit()}"> <f:ajax execute="@form" render="@all"/> </h:commandButton> </h:form> <h:panelGroup id="out"> Text: <h:outputText value="#{html5Bean.text}"/> Url: <h:outputText value="#{html5Bean.url}"/> Email: <h:outputText value="#{html5Bean.email}"/> Number: <h:outputText value="#{html5Bean.number}"/> Range: <h:outputText value="#{html5Bean.range}"/> Date: <h:outputText value="#{html5Bean.date}"/> </h:panelGroup> </pre>

JSF 2.2 provides a new facelets taglib named passthrough to process the new attributes added in HTML 5.

<pre> xmlns:p="http://xmlns.jcp.org/jsf/passthrough" </pre>

For example, you want to add placeholder to input element, just added a p:placeholder attribute.

This tell JSF HTMLRenderKit keep back the attribute placeholder directly, not like JSF 2.0, any none support attributes will be ate by HTML RenderKit.

The core taglib also added a new tag to support passthrough feature.

This is equivalent to the above version.

You can add more than one attributes at the same time.

Or use multi f:passThroughAttribute nested in the inputText component.

Or use a f:passThroughAttributes nested in the inputText component, it can accept a Map.

In backend bean, a Map is declared.

<pre> private Map<String, String> attrs = new HashMap<String, String>(); @PostConstruct public void init() { log.info(" call init@"); this.attrs.put("type", "range"); this.attrs.put("min", "1"); this.attrs.put("max", "10"); this.attrs.put("step", "2"); } </pre>

You can also use a EL 3.0 Map expression as value. EL 3.0 is extracted from JSF specifcation as a standalone specification now, we will discuss it in further post.

Through the passthrough feature in JSF 2.2, you can add any custom attribute to input element, such as the data-XXX attribute in Bootstrap framework.

Currently only Opera supports all elements in this post.

The following is the result of HTML 5 required attribute valuation.

the required true displayed in opera