2011-04-13 49 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">