Как сделать кнопку изображения в JSF

Я хочу иметь компонент, который выглядит как кнопка, но вместо текста он должен содержать изображение. Поскольку стандартная кнопка не предлагает эту функцию, я попытался использовать <h:commandLink>:

<h:commandLink action="#{some_action}">
    <p:panel styleClass="some_style">
        <h:graphicImage value="#{some_image}">
    </p:panel>
</h:commandLink>

Это не работает. <h:commandLink> преобразуется в тег <a>, а <p:panel> - в <div>. <a> -tags не может содержать <div> -tags, поэтому <div> -tag автоматически помещается вне <a> -tag. В результате только изображение можно щелкнуть, а не окружающая панель, которая будет выглядеть как кнопка. Есть ли способ сделать окружную часть части ссылки или поместить изображение внутри кнопки?

В моем проекте используется JSF и библиотека Primefaces:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">

Ответы

Ответ 1

Есть несколько способов добавить изображение в commandButton:

Использование атрибута изображения

<h:commandButton action="#{some_action}" image="button.gif" />

Абсолютный или относительный URL-адрес изображения для отображения этой кнопки. Если указанный, этот "входной" элемент будет быть типа "образ". В противном случае быть типа, указанного "типом", свойство с меткой, указанной в Свойство "значение".

Использовать CSS

<h:commandButton action="#{some_action}" styleClass="button" />

.button {
    background: white url('button.gif') no-repeat top;
}

Ответ 2

Вы можете просто переместить div вне, например.

<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
        <h:graphicImage value="#{some_image}">
</h:commandLink>
</div>

И стиль div таким образом. Просто сделайте отображение привязки (тега) в виде блока, и он должен заполнить весь div, чтобы он был доступен для кликов. Например, в вашем CSS:

.clickAll{
  display:block;
}

Ответ 3

Если вы можете использовать значок из PrimeFaces/JSF, тогда есть простое и надежное решение

<p:column>
    <p:commandButton icon="ui-icon-wrench"
     style="border-width:0;background:none;"/>
</p:column>

Это может помочь избежать кода JavaScript в JSF.

Ответ 4

Если изображение не подходит, добавьте свойства в класс sss:

.button {
    background: white url('button.gif') no-repeat top;
    width: 32px;   // button width
    height: 32px;  // button height
    background-size: contain;
    border: none;  // hide border of button
}