JSF – using webjars resources with images and/or icons

Goal

Using a stylesheet importer from a webjar resource that refers to an image or icon without the specification of the library URL

Description

In my latest projects with JSF, I have been trying to use JS and CSS libraries that are imported as webjars (I usually use Maven too, so it’s very easy to include such a dependency). However, in some cases, such as the font-awesome dependency, the reference to the fonts is not made with the #resource notation, which leads to problems in loading the icons.

How to

This recipe is based on the answer from BalusC in stackoverflow.

Basically, and because the reference to the fonts is not using the #resource notation, and because the file is being included, i.e., we cannot change the source file to use that notation, we need to tell JSF that this file will be handled by ourselves.

In this recipe, we will use UnmappedResourceHandler from omnifaces exactly for that purpose:

  1. Include omnifaces in the project. If you use maven, the following should do the trick:
    <dependency>
      <groupId>org.omnifaces</groupId>
      <artifactId>omnifaces</artifactId>
      <version>[ominifaces-version-here]</version>
    </dependency>
    
  2. Register UnmappedResourceHandler in faces-config.xml as follows:
    <application>
      <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
    </application>
    
  3. Add /javax.faces.resource/* to FacesServlet mapping in web.xml, assuming that the servlet name is facesServlet and you’ve already a mapping on *.xhtml:
    <servlet-mapping>
      <servlet-name>facesServlet</servlet-name>
        <url-pattern>/javax.faces.resource/*</url-pattern>
        <url-pattern>*.xhtml</url-pattern>
      </servlet-mapping>
    
  4. Do not use the library attribute of the <h:outputStylesheet>. Instead, use only the name to refer to the full path of the resource:
    <h:outputStylesheet name="webjars/font-awesome/[font-awesome-version]/css/font-awesome.css" />
    
  5. Finally, and if you hadn’t that before, don’t forget to define the mime-mappings for the fonts in web.xml:
    <!-- web fonts -->
    <mime-mapping>
        <extension>eot</extension>
        <mime-type>application/vnd.ms-fontobject</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>otf</extension>
        <mime-type>font/opentype</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>ttf</extension>
        <mime-type>application/x-font-ttf</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff</extension>
        <mime-type>application/x-font-woff</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff2</extension>
        <mime-type>application/x-font-woff2</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>ico</extension>
        <mime-type>image/x-icon</mime-type>
    </mime-mapping>
    

Explanations

No further explanations seem necessary for this recipe.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s