Richfaces4 : Button add icon and text

Support for richfaces4

ตัวอย่าง สร้างปุ่ม บน richfaces4 ให้มีทั้ง icon และข้อความบนปุ่ม
เนื่องจาก richfaces4 นั้น ไม่ได้ทำ support ทั้งสองแบบนี้ในปุ่มเดียว
แต่ ถ้าใช้ primefaces นั้นจะมีให้แล้ว

และอีกจุดประสงค์คือ เราต้องการให้ stylesheet เดิมยังคงอยู่เพื่อ
ไม่ต้องทำการเพิ่มงานในส่วน design อีก

ในที่นี้เราจึงเอา link ครอบปุ่ม เนื่องจาก ณ ตอนนี้ ปุ่มที่เป็น a4j:commandButton
ของ richfaces4 ยังไม่ support เรื่องแสดง Icon พร้อม text

เขียนปุ่มบน Html file

<a4j:commandLink 
    actionListener="#{remainStatusAction.add}" 
    oncomplete="#{rich:component('enr006_01_01_Modalpanel_add')}.show()">
        <button type="button">
            <div class="btn_add_icon">
            </div>
            <div class="btn_text">
                <h:outputText value="#{msg['btn.msg.add']}">
                </h:outputText>
            </div>
        </button>
</a4j:commandLink>

<a4j:commandLink 
    actionListener="#{remainStatusAction.add}" 
    oncomplete="#{rich:component('enr006_01_01_Modalpanel_add')}.show()">
        <button type="button">
            <div class="btn_save_icon">
            </div>
            <div class="btn_text">
                <h:outputText value="#{msg['btn.msg.save']}">
                </h:outputText>
            </div>
        </button>
</a4j:commandLink>

กำหนด css เพื่อใส่ Icon image และการวางข้อมูลบนปุ่ม

.btn_text{
 float:left;
}

.btn_save_icon{
 float:left; 
 width:20px;
 height:16px; 
 background-image: url(/EDUPTWeb/resources/images/save.png); 
 background-repeat: no-repeat; 
 background-position: left;
}

.btn_add_icon{
 float:left; 
 width:20px;
 height:16px; 
 background-image: url(/EDUPTWeb/resources/images/icon_add.gif); 
 background-repeat: no-repeat; 
 background-position: left;
}

reference site : https://community.jboss.org/message/718169#718169