Fusioned with ColdFusion

ColdFusion Tip: How to tell if path is file or directory

2012-01-23T18:39:00.002+05:30

Today, one of the ColdFusion users asked me a question "Is there anyway I can find out whether a path is a directory or a file? There is no isDirectory() function available in ColdFusion and I don't want to write Java code to do this. Any help?"
For a moment I thought really! is there no way that ColdFusion can tell you whether a given path is of a directory or file? But sooner, I came across the function 'getFileInfo' which takes the path as an argument and returns a struct data that contains various metadata properties of the file. The struct includes a key - 'type' whose value can either be a directory or file. The below code shows how you can determine whether the given path is of a directory or file:

The other metadata properties such as canRead, canWrite, isHidden, lastModified, parent, size included in the resultant struct can also come handy.

2011 - A year full of surprises

2012-01-16T22:26:00.000+05:30

I know it's been more than 15 days since the world celebrated new year and every one made some big and small resolutions which they hope they will live up to in this year. I had a fair 2011; there were a few ups and downs but in the end its gone and 2012 is here. Last year I presented ColdFusion Builder 2 at SOTR on the very day it was released to the public (how exciting!!). I was very much excited and nervous at the same time since this was my first talk at a conference. Nevertheless it went well, I have said this before and will say it again, 'Edinburgh is beautiful'.

Last year I started to look at HTML5 features and had shared them on my blog. I thank the community for appreciating my work and findings. A few things that didn't really work out was making money through facebook applications. I had created a couple of facebook apps (you can call them silly, well all facebook apps are silly) and unfortunately I didn't get anything from it. But sooner, I realized that I didn't enjoy it and shifted my focus to something that I liked - blogging. I started blogging about HTML5, ColdFusion and CFBuilder often which made me feel happy about myself. I became a 'DZone Most Valuable Blogger' and that made me say 'I am wow'. During that time, I bought a domain with my name and got rid of the blogspot from my blog address.

I read quite a few books, but the one that really stood out was the 'Voice of Silence' by Osho. It's a book on meditation and it shares several aspects of life that one should know. I felt really happy after reading this book. Every page of this book has something that one should know. Several teachings of Buddha and Mahavira have been shared. It took a lot of frustration out of me and made me love myself.

When everything was going just fine, I met with a road accident that shook my life and more than that my right leg. Was that my fault? No. Hell No. A street dog came out of nowhere giving me no chance but to ride my bike over it. I fell on my right and broke my left hand wrist and my right leg knee. The doctors had put screws and asked me to take rest for the next two months. I can say 'I'm screwed; literally'. After two months, I walked into the office and it was a joy. Now, I'm almost back on my feet and feeling good. Oh by the way, someone gifted me a book titled 'Corporate Chanakya' from my wishlist. Like I said, last year was full of surprises.

This year, I hope there'll be good surprises and no accidents at all. My first resolution this year is to get fit. I have put on a few kilos and will have to shed them asap. This year will also see the release of the next version of ColdFusion and I plan to blog about the features once the public beta is released (very very soon). My next resolution is to dedicate more time to my family. At the end of the day, it's my family that makes me feel special than anyone else. And lastly, I hope this year is not the end of the world and I'll live up to see a beautiful sunny day in 2013.

Using HTML5's Navigation Timing API to measure Page Load speed

2011-11-03T19:02:00.000+05:30

To measure the time taken for a page to load one can use the Date object in the head section and calculate the time taken for the page to load in window.onload function. However, it calculates the time taken for the page to load after the first bit of JavaScript in the head is executed. This doesn't indicate the time taken by the web server to serve the requested page. The Navigation Timing API introduced in HTML5 provides data that can be used to measure the performance of a website. The API provides a PerformanceTiming interface which contains several attributes that can be used to get end-to-end latency data.

Measuring Page load performance using the Date object:

As mentioned above, when you try to calculate the time taken for the page to load using the Date object, it doesn't indicate the time taken by the web server to server the page:

 var startTime = new Date().getTime();  
 function onLoadEventHandler() {  
      var latency = new Date().getTime() - startTime;  
      console.log('Latency = ' + latency + 'ms');  
 }

This would output:

Latency = 2ms

Measuring Page load performance using the performance.timing object:

The PerformanceTiming interface includes several attributes and one of them is the navigationStart attribute. This attribute returns the time when the browser attempts to fetch a new resource from the server. If there is a document from which the user is navigating to a new document (by clicking a link), then it returns time when the browser finishes unloading the previous document:

 var startTime = new Date().getTime();  
 function onLoadEventHandler() {  
      var latency = startTime - performance.timing.navigationStart;  
      console.log('Latency = ' + latency + 'ms');  
 }

This would output:

Latency = 104ms

As you can see from the two examples, there is a difference of more than 100ms when using the performance.timing object.

PerformanceTiming interface:

The PerformanceTiming interface includes several attributes:

You can refer to more detailed explanation of attributes here.

Browser support:

Navigation Timing API is available on Chrome, Firefox 7 and on IE 9.

Using HTML5's PageVisibility API

2011-11-01T02:05:00.001+05:30

Today I stumbled upon the PageVisibility API introduced in HTML5, which gives developers an opportunity to improve the performance of a web page and to better the user experience. Whenever a user opens a new tab or navigates to another tab, the behavior of the current page from which user navigated can be controlled using this API. Consider a webmail client that is trying to look for new mails every two seconds, if a user opens a new tab or minimizes the browser window then retrieving mails every two seconds would expend resources, whilst the user is not actively viewing the page. Here the PageVisibilty API would come handy and would allow developers to alter the behavior of the web page.

The specification introduces the interface - DocumentVisibility. It includes the attributes 'hidden' and 'visibilityState'. The hidden attribute of the document object (document.hidden) returns true if the user selects another tab or when the browser window is minimized. It returns false when the same document is selected by the user. The visibilityState attribute is used to indicate the state of the page - hidden, visible and preview (marked as optional in the spec).

To be notified when the document becomes hidden or when it becomes visible again one can listen to the 'visibilitychange' event. The example below calculates the number of seconds the user was not active on the page:

 <!DOCTYPE HTML>  
 <html>  
 <head>  
      <script type="text/javascript">  
           timer = 0;  
           function onLoad(){  
                document.addEventListener("visibilitychange",stateChanged);  
                document.addEventListener("webkitvisibilitychange", stateChanged);  
                document.addEventListener("msvisibilitychange", stateChanged);  
           }  
           function stateChanged(){  
                console.log(document.webkitVisibilityState);  
                if(document.hidden || document.webkitHidden || document.msHidden){  
                     //new tab or window minimized
                     timer = new Date().getTime();  
                }  
                else {  
                     alert('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.')  
                }  
           }  
      </script>  
 </head>  
 <body onLoad="onLoad()">  
 </body>  
 </html>

Browser support:

Chrome and IE-10 (surprisingly) have implemented this specification. However, as observed in the above code, they have provided their own prefixes to the attributes and the event listener. On Chrome, the attributes are named webkitHidden and webkitVisibilityState. On IE, it is msHidden and msVisibilityState. Similarly the event is named webkitvisibilitychange and msvisibilitychange.

Uses:

The PageVisiblity API can be used to notify the page when the user is not interacting with it. On receiving this notification, the client can stop polling for new data. Also, when the user selects the page, a notification can be sent to indicate that the user is active and new data can be fetched from the server. This API would also come handy where the web page is rendering some animation effects. It would make sense to stop the animation when the user is not viewing the page. When the user selects the page, a welcome back message can be displayed and the animation effect can be started.

PubSubHubBub and ColdFusion

2011-10-10T19:10:00.002+05:30

I came across a publisher\subscriber protocol called PubSubHubBub. It is a server-to-server web-hook-based pubsub (publish/subscribe) protocol - an extension to Atom and RSS. Here the parties (servers) get an instant notification when a feed URL, that they are interested in is updated.

