Calling Bootstrap 3 modal from JSF

Standard

Dialogs or modals can be used in JSF to create more dynamic, and interactive pages. This solution will show how to call a Bootstrap 3 modal from both a JSF commandLink, and a Primefaces commandLink. Each example uses a formId to update the modals content.

JSF h:commandLink

JSF implementation uses an onclick event, which shows the modal, then updates the form inside the modal. While the order of execution can be problamatic in that you could show stale data in your modal for a brief second; this solution will work for most cases.

It also should be noted that using the h:commandLink component requires a backing bean action.

Primefaces p:commandLink

The Primefaces component library has expanded the attributes available in the p:commandLink.  This functions the same as the h:commandLink, but uses less code to accomplish the same task.

Bootstrap modal

The modal is straight forward. A p:commandLink is used to close the modal, and a form is wrapped around all important content that needs to be updated.

Self managing your own modals may be more work than using a prebuilt component like primefaces dialog. But the benefit is that the modal is responsive, and you still have full control over the design.

Using Font Awesome icons as CSS content

Standard

Font Awesome is a great web font icon pack to use with the Bootstrap 3 framework. While the implementation suggests using the <i> element; this is not always beneficial.

The solution is to specify the icons using pure CSS. This can be accomplished by substituting content values for the relevant icon within the Font Awesome font-family.

Take this CSS class for example which uses the “check” icon.

Now using the <a> tag you can add a check icon to a Bootstrap 3 button

A complete list of the Font Awesome icon content values can be found on this cheatsheet.

Implicit vs Explicit navigation in JSF

Standard

The use of navigation cases in JSF is somewhat subjective. This article will briefly discuss the differences, advantages, and disadvantages between implicit vs explicit navigation

Explicit Navigation

Navigation prior to JSF 2.0 required the use of explicit navigation cases. This means you would have to place all navigation rules in a “faces-config.xml” file. Take for example the following navigation rule:

This example above could be used in JSF 1.2 to redirect from step1.xhtml to step2.xhtml. While the following implementation is simple, it fails to address many issues that can arise when developing larger applications.

What are the drawbacks of explicit navigation?

  1. Changing of file names can result in outcomes going to pages that do not exist
  2. A larger overhead especially if your application has complex conditions. This is due to it having to parse the XML to match the result from the action method
  3. Using JSF 1.2 meant navigation rules use a POST for page to page navigation which makes for a horrible user experience. Pages would not be bookmarkable; thus have bad SEO. Note: JSF 2.0 you can specify the <redirect /> attribute to a navigation-case to force a page redirect.

What are the benefits?

  1.  Only one location to find all your rules for navigation; no hunting through backing beans.
  2.  IDE has tools to draw the rules in a GUI. Gives you a visual of your available workflow.

Implicit Navigation

This advancement in JSF 2 made it so there was no need to declar navigation rules. Instead the outcome can be placed in the action attribute. JSF has the logic to find the correct view id. There are 2 ways to use implicit navigation.

Specifying a outcome in a JSF page

This solution is straight forward, you can specify the page name you wish to navigate to. The “xhtml” extension will automatically be appended.

Another option would be to use a h:link would use a get request to invoke a redirect

Specifying a outcome in a Backing Bean

The JSF page calls a backing bean that has a outcome.

Backing bean has a method which returns a string which is the outcome.

What are the drawbacks of implicit navigation?

  1. Your business objects / backing bean logic becomes tied together, and can get messy
  2. Moving pages around can cause a lot of maintenance to update implicit routes.

What are the benefits?

  1. No hunting through a cluttered xml file to find navigation cases.
  2. Less overhead when looking up the outcome for a action.

How to skip Maven unit tests

Standard

All Maven unit tests are ran by default. When a test fails the project will not build. While this forces you to have a stable build of your project before deploying; it may not be ideal in some situations.

Skipping Over Failed Unit Tests

Within the in maven-surefire-plugin in your pom, specify the skipTests parameter

Now all tests will be skipped on the next build.

Using a comparator to sort 2 separate instances

Standard

