JSF button with customized dynamic image

0
votes

JSF-2.0, Mojarra 2.1.19, PrimeFaces 3.4.1

I know that we can add an image to button through defining our own css class like:

.imageButton {
  background-image:url(#{resource['images/button.png']});
}

But the problem is, picture url is coming from the bean and it has different value for each user, so giving static image url is not going to work. I need sth. like that:

<p:button value="#{loginBean.loggeduser.name}" icon="#{loginBean.loggeduser.picurl}"/>

But as expected this is not working because of the icon property expects a class name. Also I've tried to define a p:graphicImage component inside the button but doesn't seem like a regular icon.

It should seem like this:

profile picture

Upper picture can be done with pre-defined icons with below code:

 <p:commandButton value="sth" icon="ui-icon-star"/>

But as I said, I don't want to use a static icon.

Thanks in advance.

2
jsfjsf-2primefaces

2 Answers

1
votes

You've got several options. I'll list two of them below.

  1. Use inline style as button's attribute:

    style='background: url(#{resource['images/button.png']}) no-repeat;'

  2. Nest image inside button (note that it won't work with a command button):

    <h:button ...>
    <h:graphicImage .../>
</h:button>

And use other CSS stylings for text output if necessary.

1
votes

i just checked the primefaces 3.4 manual and i verify that <p:commanButton> has an attribute of styleClass so i guess you can use that, 

<p:button value="#{loginBean.loggeduser.name}" styleClass="#{loginBean.loggeduser.picStyle}"/>

and i'd like to define in my backing bean:

public String picStyle() {
  if (userA) {
   //get userA's image
     return "yourcss";
  } else {
     return "default";
  }
}

i'm not sure this is the best way but i guess it should work even with style attribute