Codeapedia

Ajax Library

noreply@blogger.com (CodeApedia) — Thu, 11 Sep 2008 22:12:00 +0000

Description

AJAX (Asynchronous JavaScript and XML) isn't a new programming language, in fact its been around for a long time... it was just a late bloomer in the popularity department. I have developed an extensive ajax library that I have been using for quite some time. I have stripped it down to its basic structure so its easy to read and allows others to use it as their foundation.

The concept is quite simple. The ajax.js file consists of two classes, the "webRequest" class and the "xmlHttp" class. The webRequest class is responsible for describing what kind of request you are going to make. For instance, what type of request method will you be using, where is the request going, is this to be done asyncronously? The "xmlHttp" class is responsible for adding or removing post data, sending the request and receiving the response. In addition, these classes contain event handlers so your code can degrade gracefully in the event that ajax isn't supported, and it also provides you the flexibility to execute your own functions during every step of the request.

Code


/** 
* @projectDescription  xmlHttp Library
*
* @author Ryan Estes  http://www.codeapedia.com
* @version 2
*/
function xmlHttp(pWebRequest)
{
   this.request = pWebRequest; // webRequest Object
   // (optional) string or queryString Object.
   this.postData = null; 
   
   // event handlers
   this.onError = function(e) { }
   this.onPreRequest = function(sender) { }
   this.onPreRequestComplete = function(sender) { }
   this.onRequest = function(sender) { }
   this.onRequestComplete = function(sender) { }

   this.getResponse = function() {
      var preReqRef = this.onPreRequest;
      var preReqCompleteRef = this.onPreRequestComplete;
      var reqRef = this.onRequest;
      var reqCompleteRef = this.onRequestComplete;
      try
      {
         var objXmlHttpRequest = this.request.xmlHttpRequest;
         objXmlHttpRequest.onreadystatechange = function() 
         {
            if(objXmlHttpRequest.readyState == 0) 
            { 
               preReqRef(objXmlHttpRequest); 
            }
            else if (objXmlHttpRequest.readyState == 1) 
            { 
               preReqCompleteRef(objXmlHttpRequest); 
            }
            else if (objXmlHttpRequest.readyState == 2) 
            { 
               reqRef(objXmlHttpRequest); 
            }
            else if (objXmlHttpRequest.readyState == 4) 
            { 
               reqCompleteRef(objXmlHttpRequest); 
            }
         }
         objXmlHttpRequest.open(
                 this.request.method,
                 this.request.url,
                 this.request.async);

         if(this.request.method == "POST")
         {
            objXmlHttpRequest.setRequestHeader(
                 "Content-Type",
                 "application/x-www-form-urlencoded;");
         }
         if(this.postData != null &&
            typeof(this.postData) != "string")
         {
             objXmlHttpRequest.send(
                this.postData.toString().replace("?","")
             );
         }
         else
         {
            objXmlHttpRequest.send(this.postData);
         }
         
      }
      catch(e)
      {
         this.onError(e);
      }
   }
}

function webRequest()
{
   this.url = (arguments.length == 1)? arguments[0] : null;
   this.method = "GET";
   this.async = false;
   this.xmlHttpRequest = null;
   this.onError = function(e) { }
   
   this.create = function() {
      if(arguments.length == 1)
      {
         this.url = arguments[0];
      }
      try
      {
         if(window.ActiveXObject)
         {
            this.xmlHttpRequest = 
                 new ActiveXObject("Microsoft.XMLHTTP");
         }
         else if (window.XMLHttpRequest)
         {
           this.xmlHttpRequest = new XMLHttpRequest();
           if(this.url.indexOf(".xml") != -1)
           {
             if(this.xmlHttpRequest.overrideMimeType)
             {
               this.xmlHttpRequest.overrideMimeType('text/xml');
               this.async = true;
             }
           }
         }
      }
      catch(e)
      {
         this.onError(e);
      }
   }
   
   if(this.url != null)
   {
      this.create();
   }
}

Example

Place the code above into an external javascript file called "codeapedia.ajax.js" and include the file within the head tag of your document. Create an xml file called "sample.xml" within your root directory. We are going to use my ajax library to grab the contents of whatever you put in sample.xml and alert it back to us.


var ajax = new xmlHttp(new webRequest("sample.xml"));
ajax.onRequestComplete = function(sender)
{
   alert(sender.responseText);
}
ajax.getResponse();

The example above was more for demonstration purposes. If you wish to see a more comprehensive example that would be more applicable to a realistic situation click here.

Auth Ticket

noreply@blogger.com (CodeApedia) — Thu, 11 Sep 2008 18:21:00 +0000

Description

Many web applications display the username at the upper right hand corner to let the user know that they are logged in. This information is stored within the User.Identity.Name property. I like to load all their basic information such as name, email, date they last logged in, and date they last updated their profile. This way, I don't have to go to the user store (database) everytime this common information is requested.

Since an authorization ticket is created when the user is authenticated, why not store the additional information in the same place? We can use the UserData property and like other ticket properties, it is encrypted based on your web configuration file. You will need to determine how you wish to serialize the additional information into a string.

Code


protected void LoginAction_Click(object sender, EventArgs e)
{
    Page.Validate();
    if (!Page.IsValid) return;

    bool blnIsPersistent = false;
    string strUserName = txtUserName.Text.Trim();
    string strPassword = txtPassword.Text.Trim();

    if (this.Authenticate(strUserName, strPassword))
    {
        HttpCookie authCookie = 
               FormsAuthentication.GetAuthCookie(
                        strUserName, 
                        blnIsPersistent
               );
        FormsAuthenticationTicket authTicket = 
                     FormsAuthentication.Decrypt(
                        authCookie.Value
              );
        // retrieve from user store
        string strUserData = "data"; 

        // create new ticket
        FormsAuthenticationTicket authTicket =
            new FormsAuthenticationTicket(
               authTicket.Version,
               authTicket.Name,
               authTicket.IssueDate,
               authTicket.Expiration,
               authTicket.IsPersistent,
               strUserData,
               authTicket.CookiePath
        );
        authCookie.Value = 
               FormsAuthentication.Encrypt(authTicketNew);
        Response.Cookies.Add(authCookie);
        Response.Redirect(
               FormsAuthentication.GetRedirectUrl(
                    authTicketNew.Name, 
                    authTicketNew.IsPersistent
               )
        );
    }
    else
    {
        // do something...
    }
}