Traditionally a subscriber would subscribe to a feed and poll for it at regular intervals, to see if there is an updated feed available. In this protocol rather than polling for a feed, the content is pushed out from the publisher. The theory here is that the subscriber can subscribe to a feed via a 'Hub', which then would inform the subscribers when the feed is updated.

How PubSubHubBub works?

A Publisher instead of sending an update to every subscriber, it includes a <link rel="hub"... > in its feed URL and sends an update to the Hub.
A Subscriber sends a subscription request to the Hub with the feed URL that it is interested in. The request also contains a callback URL to which the Hub should send an update.
To verify the subscription request, the Hub sends a GET request to subscribers' callback URL. The
Subscriber then verifies itself by responding to the request.
When the Publisher posts new content, it notifies the Hub of the updates by sending a ping notification (POST request).
Hub on receiving a notification from the Publisher, fetches the new content and then POSTs an update to the Subscribers callback URL.

If the feed has multiple subscribers, then the Hub would send an update to each of these subscribers. The Subscription flow posted on the PubSubHubBub site is here:

Where is the Hub?

Anybody can run a hub, it is not owned by any company. The protocol is decentralized and free. A couple of implementations include pubsubhubbub.appspot.com and superfeedr.com

Publishing

Whenever a publisher adds new content (a new blog post), the subscribers are to be notified of the updated feed. A notification (POST request) is sent to the Hub by the Publisher. The Content-Type header must be set to application/x-www-form-urlencoded and the request should contain the parameters 'hub.mode' and 'hub.url' in the request body. The parameter hub.mode is set to 'publish' and the hub.url is set to topic URL that is updated.

The Hub then accepts the POST request and fetches the new content by sending a GET request to the topic URL. After fetching the content the Hub determines whether the feed has changed. The Hub would then send this information about the changes to each subscriber.

Subscribing

The Subscriber initiates its subscription by sending a POST request to the Hub URL. The Content-Type header must be set to application/x-www-form-urlencoded and it should contain the following parameters in the request body:

hub.mode - set to 'subscribe'
hub.callback - subscribers callback URL where the notifications should be delivered by the Hub.
hub.topic - the topic URL to which the subscriber wishes to subscribe
hub.verify - it can be either sync/async.

sync when the verification request must occur before the subscription request's HTTP response is returned.
async when the verification request may occur at a later point after the subscription request has returned.

Verifying the subscription:

The Hub on receiving a subscription request verifies the same by sending a GET request to the subscriber's callback URL. The request contains the following query strings:

hub.mode - subscribe or unsubscribe depending on what was set in the original request.
hub.topic - the topic URL given in the subscription request.
hub.challenge - a random string.

The subscriber's callback URL should respond to this request by echoing the hub.challenge string in response.

Code:

Registering the Publisher with the Hub:

The Publisher and Subscriber can be registered at pubsubhubbub.appspot.com and it is a one time activity. However, one can do the same programmatically:

<cfhttp method="POST"  
        url="http://pubsubhubbub.appspot.com"  
        result="pub_result">  

      <cfhttpparam type="header"  
                   name="Content-Type"  
                   value="application/x-www-form-urlencoded">  
      <cfhttpparam type="url" 
                   name="hub.mode"  
                   value="publish">  
      <cfhttpparam type="url"
                   name="hub.url"  
                   value="http://#machineIP#/pubsubhubbub/Publisher.cfc?method=getFeed">  
 </cfhttp>  

 <cfif #pub_result.Responseheader.Status_Code# eq 204>  
      Publisher registered successfully  
      <cfelse>  
      Publisher failed to register. Returned <cfoutput>#pub_result.Responseheader.Status_Code#</cfoutput>
 </cfif>

The Hub responds with a '204 No content' if the publishers feed is successfully registered.

Publishing content:

A form accepting the post title and description:
publisher_form.cfm:

 <cfparam name="FORM.feedTitle" default="" >  
 <cfparam name="FORM.feedDescription" default="" >
  
 <cfif FORM.feedTitle NEQ "" AND FORM.feedDescription NEQ "">       
      <cfset publisherObject = createObject("component","Publisher") >  
      <cfset publisherObject.publish_update(FORM.feedTitle,FORM.feedDescription) >  
 </cfif>
  
 <form action="publisher_form.cfm" method="post">  
      Add a new post here:<br>  
      Title: <input name="feedTitle" type="text" style="width:300px" ><br>   
      Description: <br>  
      <textarea name="feedDescription" rows="5" cols="50" ></textarea><br>  
      <input type="submit" value="Submit">  
 </form>

A ping notification is sent to the Hub, to notify of the new content. The function publish_update does that:

 <cffunction name="publish_update"  
             access="remote">  

             <cfargument name="feedTitle"  
                         required="true"/>  
             <cfargument name="feedDescription"  
                         required="true"/> 

             <!--- Insert feed data, one can also use a DB to store feed data --->  
             <cfscript>  
                   if(!isDefined("application.feedQuery")) {  
                         application.feedQuery = queryNew("title,description,pubdate");  
                   }  
                  queryAddRow(application.feedQuery,1);  
                  querySetCell(application.feedQuery,"title",'#arguments.feedTitle#');           
                  querySetCell(application.feedQuery,"description",'#arguments.feedDescription#');  
                  querySetCell(application.feedQuery,"pubdate",'#DATEFORMAT(now(), "mm/dd/yyyy")#');  
             </cfscript>  
    
             <!--- Send a ping notification to the Hub --->  
             <cfhttp method="POST"  
                     url="http://pubsubhubbub.appspot.com"  
                     result="new_content">  
                     <cfhttpparam type="header"   
                                  name="Content-Type"  
                                  value="application/x-www-form-urlencoded" >  
                     <cfhttpparam type="url"   
                                  name="hub.mode"  
                                  value="publish">  
                     <cfhttpparam type="url"   
                                  name="hub.url"  
                                  value="http://#machineIP#/pubsubhubbub//Publisher.cfc?method=getFeed">  
              </cfhttp>  
 </cffunction>

The Hub then fetches the feed from the mentioned URL (hub.url). Here it is the getFeed method in Publisher.cfc:

 <cffunction name="getFeed"  
             access="remote">
  
             <cfscript>  
                  /* Feed metadata structure */  
                  feedMetaData = structNew();  
                  feedMetaData.author = arrayNew(1);  
                  arrayAppend(feedMetaData.author,{name:'Sagar Ganatra',email:'sagar@sagarganatra.com'});  
                  feedMetaData.encoding = "UTF-8";  
                  feedMetaData.link = arrayNew(1);  
                  arrayAppend(feedMetaData.link,{href:'http://pubsubhubbub.appspot.com',rel:'hub'});  
                  feedMetaData.title = structNew();  
                  feedMetaData.title.type = "text";  
                  feedMetaData.title.value = "Sagar's Kitchen";  
                  feedMetaData.updated = "#now()#";  
             </cfscript>  

             <cfset colMap = {publishedDate="pubdate", title="title", content="description"}>  
             <cffeed action="create"  
                     query="#application.feedQuery#"  
                     properties="#feedMetaData#"  
                     columnmap="#colMap#"  
                     xmlvar="xmlResult">  

             <cfcontent type="text/xml"  
                        reset="true">  

             <cfoutput>#xmlResult#</cfoutput>  
 </cffunction>

Registering a Subscriber with the Hub:

The Subscriber can subscribe to the feed by specifying the topic URL in the request body:

 <cfhttp method="POST"  
         url="http://pubsubhubbub.appspot.com"  
         result="sub_result">
  
      <cfhttpparam type="header"  
             name="Content-Type"  
             value="application/x-www-form-urlencoded">  
      <cfhttpparam type="url"  
             name="hub.mode"  
             value="subscribe">  
      <cfhttpparam type="url"  
             name="hub.verify"  
             value="sync">  
      <cfhttpparam type="url"  
             name="hub.topic"              
             value="http://#machineIP#/pubsubhubbub/Publisher.cfc?method=getFeed">  
      <cfhttpparam type="url"  
             name="hub.callback"              
             value="http://#machineIP#/pubsubhubbub/subscriber.cfc?method=receiveFeed">  
 </cfhttp>  

 <cfif #sub_result.Responseheader.Status_Code# eq 204>  
      Subscriber registered successfully  
 <cfelse>  
      Subscriber failed to register. Returned <cfoutput>#sub_result.Responseheader.Status_Code#</cfoutput>  
 </cfif>

Subscribing

As mentioned earlier, Hub checks the Subscribers' intent by sending a GET request to the callback URL. The Subscriber is then required to respond, by echoing back the 'hub.challenge' parameter present in the URL:

 <cffunction name="receiveFeed"  
             access="remote"  
             returnformat="plain"  
             returntype="string"  
             output="false" >  

         <cfheader name="Content-Type"  
                   value="text/plain">
  
         <!--- To verify the subscription --->  
           <cfif structKeyExists(URL, "hub.challenge")>  
                  <cflog text="#url['hub.challenge']#" >  
                  <cfreturn #url['hub.challenge']#>  
           <cfelse>  
                 <!--- Receive feed data --->  
                 <cfset feedData = getHTTPRequestData().content >  
                 <cfset fileWrite("ram:///feedSource.xml",trim(feedData)) >  

                 <cffeed action="read" source="ram:///feedSource.xml" query="feedReceived" >  
      
                 <cfdump var = #feedReceived# output="console">  
                 <cfheader statuscode="200">  
                 <cfreturn>  
           </cfif>  
</cffunction>

As seen in the above code the feed is read in else part. One can store the read content in a database for later retrieval or send the same over a websocket to the clients so that it can be read live.

Who is using PubSubHubBub?

Google products - Google Alerts, FeedBurner, Blogger and Google Reader are using PubSubHubBub.

Reference:

Project Home - http://code.google.com/p/pubsubhubbub/
Protocol Basics - http://pubsubhubbub.googlecode.com/svn/trunk/pubsubhubbub-core-0.3.html

Steve Jobs - An insanely brilliant man passes away

2011-10-06T14:22:00.000+05:30

Today when I woke up and switched on the Television to see what's making the news; I heard about Steve Jobs death. For the first time in my life, I'm feeling very sorry for a tech giant who passed away. Steve was an extraordinary human being. He kissed success not just once but many times. He changed the way we experience technology. His charisma, passion and more importantly desperation to do something great is matchless.

He gave the world the Macintosh, iPod, iPhone, iPad and many other products. Sometimes people say 'Why to reinvent the wheel?'; this man did reinvent the wheel and revolutionized the way we perceive technology. With Macintosh, he changed the way we compute. When I work on a Mac machine at office, I can feel its simplicity and power at the same time. It feels awesome when I hit the keys of a Mac keyboard or when I scroll using the mouse. And of course the monitor, what you experience on it is amazing.

iPhone defined what a smartphone should be like. It was introduced when everyone was talking about smart phones and few thought that they really owned one. Everyone went gaga once the iPhone was introduced in the market and it became the hottest product on the planet. Competitors like Nokia, HTC, Samsung followed soon and produced their own range of smart phones. Apple reinvented the wheel and others followed. Not to forget the iPad, the tablet PC. Though it was Microsoft that popularized the tablet PC in earlier days, it was Apple that reinvented the wheel again and introduced this amazing product. Again competitors followed soon and produced their own range of tablet PCs. I don't think someone has manufactured a product that comes close to an Apple iPod. The first gift that I gave my wife was a third generation iPod nano. Its size and sound quality is breathtaking.

Apple grew not just because of the great products that it gave to its consumers, but it was this mans' charisma on stage that made Apple so insanely successful. His presentation skills were exemplary. Today it's not just a great loss to Apple, but to this entire nation. I salute him for what he did in his life. May his soul rest in peace.

Building resposive Web applications with HTML5 Web Workers

2011-10-03T18:36:00.000+05:30

One of the key aspects of building web applications that deliver great user experience is to build applications that are highly responsive. Browser vendors are trying to improve the speed of their JavaScript engines and are enabling the web applications to perform well. Since JavaScript was introduced, there has been no way to execute the code outside of the browser UI thread i.e. it has remained single threaded. The Web Workers API introduced in HTML5 enables web applications to run scripts in the background, independent of the UI thread.

The performance of a web application can be greatly improved by using Web Workers since each worker would spawn its own thread. These threads can be used to perform computationally intensive tasks in the background without affecting the performance of the entire application.

Spawning a Worker:

The Worker() constructor is used to spawn a new worker thread. Since workers run in an isolated thread, a separate file containing the code(.js file) is created. The URI of the file is then passed as an argument to the Worker() constructor:

 var worker = new Worker('myWorker.js');

If the file 'myWorker.js' is found, then the same would be downloaded asynchronously and a Worker thread would be spawned. To receive notifications from the Worker, the onmessage event handler can be defined:

 worker.onmessage = function(event){  
      alert(event.data);  
 }

The Worker thread can be started using the postMessage() method:

 worker.postMessage('Data');

The worker would handle the message received from the main page by defining a onmessage() method:

 onmessage = function(event) {  
   postMessage('Received message ' + event.data);  
 }

The message events data attribute would contain the data passed to it from the main page. The worker can send data back to its calling thread by using the postMessage() method.

Worker Example:

As mentioned earlier, Workers can be used to perform computationally intensive tasks independently. Say if the server returns a JSON string to the client and parsing the same would take say 500ms, then performing this operation inside a Worker would make the application more responsive. I was working on an algorithm for finding the first non repeated character in a paragraph or in the user provided text (a good interview question right?). In this algorithm one has to build a hash table and insert entries for each character scanned. If the character is already present in the hash table then update its value to indicate that it appears more than once. Here is the worker code:

NonRepeatedChar.js

 onmessage = function(event){  
   //event.data contains the text in which the non-repeated character is to be found       
   var postData = event.data;
  
   //array to insert the scanned character  
   var array = {};  
   var key = {};  
   var j = 0; 
 
   //set the found flag to false  
   var found = false; 
 
   //for each character see if it is already present in the array  
   for (i = 0; i < postData.length; i++) {  
     if (postData[i] != ' ') {  
       //if the character is not present in the array, insert it into the array       
       if (!array[postData[i]]) {  
         array[postData[i]] = "Seen Once";  
         key[j++] = postData[i];  
       }  
       else {  
         //if the character appears more than once update it here  
         array[postData[i]] = "More than once";  
       }  
     }  
   }
  
   //find the first character that contains the text 'Seen Once'       
   for (i = 0; i < j; i++) {  
     if (array[key[i]] == "Seen Once") {  
       //post the result to the caller thread and break from the loop  
       postMessage("First non repeated character is " + key[i]);  
       found = true;  
       break;  
     }  
   }
  
   //if there are no non repeated characters then send a message 'Not found'  
   if (!found) {  
     postMessage("Not found");  
   }  
 }

The main page that invokes the worker:

index.html

 <!DOCTYPE HTML>  
 <html>  
   <head>  
     <script type="text/javascript">  
       var worker = new Worker('NonRepeatedChar.js');  
                worker.onmessage = function(event){  
                     alert(event.data);  
       }  
       function findNonRepeatedChar(){  
                  worker.postMessage(document.getElementById('myText').value);  
       }        
     </script>  
   </head>  
   <body>  
     <textarea id="myText" rows="10" cols="50">  
     </textarea>  
     <input type="button" value="Click" onclick="findNonRepeatedChar()">  
   </body>  
 </html>

A few limitations:

Since Workers are not bound to the UI thread, they do not have access to the DOM elements defined in the calling page. Each worker thread has its own global environment and access to a limited set of JavaScript features:

The navigator object.
The location object.
The XmlHttpRequest object.
Methods - setTimeOut(), setInterval() and clearTimeOut(), clearInterval().
importing scripts using the method importScripts()
Spawning other worker threads.

Reference:

http://dev.w3.org/html5/workers/

Merging password protected PDF files in ColdFusion

2011-09-22T22:12:00.001+05:30

In ColdFusion, CFPDF tag can be used to perform several PDF related operations such as adding a watermark, generating thumbnails, deleting pages, merging documents and securing a PDF with password. Today I wanted to merge all my bank statements into a single PDF document, such that only the first page from each document containing the summary of the statement is present in the merged document.

To merge these documents, one can use CFPDF tag with the action attribute set to 'merge'. However, the PDF files that I was trying to merge were password protected. To merge password protected files one can use the CFPDFPARAM tag within a CFPDF tag and provide password there:

 <cfpdf action="merge"  
     destination="merged.pdf"  
     overwrite="yes">  
      <cfpdfparam source="pdf1.pdf"  
            password="#password#"  
            pages="1">  
      <cfpdfparam source="pdf2.pdf"  
            password="#password#"  
            pages="1">  
      .
      .
      .
      .
 </cfpdf>

As mentioned earlier, the merged document should have only the first page from each document. The CFPDFPARAM tag with the pages attribute set to '1' would consider only the first page while merging. One can also specify a range of pages with "1-5" or a list of pages separated with a comma "1,5,7".

The resultant merged document was not password protected. To secure a PDF file with a password, one can use the CFPDF tag with the action attribute set to 'protect':

 <cfpdf action="protect"  
     source="merged.pdf"  
     newuserpassword="test">

An odd behavior with localStorage events in HTML5

2011-09-20T00:12:00.000+05:30

Today I was looking into web storage (localStorage) feature introduced in HTML5. Most of the modern browsers provide means through which key/value pairs can be securely stored and retrieved for later use. Browser cookies can indeed be used for the storage of persistent data but are limited in capacity. Also with cookies, the data is transmitted in every HTTP request thereby making the web applications run slow. Unlike cookies, in local storage there is no limit on the size of the data and it is never transmitted to the web server unless an attempt is made to send it manually. Whenever the data in the storage area changes a 'storage' event is fired. This event is fired whenever the methods setItem(), removeItem(), or clear() are called on the localStorage object.

However, when I tried to use these methods to update the localStorage area, the storage event never fired:

 <!DOCTYPE html>  
 <html>  
  <head>  
   <title>localStorage Test</title>  
   <script type="text/javascript" >  
   
    var storageHandler = function () {  
     alert('storage event 1');  
    };  
   
    window.addEventListener("storage", storageHandler, false);  
   
   </script>  
  </head>  
  <body>  
         
   <button id="addBtn"  
           onclick="localStorage.setItem('key1','value1')">  
           Add  
   </button>  
   <button id="clearBtn"  
           onclick="localStorage.clear()">  
           Clear  
   </button>  
  </body>  
 </html>

The methods setItem and clear did change the storage area and I confirmed this by referring to the resources section in chrome developer tools. This looked very odd, but on referring to the w3c specification I found this: "When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every Document object whose Window object's localStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired". This meant that, the storage event would be fired in any other window\tab which used the same storage area.

Now on opening another tab and on clicking the Add\Clear button the localStorage area was affected and a storage event was fired in the other tab; not on the one that invoked the setItem or clear method. In a way this makes sense because the invoking window would already know of event and would perform the necessary action. Windows that share the same storage area would then be notified of the event and can update the DOM or perform the required action.

A Cloud of Productivity features in ColdFusion Builder

2011-09-15T18:45:00.000+05:30

Yesterday at the ColdFusion Developer Week, I had demonstrated the Productivity features in ColdFusion Builder. Here is a cloud of these features:

Speaking at Adobe ColdFusion Developer Week

2011-08-24T19:42:00.000+05:30

The Adobe ColdFusion Developer Week is here and is scheduled from 12th of September to 16th of September 2011. I'm pleased to announce that I'll be speaking on Wednesday, 14th of September and my session title is 'ColdFusion Builder: The Professional IDE to Boost Your Productivity'.

This session would focus on how you can get started with using ColdFusion Builder and productivity features that would enable you to develop ColdFusion applications in no time. I'll also be demonstrating the new features that have been introduced in ColdFusion Builder 2.0.

You can register for the session here - http://www.adobe.com/cfusion/event/index.cfm?event=detail&id=1489920&loc=en_us

Kiss My App: Collaborating using HTML5 Canvas and WebSockets

2011-08-09T20:41:00.000+05:30

The Canvas element introduced in HTML5 is the most talked about feature in HTML5. It allows a developer to draw on a rectangular area and the ability to control each pixel in it. I'm not a very big fan of powerful graphics and animation on the web, however I wanted to try Canvas in conjunction with another popular feature - Web Sockets. The idea is to use the mouse events to draw on the Canvas and then send the coordinates to remote clients using Web Sockets. I have used the pusherapp Web Socket library in my example and this video shows how two clients can play a Tic-Tac-Toe game:

Unable to display content. Adobe Flash is required.

As you can see in this video, the mouse movements made on the canvas will draw lines on it and also cause lines to be drawn on another browser window.

HOW?:
There are various event handlers that can be used with the Canvas element. The one that I have used in this application are the mousedown and the mousemove events. When the user clicks on the Canvas the mousedown event is invoked. The point at the which the mouse was clicked will be marked as the starting point for the line. Now, when one moves the mouse, the mousemove event is invoked. The movement of mouse will then be used to draw the line on the canvas. The next mouse click is then used to mark the end of drawing and any mouse movement will not cause lines to be drawn on the Canvas. This is particularly useful when you want to draw multiple shapes or letters on the Canvas. To start drawing again click anywhere on the Canvas to mark the start point.

In both the cases i.e. on mouseclick and mousemove events, the X and Y coordinates along with the event type is sent over the Web Socket. On receiving the message on the Web Socket, the corresponding action is performed.

Code:


      var canvas, ctx, socket, clicked = true;  
     var oldX = 0, oldY = 0;  
      socket = new Pusher('{api_key}', 'test_channel');  
     /*  
      * Initialize the Canvas   
      * set the line width  
      * and add event listeners - mousedown and mousemove   
      */  
     $(document).ready(function(){  
         canvas = document.getElementById('myCanvas');  
         ctx = canvas.getContext('2d');  
         ctx.lineWidth = "6";  
          canvas.addEventListener('mousedown', drawOnCanvas, false);  
         canvas.addEventListener('mousemove', drawOnCanvas, false);  
     });  
     /*  
      * Function to be invoked when a mousedown or a mousemove event is received  
      */  
     function drawOnCanvas(evt){  
     /*  
      * Post a HTTP request to the server on mousedown and mousemove events.  
      * Post a HTTP request for mousemove only when the mouse is clicked.  
      */  
     if (evt.type == 'mousedown' || !(clicked)) {  
           $.post('send.cfm', {  
                x: evt.x,  
                y: evt.y,  
                eventType: evt.type  
           });  
        }  
     }  
     /*  
      * Bind the socket to an event  
      */  
     socket.bind('test_event', function(data){  
          if (data.eventType == 'mousedown') {  
          /*  
           * Change the start position to the coordinate where the mouse was clicked  
           * Set clicked to false, so that the next mousemove event can send the request to Pusher. See below.  
           */  
          if(clicked) {  
                ctx.moveTo(oldX, oldY);  
                clicked = false;  
          }  
          /*  
           * On second click, stop drawing any more lines on the Canvas until the next mousedown event is received.  
           * This is used to mark an end of a character or a diagram on the Canvas. Allows user to draw multiple characters or diagrams  
           */  
           else {  
                clicked = true;  
           }  
      }  
      /*  
       * In case of a mousemove event draw the line  
       */  
      else if(!clicked){  
           ctx.beginPath();  
           ctx.moveTo(oldX, oldY);  
           ctx.lineTo(data.x, data.y);  
           ctx.stroke();  
           clicked=false;  
      }  
      /*  
       * Update the next start position  
       */  
      oldX = data.x;  
      oldY = data.y;          
 });

