Daily Coding

JavaScript Exception Handling Techniques

Daily Coder — Tue, 04 Aug 2009 03:49

Like the Object oriented programming the exception handling is also not used while coding in JavaScript. That why in most of cases if there is any problem in one part in a page then surprisingly other part also stops working. In this post we will be discussing the various techniques to handle exceptions in JavaScript.

Using try..catch block

try..catch block in JavaScript is very much similar to the regular C# try..catch block. The suspected code will be put in try block and all exceptions which will occur in the try block will be caught in catch block.

window.onload = function()
{
    try
    {
        var x = 90;
        var value = x / y;
    }
    catch(err)
    {
        document.write(err.name + ": " + err.message + "<br/>");
    }
}
Output:
TypeError: 'y' is undefined

In catch you will get the object containing type and description of the exception. More over you can also use finally block in the same way as you use in C#.

window.onload = function()
{
    try
    {
        var x = 90;
        var value = x / y;
    }
    catch(err)
    {
        document.write(err.name + ": " + err.message + "<br/>");
    }
    finally
    {
        alert('This is finally block');
    }
}

Using onerror event

onerror event will be raised each time there is any error while performing a action in the document. This like on place exception handling similar to Application_Error in ASP.NET. Here is sample code which demonstrate this:

window.onload = function()
{
    var x = 90;
    var value = x / y;
}

window.onerror = function(errorMeaage, fileName, lineNumber)
{
    document.write('Error: ' + errorMeaage);
}

Using jQuery Solution

It is similar to using onerror but with jQuery syntax. The syntax is:

$(window).error(
    function(errorMeaage, fileName, lineNumber)
    {
        // handle error here
    }
);

Top 5 Small but Must have Extension Methods

Daily Coder — Thu, 28 May 2009 00:00

In this post I want to cover some very basic and small extension methods which are very useful for any developer. All below mentioned extension method are not doing any complex operation. Rather they are just performing very simple task which you generally encounter a lots of times in your day today coding.

Download Source Files

1. IsNull

This is probably most commonly used expression. A lots of places in out code we check to null references. We usually add the obj == null or obj != null check to do this. Here is the IsNull extension method

public static bool IsNull(this object source)
{
    return source == null;
}

Using the you can avoid the lazy null check. Example:

public void ProcessData(DataSet input)
{
    if (!input.IsNull())
    {
        // business logic here
    }
}

2. FormatString

We often use string.Format to format the string like

string message = string.Format("Welcome {0} (Last login: {1})", 
    userName, lastLogin);

The alternative way to do this is using below extension method

public static string FormatString(this string format, params object[] args)
{
    return string.Format(format, args);
}

Now the above example can be re-written as

string message = "Welcome {0} (Last login: {1})".FormatString(userName, lastLogin);

3. RaiseEvent

How you generally raise you events? I guess something like below

protected void OnMyEvent(EventArgs e)
{
    if (MyEvent != null)
    {
        MyEvent(this, e);
    }
}

Here for each event you need to check the null reference before you raise it and also you create a new method so that you don’t have to add this check each place from where you are raising the event even if there is no special logic in the function. Here it the set of extension method to raise the events that matches the signature of EventHandler or EventHalder<TEventArgs>:

public static void Raise(this EventHandler eventHandler, 
    object sender, EventArgs e)
{
    if (eventHandler != null)
    {
        eventHandler(sender, e);
    }
}

public static void Raise<T>(this EventHandler<T> eventHandler,
    object sender, T e) where T : EventArgs
{
    if (eventHandler != null)
    {
        eventHandler(sender, e);
    }
}

Now this is how to raise the above event

MyEvent.Raise(this, e);

4. Match

This extension method is for pattern matching in any string using Regex. This is how you generally use it

Regex regex = new Regex("[0-9]");
if (regex.IsMatch(myData))
{
    // do someting
}

And here is the extension method to do this simply

public static bool Match(this string value, string pattern)
{
    Regex regex = new Regex(pattern);
    return regex.IsMatch(value);
}

After this look at the code below. It became much simpler than the traditional approach:

if (myData.Match("[0-9]"))
{
    // do someting
}

5. ToInt

This method has three flavors, for Int16, Int32 and Int64. This can be easily used while doing string to int conversion. Here are the methods:

public static long ToInt16(this string value)
{
    Int16 result = 0;

    if (!string.IsNullOrEmpty(value))
        Int16.TryParse(value, out result);

    return result;
}

public static long ToInt32(this string value)
{
    Int32 result = 0;

    if (!string.IsNullOrEmpty(value))
        Int32.TryParse(value, out result);

    return result;
}

public static long ToInt64(this string value)
{
    Int64 result = 0;

    if (!string.IsNullOrEmpty(value))
        Int64.TryParse(value, out result);

    return result;
}

I hope you enjoyed reading this article. You can download the source file from here also

Download Source Files

Business Cards and Postcards Giveaway : Comment and Win

Daily Coder — Thu, 26 Mar 2009 00:46

This contest is closed now. There were very few comments; so it was not difficult to choose the winners. Here are the winners

1st Prize - 1000 Standard Size Business Cards - Alex Lyman
2nd Prize - 500 4x6" Postcards - Alin-T

Congrats winner. You will be soon contacted by UPrinting for the preferences.

Here is business card giveaway for the readers of DailyCoding. The prizes are sponsored by the UPrinting.