You can access the UserData from another page with the following:


FormsIdentity identity = User.Identity as FormsIdentity;
Response.Write(identity.Ticket.UserData);

Ajax Continued

noreply@blogger.com (CodeApedia) — Thu, 11 Sep 2008 16:09:00 +0000

Example

In this example we have a webpage that displays the most recent videos added to our website. We want to allow the user to select a category from a drop down list and view the videos under that category.

There are a few preliminaries that we need to discuss before we look at how to do this with my ajax library. First, we will need a drop down list that displays the names of the categories having the value attributes set to the category id from our database. Second, we need to create a page that accepts a posted guid (cateogry id) and returns an xml serialized document of a list of videos based on that category.

Our ajax code will send a request along with the category id to our page "GetVideosByCateogryId.aspx". Next we will need to capture this xml using
the responseXML property and parse it using DOM to dynamically display a new grid
of videos. Note: I am using the querystring library to construct the post data.

Code


<script type="text/javascript" 
        language="javascript" 
        src="codeapedia.ajax.js" >
</script>
<script type="text/javascript" 
        language="javascript" 
        src="codeapedia.queryString.js" >
</script>

<script type="text/javascript" language="javascript" >
    var req = new webRequest();
    req.method = "POST";
    req.async = true;
    req.url = "GetVideosByCategoryId.aspx";
    req.onError = function() {
       // do something...
       
       // write code to dynamically display or

       // dynamically create an ajax not supported 
       // panel or

       // degrade gracefully and redirect to a
       // ajax independent page 
    }
    req.create();
    var ajax = new xmlHttp(req);
    ajax.postData = new querystring();
    ajax.postData.add(
            "categoryId",
            "{3F2504E0-4F89-11D3-9A0C-0305E82C3301}"
    );
    ajax.onError = function(e) {
       // do something...
       
       // dynamically display an error message
    }
    ajax.onPreRequestComplete = function(sender) {
       // do something...
       
       // dynamically load an animated gif
       // that lets the user know that the
       // request is being sent and the data
       // is loading 
    }
    ajax.onRequestComplete = function(sender) {
       if(sender.status == 200)
       {
          // do something...
          
          // parse out the xml of the videos
          // returned and dynamically display
          // the information using sender.responseXML 
          
       }
       else
       {
          // do something...
       }
    }
    ajax.getResponse();
</script>

If you have not yet seen the querystring library, click here to view codeapedia.querystring.js

Shopping Cart

noreply@blogger.com (CodeApedia) — Wed, 10 Sep 2008 21:35:00 +0000

It may be practical to use the DataRow and DataTable objects to represent a shopping cart and it's items. However, I have found this approach to be counterproductive more often than not, especially in scenarios where the shopping cart doesn't correspond to a table in your database. In this article, we will create our own classes to represent the shopping cart and its items.

For simplicity, we will be ignoring any authentication and/or authorization requirements. But before we do so, I wanted to touch slightly on this topic while I got you thinking about it. A visitor's Shopping Cart can easily be stored into their Profile by using the .NET Profiles API. In doing so, you can store this information permanently for repeat and future visits. In the event a user logs in after they have added an item to their shopping cart, not to worry the Profiles API supports migrating anonymous profiles. Most can make a good argument on how this API cansuffer from poor performance and/or scalability, however with good state management practices, it gets a double thumbs up from me!

Code (ShoppingCartItem Class)


private int _intProductId;
private string _strProductName; 
private int _intQuantity;
private decimal _decUnitPrice;

public ShoppingCartItem() : this(0, String.Empty, 0, 0m) { }

public ShoppingCartItem(int pProductId, string pProductName,
                          int pQuantity, decimal pUnitPrice)
{
    this._intProductId = pProductId;
    this._strProductName = pProductName;
    this._intQuantity = pQuantity;
    this._decUnitPrice = pUnitPrice;
}

public int ProductId
{
    get { return this._intProductId; }
    set { this._intProductId = value; }
}

public string ProductName
{
    get { return this._strProductName; }
    set { this._strProductName = value; }
}

public int Quantity
{
    get { return this._intQuantity; }
    set { this._intQuantity = value; }
}

public decimal UnitPrice
{
    get { return this._decUnitPrice; }
    set { this._decUnitPrice = value; }
}

public decimal ItemTotal
{
    get { return this._intQuantity * this._decUnitPrice; }
}

public static ShoppingCartItem Empty
{
    get { return new ShoppingCartItem(); }
}

public override bool  Equals(object obj)
{
     if(obj == null)
     {
         return false;
     }
     if(Object.ReferenceEquals(this,obj)) 
     {
         return true;
     }
     if(this.GetType() != obj.GetType())
     {
         return false;
     }
     ShoppingCartItem objCartItem = (ShoppingCartItem)obj;
     if(this._intProductId == objCartItem._intProductId)
     {
         return true;
     }
    return false;
}

public override int GetHashCode()
{
    return this._intProductId.GetHashCode();
}

Lets take a quick look at some methods that may not be so obvious. Specifically, the ones that were overridden. We redefined the Equals and GetHashCode methods to say two shopping cart items are the same if they have the same product id. This is done, so when we add or remove items from the shopping cart that are the same, we update the quantities instead of adding or removing the same product more than once.

Notice that the property ItemTotal does not derive from a private member variable. This property is helpful when binding your cart to a Web Control such as the GridView cause it allows you to show the total price for each item and can be formatted using the String Formatter "{0:c}".

Code (Shopping Cart Class)


public ShoppingCart() { }

public int Count
{
    get
    {
        return this.List.Count;
    }
}

public ShoppingCartItem this[int pIndex]
{
    get
    {
        if (pIndex < 0 || pIndex > this.List.Count)
        {
            return ShoppingCartItem.Empty;
        }
        return (ShoppingCartItem)this.List[pIndex];
    }
    set
    {
        this.List[pIndex] = value;
    }
}

public int Add(ShoppingCartItem pCartItem)
{
    if (pCartItem.Quantity < 1)
    {
        return this.List.Count;
    }
    if(this.Contains(pCartItem))
    {
        ShoppingCartItem objDirtyCartItem = 
                            this[this.IndexOf(pCartItem)];
        objDirtyCartItem.Quantity = 
                            objDirtyCartItem.Quantity + 
                            pCartItem.Quantity;
        this[this.IndexOf(pCartItem)] = objDirtyCartItem;
        return this.List.Count;
    }
    return (this.List.Add(pCartItem));
}

public int IndexOf(ShoppingCartItem pCartItem)
{
    return (this.List.IndexOf(pCartItem));
}

public void Remove(ShoppingCartItem pCartItem)
{
    if (this.Contains(pCartItem))
    {
        ShoppingCartItem objDirtyCartItem = 
                            this[this.IndexOf(pCartItem)];
        objDirtyCartItem.Quantity = 
                            objDirtyCartItem.Quantity - 
                            pCartItem.Quantity;
        if (objDirtyCartItem.Quantity > 0)
        {
            this[this.IndexOf(pCartItem)] = objDirtyCartItem;
        }
        else
        {
            List.Remove(pCartItem);
        }
    }
}

public bool Contains(ShoppingCartItem pCartItem)
{
    return (List.Contains(pCartItem));
}

The ShoppingCart Class needs to inherit from CollectionBase. When I use the term "dirty" it means that the object has either been modified and/or needs to be updated. Notice I did not use the Insert method. Add more methods and properties as you feel necessary.

If you are not using the Profiles API as mentioned above, you can instead use state management to store the user's shopping cart information. This includes Session, Serialization, Appending to an authorization ticket, and so on... What ever you chose, make sure you evaluate your needs before you determine how you want to persist your cart information.

Using External JS Files

noreply@blogger.com (CodeApedia) — Wed, 10 Sep 2008 21:32:00 +0000

Description

In some cases, it can be very useful to use an external javascript file to separate the code from the development interface within the CRM. This can be easily done with a little bit of DOM scripting. I use this technique to improve readability and code re-usability. One thing to remember, is that external javascript files are cached until removed by the client. Therefore you need to carefully consider when to implement this technique.

Code

 
   var lnk = document.createElement("script");
   lnk.type = "text/javascript";
   lnk.language = "javascript";
   lnk.src = "/mycustomizations/js/[filename].js";
   document.crmForm.appendChild(lnk);

Querystring

noreply@blogger.com (CodeApedia) — Sun, 27 Jul 2008 19:31:00 +0000

Description

The codeapedia.querystring.js class parses a collection of name/value pairs representing the elements of a client form submitted via the GET method.

Code



/**
* @projectDescription  querystring  library
*
* @author   Ryan Estes  http://www.codeapedia.com
* @version  0.3
*/

/**
* Create a new instance of querystring
*
* @classDescription        Defines a querystring
* @return {coordinate}     Returns a new querystring.
* @type {Object}
* @constructor             optional argument
*/

function querystring()
{
   this._obj = new Object();
   if(arguments.length == 1)
   {
      var str = arguments[0].replace(/\+/g, " ");
      if(str.indexOf("?") == 0)
      {
         str = str.substring(1,str.length);
      }
      var arr = str.split("&");
      for(var i = 0; i < arr.length; i++)
      {
         var p = arr[i].split("=");
         if(p.length == 2)
         {
            this._obj[unescape(p[0])] = unescape(p[1]);
         }
      }
   }

   /**
   * Adds an entry with the specified
   * name and value.
   * @return {void}
   */
   this.add = function(pKey,pValue) {
     if(pKey != null && pValue != null)
     {
        this._obj[pKey] = pValue;
     }
   }

   /**
   * Removes all entries
   * @return {void}
   */ 
   this.clear = function() {
      this._obj = new Object();
   }
   
   /**
   * Executes a function while
   * iterating through the entries
   * @return {void}
   */ 
   this.enumerate = function(f) {
      for(k in this._obj)
      {
         f(k,this._obj[k]);
      }
   }

   /**
   * Gets the value at the specified name
   * @return {string}
   */ 
   this.get = function(pKey) {
      return this._obj[pKey];
   }

   /**
   * Gets the number of key/value pairs
   * @return {int}
   */  
   this.getCount = function() {
      return this.getKeys().length;
   }
   
   /**
   * Gets all keys
   * @return {string[]}
   */ 
   this.getKeys = function() {
      var arr = new Array();
      var f = function() {
         arr.push(arguments[0]);
      }
      this.enumerate(f);
      return arr;
   }

   /**
   * Gets all values
   * @return {string[]}
   */  
   this.getValues = function() {
      var arr = new Array();
      var f = function() {
         arr.push(arguments[1]);
      }
      this.enumerate(f);
      return arr;
   }
   
   /**
   * Returns a value indicating whether
   * or not the key exists.
   * @return {bool}
   */  
   this.hasKey = function(pKey) {
      return this._obj[pKey] != null;
   }
   
   /**
   * Returns a value indicating whether
   * or not keys exist.
   * @return {bool}
   */ 
   this.hasKeys = function() {
       return this.getKeys().length > 0;
   }
   
   /**
   * Removes an entry
   * @return {void}
   */  
   this.remove = function(pKey){
      this._obj[pKey] = null;
   }
   
   /**
   * Returns a string representaton of 
   * the querystring, a series of key/value 
   * pairs separated by an ampersand (&).
   * @return {string}
   */  
   this.toString = function() {
      if(this.getCount() == 0)
      {
         return "";
      }
      var str = "?";
      var fnc = function() {
         str += (escape(arguments[0]) 
                   + "=" 
                   + escape(arguments[1]) 
                   + "&");
      }
      this.enumerate(fnc);
      str = str.replace(/" "/g,"+")
      str = str.substring(0,str.length - 1);
      return str;
   }
}

