Saturday, January 30, 2010

GrailsUI.datePicker versus RichUI.dateChooser

The issue is, to work with and control the tab key from the keyboard and get a reference to the id param in the tag richui:dateChooser or gui:datePicker.

e.g:
< onfocus="document.getElementById('filingDate').focus();" tabindex="1">
< id="filingDate" name="filingDate" formatstring="MM/dd/yyyy">
< /td >

In both plugins the id is documented, but only GrailsUI works. RichUI generates an artifical id and no reference is possible. The work with tab key in GrailsUI is more predictable than in RichUI.

Another difference between RichUI and GrailsUI is, how the params are delievered to a command object:
In RichUI: filingDate = "struct"
filingDate_month = "01"
filingDate_day = "30"
filingDate_year = "2010"

In GrailsUI: filingDate = "01/30/2010"

Additional tip:
RichUI don't modifies the page layout.
GrailsUI does. To prevent this following modifications can be made:

1. In main.gsp - move "g:layoutHead" before link to the css
< rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" >

2. In the app gsp, put this line
gui:resources components="['datePicker']"
as first line after the head tag

3. Overwrite GailsUI grails-ui.css in own css file:
.datefield {
position:relative;
top:0px;
left:0px;
white-space:nowrap;
width:25em;
padding:0px 10px 0px 0px;
}

.datefield input {
width:75px;
}