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.

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

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.

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.