Example


<script type="text/javascript" language="javascript" >
   // page url = http://mydomain.com/default.aspx?id=1
   var qs = new querystring(window.location.search);
   alert(qs.get("id")); // alerts 1
</script>

Radio Button behaving like a check box

noreply@blogger.com (CodeApedia) — Sat, 12 Jul 2008 00:01:00 +0000

Description

The purpose of this article is to demonstrate how we can make a radio button behave like a check box. I was reluctant to write a blog about this topic, because lets face it, why in the world would anyone want to do this? The purpose of a radio button is to allow a user to select one of many predefined options. Needless to say, after several requests, I decided to tackle this topic.

Before we dive into the solution, lets discuss why what appears to be a simple task, is in fact not so simple. Your immediate thoughts might look something like this:


   <input type="radio" 
          onclick="this.checked = !this.checked" />

This will not work because Internet Explorer will call the onclick event handler before it sets the check state where as Mozilla, Netscape and Opera will set the check state before the onclick event handler is executed. Some might try and use the onfocus event handler to offset the checkstate in parallel with the onclick event handler. In this scenario, Opera and Internet Explorer will only execute the onfocus event handler for the first check state where as Mozilla and Netscape will execute the onclick event handler followed by the onfocus event handler. Basically, we are faced with an impossible combination to account for. We are left with no other solution but to write clunky code to check the browser type before we decide to handle the check state. Or are we?

After some thought, I realized that we can exploit what it means to be an XHTML document to provide us with a clean and concise solution. XHTML is simply a reformulation of document types as applications of XML. This means, being XML-conforming, we can introduce new elements or element attributes and access them using the DOM structure, and maintain interopability with XML-Based User Agents.

Code


<input type="radio" 
       onclick="run(this,this.action)"
       action="check" />

<script type="text/javascript" language="javascript" >
 function run(sender,e)
 {
   e = (!e)? sender.getAttribute("action") : e;
   sender.checked = (e.indexOf("check") != -1);
   if(sender["action"]) 
      sender.action = (sender.checked)? "clear" : "check";
   else 
      sender.setAttribute(
            "action",
            (sender.checked)? "clear" : "check"
      );
 }
</script>

Explanation

The idea is to define a new element attribute called "action" that will be used to hold a string determining whether we want to check or clear our radio button. Notice the first line in our function "run". Some browsers will treat added attributes as properties of your object, where others will not. So we are checking to see if the "action" property is defined, if it is not, we are accessing the Document Object Model to retrieve the attribute's value. In the same respect, we use setAttribute to set the value of the "action" attribute.

Conclusion

We have demonstrated how to make a radio button behave like a check box. Again, a radio button is a graphical user interface widget that allows a user to select one of many options. I would not advise using a radio button in this manner. It will most likely make your interface user-unfriendly.

Moving Viewstate

noreply@blogger.com (CodeApedia) — Sun, 01 Jun 2008 22:05:00 +0000

Description

The purpose of this article is demonstrate how to move the ViewState content to the bottom of your WebForm in an aspx page.

There are many benefits of moving your page's ViewState to the bottom of your WebForm.The most desirable reasons include: it can increase your page rank with search engines because many search algorithms determine page relevancy by searching for keywords at the beginning of the document; in cases where your viewstate is large, the perceived loading time for the client will appear to be faster since your page's content is loading before the ViewState.

Code

STEP 1: Create a class called "ViewStateModule" and inherit the IHttpModule interface. Below is the contents of the class.



void IHttpModule.Init(HttpApplication pHttpApp)
{
    pHttpApp.BeginRequest += new EventHandler(OnBeginRequest);
}

void IHttpModule.Dispose() { }

internal void OnBeginRequest(object sender, EventArgs e)
{
    HttpApplication app = sender as HttpApplication;
    if (app != null)
    {
        if (app.Request.Url.OriginalString.Contains(".aspx"))
        {
            app.Response.Filter = new Filter(
                 app.Response.Filter
            );
        }
    }
}

STEP 2: Include a nested private class inside "ViewStateModule" called "Filter" that inherits from System.IO.MemoryStream. Below is the class contents.


private Stream _objStream;

internal Filter(Stream pStream)
{
   this._objStream = pStream;
}

public override void Write(
   byte[] buffer, int offset, int count
)
{  
   string str = Encoding.Default.GetString(buffer);
   int iStartIndex = str.IndexOf(
          "<input type=\"hidden\" name=\"__VIEWSTATE\""
   );
   if (iStartIndex != -1)
   {
      int iEndIndex = str.IndexOf("/>", iStartIndex) + 2;
      string strViewState = str.Substring(
           iStartIndex, iEndIndex - iStartIndex
      );
      str = str.Remove(iStartIndex, iEndIndex - iStartIndex);
      int iInsertIndex = str.IndexOf("</form>");
      if (iInsertIndex != -1)
      {
         str = str.Insert(iInsertIndex, strViewState);
      }
   }
   byte[] arryOut = Encoding.Default.GetBytes(str);
   this._objStream.Write(
          arryOut, 0, arryOut.GetLength(0)
    );
}

STEP 3: Add the HttpModule by placing the XML seen below into your Web.config file. You should place it within the system.web node.


<httpModules>
  <add type="ViewStateModule" name="ViewStateModule" />
</httpModules>

Rollovers / Image Swap

noreply@blogger.com (CodeApedia) — Wed, 28 May 2008 00:36:00 +0000

Description

We have all dealt with clunky Javascript functions to achieve image rollover effects (image swapping) with the use of mouseover and mouseout event handling. The purpose of this article will be to demonstrate how to do these rollovers, but in a simpler way.

Basically, the code is going to sweep through the page and determine if an image is swappable. An image is determined to be swappable by using a custom attribute "swap=true".


   <img src="../logo.gif" alt="logo" swap="true" />

The image "logo.gif" will now be swapped with the image "logo_ro.gif" during a mouse rollover event. Note: you must give your rollover image the same name as the original image and append "_ro" to it. You can change "_ro" to another string constant within the code if you prefer.


/**
* @projectDescription  Image Swap Module
*
* @author   Ryan Estes  http://www.codeapedia.com
* @version  0.1
*/
var _NAMING_CONVENTION_IMAGE_SWAP = "_ro";
var image_module = 
{
   run : function() {
      var obj = null;
      var arr = document.getElementsByTagName("img");
      for(var i = 0; i < arr.length; i++)
      { 
         obj = arr[i];
         if(image_module.__isSwappable(obj))
         {
            image_module.__addSwapEvents(obj);
            image_module.__preLoad(obj);
         }
      }
   },
   __preLoad : function(img) {
      var ext = image_module.__getExtension(img);
      var objImage = document.createElement("img");
      objImage.src = img.src.replace(
             ext,
             _NAMING_CONVENTION_IMAGE_SWAP + ext);
   },
   __getExtension : function(img) {
       var i = img.src.lastIndexOf(".");
       return ext = img.src.substring(i,img.src.length);
   },
   __isSwappable : function(img) {
      return img.getAttribute("swap") == "true";
   },
   __addSwapEvents : function(img) {
       img.onmouseover = function() {
          var ext = image_module.__getExtension(img);
          this.src = this.src.replace(
              ext,
              _NAMING_CONVENTION_IMAGE_SWAP + ext);
       }
       img.onmouseout = function() {
          this.src = this.src.replace(
               _NAMING_CONVENTION_IMAGE_SWAP,
               '');
       }
   }
};

image_module.run();

There you have it! Stash this code into an external javascript file called codeapedia.image_module.js and import it at the bottom of your page.

Creating Text Nodes

noreply@blogger.com (CodeApedia) — Thu, 22 May 2008 03:14:00 +0000

Description

This tutorial will show you how to create new text nodes and add them to the document using DOM scripting.

The createTextNode method creates a new text node containing the specified text. This method returns a reference to the created text node.


   reference = document.createTextNode(strText);

The method takes a single string parameter, strText, of the text to be created. The reference returned is a node object.


   var oText = document.createTextNode("Hello World");

The reference returned by createTextNode is a node object referenced by variable "oText". However, the node has not yet been added to the document, it has only been created. To add to the document:


   document.appendChild(oText);

Example

Replicate the HTML code you see below using DOM scripting.


   <p>Hello World</p>


  Solution:
 
      var p = document.createElement("p");
      var strText = document.createTextNode("Hello World");
      p.appendChild(strText);
      document.appendChild(p);

Creating Elements

noreply@blogger.com (CodeApedia) — Wed, 21 May 2008 02:36:00 +0000

Description

The purpose of this article is demonstrate how to dynamically create elements and append them to the document.

createElement

The createElement method creates a new element node with the specified name tag. This method returns a reference to the created element.


   reference = document.createElement(tagName);

The method takes a single string parameter (the name of the element to be created).


   var pnl = document.createElement("div");

The reference returned by createElement is a node object referenced by variable "pnl". However, the div element has not yet been added to the document, it has only been created. Lets go ahead and set some properties before we add it to the document.


   var pnl = document.createElement("div");
   pnl.style.background = "#fff";
   pnl.style.width = "100%";
   pnl.style.height = "20px";

Lastly, adding out element to the document:


   document.appendChild(pnl);

Example

Replicate the HTML code you see below using DOM scripting.


   <table>
      <tr>
         <td></td>
      </tr>
   </table>

Solution:


   var tbl = document.createElement("table");
   var tr = document.createElement("tr");
   var td = document.createElement("td");
   tr.appendChild(td);
   tbl.appendChild(tr);
   document.appendChild(tbl);

Mouse

noreply@blogger.com (CodeApedia) — Sat, 17 May 2008 02:55:00 +0000

Description

The library, codeapedia.mouse.js can be used to track the current mouse position and/or dynamically assign event handlers to the mouse events.

Code



/**
* @projectDescription  Mouse library
*
* @author   Ryan Estes  http://www.codeapedia.com
* @version  0.2
*/

/**
* Create a new instance of coordinate
*
* @classDescription         Defines a Cartesian coordinate
* @return {coordinate}     Returns a new coordinate.
* @type {Object}
* @constructor 
*/
var coordinate = function(pX,pY)
{
   this.x = pX;
   this.y = pY;
}

var mouse = 
{
    events : 
    {
       onclick : 0x000000,
       ondblclick : 0x000001,
       onmouseover : 0x000010,
       onmouseout : 0x000100,
       onmousemove : 0x001000,
       onmouseup : 0x010000,
       onmousedown : 0x100000,
       
       /**
       * Assigns a mouse event to an object
       * @return {void}
       */
       register : function(pFunction,pObject,pEvent)
       {
           var e = pEvent;
           var f = pFunction;
           var o = pObject;
           
           if(o == null || f == null)
           {
              return false;
           }
           if(o.length)
           {
              o = document.getElementById(o);
           }
           switch(e)
           {
              case mouse.events.onclick:
                   o.onclick = f;
                   break;
              case mouse.events.ondblclick:
                   o.ondblclick = f;
                   break;
              case mouse.events.onmouseover:
                   o.onmouseover = f;
                   break;
              case mouse.events.onmouseout:
                   o.onmouseout = f;
                   break;
              case mouse.events.onmousemove:
                   o.onmousemove = f;
                   break;
              case mouse.events.onmouseup:
                   o.onmouseup = f;
                   break;
              case mouse.events.onmousedown:
                   o.onmousedown = f;
                   break;
              default:
                   throw "Invalid argument exception";
           }
       }
    },
    
    /**
    * Gets the current mouse position
    * @return {coordinate}
    */
    getCoordinate : function(e) 
    {
        var objCoord = new coordinate(0,0);
        if(!e)
        {
           e = window.event;
        }
        if(e.pageX && e.pageY)
        {
           objCoord.x = e.pageX;
           objCoord.y = e.pageY;
        }
        else if (e.clientX && e.clientY)
        {
            objCoord.x = e.clientX + 
                       ((document.documentElement.scrollLeft)?
                         document.documentElement.scrollLeft : 
                         document.body.scrollLeft);
            objCoord.y = e.clientY + 
                       ((document.documentElement.scrollTop)?
                         document.documentElement.scrollTop : 
                         document.body.scrollTop);
        }
        return objCoord;
    }
};