The performance of this application depends on the network speed. If you do see the application running slow, you can change the behavior such that the line is drawn if the difference between the new and the old coordinates is greater than some value.

Download code - http://goo.gl/tDDkY

Using Google Maps Places API and ColdFusion's CFMAP to render places of interests

2011-07-19T23:59:00.000+05:30

Google announced the Places API recently at Google I/O (2011) and I was looking into this, to see how this API can be used in conjunction with ColdFusion maps created with CFMAP. The Places API can be used to retrieve place information which includes:

Places of interests such as parks, restaurants, hospitals which are nearby to the users location.
More detailed information on the place, such as the address, phone number etc,.

The API can also be used to perform check-in at a particular place and to add\delete a place. These check-ins can then be used to evaluate the popularity of the place. In this post I'll explain how to retrieve the places of interests and displaying the same on a ColdFusion map using CFMAP.

Place Search Requests - retrieving the places of interests near a user's location:

You can send a HTTP request to the URL of the form:

https://maps.googleapis.com/maps/api/place/search/output?parameters

Here the user has an option of specifying the output format as either json or xml and is required to pass a few parameters:

key (required): The application's API key. The Places API uses this information to identify your application.
location (required): This will be the latitude and longitude information of a particular place around which the places of interests are to be found.
radius (required): to specify the radius within which the places of interests are to be found. The value specified will be considered in meters.
sensor (required): to indicate whether the place request is from a device using the location sensor. It can be either true or false.
types (optional): the user might be interested in various types of businesses such as library, park, gym etc,. You can also specify multiple types which are separated by a '|' (type1|type2|type3).
name (optional): A term to be matched against the names of places. This will restrict the results to contain only those with the specified name.
language (optional): The language code to indicate the language in which the results are to be returned.

With the above information, you can issue a HTTP request using ColdFusion's cfhttp tag:

 <cfhttp url="https://maps.googleapis.com/maps/api/place/search/json"  
         method="get"  
         result="gmapData">  

      <cfhttpparam type="url"  
                   name="location"  
                   value="-33.8670522,151.1957362">  
      <cfhttpparam type="url"  
                   name="types"  
                   value="doctor|book_store">  
      <cfhttpparam type="url"  
                   name="radius"  
                   value="2000">  
      <cfhttpparam type="url"  
                   name="sensor"  
                   value="false">  
      <cfhttpparam type="url"  
                   name="key"  
                   value="{API_Key}">  
 </cfhttp>

For the purpose of this example, I have specified the latitude and longitude values for 'Sydney, Australia' (I've lived here!!) and have specified the type of business as doctor and book_store. The radius is specified as 2000 meters (2 Kms) and the sensor is set to false. The output format is specified as json.

The json response would contain three root elements: status, results and html_attributions. If there were no errors in performing the request operation and the response contained at least one result then the response status is set to "OK". The result element is an array of places sent in response to a request, this would include the place name, its geometry (latitude and longitude information), place id, reference, icon, types, vicinity.

The results array in the response can then be used to add places to the ColdFusion's map. However, on a Google Map when a user clicks on a location a popup is shown which includes the Address and the Phone number of the selected location. To get more details on a particular location, another request should be made to retrieve the place details such as address, phone number, rating.

Place Detail requests - retrieve place details:

Similar to the previous one, the HTTP request to retrieve the place details is:

https://maps.googleapis.com/maps/api/place/details/output?parameters

As mentioned earlier, output can be either json or xml. The reference value obtained from the previous HTTP call (Place Search request) is then passed as a parameter to retrieve the place details. Other required parameters include the sensor and the key. The cfhttp request to get the details is of the form:

 <cfloop array="#arrayResults#"  
         index="placesObject">  
      <cfhttp url="https://maps.googleapis.com/maps/api/place/details/json"  
              method="get"  
              result="placeDetails">  
           <cfhttpparam type="url"  
                        name="reference"  
                        value="#placesObject.reference#">  
           <cfhttpparam type="url"  
                        name="sensor"  
                        value="false">  
           <cfhttpparam type="url"  
                        name="key"  
                        value="{API_Key}">  
      </cfhttp>  
      <cfset placeDetails = #deserializeJSON(placeDetails.fileContent).result#>  
      <cfset arrayAppend(windowContent,   
                "<h3>" & placeDetails.name & "</h3><br><h5>" & placeDetails.formatted_address &   
 "<br>Phone: " & placeDetails.formatted_phone_number & "</h5>")/>  
 </cfloop>

As seen in the above code, the arrayResults containing the results of the place search request is iterated in the cfloop tag. The reference value in the arrayResults is then used in each iteration to get the place details. The place details are then used populate the windowContent array, which contains the html markup to show when the user clicks on any of the map item.

The CFMAP and CFMAPITEM tag can then be used to render a Google map and add places of interests to the map:

 <cfmap name="myMap"  
        centerlatitude="-33.8670522"  
        centerlongitude="151.1957362"  
        tip="Sydney"  
        width="800"  
        height="700"  
        zoomlevel="16">  
      <cfloop array="#arrayResults#"  
             index="mapObject">  
           <cfmapitem name="#mapObject.name#"  
                      latitude="#mapObject.geometry.location.lat#"  
                      longitude="#mapObject.geometry.location.lng#"  
                      tip="#mapObject.name#"  
                      markerwindowcontent="#windowContent[count++]#"  
                      markericon="#mapObject.icon#">  
      </cfloop>  
 </cfmap>

The CFMAPITEM tag is used to add places of interests on the map using the latitude and longitude information obtained from the place search request. The markerwindowcontent attribute would contain the address and the phone number information obtained from place detail request. The map rendered would look similar to the one shown below:

Custom validation messages for HTML5 Input elements using the constraint validation API

2011-07-08T20:41:00.030+05:30

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

Take an example of a form that has an input element with type="email" and a submit button:


<form id="myForm">
<input id="eid" name="email_field" type="email" />
<input type="submit" />
</form>

After entering some text in the input field and on clicking the submit button, the default validation message is shown:

The message style varies from browser to browser and the one shown in this picture is taken from Google's Chrome browser.

As you can see, message "Please enter an email address." is shown when the user enters an invalid email address and clicks the submit button. This message is shown inline with the input field.

To show a custom message, instead of default one the constraint validation API is used. Here the user can set the custom validation message using element.setCustomValidity(message):

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}

From the code, the function check accepts a HTMLInputElement (input) as a parameter and checks for the validity of the input text entered against its type using input.validity.typeMismatch. It is set to true if the entered text doesn't match the specified input type. The input.setCustomValidity(message) is then used to set the validation message. Now whenever the validation fails the custom message will be shown:

Similarly the custom validation message can be set in various conditions, such as required filed not entered - element.validity.valueMissing, element value doesn't match the pattern - element.validity.patternMismatch, value is lower than the provided minimum - element.validity.rangeUnderflow, value is higher than the maximum - element.validity.rangeOverflow.

One can set such validation messages in various use cases as well. Say, when the entered text is not one of the expected values or when the confirmation email address doesn't match with the original email address. In such cases showing a custom validation message comes very handy.

Submitting Form using FormData object in HTML5 using XmlHttpRequest Level 2

2011-07-07T23:05:00.002+05:30

The other day I had posted on uploading a file using XmlHttpRequest 2 and tracking the progress of the file upload process using the progress event on XHR2 object and the progress tag. Another enhancement added to the XHR2 specification is the introduction of FormData object. Using the FormData object, one can create a set of key-value pairs and send them as form data in a XHR request. The FormData object is passed in the send() method of the XHR object:

 var formObject = new FormData();  
 formObject.append("element_1","Sagar");  
 formObject.append("element_2","Ganatra");  
   
 var xhrObject = new XMLHttpRequest();  
 xhrObject.open("POST","postform.cfm");  
 xhrObject.send(formObject);

