Alternative to p:defaultCommand

Standard

Using the standard JSF h:commandLink has a limitation when wanting to submit the form when the enter button is pressed. This solution uses the javascript keyCode keyboardevent built into browsers. When keyCode 13 (or enter key) is pressed the h:commandLink (which renders a <a> tag) is submitted. This will call its action that has been attached to the component.

This solution is most useful when the Primefaces defaultCommand component is not available.

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.

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

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: