CODEWITHSUNDEEP
cssjsfjsf-2
user1285928
user1285928

Reputation: 1476

How to implement JSF button with image and button label

I want to implement JSF button with image and custom label. I tested this code:

<h:commandButton id="savesettings" styleClass="avesettings" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

.avesettings {
    background-image: url('../images/small.png');
}

This is the result:

enter image description here

I also tested this second code:

<h:commandButton id="savesettings" image="resources/images/first.png" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

I get this result with no label:

enter image description here

Can you help me to create JSF button with background image and custom label defined as button attribute?

Upvotes: 2

Views: 10523

Answers (4)

Uooo
Uooo

Reputation: 6334

The following JSF/CSS should solve your problem:

JSF (the same as in your first example):

<h:commandButton id="savesettings" styleClass="avesettings" value="Save Settings" action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

CSS (adapted):

.avesettings {
    background: url('../images/small.png') no-repeat;
    cursor: pointer;
    width: 126px;
    height: 41px;
    border: none;
}

Width and height of the css must be the width and height of your image. I also have the css in an external css file, not direct in the JSF template.

Upvotes: 1

StephenMeyer
StephenMeyer

Reputation: 196

One way to implement this is to load the image as jsf resource in your style sheet:

    <style type="text/css">
        .imageButton
        {
            background-image:url(#{resource['images/button.png']});
        }
    </style>

Then set the relevant commandButton styleClass in the xhtml:

    <h:commandButton value="Submit" styleClass="imageButton" action="#{...}"/>

Put the file button.png under your resources folder i.e. resources/images/button.png and make sure your resources folder is located next to your WEB-INF folder

Or if you want the image to display as an icon next to the text in the commandButton then you can play around with css a little:

        .imageButton
        {
            padding: ...
            border: ...
            color: ...
            background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] 
        }

Upvotes: 1

Ravi Kadaboina
Ravi Kadaboina

Reputation: 8574

The first method that you have used styleClass="avesettings" i.e., using CSS style is the only possible way to do it since if you specify the image attribute, the input element will become an image.

See also documentation

So your best bet would be to use advanced styling techniques for the buttons, refer to these articles for that:

Upvotes: 2

kothvandir
kothvandir

Reputation: 2161

Did you try the "image" attribute of he commandButton tag?

Upvotes: 1

Related Questions