a4j:commandButton with Image AND Text

[nicog]

Hi,


Can anyone give me the best solution to get a button (a4j:commandButton) with an Icon/Image on the left And Text on the right
I can only get one of the two at the same time.

When the a4j:commandButton is disabled, I would like both to be disabled.

Many thanks for your help on this
Rgds

[rguillemette]

Hello,

Something like that?

<a4j:commandButton action="test" disabled="#{bean.property}">
 <h:graphicImage value="images/img.png" />
 <h:outputText value="my Text" />
 </a4j:commandButton>

@+

[nicog]

Hello,

Thks for your answer

Unfortunately this wont work.

You can not click on Image nor on text to launch action.

I tried also oher combinations with a4j:commandButton, outputText and h:graphicImage:

 <a4j:commandButton image="image.png" >
 <h:outputText value="Test"/>
 </a4j:commandButton>

 <a4j:commandButton value="Test" >
 <h:graphicImage value="image.png"/>
 </a4j:commandButton>

but you can not click either on the image or on the text...

The best (if possible) is to use rich:menuItem (that can be standalone in rich:toolBar for instance) as follows

<rich:menuItem
 icon="image.png"
 iconDisabled="disabled.png"
 value="Action"
 action="action"
 disabled="#{bean.disabled}" />

[rguillemette]

Maybe you could skin an a4j:commandLink with CSS to have your image.

Example :

<a4j:commandLink action="home" style="display:block;width:72px;height:24px;border:1px solid #000; background-color:#ededed;">
 <h:graphicImage value="/images/Error-16.png" style="vertical-align:middle;margin-right:5px;" />
 <h:outputText value="Test" />
 </a4j:commandLink>

More complete example and tutorial :
http://www.cssplay.co.uk/menus/tutorial.html