Consider you have 2 separate classes; “dog” and “cat”. Both of these classes share a common interest in that they are animals. Each of these animals have a date of birth. In this example I will demonstrate how to merge 2 object arrays of both types (“dog” and “cat”) and sort them by their common property; date of birth.

Where might I need this?

In the case of needing both cats and dogs on the same dataTable in JSF this would provide a merged object array to iterate through.

The Code

Creating the abstract class “animal” to be extended by both the dog and cat classes. This abstract class defines what both a cat and dog have in common; a name.

Both the cat and dog classes are very similar. For the purpose of this tutorial they both only have a date of birth.

The dog class is identical to the cat class.

The Solution

To sort both cats and dogs by date of birth first begin by creating a list of each type then adding a few objects to each. The code below adds 2 animals to each type. Then all objects are added to a list of object array. Using collection.sort comparator it checks which type of object is being passed. It then casts that object to its instance type and gets the date of birth. The final statement in the method is the compareTo function which compares the date of birth for each type. Using this approach you can see that you could easily add additional object array types and sort them all by a common date.

The following code is available on Github.

Why checkboxes in forms are emulated

Standard

If you have ever investigated the Primefaces datatable selection component you will find that the check boxes are not true html checkboxes but emulated with images. The code that is generated by the component looks similar to this.

Why isn’t it making true HTML checkboxes?

The reason for this is implementation all has to do with caching. When a check box is formed in JSF or any other language for that matter it is given a name. If you were to use a JSF datatable and add a checkbox to each row with the same name it would generate the following in each row:

The issue with this is that these names can be reused. If you were to check myForm:0 , then perform an ajax event that removes the selected checkbox item from the list. Then browser would have no recognition of the item being removed. The browser cache will still believe that myForm:0 is checked. This is why the solution multiple checkboxes on the page is to emulate then with CSS.

What if I have to use true HTML checkboxes?

If you MUST use real input checkboxes then your solution is to disable caching on your browser. This can be accomplished using a web filter and modifying response headers.

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.

 

JSF detect session timeouts with web filter

Standard

When working with JSF 2.0 you will encounter a situation in which the user’s session times out and ajax requests fail. The response on a ajax request will be a viewExpiredException. However, the root cause is the session has expired. They are essentially stuck on the page and are forced to reload.

The solution:

Using a WebFilter the user can gracefully be redirected to a view expired exception page. This solution is accomplished by checking if the users session is valid, and if the context path is within our required conditions, finally if it is a ajax request it overwrites the default JSF response with our own custom xml response that tells the browser to redirect to the view expired exception page.

Note: This fix is required due to a bug that is set to be resolved in JSF 2.3 release: https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790

Primefaces render kit html5 attributes

Standard

When using JSF 2.0 / 2.1 the need for using passthrough elements may occur. However, the passthrough element library is not compatible until JSF 2.2. The following solution uses a custom renderer so that primefaces 5.x can implement HTML5 attributes that you define.

Define your attributes

This first class is use to define which attributes we want to be able to pass through. The static string attributes is the name of these attributes.

The method above called writeAttributes does exactly what means. It writes the attribute(s) pass on the UIComponent to the current facesContext. The attributes that it is checking for are those of which you have defined.

You can add as many attributes to the array as needed. Make sure the attributes you do add are not already apart of the primefaces existing component, otherwise the values would be rendered twice.

Create a inputText renderer

To utilize the class above it requires extending the InputTextRenderer class in Primefaces. By default you must override the encodeEnd method. This is where all the magic happens. The method starts by calling the Html5DataAttributes class above. That writes out our custom attributes, it then concludes by calling the classes super. That assures that the existing component attributes in Primefaces will still be rendered.

It should be noted that this is specifically only for the p:inputText component. You can create more renderers as you need them. Ex: CommandButtonRenderer

Register the renderer class

The last step is to tell primefaces where the new render class is located. This is accomplished by places the following in your faces-config.xml.

The render-type is the base class that primefaces uses for rendering the component. The component-family is the location of all similar components. The render-class is the new class we have created to handle inputText rendering.

How do I use it?

It is pretty simple, when calling p:inputText specify your custom attribute

What is I have JSF 2.2? 

Then don’t waste your time on what was described above. You can use the built in passthrough library

Read more on javadoc