css - 画像とボタンラベルを使用してJSFボタンを実装する方法

Question

画像とカスタムラベルを使用して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');
}

結果は次のとおりです。

この2番目のコードもテストしました。

<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ボタンを作成するのを手伝ってもらえますか？

Answer 1

使用した最初の方法、styleClass="avesettings"つまり CSS スタイルを使用することが唯一可能な方法です。これは、image 属性を指定すると、input 要素が画像になるためです。

ドキュメントも参照

したがって、ボタンに高度なスタイリング手法を使用するのが最善の策です。それについては、次の記事を参照してください。

• http://coding.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
• http://www.tyssendesign.com.au/articles/css/styling-form-b​​uttons/

Answer 2

commandButton タグの「image」属性は試しましたか？

Answer 3

これを実装する 1 つの方法は、スタイル シートで jsf リソースとしてイメージをロードすることです。

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

次に、関連する commandButton styleClass を xhtml に設定します。

    <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'>] 
        }

Answer 4

次の 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 の幅と高さは、画像の幅と高さに合わせる必要があります。また、JSFテンプレートに直接ではなく、外部cssファイルにcssがあります。