9

I would like to use the commands:

The JSF <h:commandButton> generates an <input...> but I would like that instead of generating the <input> I would like that this generate a HTML 4 standard<button>.

millimoose
  • 39,073
  • 9
  • 82
  • 134
endrigoantonini
  • 1,191
  • 2
  • 15
  • 28
  • What commands would you like to use? – millimoose Oct 08 '12 at 00:07
  • Also, JSF is kind of terrible when it comes to finely controlling HTML output. I'd strongly suggest against using it if your graphical design needs go too far beyond "pick a RichFaces theme". I think that in this case you can just put a regular HTML ` – millimoose Oct 08 '12 at 00:10
  • JSF by default doesn't generate ` – Luiggi Mendoza Oct 08 '12 at 01:34
  • I`m using bootstrap and my css need to be an to show icons on the botton. I wouldn't like to customize my css to suport it. I think it would be so much better if the JSF generates it. – endrigoantonini Oct 08 '12 at 03:13
  • [PrimeFaces has since recently a Bootstrap theme](http://blog.primefaces.org/?p=2139). – BalusC Oct 08 '12 at 11:23

4 Answers4

11

Closest what you can get with standard JSF component set is <input type="button"> which is generated by <h:button>.

<h:button value="Button" />

which generates

<input id="j_id_1" name="j_id_1" type="button" value="Button" onclick="window.location.href = '/context/currentpage.xhtml'" />

If you really insist in using <button> for some unclear reason, then you have the following options:

  • Just use plain HTML.
  • Create a custom component and/or renderer.
  • Grab a 3rd party component library. E.g. PrimeFaces' <p:button> generates a <button>.
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • I was converting a CSS + HTML site into a JSF site. Changing CSS is not practical in the setting. If an input is generated instead of a button, the existing CSS does not style the generated input component. Adding a PrimeFaces button brings unwanted styling. I had no knowledge in creating custom components. – Buddhika Ariyaratne Jun 06 '20 at 00:00
3

You should look into the Primefaces p:commandButton. This will render to a <button> tag on the client.

http://www.primefaces.org/showcase/ui/commandButton.jsf

maple_shaft
  • 10,435
  • 6
  • 46
  • 74
2

If you are using JSF 2.2, you can just use the <button> tag with jsf namespace mixed. The secret here is the attribute process from jsf namespace, that post the form data, and the action attribute.

<button type="submit" class="btn btn-primary" 
    jsf:action="#{profileController.updateProfile}"
    jsf:process="@form">
        <i class="fa fa-floppy-o" aria-hidden="true"></i>
            #{bundle['button.store']}
</button>

In JSF 2.2 you can use any HTML tag mixing with JSF tags.

Otávio Garcia
  • 1,372
  • 1
  • 15
  • 27
  • This saved me. Thank you so much. I was converting an HTML + CSS based site to JSF. Inserting a PrimeFaces button bought unnecessary stylings. Any other JSF component like command button or command link generated input in Html resulting in unexpected styling. As I am not the one responsible for CSS editing, modifying CSS was difficult. That is the value of your answer came very handy for me. – Buddhika Ariyaratne Jun 05 '20 at 23:57
-2

It works for me by replacing <button> with <h:commandLink>, example: Replace

<button class="RUIFW-btn-primary pull-right" 
        type="submit" 
        name="action" 
        value="Find" 
        onClick="return submitPage(this);">
     <span class="icon-search"></span>Find
</button>

with

<h:commandLink styleClass="RUIFW-btn-primary pull-right" 
title="#{msg['view.button.Find']}"
action="#{anotherAccountController.doFind}"
onclick="return submitPage(this.form)">
<span class="icon-search"></span>#{msg['view.button.Find']}
</h:commandLink>
Tom Li
  • 1