如何使用图像和按钮标签实现 JSF 按钮答案

【问题标题】：How to implement JSF button with image and button label如何使用图像和按钮标签实现 JSF 按钮
【发布时间】：2012-08-15 03:33:18
【问题描述】：

我想用图像和自定义标签实现 JSF 按钮。我测试了这段代码：

<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');
}

这是结果：

我还测试了第二个代码：

<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>

我得到这个没有标签的结果：

你能帮我创建一个带有背景图像和自定义标签定义为按钮属性的 JSF 按钮吗？

【问题讨论】：

标签： css jsf jsf-2

【解决方案1】：

下面的 JSF/CSS 应该可以解决你的问题：

JSF（与您的第一个示例相同）：

<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（改编）：

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

css 的宽度和高度必须是图片的宽度和高度。我还有一个外部 css 文件中的 css，而不是直接在 JSF 模板中。

【讨论】：

您仍应将 small.png 作为资源加载 - 即 url(#{resource['images/small.png']})。然后将 css 包含为资源 - 即
我们如何添加引导图像（字形图标）？

【解决方案2】：

实现这一点的一种方法是将图像作为 jsf 资源加载到您的样式表中：

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

然后在xhtml中设置相关的commandButton styleClass：

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

将文件 button.png 放在资源文件夹下，即 resources/images/button.png 并确保资源文件夹位于 WEB-INF 文件夹旁边

或者，如果您希望图像在 commandButton 中的文本旁边显示为图标，那么您可以稍微玩一下 css：

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

【讨论】：

【解决方案3】：

您使用的第一种方法styleClass="avesettings"，即使用 CSS 样式是唯一可行的方法，因为如果您指定图像属性，输入元素将变为图像。

另见documentation

因此，最好的办法是对按钮使用高级样式技术，请参阅以下文章：

【讨论】：

能否请您告诉我必须如何实现源代码？

【解决方案4】：

你试过"image" attribute的commandButton标签吗？

【讨论】：

是的，第二个例子使用image属性。但它没有按我的意愿工作 - 按钮上没有标签 - 只是空按钮。
抱歉没有注意到。如果已应用图像，您可以使用 firebug 进行检查吗？
是的，这是输出 HTML 代码：<input id="settingsupdate:savesettings" type="image" onclick="mojarra.ab(this,event,'action','@form','@form');return false" name="settingsupdate:savesettings" src="resources/images/first.png">，视觉结果是帖子中没有标签的第二张图片。
我认为代码是正确的。您可以在萤火虫“网络”标签中检查您没有收到 403/404 的图像吗？
我得到了正确的图像。 “网络”选项卡中没有错误。