Example


    <body>
       <a id="lnk" href="javacsript:void(0)" >Link</a>
    </body>
    <script type="text/javascript" language="javascript" >
    var f = function(event) 
    {
       var evt = arguments[0];
       var o = mouse.getCoordinate(evt);
       alert(o.x);
       alert(o.y);
    }
    mouse.events.register(f,"lnk",mouse.events.onclick);
    </script>

Introduction to DOM

noreply@blogger.com (CodeApedia) — Fri, 16 May 2008 16:28:00 +0000

Description

This articles is intended to introduce DOM scripting and demonstrate the benefits of exploiting the Document Object Model.

The term DOM scripting refers to programmatically accessing and updating the Document Object Model. This term typically implies accessing the document with the use of javascript. However, DOM scripting can be done with any programming language that supports the Document Object Model. For instance, CSS instructs the browser on how to display the objects of the document.

Document

The Browser needs a document in order to turn it into an object that is compliant with DOM specifications. But what tells the Browser that you have a document or that your document was coded to the correct specifications and do follow the Object Model? The DOCTTYPE (also called a DTD) does just that. It is very important to declare your intended DTD in every web page. Without one, it will be up to the browser to determine how it will interpret your document, and this will lead to inconsistencies and broken code.

Object

If you ask anyone, an object is an instance of a class. But what does that mean? To put it simply, an object is a name given to a collection of data that can be accessed or modified through properties and methods. Objects can be user-defined, native to the language or provided by the environment in our case the browser. Most people probably never thought about the Browser Object Model. It is what gives you the window object and is responsible for methods such as window.alert,window.open,etc...

Model

The DOM model is a blueprint or map of the document. Below represents the beginning of the map's structure. There are way to many elements to list.



                  html
                  

      head                       body

Notice how "head" and "body" are underneath the "html" element or root. We refer to elements like these as children. The element "head" and "body" are considered siblings of each other. What do you think would be the child nodes of "head"? The child nodes would be "meta" and "title". Did I just say node?

What is a node? A node is a term that denotes a point of connection or distribution within a network.
A network is a collection of nodes. There are 12 different node types, but in this article we will only cover the main ones. That is, the element node, attribute node and text node.

Element Nodes

Element nodes make up the basic structure of a document. Elements can contain other elements. The only element that isn't contained within another element is the <html> element which is considered the root node of our node tree. There are two well-known methods for retrieving elements:

getElementsById

getElementsByTagName

Example:


    <p id="p1" >I am a paragraph</p>
    <script type="text/javascript" language="javascript" >
       alert(document.getElementById("p1").innerHTML);
    </script>

The example above will alert "I am a paragraph".

Attribute Nodes

Attribute nodes are used to define properties or give more specific information about the element node. For instance,


   <span style="margin-left:10px" > I am a label</span>

The attribute node in the example above is "style" with a value of "margin-left:10px."
There are also two popular methods for attribute nodes:

getAttribute

setAttribute

Example:


    <input id="txt" type="text" maxlength="25" />
    <script type="text/javascript" language="javascript" >
       alert(document.getElementById("txt").getAttribute("type"));
    </script>

Text Nodes

Text nodes are always enclosed inside of element nodes. In the example above the text node would be "I am a label".

The purpose of this article was to introduce you to DOM scripting. You can view other articles on this topic to get a more in depth understanding of how to be a true DOMster.

Managing Resources

noreply@blogger.com (CodeApedia) — Thu, 15 May 2008 02:43:00 +0000

Descripton

In this article we will explore the Garbage Collection feature within the .NET Framework and how it gives developers a false sense of security in memory management of their applications. By the end of this article it should be clear that the Garbage Collector does not completely relieve you from memory and resource management.

Garbage Collection

One of the most important features available in the .Net framework is its automatic garbage collection. The phrase garbage collection can be defined as management of the allocation and release of memory within an application. The Garbage Collector is basically a tool to free up the developer from memory management so he or she can focus on the more important aspects of their application. However, unmanaged resources (resources not managed by CLR), are extremely costly. And waiting for the managed resource to be released that encapsulated it, could have unfavorable consequences such as memory leaks. Especially since the Garbage Collector is nondeterministic, meaning we don't know when it will run. But what exactly are unmanaged resources?

Most Overlooked Topics in C#

Unmanaged resources are resources that the CLR does not manage for you. Examples of unmanaged resources include an Operating System resource such as a file handle, a window or network connection, bitmap or anything else that is critical in the context of the application. The .NET Framework provides the IDisposable interface to help developers ensure that their objects release their resources. And the best way to do so, which in my opinion is one of the most over looked topics in C#, is the
using statement.

Using Directive or Statement?

It is unfortunate that when you search "using" in C# literature, more often than not you will end up reading an article about the "using" directive. The using directive allows the use of types in a namespace without having to fully qualify the use of that type. It also allows developers to alias a namespace or type. But this is not what we are talking about here. We are talking about the "using" statement.

