Customize YUI 2 Paginator

Thursday, August 19, 2010

By default, YUI 2 Paginator renders the control elements as shown below -



You may want to use images for the control elements instead of the text like "first", "last".



This can be achieved in the following way.

While creating the paginator, provide some additional parameters (shown in red font below).


var paginator = new YAHOO.widget.Paginator({ rowsPerPage:ROWS_PER_PAGE,
firstPageLinkLabel: " ",
nextPageLinkLabel: " ",
lastPageLinkLabel: " ",
previousPageLinkLabel: " ",
template : "{FirstPageLink} {PreviousPageLink} Page {CurrentPageReport} {NextPageLink} {LastPageLink}",
containers : ['pagingDiv', 'pagingDiv2'] })

You should have image icons for First, Previous, Next and Last. You need to have one set of icons for Active controls and another set for Disabled controls.




Then you need to use the following CSS styles -


.yui-pg-first{background: transparent url(first_ico.gif) no-repeat; width:19px}
.yui-pg-last{background: transparent url(last_ico.gif) no-repeat; width:19px}
.yui-pg-next{background: transparent url(next.gif) no-repeat; width:19px}
.yui-pg-previous{background: transparent url(prev.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-first {background: transparent url(firstfade_ico.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-last {background: transparent url(lastfade_ico.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-next {background: transparent url(nextfade.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-previous {background: transparent url(prevfade_ico.gif) no-repeat; width:19px}


.yui-skin-sam a.yui-pg-first:link, .yui-skin-sam a.yui-pg-first:visited, .yui-skin-sam a.yui-pg-first:active, .yui-skin-sam a.yui-pg-first:hover, .yui-skin-sam a.yui-pg-previous:link, .yui-skin-sam a.yui-pg-previous:visited, .yui-skin-sam a.yui-pg-previous:active, .yui-skin-sam a.yui-pg-previous:hover, .yui-skin-sam a.yui-pg-next:link, .yui-skin-sam a.yui-pg-next:visited, .yui-skin-sam a.yui-pg-next:active, .yui-skin-sam a.yui-pg-next:hover, .yui-skin-sam a.yui-pg-last:link, .yui-skin-sam a.yui-pg-last:visited, .yui-skin-sam a.yui-pg-last:active, .yui-skin-sam a.yui-pg-last:hover, .yui-skin-sam a.yui-pg-page:link, .yui-skin-sam a.yui-pg-page:visited, .yui-skin-sam a.yui-pg-page:active, .yui-skin-sam a.yui-pg-page:hover
{text-decoration: none}

Make sure that you give the correct image name for each element.

IBATIS does not insert TIME component

Friday, March 26, 2010

I found that IBATIS was not inserting the TIME component of the date field into the Oracle database.

I had the following configuration in the SqlMap.

Under resultMap, the column was mapped as given below -

<result column="DATE_OF_CREATION" jdbcType="TIMESTAMP" property="dateOfCreation"/>

The insert statement was as below -



 

<insert id="person_insert" parameterClass="Person">
insert into PERSON (NAME, DOB)
values (#name:VARCHAR#, #dateOfCreation:DATE#)
</insert>


 
After a lot of debugging, I found that the problem was because of using "DATE" as the jdbcType. The JDBC "DATE" data type stores only the year, month and day.
 
I changed "DATE" to "TIMESTAMP" in both the places and it started working.