1st Prize - 1000 Standard Size Business Cards

2nd Prize - 500 4x6" Postcards

You can choose from any of their stocks for these items. The rules are very simple:

Leave a comment (along with your email address) at the end of this post, describing what you would use the free business cards and/or postcards for.
Two winners will be chosen based on most interesting comments.
There is no fix end date of this contest.
Winners in the United States and Canada qualify for free shipping. Shipping fees will apply to winners outside these areas.

Those who don’t know about the UPrinting; It is a leading online printing business card printing company that provides high quality printing of business cards¸postcards, brochures, catalogues, posters, flyers at the most affordable prices.

Add Vista Look to your WPF Control on Windows XP

Daily Coder — Tue, 27 Jan 2009 06:22

Vista had come with new and cool look & feel. If you want to add the Vista Aero style theme to you WPF application running on Window XP then it is very easy trick. You don’t need any third party library or tool to achieve this.

To do this all you need to do is to add following lines of xaml code into the designer of your window right after window tag:

<ResourceDictionary Source="/PresentationFramework.Aero, 
   Version=3.0.0.0, Culture=neutral, 
   PublicKeyToken=31bf3856ad364e35, 
   ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml" />

If you want to apply this look through out the application then add this to app.xaml under <Application.Resources> section.

Before Aero Theme

After Aero Theme

The limitation of this technique is that it don't change the look of container form. You can see it still looks like a normal XP form.

Customized Html Controls: Creating Custom Checkbox

Daily Coder — Wed, 17 Dec 2008 02:21

Under “Customized Html Controls” section I will discuss about how to create and customized standard html controls. This is first article in this category. This will discuss about how we can create a custom checkbox using CSS and jQuery.

Checkbox Image

For this you need two images, one for checked state of checkbox and another for unchecked state of the checkbox. However, you can also use a single image containing both checked and unchecked state and use CSS trick like I use.

Checkbox CSS

Here is the CSS classes we will be going to use for the checkbox

.checkBox
{
    background-position: 0px 0px;
}

.checkBoxClear
{
    background-position: -21px 0px;
}

.checkBox, .checkBoxClear
{
    background-image: url('CheckBox.png');
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    width: 21px;
    height: 21px;
    padding: 0px;
    margin: 0px;
    cursor: hand;
}

Checkbox JavaScript

Finally below is the JavaScript code using jQuery which will control the checking and un-checking of our checkbox using click event. It will basically toggle the CSS which will change the state.

<script language="javascript" type="text/javascript">
<!--
$(document).ready(function()
{
    $(".checkBox,.checkBoxClear").click(function(srcc)
    {
        if ($(this).hasClass("checkBox"))
        {
            $(this).removeClass("checkBox");
            $(this).addClass("checkBoxClear");
        }
        else
        {
            $(this).removeClass("checkBoxClear");
            $(this).addClass("checkBox");
        }
    });        
});
//-->
</script>

Html Code

Here is a sample Custom Checkbox with the html code.

Select options

Lorem ipsum dolor sit amet

Aenean vitae elit quis erat interdum tempus

Duis laoreet viverra quam

Mauris pellentesque tristique erat

<h3>Select options</h3>
<div id="Div1" class="checkBox">&nbsp;</div>
<label for="Div1">
    Lorem ipsum dolor sit amet</label><br />
<div id="Div2" class="checkBox">
    &nbsp;</div>
<label for="Div2">
    Aenean vitae elit quis erat interdum tempus</label>
<div id="Div3" class="checkBox">
    &nbsp;</div>
<label for="Div3">
    Duis laoreet viverra quam</label>
<div id="Div4" class="checkBox">
    &nbsp;</div>
<label for="Div4">
    Mauris pellentesque tristique erat</label>

Random Sort a List Using LINQ

Daily Coder — Fri, 21 Nov 2008 02:16

LINQ (Language Integrated Query) is a one of very useful feature of .net 3.5 framework. This allows you to query objects and perform complex operations simply and efficiently. There are lots of trick which can be used with the help of LINQ. In this article I am explaining how can we random sort a List using LINQ

Random Sort

Consider the below Employee class:

public class Employee
{
    public int Id
    {
        get;
        set;
    }
    public string Name
    {
        get;
        set;
    }
}

This is how you can randomly sort the List<Employee> object:

List<Employee> list = new List<Employee>();

list.Add(new Employee { Id = 1, Name = "Davolio Nancy" });
list.Add(new Employee { Id = 2, Name = "Fuller Andrew" });
list.Add(new Employee { Id = 3, Name = "Leverling Janet" });
list.Add(new Employee { Id = 4, Name = "Peacock Margaret" });
list.Add(new Employee { Id = 5, Name = "Buchanan Steven" });
list.Add(new Employee { Id = 6, Name = "Suyama Michael" });
list.Add(new Employee { Id = 7, Name = "King Robert" });
list.Add(new Employee { Id = 8, Name = "Callahan Laura" });
list.Add(new Employee { Id = 9, Name = "Dodsworth Anne" });

list = list.OrderBy(emp => Guid.NewGuid()).ToList();

Purely CSS Callouts

Daily Coder — Thu, 16 Oct 2008 02:16

This article explains how you can create callouts using CSS and without using a single image. This will use the CSS thick border technique for creating slant area. Look at the callouts below:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

Ramesh Soni Said

