free web page hit counter
Friday Jan 27, 2006

Creator Tip: 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

Comments:

Winston, When I do Step 2 above (Add code to property "date"), I get an error msg "found: void, required: java.util.Date). Also, I notice that there is an extra ')' in the return setValue statement. Can you please explain? Thanks very much for your great blog. Nakul

Posted by Nakul Nayyar on December 12, 2006 at 08:25 AM PST #

dear winston , i used oracle 10G Database , when i used your code to my project..i get error "incompatible type... " ------ public java.util.Date setDate(){ return setValue("#{currentRow.value['TRIP.DEPDATE']}", new java.sql.Date(date.getTime()))); } ---- can u help me ?? thx

Posted by ariflut on January 04, 2007 at 08:00 PM PST #

Hello Winston thanks for the tips. I believe there is a problem with the setDate() method. Althogh i fixed, my application suffers another problem. After i bind the component to the property, my button actions cease to work. If i don't bind them they seem to work perfectly. Is this a bug or am i doing something wrong? I would appreciate it very much if you comment on this situation... Thanks a lot..

Posted by Selim Hendrickson on February 17, 2007 at 09:57 AM PST #

Step 2 solution:

change the text from

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


to:

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

Posted by Willy on April 26, 2007 at 07:09 AM PDT #

Dear Winston, on selecting the date from calender, it is only going to the first row. Can you tell me what is the problem.

Posted by ajeesh on May 15, 2007 at 06:56 AM PDT #

Hi, i have a problem, i have tried to follow this tut, line by line, and i am not able to make the calender in a table work, the exact problem, is that no matter which row the calendar is, it only changes the calender on the first row. How do i fix this problem. thank you in advance. BTW i am using netbeans 5.5 with the web pack, is it suposed to also work, or this tut is exclusive for the Studio Creator 2? Thank you in Advance. best regards

Posted by Ruben Fragoso on May 15, 2007 at 02:47 PM PDT #

Hi Winston, There is error around setDate() method.After fixing it as void setDate(java.util.Date date) , all compilation and null pointer exceptions go away. But when table is updated to DB and setDate() should be called by framework. we could find during that time , new java.sql.Date(date.getTime())) is set to a value of null. This means during the update the value is not bound to date field. I have ensured that there is a Binding exist. Any help

Posted by Srinivasan Salem Krishnan on May 16, 2007 at 03:07 AM PDT #

It would be really fine if the calender would work. I use netbeans 5.5.1 vwp but i ca&#180;t add a new row or save changes I get the message

The class 'projekt_osretail.resources.Basis.Kurse' does not have a writable property 'date'.

This is my setDate:

public void setDate(){
Date date = new Date();
setvalue("#currentRow.value['kurs.gilt_ab']}" ,new java.sql.Date(date.getTime()));

I have done all what is described in the tut. Maybe this example doesn&#180;t work in netbeans ?

Is it posible to solve the problem?

Posted by Peter Magsam on September 10, 2007 at 09:19 AM PDT #

Hi, could I know if somebody got solution for no matter no matter which row the calendar is, it only changes the calender on the first row. I am getting the same problem. Help will be appreciated.

Thanks
Vijay Shanker

Posted by Vijay Shanker on October 26, 2007 at 04:46 AM PDT #

Hi Winston,
I managed to get the calendar component placed in the table after followed your steps.
However, during runtime it always refer to ROW No 1 whenever I select a date from the calendar component.
Please advise.
Jose

Posted by jose on November 20, 2007 at 10:57 PM PST #

Hi!
Same problem here; only get the calendar selection on first run when application is run.
Please advice!
Janir

Posted by Janir on December 12, 2007 at 05:42 AM PST #

Hi Winston, i got the same problem reported for janir (dec,12 07), but i'am using netbeans 6.1 20080126.

Posted by Julio Araujo on January 30, 2008 at 08:52 AM PST #

Thanks Winston, Same problem and It's no solve ?

Posted by nghialt on January 31, 2008 at 02:04 AM PST #

Hi, I thought the problem was fixed. If not I would advice you guys to send an e-mail to users@woodstock.dev.java.net and ask for advice. You can also file a bug at https://woodstock.dev.java.net/servlets/ProjectIssues

Posted by 24.6.110.152 on February 01, 2008 at 12:44 PM PST #

Dear Winston, on selecting the date from calender, it is only going to the first row. Also, the calendar button apears only on first row. Can you tell me what is the problem?

Posted by Liviu on April 10, 2008 at 12:27 AM PDT #

I don't believe this is a Woodstock problem. There are a couple approaches you can use to obtain your data, but they are not shown in this example. Using ObjectArrayDataProvider as an example, you can:

1. Call the getValue(FieldKey fieldKey, RowKey rowKey) API.
2. Iterate over each data row and call your getDate() method.

The getValue method also requires a FieldKey, which appears to be the 'TRIP.DEPDATE' string. However, both approaches require that you provide a RowKey object.

In order to obtain RowKey objects, call the getRowKeys() method of ObjectArrayDataProvider. You can also you can create the RowKey object yourself, providing an int is used for row indexes. Basically, you use the RowKey object to obtain a value from a specific data row. Or, you set the current data row (similar to the getTableRow method below) and call your getDate method directly.

Note that you don't necessarily need to store calendar dates in a DataProvider. You can store dates and other values using a HashMap, if you prefer. (Woodstock uses a class, named TableSelectPhaseListener, to store checkbox values via a HashMap. We don't want to push these values into a database, for example.) Then, you can iterate over the HashMap to obtain your values. The calendar's EL expression would simply point to the getter and setter methods below. For example:

import com.sun.data.provider.RowKey;
...

private HashMap props = new HashMap();

/**
* Get the selected object from this instance.
*
* @param rowKey The current RowKey.
* @return The stored object.
*/
public Object getProp(RowKey rowKey) {
return (rowKey != null)
? props.get(rowKey.getRowId()) : null;
}

/**
* Set an object for the given row.
*
* @param object The object to store.
*/
public void setProp(Object object) {
RowKey rowKey = getTableRow();
if (rowKey != null) {
props.put(rowKey.getRowId(), object);
}
}

// Get current table row during the JSF apply values phase.
//
// Note: To obtain a RowKey for the current table row, the use the same
// sourceVar property given to the TableRowGroup component. For example, if
// sourceVar="name", use "#{name.tableRow}" as the expression string.
private RowKey getTableRow() {
FacesContext context = FacesContext.getCurrentInstance();
ValueExpression ve = JSFUtilities.createValueExpression(context,
"#{name.tableRow}", Object.class);
return (RowKey) ve.getValue(context.getELContext());
}

Posted by 192.18.128.5 on June 02, 2008 at 02:20 PM PDT #

A full functional example will be appreciated :
1. a table component binded to a database table will be appreciated.
2. a column from table component must have all cells UPDATABLE calendar components.
Thanks!

Posted by liviudelureanu on June 06, 2008 at 12:15 AM PDT #

Hi,
am using the same component, but when I use the Calendar object in entity then the page is not getting submitted, But if it is changed to Date it's wrkng fine. Can u help me to use Calendar or GregorianCalendar.....

Posted by Suresh on June 28, 2008 at 12:50 AM PDT #

Hi,
I am using calendar component,but i want to save date into mysql database in the format yyyy-MM-dd and retrive the date from the component as dd/MM/yyyy.and i am getting a problem when trying to do this i.e,can't cast a java.util.Date to java.sql.Date.try to help me solving the problem

Posted by chandra sekhar reddy.p on July 28, 2008 at 11:45 PM PDT #

The problem of only changing the first row is fixed in the latest woodstock nbm I downloaded. It had me squeezing my brains for some hours until I decided to go and look for a woodstock update (the auto auto-generated javascript indexes for the calendars inside a table were incorrect).

For the java.util.Date and java.sql.Date problem, I used the following code and it worked perfectly:

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

public void setDate(java.util.Date newValue){
setValue("#{currentRow.value['VALUE']}", new java.sql.Timestamp(newValue.getTime()));
}

Hope it helps someone.

Posted by Tonklis on September 25, 2008 at 08:36 PM PDT #

http://www.batteryfast.co.uk/hp/nc6000.htm hp nc6000 battery,
http://www.batteryfast.co.uk/hp/nx5000.htm hp nx5000 battery,
http://www.batteryfast.co.uk/hp/nw8000.htm hp nw8000 battery,

Posted by laptop batteries on October 24, 2008 at 12:27 AM PDT #

If anybody has got a way round the above discussed problem, displaying it here will be of a great assistance. Thanks

Posted by kaska on January 05, 2009 at 02:04 AM PST #

In NetBeans 6.5 the problem seems to be solved. Try it!

Posted by Delureanu Liviu on January 15, 2009 at 06:52 AM PST #

Hi Winston...

I just encountered this problem.
I have a JSF application built in Netbeans with Tomcat as the server.
My Calendar component was working just fine until the month February 2009,
Some how the calendar popup is not opening for any date in Feb 2009. For others it does..
Any ideas?

Posted by Sonali on February 02, 2009 at 11:05 PM PST #

Hi Winston,

We are also facing the same problem as Sonali's. (Calendar pop-up is not coming for Feb'2009)

Any help on this, thanks in advance

Posted by Rao on February 02, 2009 at 11:59 PM PST #

Same problem like Rao and Sonali...
Anyone have a solution?

Thanks in advance!

Posted by Dinko Belchevski on February 03, 2009 at 02:03 AM PST #

I found the solution at

http://untamedmind.wordpress.com/2009/02/04/javaserver-faces-jsf-calendar-component/#comment-160

Posted by Rao on February 04, 2009 at 06:06 PM PST #

sorry dont use that jar file, we found some other bugs in the jar.

Posted by rao on February 04, 2009 at 11:04 PM PST #

Thanks for the valuable code . Very useful.

Thanks
Nanaji

Posted by Jonnadula Nanaji on March 27, 2009 at 05:58 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed