Strange conversion with the SQL CASE WHEN statement
My requirement is to prefix a ‘0′ (Zero) to the number, if the number falls below 10, i.e. I should always get two digits as my result when I fetch the data from the database. So, I wrote a SQL query to do the same. Below is the sample query.
Note that the FLD is a numeric field. As you see, the above query should return ‘01′, if the FLD has value less than 10. But to surprise, the query was always returning the FLD value without prefixing the ‘0′ even if FLD falls lesser than 10. I really had no idea of why it was happening like that. Then after doing some trial-and-error debugging, found out the root cause.
The issue is with the ELSE part of the above query. The ELSE part returns the FLD value as it is. Since this FLD is a numeric field, somehow it is converting the entire output to numeric. This is why even if the FLD value falls below 10 and prefixed with ‘0′ to become ‘01′, finally it is converted to a numeric value, resulting the prefix ‘0′ to go away. Finally I was getting the single digit FLD value. So to fix the issue, I’ve changed the query as below:
As you see, I am converting the FLD value to CHAR in the ELSE part. This solved the issue and finally my query was working fine!
Learning from JSR168 portlet development using JBoss portal platform
Recently I’ve completed my first JBoss portlet development project. I’ve faced many challenges during the development, since this is my first portlet project. But I managed to complete the project successfully. This blog is like a documentation of my experience and learning in JBoss portlet development.
Platform used : JBoss 4.2.2 / JBoss portal 2.6.4
JDK : JDK 1.5.0
IDE Used : Eclipse
Athapookkalam photos from last year’s Onam
As Onam festival is approaching fast in Kerala, here are the few snaps I took on last year’s Onam Athapookkalam competition at my work place.
Art at its best..
Athapookkalam - a close shot
In a different view
It’s a team game - the goal of festival - bringing people together
I hope, this year also I wil be able to take some good athapookkalam photographs (we have a competition in this month!).
How to create a horizontal navigation website using JQuery.
Horizontal based navigation websites are the ones in which the user has to scroll horizontally rather than scrolling vertically to see the contents. Basically the website flow is organized in a horizontal fashion. In this blog post, I am sharing a JQuery script to create a horizontal layout website with some interesting JQuery effects.
Steps to create the horizontal layout in the above demo page:
- Create a HTML Span element with a class ‘page‘ and put one page contents inside this span element. Create as many ‘page’ span elements as you want.
- Define a CSS style for this ‘page‘ class and set it’s position property to Absolute. Because, we will be setting each ‘page’ elements position using JQuery.
- When the page loads, get the number of ‘page‘ elements in the web page and then calculates the position for each page element. Then set the Left property of each ‘page‘ element to the calculated value.
- Define two JQuery functions to handle Next and Previous link clicks. When the ‘Next’ is clicked, then move all the ‘page’ elements to left using JQuery. To spice up the navigation, we could add some JQuery effects when the page transitions. Likewise, we have to code for ‘Previous’ link also.
Below is the source code for each of the above point.
1. Defining a ‘page’ element in HTML page
<span class="page">
<h3>First Page Title here</h3>
<p>Here goes the content for this first page element.</p>
</span>
<span class="page">
<h3>Second Page Title here</h3>
<p>Here goes the content for this second page element.</p>
</span>
<!– Add as many page elements as you want here –>
</div>
2. CSS style definition for page element:
{
width:75%;
height:60%;
background-color:#2d2d2d;
border:2px solid #5d5d5d;
position:absolute;
color:#B5B5B5;
padding:10px;
overflow:auto;
}
3. JQuery script to position all ‘page’ elements when the page loads:
var $SPACER = 40;
var $NOTACTIVEOPACITY = .5;
//Get the number of page elements in current web page
var $numberOfPages = $(".page").size();
var $pageLeftDistance = "100";
var $currentPage = $(".page:first");
//Set Current page as active
$currentPage.addClass("activePage");
for(var i=1; i<=$numberOfPages; i++)
{
$currentPage.css("left",$pageLeftDistance+"px");
//Calculate the left distance for the next page
$pageLeftDistance = parseInt($currentPage.css("left"))
+ parseInt($currentPage.css("width"))+ $SPACER;
$currentPage = $currentPage.next(".page");
$currentPage.addClass("notActivePage");
}
4. JQuery script to handle ‘Previous’ page clicks:
if($(".activePage").prev().size() == 0)
{
$("#MessagePanel").html("Sorry! You can not go to previous" +
" page, as this is the first page! Click here to close this message.");
$("#MessagePanel").slideDown("medium");
return;
}
//This function will take care of moving to previous pages
var $currPage,$tmpLeft, $allPages;
var $numberOfPages = $(".page").size();
$allPages = $(".page");
for(var $i=0; $i<$numberOfPages;$i++)
{
if($i==0)
{
$tmpLeft = parseInt($(".page:last").css("left"));
$(".page:last").animate({
left: ($tmpLeft +
parseInt($(".page:first").css("width"))
+ $SPACER)+"px",
opacity:$NOTACTIVEOPACITY
},500);
$currPage = $(".page:last");
}else
{
$currPage = $currPage.prev(".page");
$currPage.animate({
left: $tmpLeft + "px",
opacity:$NOTACTIVEOPACITY
},500);
$tmpLeft = $tmpLeft -
parseInt($currPage.css("width")) - $SPACER;
}
}
$currPage = $(".activePage");
$currPage.removeClass("activePage");
$currPage.addClass("notActivePage");
$currPage.prev(".page").removeClass("notActivePage");
$currPage.prev(".page").addClass("activePage");
$(".activePage").animate({
opacity:1
},200);
});
5. JQuery script to handle ‘Next’ page clicks:
if($(".activePage").next().size() == 0)
{
$("#MessagePanel").html("Sorry! You can not go to next page, as this" +
" is the last page! Click here to close this message.");
$("#MessagePanel").slideDown("medium");
return;
}
//This function will take care of moving to next pages
var $currPage,$tmpLeft, $allPages;
var $numberOfPages = $(".page").size();
$allPages = $(".page");
for(var $i=0; $i<$numberOfPages;$i++)
{
if($i==0)
{
$tmpLeft = parseInt($(".page:first").css("left"));
$(".page:first").animate({
left: ($tmpLeft- parseInt($(".page:first").css("width")) -
$SPACER)+"px",
opacity:$NOTACTIVEOPACITY
},500);
$currPage = $(".page:first");
}else
{
$currPage = $currPage.next(".page");
$currPage.animate({
left: $tmpLeft + "px",
opacity:$NOTACTIVEOPACITY
},500);
$tmpLeft = $tmpLeft + parseInt($currPage.css("width")) +
$SPACER;
}
}
$currPage = $(".activePage");
$currPage.removeClass("activePage");
$currPage.addClass("notActivePage");
$currPage.next(".page").removeClass("notActivePage");
$currPage.next(".page").addClass("activePage");
$(".activePage").animate({
opacity:1
},200);
});
Note: All the above JQuery functions should be written inside “$(document).ready(function(){}” block. You can download the entire source code from http://www.veerasundar.com/sbox/hnav/
Currently I am working on to improve this script and to include more navigational options like menu based navigation. I will update the source code soon once it is done.
Code snippet for including content based on post length in Wordpress
If you are using Wordpress publishing platform for your blog, you will find this code snippet useful. In some situations, you may want to add some content (advertisements, images,etc) to your blog post, only if your post length reaches certain number of words. In my case, I wanted to include Ads after my blog posts, only if the post has at least 100 words. I do not want to add advertisement for small posts. Below is the code snippet to achieve this.
Important:
This code snippet is dependent on Word count plug-in for Wordpress created by Murray. You need to include this plug-in in your Wordpress installation, before using the below code snippet. You can check the plug-in site for installation instructions.
Code snippet for including content based on post lenght:
For this code snippet, I assume you are including it in “single.php” file. Open the “single.php” file and add below code after <?php the_content('ยป Read the rest of the entry.. ') ?>
Code to include:
if (function_exists(‘mtw_wordcount’))
{
// Number of words to check for
$PostLengthToCheck = 100;
// Get the post length by calling the function mtw_wordcount.
// This function returns the number of words in a blog post.
$postLength = mtw_wordcount();
if ($postLength > $PostLengthToCheck)
{
//Add the content inide the quotes of echo statement.
// Content may be anything.
echo ‘Your Content goes here’;
}
}
?>
I hope the above code snippet will be useful to Wordpress bloggers. Let me know what you think.
Mozilla concept series : Future of Web browser
Mozilla, the organization behind Firefox, has recently announced a concept series to discuss about the future directions for Firefox browser. This announcement has stimulated few discussions on blogosphere. Many people are already giving their views/ideas on what the coming versions of Firefox should have. Adaptive Path, a product experience strategy and design company, has come up with a demonstration video called “Aurora“, which shows two people collaborating on internet using advanced browser interface (nice video!).
As a web developer, I would like to see some features for web development to be included in the future versions of the browser.
- First of all, it will be good if I could be able to edit and save HTML/CSS/JS files directly from my web browser. i.e. something similar to a web IDE inside the browser (WIDE!). Though Firebug is there for debugging/analysis, it is not possible save my HTML source code directly from Firebug. So, every time I have to do the changes twice, in Firebug window and in my original source files. Bringing in a light-weight IDE to web browser will definitely avoid this redundancy and will make web development much easier.
- If bringing in a web IDE inside the browser is possible, then adding collaborative development features for developers across the world will be also helpful. Multiple developers could contribute and develop to a single web project, all at the same time, using this web IDE.
Normal users may not be interested in these development features. So, Mozilla may release two versions of Firefox, one for normal users and one for development purpose, with additional features. People may download which version they want.
Above are the features that I would like to see it in my browser. Do you have any such feature in your mind? You could also contribute to this idea-drive.
Back to AS400
Again I am back to AS400 work. For the past one year I was working in Java project. As the Java project got over, Now I am put into an AS400 project. Here after, I will be coding in RPG/CL in a not-so-good-user-interface screen.
Working in a multiple technology platform is always a challenging task. For me, the difficulty level goes further high, as web development and AS400 development are completely two different paradigms. In web development, you have to be innovative and creative to successfully complete your project. For example, to design a user interface screen, there are n-number factors to be considered, like colors, layout, usability, etc. And there are interesting development tools are also available to aid in web development.
But, in AS400 development, there is nothing new to think about. In the sense, if your are going to design a user interface screen, you don’t need to innovate anything new. The layout is fixed, universal color schemes (black and green). It’s like a copy & paste work. There are few challenges in AS400 development too, but compared to web development, the challenges are all trivial.
I found very few online resources for AS400 developers. Below is their list:
If you are into AS400 development, I hope the above sites must be useful to you.
Tip to avoid typing password every time you open VSS
I have VSS (Visual Source Safe) installed on my windows XP system and every time I open VSS, it was asking me to enter user name and password. It was really irritating and I was looking for some workaround to avoid this. Below is a tip, that worked.
In Windows XP, right click on ‘My Computer’ icon and select ‘Properties’. In the ‘System Properties’ dialog box, go to the ‘Advanced’ tab and click ‘Environment Variables’ command button. Then create a environment variable SSUSER and give your VSS user name as value. Create another environment variable for VSS password, SSPWD and give the VSS password as its value. Close all the open dialog boxes and you are done!!
The next time onwards, when you open VSS, it will automatically take the user name and password from the environment variable, that we have just created.
Tools that are replaced my Windows counterparts
Windows has plenty of tools in its base. Most of them are critical to day-day-activities and few of them are not up to the market standard or they lost their share to competitor applications. Below are my list of applications that I use everyday instead of Windows apps.
- Google desktop search (GDS) is more efficient and faster than Windows XP’s search facility. In fact, I dont remember when I last opened Windows Search application for searching something( Even if I open Windows search, it hangs!). I am not sure about the Vista’s Live search facility. GDS comes with a sidebar too! As I am not running Vista, Googe sidebar is very handy.
- Launchy - a small application launcher. Comes with skinnable interface and easily customizable. Its a calculator too. After started using Launchy, I rarely open my Start menu/Windows Explorer/Calculator.
- Firefox - No need to explain why I am using it. Inseperable in my web development activities. Though Firefox 3 has some issues, I love it.
- Notepad++ - light in weight as Notepad, great in features as MS Word. Supports syntax highlighitng for more than 30 languages (including SQL). Very fast and a great application.
- Winamp / Media player classic - the media players I use in my home for songs and movies. Windows Mediay player eats lots of resources from my poor PC and I can’t offord it running, with Eclipse and Tomcat server side by side.
Those are my list. would you like to add anything more?
Improving the home page with JQuery effects
I have been using very simple home page for myself for quite some time. It did not have any flashy stuffs, just plain HTML. So, wanted to improve it and used JQuery for the same. JQuery is a JavaScript library that helps the developers to easily traverse DOM elements. JQuery also comes with some pre-built, cool animation functions. Thse functions can be used to animate (like Sliding, moving, fading) HTML elements very easily with less code. In fact I just took 2 hours to incorporate JQuery into my home page veerasundar.com. Below is a small text on what I did and how I did.
Collapsable Panel:
Previously I was having a seperate page to show my experience information. After using JQuery, now I have this information in my front page itself with hidden status and a link to show it. So, when the user clicks on the link “Show” more, the information panel will actually slide down. Below is the code snippet for this:
information panel with DIV element and Open Link:
….Other contents here..
<a class=“showMoreAboutMe” href=“#”>Show more information.</a>
<a class=“hideMoreAboutMe” href=“#” style=“display:none;”>Show less information.</a>
<div id=“MoreAboutMe” style=“display:none;”>
….contents…
</div>
….Other contents here..
The JQuery code to activate the animation:
$(document).ready(function(){
$(".showMoreAboutMe").click(function(){
$("#MoreAboutMe").slideToggle("slow");
$(".showMoreAboutMe").animate({opacity: "hide"}, "slow");
$(".hideMoreAboutMe").animate({opacity: "show"}, "slow");
});
$(".hideMoreAboutMe").click(function(){
$("#MoreAboutMe").slideToggle("slow");
$(".showMoreAboutMe").animate({opacity: "show"}, "slow");
$(".hideMoreAboutMe").animate({opacity: "hide"}, "slow");
});});
Thats it for the collapsable panel. To see it in action click the link ‘Show more information’ in my home page http://veerasundar.com.
Accordion Effect:
Previously I have having seperate sections to display the RSS feeds from my blogs. Now I have a single display panel for all my blogs. This comes possible by using Accordion style panel. Thanks to Web designer wall for the code sample for this.
That’s it for now. I am still exploring more on JQuery. Will blog it here as I find something useful.