Problem displaying image on p:commandButton

burferd · 12 Feb 2011, 00:09

Using PF 2.2, JSF 2, facelets, Glassfish 3, NetBeans 6.9.1, IE 8

I'm trying to migrate a project from PF 2.0.2 to 2.2.
This project works fine in PF 2.0.2, and it has lots of p:commandButton components with images to represent the button look.

In PF 2.0.2, the syntax was:

Code: Select all

                    <p:commandButton id="image1" styleClass="image1" image="/resources/Images/1_Btn.jpg"
                                     type="image" update="pinComp:pinDisp,pinComp:actionLab"
                                     actionListener="#{loginSessionBean.image2_action}" />

According to the documentation, for PF 2.2, the syntax should be:

Code: Select all

                    <p:commandButton id="image1" styleClass="image1" image="btn1"
                                     update="pinComp:pinDisp"
                                     actionListener="#{loginSessionBean.image1_action}"/>

The type parameter is not used to reference images, and the image is now contrilled by the CSS file like:

Code: Select all

.btn1 {
    background-image: url('../Images/1_Btn.jpg');
}

However, that does not work.
I do not get an image displayed on the button.
All I get now are blank buttons with a ^.

The images are in a single directory, and ../Images is the correct reference to the image directory for other background images that are used, so it is not a question of not knowing where the image is located.
All the buttons are in composite components.

What am I doing wrong?

Thanks

burferd · 14 Feb 2011, 22:56

Still not having much luck getting an image to display on a p:commandButton.

I created a simple project to try and narrow down the problem.
I have one page with a form and 2 command buttons.
All the images are in the same Image directory.
The form has a background image.
I have two versions of the connand button to see how I can get an image displayed.
Here is the code for the page:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form styleClass="welcomeForm" >
            <p:commandButton id="image1" image="btn1"
                             update="pinComp:pinDisp"
                             />
            <p:commandButton id="image2" styleClass="image1"
                             update="pinComp:pinDisp"
                             />
        </h:form>
    </h:body>
</html>

The css code of iinterest is:

Code: Select all

.image1 {
    background-image: url('../Images/1_Btn.jpg');
    margin-top: 8px;
    margin-left: 32px;
    left: 120px;
    top: 30px;
    width: 100px;
    height: 100px;
}

.btn1 {
    background-image: url('../Images/1_Btn.jpg');
}

.welcomeForm {
    background-image: url('../Images/PT_Welcome3_panel.jpg');
    position: absolute;
    top: 100px;
    left: 12px;
    height: 180px;
    width: 433px;
}

The first button defines the image as a styleclass for the image parameter, as sspecified in the documentation.
However, this does not display an image on the button.

The second button defines the image withing the styleclass property of the button, rather than the image parameter.
This version does display the image on the button, but when the mouse is moved over the button, the image goes away.
There is also a faint outline around the image.

Can anyone explain why the first button definition does not display the image?

Thanks.

fiktion · 15 Feb 2011, 14:43

I looked into this and I found out the issue. It looks to be a bug in Primefaces when including the image parameter on a commandButton.

When I created a command button with the image parameter set I also got ^ where the image should have been. If you view the page in firefox and have firebug you can right click on the command button and inspect the element.

You will see that within the <button></button> the image is placed in the class of a span.. which looks like this (my image is named test.png)

Code: Select all

<span class="ui-button-icon-primary ui-icon ./image/icons/test.png" />

What really should occur is the image needs to go within that span in image tags something like this

Code: Select all

<span><img src="./image/icons/test.png"></span>

You can directly edit this in using firebug and you will see the result is that the image is displayed in the command button. The reason why your styleClass is working is because the style class is being applied to the class of the span and therefore it is valid. Places the path to an image in the class of the span will result it not working properly.

So long and short it looks like it might be a bug. I might be missing something but I would stick to using the styleClass as the way to place the image inside the command button for now.

burferd · 16 Feb 2011, 01:23

Thanks for your analysis.

I figured something had to be wrong, or else I was missing something really obvious.

The problem with just using the styleClass is that the image disappears when the mouse is over the button - very annoying to say the least.

I included this link as a possible update for 2.2.1 maintenance issue.

burferd · 23 Feb 2011, 04:46

I have run into another issue with images on p:commandButton components.
It has been shown by fiktion (a couple responses ago in this thread) that there appears to be a bug in the image attribute for the p:commandButton component.

There appears to be yet another problem. I have a p:commandButton in a composite component that displays the image just fine when I add the following to the styleClass:
background_image: url("../Images/DailyCheckOut2_Btn.jpg");

However, I add the same line (cut and paste) into the styleClass for a p:commandButton that is in a p:dialog component and I get no image displayed.

I have no clue why all the other items in my styleClass for that button in the dialog component work, but not the background-image.

Has anyone else seen this?

Thanks.

rbento · 29 Apr 2011, 09:17

Hey dudes,

I was having the very same problem trying to set an image in a p:commandButton using a css class in the button image attribute and it was not displaying at all.

However setting the image to the button id css it worked fine.

Code: Select all


// DIDN'T WORKED

.btnCallImage
{
    background: transparent url("#{resource['app/img:btn-call.png']}") no-repeat;
}

<p:commandButton id="btnCall" value="call" image="btnCallImage" actionListener="#{bean.call}" />

// WORKED

#btnCall
{
    position: absolute;
    width: 132px;
    height: 51px;
    top: 264px;
    left: 292px;
    border: none;
    background: transparent url("#{resource['app/img:btn-call.png']}") no-repeat;
    cursor: pointer;
}

<p:commandButton id="btnCall" value="call" actionListener="#{bean.call}" />

I hope it helps!

Hugs!

Problem displaying image on p:commandButton

Who is online