This means that, one need not add the form element to the document and can avoid using hidden input element (type="hidden") to send the additional key-value data to the server for processing.

It is also possible to add additional data to an already existing form in the document and send the form data to the server:

 var docFormElement = document.getElementById('myForm');  
 var docFormData = new FormData(docFormElement);  
 docFormData.append("product_license","Enterprise");
 var xhrObject = new XMLHttpRequest();  
 xhrObject.open("POST","postform.cfm");  
 xhrObject.send(docFormData);

 <form id="myForm">  
   <input name="product_name" type="text" value="ColdFusion" />  
   <input name="product_codename" type="text" value="Zeus" />  
 </form>

The FormData constructor takes the form element as an argument and then the append function is used to add another key-value data to the FormData object.

Auto Insertion of Tag attributes and Function arguments in ColdFusion Builder 2

2011-06-20T20:41:00.007+05:30

The Editor is the most important feature in an IDE and the code assist features in the Editor helps in developing applications quickly and hence help in increasing the productivity. One of features is the 'auto insertion of tag attributes'. Most of the tags in ColdFusion have a mandatory attribute, for example the attribute 'name' is mandatory when using the cffunction tag. In ColdFusion Builder 2, these attributes are auto inserted i.e. when a user types in the cffunction tag and invokes code assist (using CTRL + SPACE) the name attribute is auto inserted.

Auto insertion also works for function arguments wherein the required arguments are auto inserted.

Auto Insertion of Tag attributes

As explained above, the mandatory attributes are auto inserted whenever the code assist is invoked for tags such as cffunction:

In the above picture, code assist for cffunction is invoked and the tag is selected from the list. This would auto insert the required attribute 'name':

There are some tags such as cfpdf, cfimage wherein a few attributes become mandatory when one of the attributes' value is specified. For example, in case of cfimage when the action attribute is specified as 'convert', the attributes destination and source become mandatory and are auto inserted:

Now on selecting the action attributes' value as convert, the attributes destination and source are auto inserted:

If the user selects action attributes' value as rotate, then the attributes angle and source are auto inserted:

Another thing to note here is that, after inserting the required attributes the cursor is positioned such that one can go about specifying the next attributes' value.

auto Insertion of required function arguments

Whenever one tries to invoke a built-in function or a user defined function the required arguments are auto inserted. For example, consider a function foo which takes three arguments, of which the first two arguments are mandatory:

When this function is invoked using code assist, the required arguments are auto inserted. As seen above, arguments arg1 and arg2 are marked as required and are auto inserted when the function is invoked. After inserting the required arguments the first argument is selected so that the user can go about specifying a value for the argument. The tooltip here shows the list of arguments that the function accepts along with the argument type. The last argument - arg3 is marked optional and is surrounded by square brackets indicating that it is optional.

De-obfuscating javascript code in Chrome Developer Tools

2011-06-17T18:03:00.000+05:30

I had blogged about JavaScript debugging with Chrome Developer Tools some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code.

What is Minification?

Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript files is an impossible task.

With the latest version of Google Chrome one can choose to de-obfuscate the javascript code right with in the developer tools. This is how the jquery.js file would look before de-obfuscation:

Now, to de-obfuscate the code one can right click on the file and select the 'De-obfuscate Source' option. This would de-obfuscate the javascript code and present the code which is readable and ready to debug:

Update:

This post was written when Chrome 12 was released. In recent versions, this option is available as a button - 'pretty print', at the bottom left corner of the screen. Look for the button with the icon '{ }'.

Getting notifications of Network Status changes using online and offline events introduced in HTML5

2011-06-08T23:39:00.000+05:30

I was working on an online\offline application, wherein I wanted to display a set of records stored in the local database to the user when he goes offline. The only way to determine the network status is to send a XHR request to the server at particular time intervals (polling). If the server responds back with some data it is understood that the user is online. However, I came across two event listeners 'ononline' and 'onoffline' which are triggered when the network status changes.

Sample Code:

These event listeners are not supported in every browser, I have tested this on Chrome 11 and it works great. Here is the code snippet that I have used in my application:

 <script>  
           function showOnlineStatus(){  
           var status = document.getElementById('userStatus');  
           if(navigator.onLine)  
                status.innerHTML = status.className = 'online';  
           else  
                status.innerHTML = status.className = 'offline';  
           }  
   
           window.onload = window.ononline = window.onoffline = showOnlineStatus;  
 </script>

As seen in the above code, the navigator object has an attribute onLine which is used to determine network status. It is set to true if the user is online and false otherwise. To test this, unplug the network cable and see that the offline event gets triggered. On connecting the network cable the online event would be triggered.

ColdFusion's CFDIV tag can be used to output HTML5's semantic tags

2011-06-02T19:20:00.000+05:30

HTML5 has introduced several semantic tags such as HEADER, FOOTER, SECTION, ARTICLE, ASIDE, NAV etc,. The rationale behind creating these structural tags is to divide the web pages into logical parts with tags that are descriptive of the type of content they contain. Before HTML5 the div tags were used in creating blocks of content in a HTML document.

Recently, I was having a conversation with one of my team members from whom I learnt that the CFDIV tag can be used to output these semantic tags.

The CFDIV tag has an attribute 'tagname'. This attribute can be used to specify the HTML container tag i.e. one can specify tagname="header" to output the header tag. Similarly the tagname attribute can be used to specify other HTML5 semantic tags.

Why should I use CFDIV tag to output the semantic tags?

Well, this is an obvious question you are likely to ask yourself before you write the CFDIV tag. It is not so obvious to one who uses CFDIV tag in their day to day development because CFDIV tag comes with an attribute bind, which is used to specify a bind expression that returns the container contents. One can dynamically populate the tag contents by specifying the bind expression which can be a CFC function, a URL or even a javascript function. You can refer to the CFDIV tag documentation here.

Drawing paths on Google Maps, the Indiana Jones way

2011-05-13T23:24:00.001+05:30

I was looking into the Google Maps API the other day and came across some APIs which are really cool. I came up with a use case to show path from the current location to a particular destination entered by the user. I was also trying to achieve that Indiana Jones like effect on the map i.e. to show an animation of the path being drawn on the map.

The idea here is to show the moving path until the destination is reached and also to pan the map accordingly.

Unable to display content. Adobe Flash is required.

As seen in the video, a marker is added to the map specifying my current location (Bangalore, India). The current location data is retrieved using the HTML5’s Geolocation API. Once the latitude and longitude information are available, a marker can be added to the map. You can now enter one of your favorite destinations in the text box provided and click the Submit button to see a path drawn from your current location to the destination. The path is drawn using the Google maps ‘Polyline’ API.

Getting the current location data using HTML5’s Geolocation API:

The Geolocation API allows users share their current location information with trusted sites. You can examine the property navigator.geolocation to see whether the browser supports the Geolocation API. Alternatively, Modernizr can be used to determine the same. All modern browsers support the Geolocation API; however users are required to provide permission to the websites. Once the user has provided the permission, the method getCurrentPosition can be invoked on the navigator.geolocation object:

 navigator.geolocation.getCurrentPosition(function(position){  
     var mapElement = document.getElementById('mapelement');  
     startLatitude = position.coords.latitude;  
     startLongitude = position.coords.longitude;  
     mapObj = new google.maps.Map(mapElement,  
     {  
         disableDefaultUI:true,  
         zoom: 3,  
         center: new google.maps.LatLng(startLatitude,startLongitude),  
         mapTypeId: google.maps.MapTypeId.TERRAIN  
     });  
     var markerPosition = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);  
     var startPosition = markerPosition;                                     
     var marker = new google.maps.Marker({position:markerPosition,map:mapObj,title:'You are here'});       
});

