11

I work with a JSF team doing the front end development. We're outputting an INPUT field and I need to include placeholder and a few data- attributes into the rendered tag. The JSF is stripping these out, however. I don't know JSF enough to be of much help to the JSF team, but thought I could at least ask around.

We were using an older version of JSF but upgraded to 2.0 as it appeared that it would support HTML5. Is that not the case? Is there a known way to work around this?

DA.
  • 39,848
  • 49
  • 150
  • 213

2 Answers2

9

JSF isn't exactly stripping them out. It's just ignoring them because they are not among the supported/known attributes of the component in question. In case of for example <h:inputText> (which renders by default a HTML <input type="text"> tag), you can find all supported attributes in the view declaration language (VDL) documentation.

To overcome this, you would need to create a custom component or, better, just a custom renderer which overrides the standard <h:inputText> renderer and takes the custom attributes into account.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks, Balus. That's exactly the route we're going to take. Writing our own renderers for all our tags. Tedius, but should get us there. – DA. Jul 13 '11 at 16:36
  • 2
    [here's a custom renderer](http://stackoverflow.com/questions/6859520/adding-custom-attribute-html5-support-to-jsf-2-0-uiinput-component) – Sam Hasler Jul 11 '12 at 16:37
0

If you are using Facelet you can simply write in the HTML5 components the EL expression.

For example video:

<video name="myVideo" poster="#{bean.poster}" > 
    <source src="#{bean.vidoeSrc}" type='video/ogg; codecs=&quot;theora, vorbis&quot;' /> 
</video>

This way you can use ANY HTML5 component - and the binding will be to JSF as other JSF components. you can also use the same idea in input element of HTML.

EDITED

For placeholder you can use PrimeFaces inplace. Check out their components for more details.

Dejell
  • 13,947
  • 40
  • 146
  • 229
  • Could you explain that some more? I'm not sure what the EL is. Our particular issue is getting `data-*` and `placeholder` attributes to pass through to the HTML. It looks like we're going to have to write our own renderer. – DA. Jul 13 '11 at 06:18
  • @DA: EL (Expression Language) are those `#{}` things. See also http://stackoverflow.com/tags/el/info After all, I believe that Odelya confused HTML5 **attributes** with HTML5 **tags**. – BalusC Jul 13 '11 at 07:41