JSF PrimeFaces : how to make h:inputText look like a PrimeFaces widget?

Question

I'm using PrimeFaces 2.2.1. I have JSF forms with a combination of regular widgetss (like h:inputText, h:selectOneMenu, h:selectBooleanCheckbox, and so on) and PrimeFaces widgets (like p:calendar, and so on).

The PrimeFaces widgets have a nice skin/theme, the regular widgets render as normal HTML widgets.

Is there an easy way to get the non-PrimeFaces widget render with the PrimeFaces skin/theme?

Thanks! rob

[PS. I notice PrimeFaces 3.0 will have p:inputText and so on, but it's not out yet. :( ]

Answer 1

p:inputText is in PrimeFaces 2.2+

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

Answer 2

You have to have CSS designed for your non jsf widgets and apply it conditionally.

Update

Suppose there is non jsf calendar control (ie component which primefaces skin change won't effect)

Now you can have some bean in session to store current skin. for example say natural_orange now you can design css for your component say natural_orange_calendar.css and apply it like

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

Answer 3

Look into the html output of your jsf page. Find how the primefaces widgets get rendered and which css style classes they use.

Primefaces uses JQuery UI so the class names usually start with ui-... . Use the same classes for your non-primefaces widgets.

Example from one of my projects. This h:dataTable header looks like a p:dataTable :

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