How to embed an image with text in an RichFaces a4j:commandButton

Question

Hello

I would like to have both an image and text (from the value attribute) in an a4j:commandButton in my JSF page, is this possible?

Thanks

Answer 1

Using the image attribute of the a4j:commandButton tag causes the component to ignore any enclosed output text tag. Including an h:graphicImage tag deposits the image but not as part of what is rendered as the button.

The best way to overcome the problem is to create a new button containing both the test and the image and use the image property of the a4j:commandButton.

@BalusC: Good point re input type, but setting a button class as listed in your answer and using

                <a4j:commandButton styleClass="btnStop" type="button"
                    disabled="true" ignoreDupResponses="true" reRender="lastOp"
                    onclick="this.disabled=true" alt="myAlt" value="myVal"
                    oncomplete="this.disabled=false" action="#{MyBacking.action}" />

creates a button and the image is nowhere to be seen.

Answer 2

Just define the image as CSS background image.

.buttonclass {
    background-image: url('foo.gif');
}

You don't want to use the image attribute to just only have a background image. This will render a HTML <input type="image"> which has an entirely different purpose (an image map which will return X and Y position of the mouse pointer).

Answer 3

Haven't found a quick solution with a4j:commandButton. However I use the equivalent a4j:commandLink

<a4j:commandLink action="..." type="submit"
   oncomplete="..." styleClass="buttonLink">
 <h:graphicImage url="/img/icons/save12x12.gif" /> Update</a4j:commandLink>

with the following stylesheet

  <u:selector name="a.buttonLink">
    <u:style name="padding" value="2px 4px"/>
    <u:style name="background-image">
      <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>
    </u:style>
    <u:style name="background-position" value="0px 50%"/>
    <u:style name="border" value="1px solid"/>
    <u:style name="border-color" skin="headerBackgroundColor"/>
    <u:style name="font-family" skin="generalFamilyFont"/>
    <u:style name="font-size" value="11px"/>
    <u:style name="font-weight" value="bold"/>
    <u:style name="color" skin="headerTextColor"/>
    <u:style name="text-decoration" value="none"/>
  </u:selector>

  <u:selector name="a.buttonLink:active, a.buttonLink:link, a.buttonLink:visited">
    <u:style name="color" skin="headerTextColor"/>
    <u:style name="text-decoration" value="none"/>
  </u:selector>

haven't tested it with IE (not using it) but works fine with firefox..