Collapse.JS creating a dropdown icon on panel heading

Standard

By default Bootstrap 3 comes integrated with CollapseJS which offers expandable accordion like panels. These panels are very simple to setup and work great. However, since the font is uncolored it may not be obvious to some users that this panel expands.

Not collapsible

Not user friendly

Using pure CSS a dropdown icon can be placed on all panels that you create. The css places the icon after the link, and switches the icon to a down arrow once the panel has been expanded.

The CSS


The result

appearscollapsible

Appears to be collapsible

 

The result is a more user intuitive collapsible panel. The main difference between using the Primefaces collapsible panel and the bootstrap js version is data accessibility. Primefaces will call a ajax event once the panel is to be rendered. Whereas CollapseJS will have already loaded the data from the backend bean. This may require you to update at the prerendered content manually, but the benefits of self managing the panels far outweighs the negatives.

Bootstrap3 with JSF error handling

Standard

JSF applications often get called ugly, or cookie cutter. The over use of the components and built in CSS creates the standardized look, but lacks flexibility. Using Bootstrap 3 CSS in combination with JSF attributes you can create a modern look. Take for example this salary sample salary calculator program which leverages JSF components.

Bootstrap 3 + JSF

The following code is used to create the amount input area.

This technique uses bindings to get the validation state of the inputText component. More information can about component bindings can be read on my other article “What is a JSF component binding? How can I use it?“. By intermixing both JSF + Bootstrap you can see how simple it is to give your app a modern look.

 

Primefaces bootstap styling loading modal

Standard

Building enterprise level application often requires loading large amount of data. This process can take some time. To provide a quality experience end users expect loading screens. This informs the user that they are interacting with the application.

Using Primefaces and Bootstrap 3 javascript you can easily alert end users when the server is working on processing data.

Consider the case of an end user is searching a database for collection of cars. The database may contain N amount of cars. Therefore, we must assume the process could take up to several hundred milliseconds. This is perfect situation for a loading bar.

The modal

The modal is a standard Bootstrap 3 Modal and has a simple progress bar. In the footer there is a reloading link in case the ajax call fails to return a response from the server.

Primefaces events

The commandLink component of primefaces offers many great features. The most useful for this senario is the onstart and onsucess event. Onstart executes a javascript method when the ajax request begins to the server, the oncomplete executes a method when the response of returned from the server. There is no guarantee that the response will come back, this is why the modal has the reloading link.

Using this commandLink, it will call the bootstrap modal library to show, then hide the processing modal defined above. This will give the end user a better interaction with the server.

Bootstrap 3 + Primefaces 5 datatable styling

Standard

Using the default theme libraries supplied by Primefaces can make developing a custom look difficult. Having to override / make your own entire primefaces theme becomes painful; bootstrap 3 is the solution. Marrying Primefaces 5 component library and Bootstrap 3 renders a uniform design.

The following is a typical look of the Primefaces “boostrap” theme. Notice the headers on the columns as they have a background image. This design also lacks some functionality with different sized browsers.

Primefaces boostrap theme

Typical primefaces boostrap theme design

Utilizing the bootstrap 3 libraries the table can become responsive, have better design, and require little coding. Notice the difference in various design elements.

Disabled the default theme

Bootstrap 3 with Primefaces 5 theme disabled

To marry primefaces and boostrap 3 it requires 3 steps; modifying the web.xml, setting class properties on the datatable, and overriding some default Primefaces css.

Web.xml

The Primefaces community supplies roughly 40 themes to choose from. We however, are not going to use any of them. Place the following code in your web.xml

Setting the property above assures only the base styling will be rendered.

XHTML Page

On the desired page output a dataTable and attach the tableStyleClass attribute to it. The “table” and “table-striped” are Bootstrap css classes. Surround the entire dataTable with a div tag class “table-responsive”. The dataTabe is now responsive utilizing bootstrap css.

Extra CSS

The default Primefaces css may still interact with the above dataTable rendering unwanted borders. The solution is to reset the css ui-datatable class generated by Primefaces like so:

HTML5 input type=”date” with javascript fallback

Standard

HTML5 brings great new features which will ease development. However, currently there is a gap between browsers that support HTML5 attributes and those who do not. As of October around 60% of desktop browsers and 80% of mobile devices are HTML5 compliant. This means developers still need support the additional 40% which fallback techniques.

HTML5 date input field

A good example is the new date input field. If your browser is HTML5 compliant it generate a date picker for you to use automatically, thus only requiring the developer to create the input field as so:

If the browser does not support HTML5 then no restriction on the date format will occur. This is why javascript is a beautiful tool.

Providing a fallback

Using a combination of Modernizr, jQuery, and bootstrap-datetimepicker javascript libraries a HTML5 date field can be emulated. Modernizr is a library use for feature detection. It can recognize if the HTML5 date object is available to the browser. If the date object is not available then the bootstrap-datetimepicker will bind to the input and provide a calendar for the user.

The following is the javascript which a datetime picker to the input field below if necessary.

The input field has classes attached that are from the bootstrap 3 library. These libraries add a hint of design to the end result.

Note: In this example I used the bootstrap-datetimepicker library, however any javascript date picker may be substituted in its place. The following libraries were used: bootstrap3, modernizr, momentjs (required by bootstrap-datepicker), and jQuery 2.1.0.

A example of this project can be seen on JSFiddle.

JSF session based queued flash messages

Standard

This article is intended to expand on the first article “JSF Bootstrap Style Validation” by adding sessions to store messages between views.

Other examples use getFlash() or phase listeners to intercept the messages:

This solution uses session map instead to store the messages in between views. Using this class will allow for messages to sit in the queue until they are rendered out, this could happen 1,2,3…. pages later.

These two methods when added to the existing getMessages and queueMessage methods add session based messaging. Saving messages is handled by storing all queued messages into the existing faces session map. Then when we restore all messages it grabs the messages from the session map and adds them back to the current facesContext for rendering.

Looking for the rest of the code? View the first article “JSF Bootstrap Style Validation” or checkout the code on found on Github.

Bootstrap 3 sidebar navigation

Standard

The default navigation in bootstrap works great for many purposes. But suppose you require a sidebar navigation that has additional options for the page you are accessing. Using the styles of navbar-default you can extend the navigation bar functionality. In this example, I will use another navigation which I call secondary-nav to create a vertical menu on which will be displayed on the left hand side of the screen.

Full width sidebar:

Uncompressed sidebar

Uncompressed sidebar

When compressed:

Compressed sidebar using media queries

Compressed sidebar using media queries

The html is straightforward. The main addition to the default bootstrap css example is I have wrapped the entire navbar in my new class secondary-nav.

What makes the navigation compact is media views. Media views allow you to target elements based on screen size, device-orientation or display-density. In the case of our secondary navigation we would like it to go into a compact menu once the screen width is below 768px.

See a working example on JSFiddle.

JSF Bootstrap style validation

Standard

In this example, I provide a solution to the problem of needing to display errors specific to a form on a page. This solution was developed due to the need to have multiple forms on the same page, while maintaining a simple way to display errors belonging to there ID’s. The point of this article is to show you how to make a simple profile page for submitting a first and last name that is validated.

The most important class is the FacesUtil.java which provides methods for queuing / retrieving facesMessages based on each inputs DOM id. I have defined 3 types for displaying errors based on the bootstrap 3 message classes (success, warning, and danger).

Interfacing with the FacesUtil.java class is a viewScoped bean called viewProfile.java. This bean extends the methods of the FacesUtil class and is where our submit action lives. It also defines the first and last name that will be submitted from our profile page.

The final page is the actual JSF view. It is simple to display all errors from the faces util class through the viewProfile bean. On inputText I have defined a validateLength and a requireMessage. These have been set to required. If those validation requirements are not met, the error will be displayed in the panelGroup block below. The FacesUtil class has the logic to grab all manually queued messages as well as messages queue from validation inputs.

 

Omitted are the bootstrap CDN’s libraries. A full working version of this code can be found on Github.