6 Replies Latest reply on Sep 13, 2012 8:07 AM by healeyb

    How to add background image and icon to a JSF button?

    ashishagw
    ashishagw Feb 16, 2012 12:07 PM

      am using JSF 2.0
      I am able to add Background image to the JSF button but am not able to add icon to the button.

      My Requirement is:- JSF button with Background image and a Icon

      Following code am using to add background.

        <!-- Discard button-->

      <h:commandButton action="discard"  style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; "  value="#{message.discard}">
      <rich:componentControl target="popup" operation="show" />
      </h:commandButton>

       

      StackOverFlow.png

      I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.

      Can somebody help me in adding a icon to the button too please.

        • 1. Re: How to add background image and icon to a JSF button?
          sunkaram
          sunkaram Feb 16, 2012 12:17 PM (in response to ashishagw)

          did you try 'image' property of <h:commandButton ?

            • Actions
          • 2. Re: How to add background image and icon to a JSF button?
            ashishagw
            ashishagw Feb 16, 2012 12:29 PM (in response to sunkaram)

            Hey Sunkara,

            I treid but the image is coming as background image, but I want to to have a image as background and other image as icon.

              • Actions
            • 3. Re: How to add background image and icon to a JSF button?
              vi_mahe_ka1
              vi_mahe_ka1 Feb 21, 2012 2:17 AM (in response to ashishagw)

              try this

               

               

               

               

              <button type="button">
              <a4j:support event="onclick" action="..." reRender="..."></a4j:support>
              <h:graphicImage value="/pages/tennessee.gif"></h:graphicImage>

              <h:outputText value="test"></h:outputText>
              <h:graphicImage value="/pages/texas.gif"></h:graphicImage>
              </button>

               

               

              <a4j:commandButton type="image"
                   image="/images/icons/copy.gif" align="left">              Save</a4j:commandButton>

                • Actions
              • 4. Re: How to add background image and icon to a JSF button?
                liuliu
                liuliu Feb 21, 2012 3:21 AM (in response to ashishagw)

                hi,

                 

                i think you cant get what you want just with css. primefaces has a component imagebutton, it works fine with RF.

                 

                liu

                  • Actions
                • 5. Re: How to add background image and icon to a JSF button?
                  josh68
                  josh68 Sep 10, 2012 4:11 PM (in response to vi_mahe_ka1)

                  Just a note that in my project, <a4j:commandButton type="image" image="path to image" /> works, but only if you do not use a JSF2-type resource identifier for the image attribute (eg, image="#{resource['images:my_custom_image.gif']}"). For some reason, when I try that, the resulting path contains a doubled root (eg, "/myApp/myApp/faces/javax.faces.resource/my_custom_image.gif?ln=images"). I use JSF2-type resource identifiers all over my application, and this is the only place it fails to work correctly. So, instead, I have to use a relative path (eg, image="../../resources/images/my_custom_image.gif").

                   

                  Seems like this may be a bug in RF 4.x. I'm using 4.2.

                   

                  Thanks.

                    • Actions
                  • 6. Re: How to add background image and icon to a JSF button?
                    healeyb
                    healeyb Sep 13, 2012 8:07 AM (in response to josh68)

                    It's just so much easier to use:

                     

                    <..:commandLink>

                       <h:graphicImage .../>

                    </...:commandLink>

                     

                    I can't think of any real difference in what it does.

                     

                     

                     

                    Regards,

                    Brendan.

                     

                     

                     

                    Freelance Java Enterprise Developer


                    JSF Richfaces Ajax Java 6/7 (scjp) EE 6 HTML CSS JavaScript jQuery MySQL JPA Hibernate Eclipselink

                    Spring Oracle SQL JPQL Sybase EJB CDI Glassfish Apache JAX-RS Primefaces UNIX Paypal and more..

                      • Actions