Нужна помощь, чтобы отобразить изображение значка в командной кнопке - PullRequest
Новая
       4

Нужна помощь, чтобы отобразить изображение значка в командной кнопке

8 голосов
/ 11 мая 2011

Просто базовая потребность, но не может заставить ее работать.Я хотел бы иметь кнопку с изображением простых лиц для отображения моего изображения без текста.

Но я получаю кнопку, которая содержит только символ ^ и НЕ отображает изображение, которое имеет только размер16x16.

Итак, это кнопка простых лиц: 

<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false">
    <p:dataExporter type="csv" target="gridRPBDetails" 
        fileName="#{tInputBean.exportFilename}" />
</p:commandButton>

Это файл CSS: 

.ui-icon-csv {
    background-image: url(images/csv_small.png);
}

И это сгенерированный html для кнопки: 

<button type="submit" onclick=";" 
    name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    role="button" aria-disabled="false">
        <span class="ui-button-icon-primary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span>
</button>

И чтобы доказать, что изображение доступно, я пробую этот URL, и действительно он показывает картинку: 

http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png

Я использую Tomcat 7, и это мои зависимости: 

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>2.2.1</version>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-impl</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>

Есть идеи, что пошло не так?

Спасибо!

Ответы [ 4 ]

7 голосов
/ 12 мая 2011

После некоторого исследования с использованием firebug я обнаружил, что виновник произошел из CSS-материала, который я определил.

Так что это изменения, которые я сделал, чтобы сделать эту работу.

Кнопка JSF: 

<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false">
    <p:dataExporter type="xls" target="gridRPBDetails" 
        fileName="#{tInputBean.exportFilename}" />
</p:commandButton>

CSS: 

.ui-state-default .ui-icon-xls {
    background-image: url(images/excel_small.png);
}

А вот сгенерированный HTML: 

<button type="submit" title="Excel Document" onclick=";" 
  name="gridRPBDetails:j_idt81" id="gridRPBDetails:j_idt81" 
  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" 
  role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-xls"></span>
    <span class="ui-button-text">ui-button</span>
</button>

Спасибо!

2 голосов
/ 12 марта 2012

запись ui-widget перед именем класса иконки 

.ui-widget .ui-icon-xls {
    background-image: url(images/excel_small.png);
}

.ui-state-default не сделает его видимым в других компонентах, таких как <p:menuitem/> и <p:menuButton/>

2 голосов
/ 24 февраля 2012

Primefaces предоставляют graphicImage, как показано в их showcase-labs (неработающая ссылка) : 

<p:commandLink ajax="false">  
    <p:graphicImage value="/images/excel.png" />  
    <p:dataExporter type="xls" target="tbl" fileName="cars" />  
</p:commandLink>

Это может быть как-то полезно кому-то.

* Для PrimeFaces 5.2 перейдите по этой ссылке showcase-labs .Обратите внимание, что в этом случае приведенный выше код не будет работать.

1 голос
/ 05 мая 2013

Когда используется commandButton, важно, чтобы размер файла png был 16 x 16, потому что увеличенное изображение может отображаться неправильно или не отображаться вообще.

...