This callout is created only using CSS. The arrow shown in the callout is basically a DIV with thick up border and transparent left and right border. And its height and width are 0. You only see the border or the DIV which will create the arrow like effect.

Here is the complete CSS and html code of this:

CSS Code

<style type="text/css">    
    .calloutUp
    {
        height: 0;
        width: 0;
        border-bottom: 12px solid #ffffff;
        border-left: 12px dotted transparent;
        border-right: 12px dotted transparent;
        left: 0px;
        top: 0px;
        margin-left: 20px;
        z-index: 10;
    }
    .calloutUp2
    {
        position: relative;
        left: -10px;
        top: 2px;
        height: 0;
        width: 0;
        border-bottom: 10px solid #9999ff;
        border-left: 10px dotted transparent;
        border-right: 10px dotted transparent;
        z-index: 11;
    }
    .calloutDown
    {
        height: 0;
        width: 0;
        border-top: 12px solid #ffffff;
        border-left: 12px dotted transparent;
        border-right: 12px dotted transparent;
        left: 0px;
        top: 0px;
        margin-left: 20px;
        z-index: 11;
    }
    .calloutDown2
    {
        position: relative;
        left: -10px;
        top: -12px;
        height: 0;
        width: 0;
        border-top: 10px solid #9999ff;
        border-left: 10px dotted transparent;
        border-right: 10px dotted transparent;
        z-index: 10;
    }
    .divContainerUp
    {
        background-color: #9999ff;
        border: solid 1px #ffffff;
        position: relative;
        top: -1px;
        z-index: 9;
        width: 500px;
        padding: 4px;
    }
    .divContainerDown
    {
        background-color: #9999ff;
        border: solid 1px #ffffff;
        position: relative;
        top: 1px;
        z-index: 3;
        width: 500px;
        padding: 4px;
    }
    .divContainerMain
    {
        background-color: #ccccff;
        padding: 8px;
    }
</style>

Html Code

<div class="divContainerMain">
    <h3>
        Up Side Callout</h3>
    <div>
        <a href="#">Ramesh Soni</a> Said</div>
    <div class="calloutUp">
        <div class="calloutUp2">
        </div>
    </div>
    <div class="divContainerUp">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
        turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
        Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
        viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
        consectetuer.
    </div>
    <br />
    <br />
    <h3>
        Down Side Callout</h3>
    <div class="divContainerDown">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
        turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
        Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
        viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
        consectetuer.
    </div>
    <div class="calloutDown">
        <div class="calloutDown2">
        </div>
    </div>
    <div>
        <a href="#">Ramesh Soni</a> Said</div>
</div>

Here is a full example and up side and down side callouts.

Up Side Callout

Ramesh Soni Said

Down Side Callout

Ramesh Soni Said

Top 7 Tip for Optimizing CSS

Daily Coder — Mon, 06 Oct 2008 02:13

CSS is very important component for design and layout of web pages. These includes all the syles like colors, size, position, backgrounds, fonts etc. to enrich the look and feel of you pages, but it is very easy for CSS to grow to a huge size if you are not following proper guidelines to optimize this. By doing so you are not only making you css cleaner but also decreasing the response size of file. Here are some tip for optimizing the CSS:

1. Aggregate Multiple Properties

Combine multiple properties. For example

for margin, instead of

margin-top: 8px;
margin-right: 4px;
margin-bottom: 8px;
margin-left: 4px;

you can use

margin: 8px 4px 8px 4px;

for font instead of

font-family: Tahoma;
font-weight: bold;
font-style: italic;
font-size: 12px;

you can use

font: italic bold 12px Tahoma;

for background instead of

background-image: url(bk_main.jpg);
background-repeat: repeat-x;
background-color: #ccccff;

you can use

background: #ccccff url(bk_main.jpg) repeat-x;

2. Group Common Styles

If you are having something like below where two element share some common properties

