Adding Calendar component to Table component

Several Sun Java Studio Creator customers have asked, how to add Calendar component to a Table Component. Unfortunately in Creator 2, it is not possible to use Table Layout for this purpose. With a little bit of hand coding this could be achieved. Here is the tip on how to accomplish this.

Step1: Add the Calendar Component to the Table COmponent

Create a Project
Drag and drop Table Component on to the design surface
Drag and drop the JDBC table Data Sources -> Travel -> Trip on to the Table Component.
Optional: Using table layout remove the TRIPID and TRIPTYPEID
Using Table layout set the Pagination of the table and page size 5.
Drag and drop a Calendar component on to the design surface (not on the table component)
Edit the JSP page and move the Calendar Tag to the Table Column Corresponding to DEPDATE
From the outline Panel remove the extra StaticText component in the DEPDATE column.
Do not remove it in the JSP
Remove the style attribute from the Calendar Tag

Now the DEPDATE tablecolumn tag in JSP should look like

 
<ui:tableColumn binding="#{Page1.tableColumn3}" headerText="DEPDATE" id="tableColumn3" >
  <ui:calendar binding="#{Page1.calendar1}" id="calendar1"/>
</ui:tableColumn>

If you deploy the project, you'd see the Calendar component inside the table component. But no date is displayed in it. We have not yet hooked the Calendar component to the data provider used by the table component

Note: The Calendar inside the Table component will have a border around it. If you wish to remove it add the following CSS rule (overriding the theme) to the resources/stylesheet.css.

table.CalRootTbl td{
 border: none
}

Step2: Bind the Calendar component to the dataprovider

In the Page1.java, add a property called "date" of type java.util.Date and add the following code to it.

public java.util.Date getDate(){
   return (java.util.Date) getValue("#{currentRow.value['TRIP.DEPDATE']}");
}

public java.util.Date setDate(){
   return setValue("#{currentRow.value['TRIP.DEPDATE']}", new java.sql.Date(date.getTime())));
}

Right click on the [..] button of SelectedDate property of Calendar component. In the binding dialog select "date" from Page1. In the JSP the DEPDATE tablecolumn tag should look like

 
<ui:tableColumn binding="#{Page1.tableColumn3}" headerText="DEPDATE" id="tableColumn3" >
  <ui:calendar binding="#{Page1.calendar1}" id="calendar1" selectedDate="#{Page1.date}"/>    
</ui:tableColumn>

For the calendar componet to work correctly you need to set the MinDate and MaxDate to the date range in the table column. You can do this in the Page1.Java init() method.

java.util.GregorianCalendar gcalendar = new java.util.GregorianCalendar();
gcalendar.set(1990,1,1);
calendar1.setMinDate(gcalendar.getTime());
java.util.GregorianCalendar gcalendar1 = new java.util.GregorianCalendar();
gcalendar1.set(2010,1,1);
calendar1.setMaxDate(gcalendar1.getTime());

Step3: Saving the Calendar Component value to the Database

Add a button to the table. Change it text to "Save changes"
Double click on the button and add the following code.

public String saveButton_action() { 
 // TODO: Process the button click action. Return value is a navigation 
 // case name where null will return to the same page. 
 tripDataProvider.commitChanges(); 
 return null; 
}

Deploy the project and change the date and click save Changes. The changes should be saved to your database. The Table component in the browser should look like

Dr. Winston Prakash Ph.D.

Personal Website

Adding Calendar component to Table component