Thursday, April 28, 2011

If else or Switch case to Polymorphism

If you try to express your logic in if-else way like this,

      private static String getSoundIfElseWay(String animal) {  
           if (animal.equalsIgnoreCase("Dog"))  
                return "Bark";  
           else if (animal.equalsIgnoreCase("Cat"))  
                return "Mew";  
           else if (animal.equalsIgnoreCase("Lion"))  
                return "Roar";  
           return "";  
      }  



then polymorphic way would be,

 private static String getSoundPolymorphicWay(Animal animal){  
      return animal.say();  
 }  

 public abstract class Animal {  
      public abstract String say();  
 }  

 public class Dog extends Animal{  
      @Override  
      public String say() {  
           return "Bark";  
      }  
 }  


 public class Cat extends Animal {  
      @Override  
      public String say() {  
           return "Mew";  
      }  
 }  


 public class Lion extends Animal {  
      @Override  
      public String say() {  
           return "Roar";  
      }  
 }  


The gist is simple.

Look at the change in behavior based on the condition. If you could come up with a object than could take this behavior, push that to the corresponding object.

Same rule applies to switch-case also.


Friday, September 4, 2009

Simple tab-menu with jQuery




There many instances you need UI to have tabbed menu. There are so many wonderful options to implement this.
  • http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial
  • http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/

Anyways, following is my simple version.

<html>
<head>
  <title>Tab Select Widget Example</title>
  <style type="text/css" >
    .tabblu{color:#fff;font:bold 12px Arial;height:32px; position: relative; margin-top:2px; border-left:1px solid #fff; z-index: 2;}
    .tabblu a{color:#fff;cursor: pointer;}
    .tabblu ul{padding:0px!important; list-style:none;margin:0px 0px 0px 0px; text-align: center;}
    .tabblu li{padding:10px 10px 6px 10px;float:left;border-right:1px solid #fff;background-color:#A6B7C9; border-bottom: 1px solid #ddd;}
    .tmon{background-color:#fff !important; color:#8A8A8A;border:1px solid #ddd;border-bottom:1px solid #fff!important;background-image: none!important;border-right:1px solid #ddd!important;margin-left:-1px;margin-bottom:-4px; position:relative; z-index: 1;}
    .tmon a{color:#8A8A8A; text-decoration: none;}
  </style>
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('.js_toggling_tab a').click(function(event){
      $(this).parents('ul').find('.tmon').removeClass('tmon').children('div').hide().end().children('a').show();
      $(this).after('<div>'+this.text+'</div>').hide().parent().addClass('tmon');
      event.preventDefault();
    })
  });
  </script>
</head>
<body>

<div class="tabblu">
  <ul>
    <li class="js_toggling_tab "><a href="#">NYSE</a></li>
    <li class="js_toggling_tab"><a href="#">NYSE Arca</a></li>
    <li class="js_toggling_tab tmon"><a href="#">NYSE Amex</a></li>
    <li class="js_toggling_tab"><a href="#">NYSE 2</a></li>
    <li class="js_toggling_tab"><a href="#">NYSE 3</a></li>

    <li class="js_toggling_tab"><a href="#">NYSE 4</a></li>
    <li class="js_toggling_tab"><a href="#">NYSE 5</a></li>
    <li class="js_toggling_tab"><a href="#">NYSE 6</a></li>
  </ul>
</div>
<div>U can add any number of tabls. All u gotta do is to add a class 'js_toggling_tab' to it.</div>
</body>
</html>




 Digg

 Del.icio.us

 Reddit

 SlashDot

Thursday, September 3, 2009

Onclick link disabling with jQuery


Days back I have come across a common requirement to disable link on clicking it once. Typically, it's because on click of those links some AJAX thins happen and some fragments of the page gets updated.

I had those sort of links across screens and I have written Javascript using jQuery as 'Unobtrusive Javascript'. All I gotta do is to add a class called 'j_link_to_disable' to the links I wanted to disable. As class name of the element is supposed to be used to specify style the prefix 'j_' differentiates from javascript used class names.

<html>
  <head>
    <title>Link disabling test</title>
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  </head>
                                           
  <body>
 
   <p><a href="#" id="vanish_link_id" class="link_to_disable">Some link to disable</a></p>
   <p><a href="#" id="vanish_link_id" class="link_to_disable">Another link to disable</a></p>
   <p><a href="#" id="vanish_link_id">Some link NOT to disable</a></p>


    <script type="text/javascript">
	$($('.link_to_disable').click(
      	 function disableLink(){
	        link =  $("#vanish_link_id");       
      	  link.after('<p>'+link.text()+'</p>').remove();
		 event.preventDefault();
       }));
    </script>

  </body>                               
</html>