The using statement defines a scope in which an object will be disposed. The using statement ensures that the unmanaged resource is released (Dispose method is called) when the scope of the using statement is exited. It is a programmatic tragedy that there are many code samples on the internet and in literature that lack properly memory management. The all too common is the SqlConnection Object.

SqlConnection Object

Since Database connections are resource intensive (unmanaged), they are often pooled by the connection pool manager to improve performance. When a new connection request comes in, the pool manager checks if the pool contains an available connection. If none are available, and the maximum pool size has not been reached, the new connection is created and added to the pool. When the pool does reach its maximum size, all future connection requests are placed in a queue until a connection in the pool becomes available. This will result in a connection time out and most often memory leaks. This is a classic example of why it is important to have good memory management for unmanaged resources.

Code


    SqlConnection sqlcon = new SqlConnection();
    sqlcon.ConnectionString = "My Connection String";
    SqlCommand sqlcmd = new SqlCommand();
    sqlcmd.CommandText = "My Command";
    sqlcmd.Connection = sqlcon;

    sqlcon.Open();
    object obj = sqlcmd.ExecuteScalar();
    sqlcon.Close();

There is really not much to say about the code example above. The close method,
sqlcon.Close(), will never be executed if an exception is thrown. Thus causing you to fall victim to poor memory management. So lets take a look at a code sample that will solve this issue.


    object obj = null;
    SqlConnection sqlcon = new SqlConnection();
    sqlcon.ConnectionString = "My Connection String";
    SqlCommand sqlcmd = new SqlCommand();
    sqlcmd.CommandText = "My Command";
    sqlcmd.Connection = sqlcon;

    try
    {
        sqlcon.Open();
        obj = sqlcmd.ExecuteScalar();
    }
    catch
    {
        // handle exception
    }
    finally
    {
        if (sqlcon != null)
        {
            sqlcon.Close();
        }
    }

In the code sample above we have caught the exception and cleaned up the resources allocated in the try block. Code placed within the scope of the finally block will get executed no matter how your application exits the try block. But in real world, you probably work for a large company and/or are apart of a development team where you are not the only developer working on the same code file. What do you think would happen if you or another developer placed code within that finally block due to time constraints? Well, nothing... as long as that code executed without throwing an exception. As mentioned before, the using statement defines a scope in which objects are to be disposed. Below demonstrates how to properly ensure that unmanaged resources will be released when the code block is exited.

Code


    object obj = null;
    using (SqlConnection sqlcon = new SqlConnection())
    {
        sqlcon.ConnectionString = "My Connection String";
        using (SqlCommand sqlcmd = new SqlCommand())
        {
            sqlcmd.Connection = sqlcon;
            sqlcmd.CommandText = "My Command";

            sqlcon.Open();
            obj = sqlcmd.ExecuteScalar();
        }
    }

Lookup fields

noreply@blogger.com (CodeApedia) — Wed, 14 May 2008 03:34:00 +0000

Description

This article will describe the CRM Lookup field in detail and how to get and set its properties using javascript.

The lookup field is an array that contains a collection of name/value pairs.
But what is a name/value pair in javascript? Look no further than the Object class.


 Example:

     var obj = new Object();
     obj["name"] = "value";

     //Running alert(obj["name"]) will display "value"

Name Value Collection


   Name      Value
  
   id        Gets or sets the GUID identifier.

   name      Gets or sets the name of the record to be 
             displayed in the lookup.

   type      Gets or sets the object type code

Code

Retrieving values from a Lookup field


Example:  with crmForm.all.new_mylookup

   var lkup = crmForm.all.new_mylookup;
   if(lkup != null)
   {
      var arr = lkup.DataValue;
      if(arr.length > 0)
      {
         var objNameValues = arr[0];
         if(objNameValues != null)
         {
            alert(objNameValues.id);
            alert(objNameValues.name);
            alert(objNameValues.type);
         }
      }
   }

Code

Setting values in a Lookup field


Example:  with crmForm.all.new_mylookup

  var objNameValues = new Object();
  objNameValues["id"] = "{GUID}";
  objNameValues["name"] = "Name";
  // Entity type code
  objNameValues["type"] = "TYPE CODE";

  crmForm.all.new_mylookup.DataValue =
                         new Array(objNameValues);

Url Encoder/Decoder

noreply@blogger.com (CodeApedia) — Mon, 12 May 2008 17:45:00 +0000

Description

This articles shows you how to encode and decode posted form data from the browser to a webserver via "GET" method. Most people rely on the Javascript methods, escape and unescape, to format this data. The only problem is that they encode the space character as "%20" and treat "+" as a safe character. Copy and paste the code into an external javascript file called codeapedia.url.js

Code


/**
* @projectDescription  Url encoder/decoder
*
* @author   Ryan Estes  http://www.codeapedia.com
* @version  0.3
*/
var url = 
{
    /**
    * Url encodes a string
    * @return {string}
    */
    encode : function(pValue)
    {
       var str = escape(pValue);
       str = str.replace(/\+/g,"%2B");
       str = str.replace(/%20/g,"+");
       return str;
    },
    /**
    * Decodes a url encoded string
    * @return {string}
    */
    decode : function(pValue)
    {
       var str = pValue.replace(/\+/g," ");
       str = unescape(str);
       return str;
    }
}

Example


<script type="text/javascript" language="javascript" >
   var strUrl = "http://www.mydomain.com/?lang=";
   strUrl = strUrl + url.encode("ASP.NET 2.0,C# 2.0");
   alert(strUrl); 
   alert(url.decode(strUrl)); 
</script>

The above example above will alert

http://www.mydomain.com/?lang=ASP.NET+2.0%2CC%23+2.0

http://www.mydomain.com/?lang=ASP.NET 2.0,C# 2.0

String

noreply@blogger.com (CodeApedia) — Mon, 12 May 2008 04:14:00 +0000

Description

"codeapedia.string.js" prototypes the String class to add every
day functionality and class properties.

Code



