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.

Unicode character to decimal and Hexadecimal conversions, and rendering decimal using javascript

Thursday, February 19, 2009

If you need to develop web pages in languages which cannot be represented by ASCII characters alone (like Arabic language), you have use encodings like UTF-8. The HTML page can be set the correct encoding using the META tag -

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

If the charset is set correctly, advanced editors lets you directly type in the contents in the language you want. Otherwise the language contents will appear as question marks or squares. If for some reason you cannot change the charset of your HTML, you will have to enter the language content in the decimal or hexadecimal notation. While rendering the page, the browser will display the content correctly.

Unicode to Decimal/Hexadecimal

The conversion of a string from a language to the decimal or hexadecimal format can be done in a few ways -

1) Create/Paste the language contents in Microsoft Word or Excel. Save the page as "Web page (*.htm, *.html)". Now view the saved page in notepad. You can see the language contents in decimal format. (A sample decimal format is &#1575;&#1604;&#1605;&#1585;&#1575;&#1576;&#1593;)

2) Use dreamweaver for editing the page. It automatically does the conversion to decimal.

3) Use this page - http://code.cside.com/3rdpage/us/unicode/converter.html. (This page can do the reverse also)

Decimal/Hex rendering problem while using javascript

In some scenarios, the browsers will not render the Decimal/Hexadecimal correctly to display in the language we want. Instead the browsers display the content as Decimal/Hexadecimal itself.

E.g. You want to populate a drop down using a javascript function. The function looks like this -

function populateCombo(values){
for(i=0;i
myCombo.options[i] = new Option(values[i], values[i]);
}
}

where "values" is a string array. If "values" contained Decimal/Hexadecimal characters, then the browser displays the Decimal/Hexadecimal itself instead of the actual string.

e.g.
values= new Array('&#1575;&#1604;&#1605;&#1585;&#1575;&#1576;&#1593;',
'&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;');

To overcome this problem we need a small javascript method -

function decimal2Unicode(decimalValue){
var elem = document.createElement("div");
elem.innerHTML = str;
return elem.firstChild.data;
}

Now, the drop down can be populated like -

myCombo.options[i] = new Option(decimal2Unicode(values[i]), decimal2Unicode(values[i]));


The drop down would display the string correctly now.

/usr/lib/libexpat.so: could not read symbols: File in wrong format

Tuesday, February 3, 2009

I was trying to compile Apache in CentOS 4.2, 64 bit machine and the "make" command failed with the error message - /usr/lib/libexpat.so: could not read symbols: File in wrong format.

The problem was the /usr/lib/libexpat.so was meant for 32 bit machines and my machine was 64 bit. The correct libexpat.so was present in /usr/lib64/libexpat.so. So I backed up the /usr/lib/libexpat.so and created a symbolic link to point to the 64 bit libexpat.so -

ln -s /usr/lib64/libexpat.so /usr/lib/libexpat.so

That did the trick.

Invalid command ‘Header’, perhaps misspelled or defined by a module not included in the server configuration

I was trying to enable gzip compression in apache with the help from the link http://httpd.apache.org/docs/2.0/mod/mod_deflate.html.

The apache I had was compiled from source. So I had to recompile Apache with the extra configuration parameter "--enable-deflate".

After modifying the httpd.conf as mentioned in the above link, I restarted Apache and got this error - "Invalid command ‘Header’, perhaps misspelled or defined by a module not included in the server configuration". When I commented the line "Header append Vary User-Agent env=!dont-vary" and restarted Apache, it worked. The gzip compression in Apache worked fine.

But I wanted to enable "Header append Vary User-Agent env=!dont-vary" because that would make sure that proxies don't deliver the wrong content.

The error message "Invalid command 'Header'" appeared because the Apache module mod_headers was not enabled. To enable mod_headers, I had to recompile Apache with the configuration parameter "--enable-headers".

If you installed Apache from a build, then you will have to add the line
LoadModule headers_module modules/mod_headers.so
in httpd.conf.

The list of configuration parameters can be seen at http://httpd.apache.org/docs/2.0/programs/configure.html.

IE changes docx, xlsx, pptx to zip while downloading

Wednesday, January 21, 2009

Microsoft Office 2007 has introduced some new file formats like docx, xlsx, pptx etc. One docx/xlsx/pptx file is actually a collection of many files, stored in an archive (zip-file).

When these files are downloaded by the Internet Explorer from a webserver, the extension of the file may be changed to "zip". (To open this file, you just need to change the extension to the correct one)

This problem can be fixed at the webserver level by adding the MIME type of the new extensions.

For Tomcat, add the MIME types in the conf/web.xml file, as given below.

<mime-mapping>
<extension>docx</extension>
<mime-type>application/vnd.openxmlformats-officedocument.wordprocessingml.document</mime-type>
</mime-mapping>

<mime-mapping>
<extension>xlsx</extension>
<mime-type>application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</mime-type>
</mime-mapping>

<mime-mapping>
<extension>pptx</extension>
<mime-type>application/vnd.openxmlformats-officedocument.presentationml.presentation</mime-type>
</mime-mapping>



For Apache, add the MIME types in the conf/httpd.conf file, as given below -

AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document docx
AddType application/vnd.openxmlformats-officedocument.presentationml.presentation pptx
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx