Navigation and AJAX

Since 0.8.0 Most JSF applications benefit tremendously from AJAX. This includes navigation between different JSF views of your application. If done consequently, your BootsFaces looks and feels almost like a single page application (SPA) build on, say, AngularJS. See the demo below to convince yourself.

However, there are two surprises and a bug.

Live preview

That's the start.xhtml.

Resource loading

BootsFaces tries to keep the memory footprint as low as possible. Among other things, this means that it only loads the CSS and JavaScript code required by the current JSF page. If you use AJAX to replace parts of your page, BootsFaces doesn't check if it has to load additional CSS or JavaScript files. This results in pages containing incomplete components.

You can force BootsFaces to pre-load the required files by adding those components to the first page. Obviously, you don't have to render these components, so you set rendered="false":


Most JSF developers are used to use templates to embed their payload pages into a common application framework. For example, this showcase uses a template page to provide the main menu and the footer of each page.

As is turns out, it's better to think the other way round to make the most of AJAX. Funny thing is that's the traditional way of thinking. Instead of embedding your page into a common template, you take the common template and include the individual page in it. That's best accomplished by using <ui:include /> with an EL expression pointing to the current payload page. The demo below shows the idea.

Live preview

That's the start.xhtml.

JavaScript memory leak

Many components of BootsFaces are jQuery components that should be removed when their HTML tags are removed by an AJAX request. We've already started to investigate the topic (see Bug #220) of our bug tracker). However, the memory leak should be small. Chances are your application has been closed by the user long before the memory leak starts too slow things down.