कमांड बटन

Question

में आइकन छवि प्रदर्शित करने में मदद की ज़रूरत है बस एक मूलभूत आवश्यकता है लेकिन इसे काम पर नहीं मिल सकती है। मैं किसी भी पाठ के बिना, मेरी छवि को प्रदर्शित करने के लिए एक प्राइमफेस बटन रखना चाहता हूं।

लेकिन मुझे जो मिलता है वह एक बटन है जिसमें केवल ^ वर्ण होता है और वह छवि प्रदर्शित नहीं करता है, जिसमें केवल 16x16 का आकार होता है।

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

---

इस सीएसएस फ़ाइल है::

---

तो, यह primefaces बटन है

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

---

और इस बटन के लिए उत्पन्न एचटीएमएल है :

<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 

---

इम बिल्ला 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> 

---

कोई भी विचार क्या गलत हुआ ?

धन्यवाद!

Answer 1

फायरबग का उपयोग करके कुछ जांच के बाद, मुझे पता चला कि अपराधी सीएसएस सामग्री से परिभाषित है।

तो ये परिवर्तन मैं इस काम को करने के लिए किए गए परिवर्तन हैं।

---

JSF बटन:

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

---

सीएसएस:

:

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

---

और यहाँ उत्पन्न एचटीएमएल है

---

धन्यवाद!

Answer 2

Primefaces graphicImage प्रदान के रूप में उनके showcase-labs (broken link) में दिखाया गया है:

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

यह किसी के लिए किसी न किसी प्रकार में उपयोगी हो सकता है।

---

_{* For PrimeFaces 5.2, follow to this showcase-labs link। ध्यान दें कि, उस स्थिति में, उपर्युक्त कोड काम नहीं करेगा। आइकन वर्ग के नाम}

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

.ui-state-default यह <p:menuitem/> और <p:menuButton/>

Answer 3

लिखने ui-widget, कि png फ़ाइल आकार होना महत्वपूर्ण है 16 x 16, क्योंकि एक बड़ी छवि सही ढंग से प्रदर्शित नहीं की जा सकती है, या बिल्कुल प्रदर्शित नहीं हो सकती है।

Answer 4

जब commandButton प्रयोग किया जाता है जैसे अन्य घटकों में दृश्यमान नहीं होगा पहले