H2
{
    font-size: 16pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H3
{
    font-size: 14pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

Then you can share their common properties like below

H2, H3
{
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H2
{
    font-size: 16pt;
}

H3
{
    font-size: 14pt;
}

3. Use Shorthand Hexadecimal for Simple Colors

You can also specify simple colors using shorthand color names. For example

#99ff33 can be replace with #9f3
#ff0000 can be replace with #f00
#000000 can be replace with #000

4. Use Classes in Parent Elements

You may specify element style in the parent control. Instead of using

<p class="myClass">Home</p>
<p class="myClass">About</p>
<p class="myClass">Contact</p>
<p class="myClass">Sitemap</p>

you may also do this

<div class="myClass">
    <p>Home</p>
    <p>About</p>
    <p>Contact</p>
    <p>Sitemap</p>
<div>

5. Don't Use Giddy Comments

The below comment

/*****************************/
/**********Header CSS*********/
/*****************************/

can also simply written as

/*Header CSS*/

6. Never Attach Style to Elements

Always specify styles in CSS. Don't add styles directly to elements. Instead of

<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Home</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">About</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Contact</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Sitemap</p>

use

<p class="myClass">Home</p>
<p class="myClass">About</p>
<p class="myClass">Contact</p>
<p class="myClass">Sitemap</p>

7. Remove Extra White Spaces and Line breaks

For decreasing the file size you can remove the extra white spaces and lines breaks between styles.

Animated Progress Bar without Images

Daily Coder — Wed, 03 Sep 2008 02:13

Look at below progress bars

These don't contain any images. They all are pure JavaScript based progress bars. They uses the JavaScript Timer Class for the delay and jQuery fading function transparency for animated effect. To add a progress bar to the page is very easy, just add include the ProgressBar class and add following code:

var bar1 = new ProgressBar("progressContainer1", 10, 
  "progressTable", "cell1", "size");
bar1.Start();

First parameter is the ID of the div which will contain the progress bar. Second parameter is number of cells you want to have in progress bar. Third is the css class for outer table of the progress bar. Fourth is the the css class for each celll and fifth the the css class for the size of each cell.

Here is the code for the whole example and this is the link to the live demo.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animated Progress Bar without images</title>

    <script src="jquery.js" type="text/javascript"></script>

    <style media="screen" type="text/css">
        .progressTable
        {
            border: solid 1px #e1e1e1;
        }
        
        .size, .cell1, .cell2, .cell3
        {
            width: 15px;
            height: 15px;    
        }
        .cell1
        {        
            background-color: #22dd22;
            display: none;
        }
        .cell2
        {        
            background-color: #dd2222;
            display: none;
        }
        .cell3
        {        
            background-color: #2222dd;
            display: none;
        }
    </style>
    <script language="javascript">
    <!--
    $(document).ready(function()
    {
        var bar1 = new ProgressBar("progressContainer1", 10, 
          "progressTable", "cell1", "size");
        bar1.Start();
        
        var bar2 = new ProgressBar("progressContainer2", 10, 
          "progressTable", "cell2", "size");
        bar2.Start();
        
        var bar3 = new ProgressBar("progressContainer3", 10, 
          "progressTable", "cell3", "size");
        bar3.Start();
    });
        
    var ProgressBar = function(divId, cellCount, tableCss, cellCss, sizeCss)
    {
        var index = -1;
        var timerObj = new Timer();
        
        this.Init = function()
        {
            var str = "<table class='" + tableCss + "' cellpadding='0' cellspacing='1'><tr>";
            for(var cnt=0; cnt<cellCount; cnt++)
            {
                str += "<td class='" + sizeCss + "'><div class='" 
                  + cellCss + " " + cellCss + cnt + "'></div></td>";
            }
            str += "</tr></table>";
            $("#" + divId).append(str);
            
            timerObj.Interval = 100;
            timerObj.Tick = timer_tick;
        }
        
        this.Start = function()
        {
            this.Init();
            timerObj.Start();
        }
        
        function timer_tick()
        {
            //debugger;
            index = index + 1;
            index = index % cellCount;
            
            $("#" + divId + " ." + cellCss + index).fadeIn(10);
            $("#" + divId + " ." + cellCss + index).fadeOut(500);
        }
    }
    
    // Declaring class "Timer"
    var Timer = function()
    {        
        // Property: Frequency of elapse event of the timer in millisecond
        this.Interval = 1000;
        
        // Property: Whether the timer is enable or not
        this.Enable = new Boolean(false);
        
        // Event: Timer tick
        this.Tick;
        
        // Member variable: Hold interval id of the timer
        var timerId = 0;
        
        // Member variable: Hold instance of this class
        var thisObject;
        
        // Function: Start the timer
        this.Start = function()
        {
            this.Enable = new Boolean(true);
    
            thisObject = this;
            if (thisObject.Enable)
            {
                thisObject.timerId = setInterval(
                function()
                {
                    thisObject.Tick(); 
                }, thisObject.Interval);
            }
        };
        
        // Function: Stops the timer
        this.Stop = function()
        {            
            thisObject.Enable = new Boolean(false);
            clearInterval(thisObject.timerId);
        };
    
    };
    
    //-->
    </script>

</head>
<body>
    <div id="progressContainer1">
    </div>
    <br />
    <div id="progressContainer2">
    </div>
    <br />
    <div id="progressContainer3">
    </div>
</body>
</html>

Maintaining Dirty and New state of objects

Daily Coder — Tue, 26 Aug 2008 02:10

I have worked on CSLA on few projects and I am very much impressed from all of its features. However not every application wants to use CSLA but may be some features out of it. This post is about adding IsDirty and IsNew capabilities to our object. I used CSLA as reference for create these classes.

Base Classes Definitions

ObjectBase

public class ObjectBase
{
    private bool _isDirty;
    private bool _isNew = true;

    public bool IsDirty
    {
        get { return _isDirty; }
    }

    public bool IsNew
    {
        get { return _isNew; }
    }

    protected void MarkDirty()
    {
        _isDirty = true;
    }

    protected void MarkClean()
    {
        _isDirty = false;
    }

    protected void MarkAsNew()
    {
        _isNew = true;
    }

    protected void MarkAsOld()
    {
        _isNew = false;
        _isDirty = false;
    }
}

ObjectListBase

public class ObjectListBase<T> : List<T> where T : ObjectBase
{
    public bool IsDirty
    {
        get
        {
            foreach (T item in this)
            {
                if (item.IsDirty)
                    return true;
            }
            return false;
        }
    }
}

Using Base Classes

To use these base classes, simply inherit your business object from ObjectBase and collection objects from ObjectListBase. Let take example:

Suppose a class Employee represents an employee entity and its collection class EmployeeList.

Employee

public class Employee : ObjectBase
{
    // Member Variables
    private int _employeeCode;
    private string _employeeName;
    private decimal _salary;

    // Public properties
    public int EmployeeCode
    {
        get { return _employeeCode; }
        set
        {
            if (_employeeCode != value)
            {
                _employeeCode = value;
                base.MarkDirty();
            }
        }
    }

    public string EmployeeName
    {
        get { return _employeeName; }
        set
        {
            if (_employeeName != value)
            {
                _employeeName = value;
                base.MarkDirty();
            }
        }
    }

    public decimal Salary
    {
        get { return _salary; }
        set
        {
            if (_salary != value)
            {
                _salary = value;
                base.MarkDirty();
            }
        }
    }

    // Constructor
    public Employee()
    {
    }

    public void Fetch(int employeeCode)
    {
        // Code to fetch employee
        base.MarkAsOld();
    }

    public void Save()
    {
        // Code to save employee
        if (base.IsNew)
        {
            // Code Insert into database
        }
        else
        {
            // Code to Update into databse
        }

        base.MarkClean();
        base.MarkAsOld();
    }
}

EmployeeList

public class EmployeeList : ObjectListBase<Employee>
{
    public static EmployeeList GetAllEmployees()
    {
        EmployeeList employes = new EmployeeList();
        employes.FetchAll();
    }

    protected EmployeeList()
    {
    }

    protected void FetchAll()
    {
        // Code to fetch employee list and 
        // add to this list
    }

    public void Save()
    {
        foreach (Employee employee in this)
        {
            if (employee.IsDirty)
            {
                employee.Save();
            }
        }
    }
}

Using Objects

See the code below:

EmployeeList employess = EmployeeList.GetAllEmployees();

// ..
// do operation of list
// ..

// Saves the list
if (employess.IsDirty)
{
    employess.Save();
}

Above code fetch list employee from database. You may perform add/edit operations on this. The class will manage the dirty and new state of object itself and Saves only those object in which changes are done. In this way we can save unnecessary trips to database.

Object Oriented Programming with JavaScript : Timer Class

Daily Coder — Wed, 13 Aug 2008 02:10

JavaScript with Oops is not much used by developers while creating application however we can make our life easy if we use JavaScript with Oops.

Let's started object oriented programming in JavaScript by taking example of a Timer class, similar to the Timer control in windows application.

Create Class

Create the class Timer. Below code shows how to declare the class

// Declaring class "Timer"
var Timer = function()
{
    // ....        
    // Class body
    // ....
}

Add Public Properties

To add public properties to the class we use this keyword as shown below

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
}

You can see that we have created 2 properties (Interval and Enable) of Timer class and assigned default values to them.

Add Events (If any)

Now we might want to add events to the class in case we need. For Timer class we need "Tick" event which will be fired every after "Interval". Event are added the same way as the public properties.

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
    
    // Event: Timer tick
    this.Tick;
}

Add Private Member Variables

We need 2 private variable in the class to hold the timer Id and the class instance. The private variable are added using 'var' keyword.

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
    
    // Event: Timer tick
    this.Tick;
    
    // Member variable: Hold interval id of the timer
    var timerId = 0;
    
    // Member variable: Hold instance of this class
    var thisObject;
}

