Apply the style of Primefaces to a vanilla jsf component?

Question

I use Primefaces for my JSF app. In one page I have to use <h:inputFile> instead of the <p:fileUpload> equivalent. As a result, it renders without the Primeface style:

How can I apply the Primeface css style to <h:inputFile>? (to make it look like a Primefaces button for instance)

score 0 · Answer 1 · answered May 02 '21 at 08:34

Have a look at how the basic p:fileUpload is rendered. Copy the outputted HTML for the component and you are almost there.

You will notice that the actual input type="file" has an attribute tabindex="-1", which you need add to your component. You should use a passthrough attribute to do so. See: Custom HTML tag attributes are not rendered by JSF. So, add this namespace: xmlns:a="http://java.sun.com/jsf/passthrough".

Another thing you need to take care of, is loading the stylesheets PrimeFaces is using to style the upload component. To do so, add:

<h:outputStylesheet name="components.css" library="primefaces"/>
<h:outputStylesheet name="fileupload/fileupload.css" library="primefaces"/>

Note that you can leave out components.css if you are using other PrimeFaces components on your page.

In the end, your upload component will look like:

<span class="ui-fileupload-simple ui-widget">
    <span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
        <span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"></span>
        <span class="ui-button-text ui-c">Choose</span>
        <h:inputFile a:tabindex="-1"/>
    </span>
</span>

Please note that you will be missing interactivity which is added to the PrimeFaces component by its JavaScript! My advice, just use p:fileUpload.

Apply the style of Primefaces to a vanilla jsf component?

1 Answers1