For OmniFaces I've recently looked for the least intrusive way (i.e. no custom component/tag/renderer boilerplate necessary) to add HTML5 specific ,
,
and
attributes like
placeholder
, autofocus
, type="range"
, etcetera. You can learn about all of those new HTML5 attributes in html5tutorial.info under the section "Web Form 2.0". The JSF renderers by default ignores all attributes which are not officially supported by the components.
After some thinking, this appears the best to achieve using a custom RenderKit
which returns a custom ResponseWriter
wherein the startElement()
and writeAttribute()
methods are been overridden to check for the current component and if the developer has specified any custom HTML5-related attributes. This way the developer can just add them to standard JSF
,
,
and
components.
Html5RenderKit
The result was a new OmniFaces feature: Html5RenderKit
(source code here). This will be available as per OmniFaces 1.1.
To get it to run, register its factory as follows in faces-config.xml
:
org.omnifaces.renderkit.Html5RenderKitFactory
Here's a demonstration how all those new HTML5 attributes can be used (note that the
now also supports the autocomplete
attribute, in standard JSF 2.0/2.1 this was so far only supported on input components):
autocomplete="off">
columns="3">
for="text" value="Normal text" />
id="text" value="#{bean.text1}" />
value="Supported in all browsers" />
for="placeholder" value="With placeholder" />
id="placeholder" value="#{bean.text2}" placeholder="type here" />
value="Since Firefox 4, Safari 4, Chrome 10, Opera 11.10 and IE 10" />
for="autofocus" value="With autofocus" />
id="autofocus" value="#{bean.text3}" autofocus="true" />
value="Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10" />
for="search" value="Search" />
id="search" type="search" value="#{bean.search}" />
value="Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 9" />
for="email" value="Email" />
id="email" type="email" value="#{bean.email}" />
value="Since Firefox 4, Chrome 6, Opera 10.6 and IE 10" />
for="url" value="URL" />
id="url" type="url" value="#{bean.url}" />
value="Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10" />
for="phone" value="Phone" />
id="phone" type="tel" value="#{bean.phone}" />
value="Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10" />
for="range" value="Range (between 1 and 10)" />
id="range" type="range" value="#{bean.range}" min="1" max="10" />
value="Since Safari 4, Chrome 6, Opera 11 and IE 10" />
for="number" value="Number (between 7 and 13)" />
id="number" type="number" value="#{bean.number}" min="7" max="13" />
value="Since Safari 4, Chrome 9 and Opera 11" />
for="date" value="Date" />
id="date" type="date" value="#{bean.date}"
converterMessage="Format must be yyyy-MM-dd">
pattern="yyyy-MM-dd" />
value="Since Opera 10.6"
rendered="#{not facesContext.validationFailed}" />
for="date" />
for="textarea1" value="Textarea with maxlength of 20" />
id="textarea1" value="#{bean.text4}" cols="16" maxlength="20" />
value="Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10" />
for="textarea2" value="Textarea with placeholder" />
id="textarea2" value="#{bean.text5}" cols="16" placeholder="some text" />
value="Since Firefox 4, Safari 5, Chrome 10, Opera 11.50 and IE 10" />
/>
value="submit">
execute="@form" render="@form" />
value="OK!"
rendered="#{facesContext.postback and not facesContext.validationFailed}" />
With this backing bean:
@ManagedBean
@ViewScoped
public class Bean implements Serializable {
private String text1;
private String text2;
private String text3;
private String search;
private String email;
private String url;
private String phone;
private Integer range;
private Integer number;
private Date date;
private String text4;
private String text5;
// Add/generate getters/setters.
}
Here's a screenshot of how it look like in Chrome 19:
Source:http://balusc.blogspot.com/2012/06/adding-html5-attributes-to-standard-jsf.html
Tidak ada komentar:
Posting Komentar