Add Functions

Public functions are also added the same way as public properties using this keyword. We need 2 function in the timer, first "Start" to start the timer and second "Stop" to stop the timer.

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
    
    // Event: Timer tick
    this.Tick;
    
    // Member variable: Hold interval id of the timer
    var timerId = 0;
    
    // Member variable: Hold instance of this class
    var thisObject;
    
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);

        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick(); 
            }, thisObject.Interval);
        }
    };
    
    // Function: Stops the timer
    this.Stop = function()
    {            
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };

};

You can see I have incorporated the timer functionality using the setInterval function of the JavaScript. Our class is ready for use now.

Using the Class

To use the class first create the instance of Timer.

var obj = new Timer();

Now assign the value to its properties as needed.

obj.Interval = 300;

Attach handler to the events

obj.Tick = timer_tick;

function timer_tick()
{
    // Do something..
}

Now call the "Start" function to start the timer

obj.Start();

To stop the timer anytime in between just call the "Stop" function.

obj.Stop();

Here is a working example of this class for you reference.

Avoiding Event != null Check

Daily Coder — Thu, 07 Aug 2008 02:10

Lets take a simple example of declaring and raising a custom event. Look at the code below:

public class EventTestClass
{
    public event EventHandler NewEvent;

    protected void OnNewEvent()
    {
        NewEvent(this, EventArgs.Empty);
        // Above code will raise System.NullReferenceException
        // exception if there is no handler registered with it.
    }
}

As you know if if don't attach any handler to the NewEvent above then the OnNewEvent will throw exception because the NewEvent is null at that time. To get rid of this we generally put a null check on the event as shown below:

public class EventTestClass
{
    public event EventHandler NewEvent;

    protected void OnNewEvent()
    {
        if (NewEvent != null)
        {
            NewEvent(this, EventArgs.Empty);
        }
    }
}

There could be better way solving problem look at the solution below:

public class EventTestClass
{
    public event EventHandler NewEvent = delegate { };

    protected void OnNewEvent()
    {
        NewEvent(this, EventArgs.Empty);
    }
}

The above code will work perfectly fine even if you don't attach any handler to the event. This is because the event is not null now as we have already registered on empty handler with it.

Layout Form without Tables with CSS Trick

Daily Coder — Mon, 04 Aug 2008 02:08

