jsf html tag inside value

Question

I've this commandButton, and I need to add a icon using Bootstrap 3.

<h:commandButton  id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="Log Out"></h:commandButton>

the icon is in a span tag for bootstrap 3 reasons, so I've tried to add it to the value property in the command button like this:

<h:commandButton  id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="<span class="glyphicon glyphicon-log-out"></span>Log Out"></h:commandButton>

I've got an error, I suppose that I can't add html tags inside the value property, is there an easy way to do this?

Answer 1

You can't put markup in the value attribute of a JSF component. You should put markup in the tag body like as in normal HTML. However, this is not supported by the <h:commandButton> (for the very simple reason because it generates an <input> element and any children would end up in invalid HTML). It would be rendered after the generated <input> element.

Just use <h:commandLink> instead. Whilst it generates an <a> element, the Bootstrap CSS also just supports it as well as to the btn style class.

<h:commandLink id="logoutButton" action="#{loginController.logout}" styleClass="btn btn-primary">
    <span class="glyphicon glyphicon-log-out"></span>Log Out
</h:commandLink>

(note that I fixed the wrong class attribute to be styleClass)

Answer 2

I assume you get a parse error. This is so as the value attribute does not expect to contain any html code. Instead wrap your bootstrap code by the button like this:

<h:commandButton id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="Log Out">
    <span class="glyphicon glyphicon-log-out"></span>
</h:commandButton>

Which generates the html output (which does not validate, see note below):

<input id="j_idt5:logoutButton" type="submit" name="j_idt5:logoutButton" value="Log Out" style="margin-top: 10px;margin-left: 10px;" class="btn btn-primary">
    <span class="glyphicon glyphicon-log-out"></span>
</input>

UPDATE

Bootstrap requires you to have a <button> apparently. It won't be styled correctly with an <input type=button>, so you have to create a custom component to add a <button> to the the JSF tree as JSF does not provide by default such a component. You could leverage on the code produced inside primefaces. They provide a button component but unfortunately it won't fit your need as they already include their own content and styles.

Classes of interest in primefaces:

• Button component (v. 3.5)
• Button renderer

NOTE: Actually I checked the input element specification and it may not host content. To be valid (and styled correctly in this case) you need a <button>.