Once the latitude and longitude information is available, they can be used to specify the center address and to add a marker on the map.

Drawing the path using the Polyline API:

A polyline is a linear overlay of connected line segments on the map. To draw a line on the map using the Polyline API, you have to pass the map object along with the coordinates specifying the end points as arguments. However, to get the Indiana Jones like effect, you must get as many points between the start and the end location. The latitude and longitude information of these points are then stored in an array and will later be used to achieve the desired effect.

For the purpose of this example, I’ve assumed 30 animation frames and have calculated the increment:

 function getPathData(destLatitude,destLongitude){  
    var xInc,yInc;  
    xInc = (destLatitude - startLatitude)/30;  
    yInc = (destLongitude - startLongitude)/30;  
    for(var i=0;i<30;i++){  
      path[i] = new google.maps.LatLng(startLatitude += xInc,startLongitude += yInc);       
    }  
 }

The path array would then contain the latitude and longitude information for the points between the start and the end location. This information can then be used to draw the path and get the desired effect:

 function drawPath(){  
    var polyLine = new google.maps.Polyline({  
                       path: [startPosition,path[positionIndex]],  
                       strokeColor:'#FF0000',  
                       strokeOpacity:2,  
                       strokeWeight:8,  
                   });  
    polyLine.setMap(mapObj);  
    mapObj.panTo(path[positionIndex]);  
    positionIndex = positionIndex + 1;  
    if(positionIndex < 30){  
      setTimeout(drawPath,200);  
    }                            
 }

As seen in the above code snippet, the Polyline API is invoked with the arguments path, strokeColor, strokeOpacity, and strokeWeight. Also, the map is panned to the current position while the path is being drawn on the map.

Can I use ColdFusion’s CFMAP tag to get this effect?

This was the initial idea and I did attempt to get this effect using the CFMAP tag. However, I found that the map object retrieved using the ColdFusion.map.getMapObject was not compatible with the Polyline API and hence decided to use the Google maps API to get that effect.

JavaScript debugging with Chrome Developer Tools and some tips\tricks

2011-05-09T17:22:00.005+05:30

Last Friday I was having a conversation with Ben Nadel and Jonothan Joyce on Twitter about examining the content of a JavaScript object. While the firebug add-on for Firefox comes in very handy in examining the request\response header and for various other internals, I can’t really debug the JavaScript code by adding breakpoints. I use Google’s Chrome browser for my day to day web application development. Both Chrome and Safari provide ‘Developer tools’ which help the user not only in debugging the JavaScript code but also in examining the content of an object at any point in time by providing watch expressions. What I like about debugging in Chrome is that it is very much similar to how I debug my server-side code using ColdFusion Builder or Eclipse. This certainly reduces the learning curve to understand debugging in a browser. However, Chrome has more to give when it comes to debugging web applications.

In this post I’ll explain how Google Chrome can help you debug web applications and several other internals.

JavaScript debugging with Chrome Developer tools:

I have taken an example of a CFAJAXPROXY tag, which is used to create a JavaScript proxy for a ColdFusion component. The proxy class can then be used to invoke any method defined in the CFC (methods with access attribute set to remote):

 <cfajaxproxy jsclassname="myCFCProxy" cfc="TestCFC" >  
 <script type="text/javascript">  
      var myObj = new myCFCProxy();  
 </script>

Now to see the methods that I can invoke using the proxy object (myObj in the code); I can make use of the developer tools in Chrome. After launching the page in the browser, you can invoke the developer tools by selecting the same under settings > Tools. Alternatively, you can use the shortcut key CTRL + SHIFT + I (CMD + OPTION + I on Mac):

As shown in the above screen shot, you can click the line numbers to add a breakpoint. This would turn the background color of that particular line number to blue. Once a break point has been added, the same would get listed in the ‘Breakpoints’ section. To inspect the content of a JS object, expand the watch expressions column and click ‘Add’ button (myObj added to the Watch Expressions list). The button bar just above the Watch Expressions column is used in debugging JavaScript code. Once the page is refreshed, the breakpoint is hit and you can inspect the object content:

As shown in the above screenshot, the line at which the break-point is hit would be highlighted and an arrow mark at that line would also be shown. The button bar to debug the JS code can now be used:

There are five buttons provided to debug the JS code:

Pause\Resume: Use to run the code until it comes across any other break-point.

Step over: Used to step over the highlighted code and move to the next line.

Step Into: Similar to Step over, except that when one clicks Step Into at a function call, the debugger moves its execution to the first line in the function definition. If the user clicks Step over button, then the function is executed and the debugger moves to the next line.

Step out: Say if you have stepped into a function definition by clicking Step Into button, on clicking the Step out button the remainder of the function definition is executed and the debugger moves its execution to its parent function and highlight the next line in place.

Deactivate\Activate all breakpoints: The last button is used to deactivate\activate all the breakpoints added.

Once the line at which the break-point was set is executed (by clicking Step Over\Step Into), the JavaScript object (myObj in the code) is populated and the watch expression indicates that. As shown in the above screenshot, the object contains several methods including the one that is defined in the CFC – retrieveAuthorDetails.

Tips and Tricks:

There are times when one would get JavaScript errors in the console and to debug the entire web application at that time can seem daunting. To resolve this, click the button ‘Pause on all exceptions’ which is available at the bottom left corner of the window, to pause at the line wherever the exception occurs. The debugger would then highlight the line where the exception occurred, just like how it would highlight when the user sets a breakpoint at a particular line.
With the advent of HTML5, you can leverage the offline database to store some records offline. Chrome has added support for WebSQL database; with Developer tools, you can examine the database records by switching to the Resources panel. This lists all the resources\files and various entities:

As seen from the above screenshot, the resources are shown which also includes Databases, Local Storage, Session storage, Cookies, and Application Cache.
If you run a script that creates an offline database and stores some records offline, then the same is listed in Resources panel under databases. What is cool is that, you can see all the tables and query the same. That is, you can click the database and a console would be shown to the users wherein they can query the offline database using SQL statements.

File upload and Progress events with HTML5 XmlHttpRequest Level 2

2011-04-27T21:49:00.001+05:30

The XmlHttpRequest Level 2 specification adds several enhancements to the XmlHttpRequest object. Last week I had blogged about cross-origin-requests and how it is different from Flash\Silverlight's approach. With Level 2 specification one can upload the file to the server by passing the file object to the send method. In this post I'll try to explore uploading file using XmlHttpRequest 2 in conjunction with the progress events. I'll also provide a description on the new HTML5 tag - progress which can be updated while the file is being uploaded to the server. And of course, some ColdFusion code that will show how the file is accepted and stored on the server directory.

Progress Tag:

HTML5 has introduced several new elements to the language and one of them the progress element. This element is used to show a progress bar on the web page. This tag comes handy for describing any work in progress. It can be used to describe the progress of a time consuming task.The progress element comes with two attributes: value and max. The value attribute is used to indicate the current value of progress and the max attribute is used to describe completion value.

 <progress id="progressBar" value="0" max="100">  
 </progress>

XmlHttpRequest Progress Events:

The only event listener that was available with XmlHttpRequest was the readystatechange event listener. Now with the advent of HTML5, several event listeners have been added to the XmlHttpRequest Interface - loadstart, progress, load, abort, error, timeout and loadend. The loadstart event is triggered when the request is initiated by the client. The progress event is triggered once the loadstart event has been dispatched.

In this example, I'll try to upload a file (text, image, mp3) using XmlHttpRequest and show the progress for the same by updating the progressbar (progress tag) using the progress event handler. With Level 2 specification one can now pass ArrayBuffer, Blob, File and FormData objects to the send method.

