BootsFacesJSFresponsive designsimpliying JSFweb design

What’s New in BootsFaces 1.0?

Fork me on GitHubBootsFaces 1.0 has been released. Actually, we’ve already published the first bugfix release, BootsFaces 1.0.1. I was a bit shy to proudly announce the 1.0.0 version because we had so many obstacles to overcome. Apart from the usual obstacles like exhausting projects at work (and they were exhausting this time!), there were also the earthquakes in Italy, which kept at least one of our team members busy, although they didn’t suffer any physical harm.

Be that as it may, BootsFaces 1.0 (and 1.0.1 in particular) is a great step to maturity. It’s the first version we officially call “production-ready”. Truth to tell, we were always convinced you can safely use BootsFaces in production. But most versions we’ve published in the past focused on features. This time we tried to focus on stability instead of new features when we prepared the 1.0 version. I counted 26 bugfixes that were important enough to open a bug ticket. Plus, almost twenty minor enhancements and three new components. However, we also added one or two major improvements, such as adding support for both horizontal and inline forms.

Download coordinates

Before starting the long list of details, let me provide you with the download coordinates:

Add these lines to your project’s pom.xml:

<dependency>
    <groupId>net.bootsfaces</groupId>
    <artifactId>bootsfaces</artifactId>
    <version>1.0.1</version>
    <scope>compile</scope>
</dependency>

Add this line to your project’s .gradle build file:

compile 'net.bootsfaces:bootsfaces:1.0.1'

The BootsFaces project comes with both a Gradle build file and a Maven build file. The Maven pom.xml is the easy way to get started and should suffice for most purposes. Only if you want to tweak and optimize BootsFaces, you need the Gradle build. In particular, the Maven build doesn’t generate the CSS and JS files itself, but relies on the output of the Gradle build. By the way, that’s the reason why we keep the generated file in GitHub.

In any case, the URL of the repository is https://github.com/TheCoder4eu/BootsFaces-OSP.

Update Dec 27, 2016: Bugs

During the last couple of days, we’ve found and fixed a couple of bugs. If you happen to run into a bug, check our bug tracker if we’ve already solved the bug, and check out the sneak preview version of BootsFaces 1.1.0-SNAPSHOT. Strictly speaking, this version is not intended to use productively. Use at own risk. Of course, BootsFaces is published under an Apache V2 license, so every version of BootsFaces is published on an “as-is” basis, without any warranties. The difference between the snapshot and the final version is that we’ve tested the final version more intensively.

Patternfly

We’ve added initial support for Patternfly. Strictly speaking, Patternfly is a full-blown HTML5 UI framework. However, it’s a good match to Bootstrap, so we were able to integrate it as a theme in BootsFaces.

New components

We’ve added three new components:

  • b:video is a simple component displaying videos
  • b:kebab is a very compact drop-down menu
  • b:radioButton gives you the freedom to place your radiobutton where you need them. Standard JSF only allows you to put them into a common div, which usally means to stack them on top of each other. Funny thing is, that only a few week after we’d implemented b:radioButton, the OmniFaces team integrated the same feature in JSF 2.3.

Enhancements

Most of the enhancements are too small to list them all. I’d rather pick four enhancements that have to do with search expressions. We’ve added four search expressions to BootsFaces. You can use these search expressions in the update and process attributes of AJAX components.

  • @property() take the EL expression of a bean attribute as parameter and returns every JSF element containing this attribute. This may be useful when reporting a FacesMessage from a backend bean. In this case, you don’t know neither the HTML id nor the CSS classname, but you probably know the root bean. Hence, you already know the fully qualified name of the attribute.
  • @root That’s a search expression we’ve basically added to be compatible to PrimeFaces. @root is the root of the JSF tree.
  • @styleClass(<myclass>) finds every JSF element bearing the attribute styleClass="<myclass>". That’s more or less identical to the jQuery version @(.<myclass>). However, the jQuery version is executed on the client, and it always covers the entire DOM tree.
  • You can now use the advanced search expressions of BootsFaces with standard JSF. You can activate this feature by adding a new tag decorator to your web.xml: the SearchExpressionsTagDecorator. Read the full story at our showcase.

Horizontal and inline forms

For some reason unknown, we’d implemented the inline attribute in input fields, but the solution was buggy. I only got aware of the problem when I watched a developer using clever workarounds to solve the problem. After looking at the Bootstrap documentation, I noticed that the attribute inline doesn’t belong to the input field, but to its surrounding form or div. This allowed us to solve the problem while still remaining compatible to the old workaround. If you continue using the old API, BootsFaces generates the old code which is – strictly speaking – buggy. It goes without saying that we recommend using the new API. Sooner or later, we’ll call the old API deprecated and remove it.

In order to solve the problem, we’ve introduced <b:form />. That’s the same as the traditional <h:form />, plus the option to add the attributes inline="true" or horizontal="true".