Creating a form with lots of field could be a tedious task as it involves playing with TR and TD in html table. Along with that it also increases the size and complexity of the html code of out page. e.g. Look at the below form:

Title
First Name
Last Name
Address

City
Zip

Could you imagine it to create without using table or nested div. Well if no then you can just by using easy CSS trick. here is the whole css + html code for doing this.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout Form without Tables</title>
    <style type="text/css">
    .formLayout
    {
        background-color: #f3f3f3;
        border: solid 1px #a1a1a1;
        padding: 10px;
        width: 300px;
    }
    
    .formLayout label, .formLayout input
    {
        display: block;
        width: 120px;
        float: left;
        margin-bottom: 10px;
    }
 
    .formLayout label
    {
        text-align: right;
        padding-right: 20px;
    }
 
    br
    {
        clear: left;
    }
    </style>
</head>
<body>
    <div class="formLayout">
        <label>Title</label>
        <select>
            <option>Mr.</option>
            <option>Dr.</option>
            <option>Ms.</option>
            <option>Mrs.</option>
        </select><br>
        <label>First Name</label>
        <input id="name" name="name"><br>
        <label>Last Name</label>
        <input id="Text1" name="name"><br>
        <label>Address</label>
        <input id="address1"><br>
        <label></label>
        <input id="address2"><br>
        <label>City</label>
        <select id="city">
            <option>New York</option>
            <option>Chicago</option>
            <option>etc.</option>
        </select><br>
        <label>Zip</label>
        <input id="zip"><br>
    </div>
</body>
</html>

"Default Text" Fields Using Simple jQuery Trick

Daily Coder — Fri, 01 Aug 2008 02:05

A lots of the time you want to add instructions to text box fields of the page to provide usability information to the users. Alternate way of doing this could be using default text in the input fields. A default text is the text which appears in the text box when it is empty. e.g.

Name
Email
Website
Comment

You can see this is useful and good idea to have this in the UI. There is an easy trick in jQuery to do this. Below is the step by step procedure to do this.

Step1

If you don't have jQuery then download latest from its website and include in you page.

<script src="jquery.js" type="text/javascript"></script>

Step 2

Create two CSS classes defaultText and defaultTextActive as mentioned below.

