3 Replies Latest reply on May 29, 2009 7:49 AM by Remi Guillemette

    a4j:commandButton with Image AND Text

    Nicolas Gaudin Newbie

      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

        • 1. Re: a4j:commandButton with Image AND Text
          Remi Guillemette Newbie

          Hello,

          Something like that?

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


          @+

          • 2. Re: a4j:commandButton with Image AND Text
            Nicolas Gaudin Newbie

            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}" />
            


            • 3. Re: a4j:commandButton with Image AND Text
              Remi Guillemette Newbie

              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