<b:form horizontal="true">
  <b:row>
    <b:column medium-screen="full" rendered="true">
      <b:inputText label-small-screen="4" small-screen="8" 
             label="b:inputText" render-label="true"
             />
    </b:column>
    <b:column medium-screen="full" rendered="true">
      <b:inputTextarea label-small-screen="4" small-screen="8" 
               label="b:inputTextarea" render-label="true"/>
    </b:column>
  </b:row>
</b:form>

BootsFaces automatically renders labels (unless you configure it not to do so). This required us to add the “responsive” attributes like label-small-screen or label-col-md to every input field. This was another large-scale restructuring of the code that wouldn’t be possible without our code generator. Even so, we had some trouble to get it up and running. Under certain circumstances, AJAX was broken in the 1.0.0 release. The new release 1.0.1 fixes these problems.

Data table

We’ve also polished the data table a lot. As it turns out, our data table is a tremendously popular component, so a lot of effort went into it. Among other things, it now supports requests triggered by buttons in a row – both with and without AJAX.

AJAX

Talking of AJAX: that’s another popular feature. So I was pretty surprise to learn that one of our oldest components, < b:datePicker />, didn’t support AJAX yet. We’ve fixed that, along with a couple of other AJAX-related bugs. However, the < b:selectMultiMenu /> and the new < b:dateTimePicker /> don’t support AJAX yet. That’s top on our list.

Bye, bye, jQueryUI

If you wonder why we’ve got both < b:datePicker /> and < b:dateTimePicker />: we want to get rid of jQueryUI. To achieve this goal, we’ve started to re-implement the few components based on jQueryUI. The old < b:datePicker /> is to be replaced by < b:dateTimePicker />, and < b:slider /> is going to be replaced soon, too. Currently, the new component is called (guess what!) <b:slider2 />. Once we’ve finished and polished the new component, we’re going to rename it, so you won’t notice the difference. When we’ve managed that, we can remove jQueryUI from BootsFaces, thus reducing the memory footprint of BootsFaces and – more important – removing a source of compatibility issues. In particular, you’re going to be free to choose whichever version of jQueryUI you need without having to care about compatibility to BootsFaces.

Kudos

Honestly, I’ve lost track of whom we have to thank. During the last half year, we had countless interactions with developers who reported bugs, suggested ideas, sent us pull requests and helped us to test the framework. Suffice it to say that you rock! BootsFaces couldn’t be where it is now without the diligent work of the open source community. Your contribution matters!

Getting involved

Talking about contributing to BootsFaces: if you want to help the BootsFaces story, that’s easy. You don’t have to contribute us a full-featured new component, although we’d appreciate that, too. But if you’re like me, you’d probably like to start with less effort. For instance, it helps us a lot if you don’t get angry when you detect an error in BootsFaces and leave it at that, but open a bug report on our bug tracker. We can do little about your anger, but we can do our best to fix the bug and prevent other developers from getting angry about the same bug, too. Asking or answering questions about BootsFaces on StackOverflow helps, too. You can also request new features. And of course, we already happily received pull requests fixing bugs or adding new features.

Wrapping it up

The BootsFaces story continues. Version 1.0 is a big step to maturity. To my surprise, we still have many ideas how to improve BootsFaces. But, truth to tell, 75 components is more than enough to build professional enterprise applications, and adding PatternFly is another step in this direction. By the way, we’d like to hear from you. What’s your experience with BootsFaces, and how do you use it?


Dig deeper

BootsFaces project page
BootsFaces showcase (aka known as manual)
BootsFaces on GitHub
BootsFaces bugtracker
Sourcecode of the showcase
BootsFaces example projects
Patternfly


4 thoughts on “What’s New in BootsFaces 1.0?

  1. 1.0.1 threw this error: org.apache.catalina.core.StandardWrapperValve invoke which I didn’t have in 0.8.5.

    this is error is pertaining to b:messages component.

    so in other words, if all else remains the same and when I switch to 1.0.1 from 0.8.5, i run into that error.

    The reason I had to upgrade to 1.0.1 was due to the fact that 0.8.5 didn’t have b:dataTableColumn

    1. As much as I’d love to help you, it’s difficult with so little information. First of all, the real error message is probably behind or below the StandardWrapperValve line. Second, I don’t know what your program looks like. Would you mind to fill in some details?

      Thanks in advance!
      Stephan

  2. Bootsfaces, my favorite JSF framework!
    I’m interested in the patternfly integration, however on the showcase pages there is no mention of it. How do i use it?
    thx & keep up the great work.

    1. Currently, Patternfly is simply a BootsFaces theme. You can choose it in the combobox at the upper right corner of the showcase. I’ll cover Patternfly in more detail on BeyondJava.net soon.

Leave a Reply

Your email address will not be published.