<style media="screen" type="text/css">
    .defaultText { width: 300px; }
    .defaultTextActive { color: #a1a1a1; font-style: italic; }
</style>

Step 3

Add this JavaScript to you page

<script language="javascript">
<!--
$(document).ready(function()
{
    $(".defaultText").focus(function(srcc)
    {
        if ($(this).val() == $(this)[0].title)
        {
            $(this).removeClass("defaultTextActive");
            $(this).val("");
        }
    });
    
    $(".defaultText").blur(function()
    {
        if ($(this).val() == "")
        {
            $(this).addClass("defaultTextActive");
            $(this).val($(this)[0].title);
        }
    });
    
    $(".defaultText").blur();        
});
//-->
</script>

Step 4

To every text field or text area where you want to apply default text add "defaultText" as css class and specify the default text in the title attribute. e.g.

<input class="defaultText" title="e.g. someone@example.com" type="text" />

You default text setup is ready. Run the page and see the magic. Click here for a running sample page.

How not to cache a page output in ASP.NET

Daily Coder — Thu, 31 Jul 2008 02:05

Tip: Websites based on ASP.net would benefit from ASP.net hosting because it was specially designed to ensure error free work of ASP.net scripts.

In one of my post, I posted about How to cache a page output in ASP.NET, but sometime you have requirement like the page should never be cached. Every time user request a particular url it should give you fresh version of the page or file. To achieve this simply added Location="None" to the OutputCache directives.

<%@ OutputCache Location="None" VaryByParam="None" %>

Using Location="None" will tell the browser not to cache the page and hence your can prevent the page from saving on temporary internet files on client's machine. This could be useful when you don't want you pages or some particular page to be stored at client side for security reasons.

Creating always visible div using CSS

Daily Coder — Tue, 29 Jul 2008 02:02

You might have seen floating content of web sites which is always visible on the page even if you scroll it. This is easy achieve thing by using just CSS. However there is also JavaScript alternative for this but the CSS one is smoother and faster as this doesn't includes any run time calculation. The below step by step process will guide to how to add a always visible div on web page.

Step 1

Create a css class and name it "visibleDiv" (or the one you like). And add position as "fixed";

<style type="text/css">
<!--
.visibleDiv
{
    position: fixed;
}
//-->
</style>

Step 2

Decide where you want to anchor the always visible floating div. There could be four option top left, top right, bottom left and bottom right. Based on the type of anchor you need specify the relative distance by using left, top, right, bottom in css.

<style type="text/css">
<!--
/*For top left*/
.visibleDiv
{
    top: 10px;
    left: 10px;
}

/*For top right*/
.visibleDiv
{
    top: 10px;
    right: 10px;
}

/*For bottom left*/
.visibleDiv
{
    left: 10px;
    bottom: 10px;
}

/*For bottom right*/
.visibleDiv
{
    bottom: 10px;
    right: 10px;
}
//-->
</style>

Step 3

Add a new div to the page and specify the class="visibleDiv".

<div class="visibleDiv">
</div>

You always visible div is ready. You can see that position of this div remain same even if you scroll the page. You can see this page has four always visible div. Below is a full sample code including html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Always Visible Div</title>
    <style type="text/css">
<!--
.visibleDiv, #topLeft, #topRight, #bottomLeft, #bottomRight
{
    position: fixed;
    width: 150px;
    border: solid 1px #e1e1e1;
    vertical-align: middle;
    background: #ffdab9;
    text-align: center;
}

#topLeft
{
    top: 10px;
    left: 10px;
}

#topRight
{
    top: 10px;
    right: 10px;
}

#bottomLeft
{
    bottom: 10px;
    left: 10px;
}

#bottomRight
{
    bottom: 10px;
    right: 10px;
}
//-->
</style>
</head>
<body bgcolor="">
    <div id="topLeft">
        Top Left
    </div>
    <div id="topRight">
        Top Right
    </div>
    <div id="bottomLeft">
        Bottom Left
    </div>
    <div id="bottomRight">
        Bottom Right
    </div>
    <div style="height: 2000px; text-align: center; vertical-align: middle;">
        <p>
            Always visible sample</p>
    </div>
</body>
</html>

Top Left

Top Right

Bottom Left

Bottom Right

Are You Throwing Exceptions Correctly?

Daily Coder — Fri, 25 Jul 2008 02:02

We generally use exception and stack trace for tracking down to the problem in our code. But a lots of the time, in case you are not using proper way to throw exceptions then it might make difficult to narrow down the problem. Whenever we throw an exception; it is recorded into the exception stack trace.

Let understand this with an example. Consider the below console application:

using System;
using System.Text;

namespace ExceptionTest
{
  class Program
  {
    static void Main(string[] args)
    {
      new ExceptionTester().FirstCall();
    }
  }

  public class ExceptionTester
  {
    public void FirstCall()
    {
      try
      {
        SecondCall();
      }
      catch(Exception ex)
      {
        Console.WriteLine(ex.StackTrace);
      }
    }

    public void SecondCall()
    {
      try
      {
        ThirdCall();
      }
      catch
      {
        throw;
      }
    }

    public void ThirdCall()
    {
      try
      {
        ForthCall();
      }
      catch
      {
        throw;
      }
    }

    public void ForthCall()
    {
      int d = 0;
      int x = 10 / d;
    }
  }
}

You may see the that the initially the FirstCall() method is called which internally calling SecondCall() > ThirdCall() > ForthCall() and the ForthCall is generating System.DivideByZeroException exception. Each function is throwing the exception by using throw keyword. Output of the above program will be:

Attempted to divide by zero.
   at ExceptionTest.ExceptionTester.ForthCall() in C:\ExceptionTest\Program.cs:line 56
   at ExceptionTest.ExceptionTester.ThirdCall() in C:\ExceptionTest\Program.cs:line 49
   at ExceptionTest.ExceptionTester.SecondCall() in C:\ExceptionTest\Program.cs:line 37
   at ExceptionTest.ExceptionTester.FirstCall() in C:\ExceptionTest\Program.cs:line 20

By looking at above stack trace you could easily track down the root cause of the problem. Method ForthCall() is the culprit.

Do not Throw Same Exception

A lots of time its common mistake to throw same exception again instead of re-throwing it. Look at below bad practice of coding:

using System;
using System.Text;

namespace ExceptionTest
{
  class Program
  {
    static void Main(string[] args)
    {
      new ExceptionTester().FirstCall();
    }
  }

  public class ExceptionTester
  {
    public void FirstCall()
    {
      try
      {
        SecondCall();
      }
      catch(Exception ex)
      {
        Console.WriteLine(ex.Message);
        Console.WriteLine(ex.StackTrace);
      }
    }

    public void SecondCall()
    {
      try
      {
        ThirdCall();
      }
      catch(Exception ex)
      {
        throw ex;
      }
    }

    public void ThirdCall()
    {
      try
      {
        ForthCall();
      }
      catch (Exception ex)
      {
        throw ex;
      }
    }

    public void ForthCall()
    {
      int d = 0;
      int x = 10 / d;
    }
  }
}

"throw ex;" is basically throwing the same exception again instead of re-throwing the original exception. Because of this the all exception stack trace information is lost till this point and stack started to build again. The output of above program will be:

Attempted to divide by zero.
   at ExceptionTest.ExceptionTester.SecondCall() in C:\ExceptionTest\Program.cs:line 37
   at ExceptionTest.ExceptionTester.FirstCall() in C:\ExceptionTest\Program.cs:line 20

You can see we can only see methods SecondCall() and FirstCall() in the exception stack. Final conclusion of this whole article is to be careful while throwing exception.

The Script tag runat="server" Problem Solution Using ResolveUrl

Daily Coder — Mon, 21 Jul 2008 01:59

This might be an easy trick, but I ran into this issue a while ago; we can not specify the runat="server" attribute on a JavaScript file link as we do for images and style sheet.

<link id="mainSheet" runat="server" href="~/Images/styles.css" 
rel="stylesheet" type="text/css" />

By using runat=server the href of the link will automatically be resolved by the asp.net in we have placed ~/ in the path. This gives us advantages when we are linking this into a control and the control could be used by other pages places at a different directory level.

Same problem arise with using linked JavaScript. But this cannot be solved by using runat=server tag. Here is an alternative way to overcome this problem.

<script language="javascript" src="<%=ResolveUrl("~/App_Themes/MainTheme/jquery.js")%>" type="text/javascript"></script>

MIME content-types with file extension

Daily Coder — Tue, 15 Jul 2008 01:59

A lots of time we required MIME content-types of certain types of files e.g. if we are writing a pdf type response from a asp.net web application then we need the MIME content-types of pdf document. The following is the list of MIME content-types of commonly used along with their file extension.

MIME type/subtype	File Extensions
application/andrew-inset	ez
application/mac-binhex40	hqx
application/mac-compactpro	cpt
application/mathml+xml	mathml
application/msword	doc
application/octet-stream	bin dms lha lzh exe class so dll
application/oda	oda
application/ogg	ogg
application/pdf	pdf
application/postscript	ai eps ps
application/rdf+xml	rdf
application/smil	smi smil
application/srgs	gram
application/srgs+xml	grxml
application/vnd.mif	mif
application/vnd.mozilla.xul+xml	xul
application/vnd.ms-excel	xls
application/vnd.ms-powerpoint	ppt
application/vnd.wap.wbxml	wbxml
application/vnd.wap.wmlc	.wmlc wmlc
application/vnd.wap.wmlscriptc	.wmlsc wmlsc
application/voicexml+xml	vxml
application/x-bcpio	bcpio
application/x-cdlink	vcd
application/x-chess-pgn	pgn
application/x-cpio	cpio
application/x-csh	csh
application/x-director	dcr dir dxr
application/x-dvi	dvi
application/x-futuresplash	spl
application/x-gtar	gtar
application/x-hdf	hdf
application/x-httpd-php	.php .php4 .php3 .phtml
application/x-httpd-php-source	.phps
application/x-javascript	js
application/x-koan	skp skd skt skm
application/x-latex	latex
application/x-netcdf	nc cdf
application/x-pkcs7-crl	.crl
application/x-sh	sh
application/x-shar	shar
application/x-shockwave-flash	swf
application/x-stuffit	sit
application/x-sv4cpio	sv4cpio
application/x-sv4crc	sv4crc
application/x-tar	.tgz tar
application/x-tcl	tcl
application/x-tex	tex
application/x-texinfo	texinfo texi
application/x-troff	t tr roff
application/x-troff-man	man
application/x-troff-me	me
application/x-troff-ms	ms
application/x-ustar	ustar
application/x-wais-source	src
application/x-x509-ca-cert	.crt
application/xhtml+xml	xhtml xht
application/xml	xml xsl
application/xml-dtd	dtd
application/xslt+xml	xslt
application/zip	zip
audio/basic	au snd
audio/midi	mid midi kar
audio/mpeg	mpga mp2 mp3
audio/x-aiff	aif aiff aifc
audio/x-mpegurl	m3u
audio/x-pn-realaudio	ram rm
audio/x-pn-realaudio-plugin	rpm
audio/x-realaudio	ra
audio/x-wav	wav
chemical/x-pdb	pdb
chemical/x-xyz	xyz
image/bmp	bmp
image/cgm	cgm
image/gif	gif
image/ief	ief
image/jpeg	jpeg jpg jpe
image/png	png
image/svg+xml	svg
image/tiff	tiff tif
image/vnd.djvu	djvu djv
image/vnd.wap.wbmp	.wbmp wbmp
image/x-cmu-raster	ras
image/x-icon	ico
image/x-portable-anymap	pnm
image/x-portable-bitmap	pbm
image/x-portable-graymap	pgm
image/x-portable-pixmap	ppm
image/x-rgb	rgb
image/x-xbitmap	xbm
image/x-xpixmap	xpm
image/x-xwindowdump	xwd
model/iges	igs iges
model/mesh	msh mesh silo
model/vrml	wrl vrml
text/calendar	ics ifb
text/css	css
text/html	.shtml html htm
text/plain	asc txt
text/richtext	rtx
text/rtf	rtf
text/sgml	sgml sgm
text/tab-separated-values	tsv
text/vnd.wap.wml	.wml wml
text/vnd.wap.wmlscript	.wmls wmls
text/x-setext	etx
video/mpeg	mpeg mpg mpe
video/quicktime	qt mov
video/vnd.mpegurl	mxu
video/x-msvideo	avi
video/x-sgi-movie	movie
x-conference/x-cooltalk	ice

Step by Step Guide to Add a SQL Job in SQL Server 2005

Daily Coder — Thu, 10 Jul 2008 01:56

This is about adding a new SQL Jobs in the Sql Server 2005.

Step 1

Make sure that the SQL Server Agent is up and running. You can see it in the taskbar icon.

If SQL Server Agent is not running, start it from the SQL Server Configuration Manger

You can also start the SQL Server Agent from the command prompt using the command netstart

net start "SQL Server Agent (<instance name>)"
e.g net start "SQL Server Agent (SQLSERVER01)"

Step 2

Connect to the database engine of SQL server using SQL Server Management Studio.

Step 3

Expand the SQL Server Agent. You will see a Jobs folder over there. Right click on jobs and choose Add New.

Step 4

A New Job popup will appear. Specify the name of the job.

Step 5

Cilck next on the "Steps" in the left menu. A sql job can contain one or more steps. A step might be simply an sql statement or a stored procedure call. Add you step here

Job step added

Step 5

Cilck next on the "Schedules" in the left menu. A sql job can contain one or more schedules. A schedule is basically the time at which sql job will run it self. You can specify recurring schedules also.

Job schedule added

You sql job is ready now. However there are other thing you can use if needed like Alert, Notifications etc.