2011-04-13 24 views
2

我正在使用PrimeFaces 2.2.1。我有JSF窗体与常规小部件(如h:inputText,h:selectOneMenu,h:selectBooleanCheckbox等)和PrimeFaces小部件(如p:日历等)的组合。JSF PrimeFaces:如何使h:inputText看起来像PrimeFaces小部件?

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

有没有一种简单的方法让PrimeFaces小部件呈现PrimeFaces皮肤/主题?

谢谢! rob

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

+0

Primefaces 3.0 M1超出。 http://www.primefaces.org/downloads.html 而且,如果您想要流血的边缘,您总是可以构建快照版本。 – 2011-04-21 12:25:35

回答

1

你必须有CSS设计用于非JSF部件和有条件地应用它。

更新

假设有其primefaces皮肤变化赢得了”非JSF日历控件(即组分牛逼的效果)

现在你可以在会议上有一些bean来存储当前的皮肤。例如说natural_orange现在你可以设计的CSS为您的组件说natural_orange_calendar.css并应用它像

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

谢谢。你有没有可能详细说明或给我一个简单的例子? – 2011-04-13 18:31:10

+0

补充说明 – 2011-04-13 18:35:22

1

查看您的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">