带有自定义动态图像的JSF按钮

Question

JSF-2.0，Mojarra 2.1.19，PrimeFaces 3.4.1

我知道我们可以通过定义我们自己的css类来添加图像到按钮，如：

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

但问题是，图片网址来自bean，它对每个用户都有不同的价值，因此提供静态图片网址是行不通的。我需要......那样：

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

但正如预期的那样，这是行不通的，因为icon属性需要一个类名。此外，我尝试在按钮内定义p:graphicImage组件，但似乎不是常规图标。

看起来应该是这样的：

上图可以使用预定义的图标完成，代码如下：

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

但正如我所说，我不想使用静态图标。

提前致谢。

Answer 1

你有几种选择。我将在下面列出其中两个。

1. 使用内联样式作为按钮的属性：

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

2. 将图像嵌套在按钮内（请注意，它不能与命令按钮一起使用）：

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

如有必要，可使用其他CSS样式进行文本输出。

Answer 2

我刚检查了primefaces 3.4手册，我确认<p:commanButton>的属性为styleClass，所以我想你可以使用它，

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

我想在我的支持bean中定义：

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

我不确定这是最好的方法，但我认为即使使用style属性也应该有效