Dealing with resource filesimproved in 0.8.0

The BootsFaces jar contains many CSS and JavaScript files. You don't need external resource files to use BootsFaces. However, many developers and web designers aren't happy with that. These are basically the reasons for using external resources:

• Many resource files BootsFaces uses are also provided by CDNs. Using a CDN reduces your server's load, and in many cases CDNs serve the files faster.
• Often developers want to use their own versions of our JS or CSS libraries.
• Sometimes another framework already add its own instance of jQuery (or anather library we need).
• BootsFaces doesn't serve the entires jQueryUI library. Instead, it tries to optimize the network traffic by serving the jQueryUI modules individually. That's a good choice with respect to http/2, but currently this approach slows things down.
• In rare cases, developers want to modify the resource files BootsFaces provides.

To serve all these requirements, we've implemented quite a few options to influence which files are loaded and which are not.

jQuery and jQueryUI

In general, BootsFaces goes into some lengths to decide which libraries to load, and when. Among other things, BootsFaces modifies the order of JavaScript libraries if need be:

• jQuery.js is always loaded first.
• jQueryUI.js is always loaded second.
• bsf.js is always loaded last.

If you provide your own version of jQuery (i.e. if there's a <h:outputScript library="(whatever)" name="(whatever)/jQuery-(whatever).js" />), BootsFaces doesn't add its own jQuery. Its up to you to make sure your jQuery is compatible to BootsFaces. Our mechanism to detect whether you add jQuery or not is fairly flexible. It checks whether the resource name contains the substring "jquery" and ends with ".js". Plus, it's case-agnostic.

The some applies to jQueryUI. In this case, we check for the sub-string "jquery-ui".

Font Awesome

If you provide your own version of FontAwesome, BootsFaces doesn't load its own version of FontAwesome. We're looking for resource files containing the sub-string "font-awesome" or "fontawesome" and ending with ".css". Again, we ignore the case.

You can suppress Font Awesome on a per-page basis by adding the facet "no-fa" to the <h:head /> of your XHTML file.

Configuring resources via theweb.xml

Alternatively, you can configure your web.xml to suppress certain resources:

• Setting the context parameter net.bootsfaces.get_fontawesome_from_cdn to "yes" or "true" allows you to provide your own Font Awesome file.
• Setting the context parameter net.bootsfaces.get_datatable_from_cdn to "yes" or "true" allows you to provide your own DataTables.js and dataTables.css file. Also see the explanation in the section below.
• Setting the context parameter net.bootsfaces.get_jquery_from_cdn to "yes" or "true" allows you to provide your own jQuery file.
• Setting the context parameter net.bootsfaces.get_jqueryui_from_cdn to "yes" or "true" allows you to provide your own jQueryUI file.
• Setting the context parameter net.bootsfaces.get_bootstrap_from_cdn to "yes" or "true" allows you to provide your own Bootstrap CSS file. Note that this option is a bit difficult to get up and running. BootsFaces modifies the original Bootstrap files. That's only a handful of lines of code, but be warned. Currently, we're aware of changes in these files:
  • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/less/bs-navbar.less
  • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/less/bs-thumbnails.less
  • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/jq/ui/datepicker.js

Using <b:dataTable /> behind a restrictive firewall, or how to use your own version of datatables.min.js

There are many reasons to stray away from the way BootsFaces loads the JavaScript and CSS files of it's datatable. In most cases, it's because of the firewall. Some time ago, we tried to improve both the memory footprint and the UI performance of BootsFaces by dropping our own copy of the JavaScript and CSS resource files of <b:dataTable />. Since version 1.2.0, BootsFaces loads these file from a super-fast CDN. Before long, our friends from LiferayFaces informed us that this is a no-go in many companies. The firewall doesn't allow to load JS files from outside.

So we follow the same approach you've already seen for jQuery above:

• Setting the context parameter net.bootsfaces.get_datatable_from_cdn to "yes" or "true" allows you to provide your own DataTables.js and dataTables.css file. This means it's up to you to add these files in a <script> or <h:outoutScript>.
• BootsFaces scans the header, the body, and the form for <h:outputScript library="whatever" name="*datatables*.js /> and <h:outputStylesheet name="*datatables*.css />. If it finds something like this, it prevents the corresponding file to be loaded from the CDN. BootsFaces even ignores the case to give you maximum flexibility.

Defining when your resource files are loaded (aka load order)

If you need to place your CSS or JS file before or after the other resource files, you can use the attribute position of the <h:outputStylesheet />. This is a non-standard attribute, so chances are your IDE complains about it. If so, make it a pass-through attribute.