2

解決策を見つけるために長い間ブラウジングしていましたが、適切な答えが見つかりませんでした。RichFaces ライブラリを使用して JSF Web アプリケーションを開発しています。アプリケーションはさまざまなロケールをサポートしており、ユーザーはドロップダウン リストから選択して変更できます。ドロップダウン リストの項目のロケール名に沿ってフラグ アイコンが表示されるようにします。

残念ながら、JSF でそれを行う方法が見つかりませんでした。

ドロップダウン リストの xthml コードは次のとおりです。

<h:panelGroup>
    <h:form id="languageForm" prependId="false">
        <h:outputText value="#{usermsg['locale.select.message']}" styleClass="userMessage"/>
        <h:selectOneMenu id="dropdown" value="#{localeBean.selectedLocale}" onchange="submit()">
            <f:selectItems value="#{localeBean.locales}" />
        </h:selectOneMenu>
    </h:form>
</h:panelGroup>

ここで見つけたように、フラグ アイコンは単純な HTML と JQuery で簡単に作成できます: http://www.ixtendo.com/polyglot-language-switcher-jquery-plugin/

ドロップダウン リスト項目にアイコンを配置するには、次のように、リスト内の各要素に CSS を適用する必要があります。

#en { 
    background-image: url(/resources/images/flags/gb.png);
}

#fr { 
    background-image: url(/resources/images/flags/fr.png);
}

ここでの問題は次のとおりです。

  1. f:selectItems (および f:selectItem) はスタイル プロパティをサポートしていないようです。
  2. javascript を使用してタグにスタイルを適用することもできますが、タグの ID が必要です。これは f:selectItem (と思われる) でも許可されません。

他に考えられるのは、上記のリンクに記載されている JQuery コントロールを使用することですが、ここで別の問題があります。選択したオプションの値を JSF Bean に設定する方法です。つまり、JQuery または Javascript とプレーンな HTML で #{localeBean.selectedLocale} を設定できますか?

PrimeFaces には selectOneMenu コントロールがあり、アイコンhttp://www.primefaces.org/showcase/ui/selectOneMenu.jsf (「Content with Filter」という名前のアイコン) を追加できることがわかりましたが、そうする余裕はないのではないかと心配しています。現時点では、RichFaces から PrimeFaces に切り替えてください。

どんな助けでも大歓迎です。

4

1 に答える 1