JSF PrimeFaces:如何使h:inputText看起来像一个PrimeFaces小部件

Question

我使用的是PrimeFaces 2.2.1。我有一些JSF表单，其中包含常规小部件(如h:inputText、h:selectOneMenu、h:selectBooleanCheckbox等)和PrimeFaces小部件(如p:calendar等)。

PrimeFaces小部件有一个很好的皮肤/主题，常规小部件呈现为正常的HTML小部件。

是否有一种简单的方法来获得非PrimeFaces小部件渲染与PrimeFaces皮肤/主题?

谢谢!rob

[PS。我注意到PrimeFaces 3.0将有p:inputText等，但它还没有出来。():

Answer 1

p: inputttext is in PrimeFaces 2.2+

http://www.primefaces.org/showcase/ui/inputText.jsf

Answer 2

你必须为你的非jsf小部件设计CSS，并有条件地应用它。

假设有一个非jsf日历控件(即组件的主面皮肤变化不会产生影响)

现在您可以在会话中使用一些bean来存储当前皮肤。比如natural_orange现在你可以为你的组件设计css比如natural_orange_calendar.css然后像

<your component css="#{skinManager.currentSkin}_calendar.css">

Answer 3

查看jsf页面的html输出。查看primefaces小部件是如何渲染的以及它们使用了哪些css样式类。

Primefaces使用JQuery UI，所以类名通常以 UI -…开头。对于非primefaces小部件使用相同的类。

来自我的一个项目的例子。这个h:dataTable标头看起来像p:dataTable:

<h:column headerClass="ui-widget-header ui-widget-content ui-state-default">