On Java Development

All things related to Java development, from the perspective of a caveman.

Using the RichFaces Calendar

without comments

Introduction

The calendar component ensures error free entry of dates in a predictable way. This post presents two examples of using the RichFaces calendar component with its dedicated managed bean, included in baseproject.

 
The Calendar Component
This is how the RichFaces calendar component normally appears on the page showing the current date.
Calendar01

This is how it appears when the calendar icon at the right of the input field is selected. It has navigation buttons represented by “<< < ” and “ > >>” on either side of the displayed month and year. Of course, the “X” at the right corner closes the calendar.
Calendar02

 
Defining a Calendar
The RichFaces calendar is highly configurable. The code below presents the calendar as shown above. Aside from being able to scroll through months the user can select a date and then either cancel the operation or apply the selection to be the active date at which time the calendar closes.

You can see the references to its managed bean properties that control some of the behavior. There are property values to control the popup behavior, whether to show the “Apply” button and the date’s display pattern used by the component. The full list of the managed bean is below which is included in baseproject.

 
Reading the Selected Date
The calendar can be configured to automatically call the assigned action listener method of the application’s managed bean when the calendar’s “Apply” is selected. However, to keep things simple, a button is instead used to call the method that processes the selected date.

Calendar04
The code for the button is shown below. Note the call to the page’s action listener method, processDateSelection().

The processDateSelection() method in the page’s managed bean (not the calendar’s) that reads and processes the selection is shown below.

As the comment indicates, the calendar’s managed bean is being read from the Faces (JSF) context. The name “calendarManagedBean” was assigned in the calendar’s managed bean source (see line 17 of that class). With the calendar object obtained in this manner, the selected date can be pulled into an integer field which is then passed to a method as an argument.

 
Using the Calendar’s “Apply” to Call the Action Listener
The code presented here illustrates how to define an action listener so that it is called when the calendar’s “Apply” link is selected. This removes the requirement for an accompanying button.

 
The calendar’s processCalendarChangeEvent method.

 
The loadData() method.

 
Page Navigation and Calendar State
Since the calendar’s managed bean is scoped to the session, this means that the calendar’s state is maintained whenever navigating from its page and back again. If the requirement dictates that the calendar must return to today’s date whenever navigation returns to the page in which it is contained, then the calendar’s date must be explicitly reset to today’s date.

The code shown below is contained within the method responsible for navigating to the page that contains the calendar. It will reset the calendar’s date to ensure it shows today’s date when the page is displayed.

 
 
Adding a little style

This section shows the use of the style element to help place a little spacing between the text, calendar component and the button used to refresh a list. The style element is used to add 10 pixels in the margin at the end of the text and another 10 pixels on the left of the button.

This is the source code used to generate the text, calendar component and the button used to refresh a list. Note the placement of the style element on the first line with the outputText and again for the commandButton component. You can see how it renders the different parts below the source.

 
Without those style elements, this is how it would appear:CalendarStyle01

 
This is how it appears on the screen with the styles.
CalendarStyle

 
 
Conclusion
This post showed how to employ the RichFaces calendar component and how its state can be effectively managed using its dedicated managed bean. Also, the HTML style element was used to provide a little help with the formatting.

Written by admin

March 27th, 2014 at 10:51 am

Leave a Reply

You must be logged in to post a comment.