/** 
* @projectDescription  String for Javascript Library
*
* @author Ryan Estes  http://www.codeapedia.com
* @version 0.1 
*/

/**
* Determines whether the specified string occurs in
* within this string. 
* @return {Boolean} 
*/
String.prototype.contains = function(pValue)
{
   return this.indexOf(pValue) != -1;
}

/**
* Determines whether the end of this string matches
* the specified string.
* @return {Boolean} 
*/
String.prototype.endsWith = function(pValue,pBlnIgnoreCase)
{
   var strSource = this;
   var strValue = pValue;
   if(pBlnIgnoreCase)
   {
      strSource = strSource.toLowerCase();
      strValue = strValue.toLowerCase();
   }
   return strSource.indexOf(strValue) == 
          (strSource.length - strValue.length);
}

/**
* Inserts a string within this string at the specified index
* @return {String} 
*/
String.prototype.insert = function(pValue,pIndex)
{
   if(pValue == null)
   {
      throw "Argument null exception";
   }
   if(pIndex < 0 || pIndex >= this.length)
   {
      throw "Argument out of range exception";
   }
   if(pIndex == 0)
   {
      return pValue + this;
   }
   else if (pIndex == this.length - 1)
   {
      return this + pValue;
   }
   else
   {
      var strStart = this.substring(0,pIndex);
      var strEnd = this.substring(pIndex,this.length);
      return strStart + pValue + strEnd;
   }
}

/**
* Pads this string on the left with a specified number
* of character strings.
* @return {String} 
*/
String.prototype.padLeft = function(pValue,pCount)
{
   var strLeft = "";
   for(var i = 0; i < pCount; i++)
   {
       strLeft += pValue;
   }
   return strLeft + this;
}

/**
* Pads this string on the right with a specified number
* of character strings.
* @return {String} 
*/
String.prototype.padRight = function(pValue,pCount)
{
   var strRight = "";
   for(var i = 0; i < pCount; i++)
   {
       strRight += pValue;
   }
   return this + strRight;
}

/**
* Removes all carriage returns and new lines from this string
* @return {String} 
*/
String.prototype.removeLines = function() 
{
   return this.replace(/(\n\r|\n|\r)/gm,"");
}

/**
* Determines whether the start of this string matches
* the specified string.
* @return {Boolean} 
*/
String.prototype.startsWith = function(pValue,pBlnIgnoreCase)
{
    var strSource = this;
    var strValue = pValue;
    if(pBlnIgnoreCase)
    {
       strSource = strSource.toLowerCase();
       strValue = strValue.toLowerCase();
    }
    return strSource.indexOf(strValue) == 0;
}

/**
* Removes white space from this string
* @return {String} 
*/
String.prototype.trim = function()
{
    return this.replace(/^\s+|\s+$/g,"");
}

/**
* Removes white space from the start of this string
* @return {String} 
*/
String.prototype.trimLeft = function()
{
    return this.replace(/^\s+/,"");
}

/**
* Removes white space from the end of this string
* @return {String} 
*/
String.prototype.trimRight = function()
{
    return this.replace(/\s+$/,"");
}

var String = 
{   
    /**
    * Determines whether two strings specified are equal 
    * @return {Boolean} 
    */
    compare : function(pStringA,pStringB,pBlnIgnoreCase) {
       var strA = pStringA;
       var strB = pStringB;
       if(pBlnIgnoreCase)
       {
          strA = strA.toLowerCase();
          strB = strB.toLowerCase();
       }
       return strA == strB;
    },
    
    // Empty string
    empty : "",
    
    /**
    * Determines whether the specified string is 
    * null or empty 
    * @return {Boolean} 
    */
    isNullOrEmpty : function (pValue) {
       return  pValue == null ||
               pValue == String.empty;
              
    },
    
    /**
    * Converts the specified string to a floating value.
    * Returns minimum float value if fails.
    * @return {Float} 
    */
    toFloat : function(pValue) {
       var strValue = pValue;
       if(pValue == null || isNaN(pValue))
       {
          strValue = "-3.402823E+38";
       }
       return parseFloat(strValue);
    },
    
    /**
    * Converts the specified string to an integer value.
    * Returns minimum integer value if fails.
    * @return (Int} 
    */
    toInt : function(pValue) {
       var strValue = pValue;
       if(pValue == null || isNaN(pValue))
       {
          strValue = "-2147483648";
       }
       return parseInt(strValue);
    }
}

Examples


Code section below alerts "true".
// demonstrates contains
var str = "ASP.NET";
alert(str.contains("."));

Code section below alerts "true".
// demonstrates endsWith
alert(str.endsWith("NET",true));

Code section below alerts "ASP.NET2.0".
// demonstrates insert
alert(str.insert("2.0",str.length - 1));

Code section below alerts "BeginningASP.NET".
// demonstrates padLeft
alert(str.padLeft("Beginning",1));

Code section below alerts "ASP.NET3.0".
// demonstrates padRight
alert(str.padRight("3.0",1));

Code section below alerts "ASP.NET3.0".
// deomstrates removeLines
alert("\r\n\r\nASP.NET\r3.0".removeLines());

Code section below alerts "false".
// demonstrates startsWith
alert(str.startsWith("asp.net"));

Code section below alerts "4","5","5" respectively.
// demonstrates trim functions
var str = " 2345 ";
alert(str.trim().length);
alert(str.trimLeft().length);
alert(str.trimRight().length);

Code section below alerts "true".
// demonstrates String.empty
alert(" ".trim() == String.empty);

Code section below alerts "true".
// demonstrates String.compare
alert(String.compare("A","a",true));

Code section below alerts "true".
// demonstrates String.isNullOrEmpty
alert(String.isNullOrEmpty(String.empty));

Code section below alerts "-3.402823E+38".
// demonstrates String.toFloat
alert(String.toFloat("ASP"));

Code section below alerts "2".
// demonstrates String.toInt
alert(String.toInt("2.0"));