The input tag with the type file can be used to select a file that needs to be uploaded to the server (<input type="file" id="fileUpload">). Once the file is selected, a POST request can then be made to the server and the file object can be passed as an argument to the send method:

 function uploadFile(){  
         var filesToBeUploaded = document.getElementById("fileControl");  
         var file = filesToBeUploaded.files[0];  
         var xhrObj = new XMLHttpRequest();  
         xhrObj.upload.addEventListener("loadstart", loadStartFunction, false);  
         xhrObj.upload.addEventListener("progress", progressFunction, false);  
         xhrObj.upload.addEventListener("load", transferCompleteFunction, false);  
         xhrObj.open("POST", "upload.cfm", true);  
         xhrObj.setRequestHeader("Content-type", file.type);  
         xhrObj.setRequestHeader("X_FILE_NAME", file.name);  
         xhrObj.send(file);  
 }

As observed in the above code, event listeners are added for loadstart, progress and load events. These events are added for the upload attribute of XmlHttpRequest object. The Content-type header is set to the value of file.type. This is required to let the server know the mime type of file being transferred. Also, the header X_FILE_NAME with the value of file.name is specified. The file object is then passed to the send method of the XmlHttpRequest object.

The loadstart event is triggered once a request to send a file to the server is initiated. Once this function has been dispatched the progress event is triggered indicating that the file is being uploaded to the server:

  function progressFunction(evt){  
         var progressBar = document.getElementById("progressBar");  
         var percentageDiv = document.getElementById("percentageCalc");  
         if (evt.lengthComputable) {  
           progressBar.max = evt.total;  
           progressBar.value = evt.loaded;  
           percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";  
         }  
 }

The progress event is triggered as and when some data is uploaded to the server. This depends on the size of file that is being transmitted. The progressFunction defined above, takes an argument of type ProgressEvent. The ProgressEvent Interface defines the attributes - lengthcomputable, loaded and total. The lengthcomputable attribute is used to find whether the progress is an indeterministic or deterministic one. In this case the size of the file being uploaded is known and hence the lengthcomputable attribute will be set to true. The other attributes loaded and total are used to indicate the number of bytes uploaded of the total number of bytes. This data is then used to update the progress tag attributes value and max.

Server side code:

The server-side code is as simple as it can get:

 <cfset headerData = getHTTPRequestData().headers>  
 <cfset content = getHTTPRequestData().content>  
 <cfset filePath = expandPath(".") & "/Uploaded/" & headerData.X_FILE_NAME >  
 <cfset fileWrite(filePath,content)>

The header X_FILE_NAME would contain the name of the file that is being sent from the client. The file content is available in the request data and the same is accessed using getHTTPRequestData().content.

Update:

You can download the source code from - http://www.box.com/s/8py25tahymooe8pabo9z

HTML5 XmlHttpRequest 2 v/s Flash\Silverlight approach to cross-origin requests

2011-04-21T18:44:00.002+05:30

A few days back I had posted on XmlHttpRequest Level 2, describing how cross-origin requests can be achieved. A few folks on my team asked me how different it is from Flash\Silverlight's approach to achieve cross domain request\response with crossdomain.xml. The approach that these plugins take to send a request and receive a response is completely different from that of XmlHttpRequest's approach.

In case of Flash\Silverlight a policy file crossdomain.xml is created for the site. This file would contain a list of all sites that can make a cross domain request to this site. For example, if http://yoursite.com lists http://friendssite.com in crossdomain.xml file, then http://friendssite.com is allowed to access all the resources of http://yoursite.com. Here the access control mode is set to per site. XHR 2 on the other hand, follows a different approach altogether. It works on the per page access control model. In this case, every page has to respond with a 'Access-Control-Allow-Origin' header to the foreign site. With this approach only a part of a website can be accessed by a foreign site, keeping the rest of the website inaccessible.

Another difference to note is that, in case of Flash\Silverlight the browser fetches the crossdomain.xml defined for the website and analyzes it. If a foreign site is not allowed to make cross domain calls then the browser restricts the call being made. In case of XHR 2, a request is sent first and then a check is performed to see whether the response header contains 'Access-Control-Allow-Origin' header. If this header allows the foreign site then it can read the response, otherwise the response is inaccessible to javascript.

HTML5 XmlHttpRequest 2 - Cross origin request

2011-04-18T18:48:00.003+05:30

HTML5 specification has introduced a few enhancements for XmlHttpRequest object and one of them is the ability to make cross-origin request. That is, a host can send a XmlHttpRequest request to another host and receive a response in return. On the server-side, a check can be made to see whether the request can be accepted from the given origin. In this post I'll try to explain how this can be done using ColdFusion.

Client side:

On the client side, a XmlHttpRequest object is created and then a GET request is made to the remote server.

 var client = new XMLHttpRequest();  
client.onreadystatechange = readyStateChangeHandler;  
client.open("GET","http://{remote-address}/{path-to-file}.cfm",true);  
client.send();

For example, say example.com wants to get a response from another domain say abc.com, then as observed from the above code the request would look like:


client.open("GET","http://abc.com/dir1/foo.cfm",true);

Server side:

When a request is sent to the server, the request header would contain a key ORIGIN whose value will be the domain name from which the request was made. In this case the value would be example.com. The server side code can then perform a check to see whether the request origin belongs to the list of origins from which the request can be accepted.

 <cfif structKeyExists(getHTTPRequestData().headers,"origin") >   
    <cfset origin = getHTTPRequestData().headers.origin />   
    <cfif origin eq "http://example.com">   
      <cfheader name="Access-Control-Allow-Origin"   
         value="http://example.com">   
      <cfoutput>#timeFormat(now(),"medium")#</cfoutput>   
    </cfif>   
 </cfif>

As seen from the above code, the response header ACCESS-CONTROL-ALLOW-ORIGIN is set to allow cross-origin requests from example.com. This now enables requests from example.com to be served from abc.com.

Navigation enhancements in ColdFusion Builder 2.0

2011-04-07T17:11:00.001+05:30

Do you spend a lot of time scrolling large files, just to find out the next function definition in place or to figure out the end\start of a tag? If your answer is YES, then why don’t you try the Navigation enhancements in ColdFusion Builder 2.0?

ColdFusion Builder comes to you with three types of Navigation enhancements:

- Code Navigation

- Smart Tab Navigation

- Jumping to matching tag.

Code Navigation

Code Navigation is all about navigating to the next function definition in place. Imagine a CFC containing various cffunction tags. It is a time-consuming task to keep scrolling and keep an eye on the file to get to the next cffunction tag. ColdFusion Builder 2.0 provides a shortcut key CTRL + SHIFT + DOWN to navigate to the next function definition. And to navigate to the previous function definition, you can use the shortcut CTRL + SHIFT + UP.

Code Navigation works in conditional statements as well. Consider an example of a cfif-cfelseif-cfelse conditional statement. If the cursor is placed, say at the start tag and if this particular conditional statement has several conditions in it, then on pressing the shortcut key, the next condition in place is highlighted. That is, on placing the cursor at the start of the cfif tag and pressing the shortcut CTRL + SHIFT + DOWN, the next cfelseif condition is highlighted.

Smart Tab Navigation

Smart Tab navigation is about navigating to the next attribute value. The shortcut key for this is CTRL + ]. On pressing the shortcut key, the next attribute value is highlighted. This works in script style code as well, wherein the function arguments are also highlighted.

Jump to matching tag

If you have several nested cfif tags, it becomes very difficult to find out the end of a particular cfif tag. ColdFusion Builder 2.0 provides the shortcut CTRL + ALT + M, which shifts the cursor position to end of the tag. If the cursor is placed at the end tag, then on pressing the same shortcut key the cursor position shifts to the start tag.

Summary:

Code Navigation - Navigate to the next function definition or the next condition. Shortcut- CTRL + SHIFT + DOWN \ UP.
Smart Tab Navigation - Navigate to the next attribute value or arguments (cfscript). Shortcut- CTRL + ] \ [.
Jump to matching tag - Jump to the start or end tag. Shortcut- CTRL + ALT + M.