Fusioned with ColdFusion

ColdFusion 10: Geo-location on a Google map created with CFMAP tag

2012-02-25T23:16:00.000+05:30

In ColdFusion 10, you can now show the users location on a Google map created with the CFMAP tag. The CFMAP and CFMAPITEM tags now have a boolean attribute showuser. When set to true the browser would ask for the users permission and then display users geo-location on the map. This is now supported in most of the modern browsers. In cases where the browser doesn’t support Geo-location API then the values provided in centeraddress or centerlatitude\centerlongitude attributes will be used to add a marker in the Google map.

Here’s an example:

Once the user provides the permission to the site to display it's location, a map showing the users' location is presented:

As mentioned earlier, the attribute showuser is available in CFMAPITEM tag as well:

Output:

Here a marker is added to the map that indicates the users location. In any case if the user denies the access to its location then the marker is added at the specified address or latitude\longitude.

ColdFusion 10: HTTP Content Negotiation + REST– Part 2

2012-02-24T16:57:00.000+05:30

Following with my previous post on how content negotiation between the client and server help in invoking an appropriate REST service. In this post I’ll explain how one can specify multiple mime types in the request header and also the quality factor that enables server to decide which mime type to serve for the incoming request. The client sends a HTTP request to the Server along with several headers, one of them is the Accept header. The Accept header can contain a list of mime types that the client (user agent) is willing to process. These mime types are separated by a comma and may optionally be combined with the quality factor.

A CFC can contain several methods with produces attribute set to a specific mime type. The Accept header may contain several mime types:

text/html, text/plain, application/xml, application/json, */*

Server would parse the Accept header and will search for a REST service that matches the mime type specified first in the Accept header list. In this case ‘text/html’, if the same is not found then the next one in the list – text/plain. The client would specify the order of preference in the Accept header.

The Accept header can also specify the quality factory along with the mime types which defines relative degree of preference between different mime types. Here the header will be of the form:

text/html;q=0.7, text/plain;q=0.8, application/xml;q=0.9

Here the preference for each of the mime types is specified as quality factor in the header. The method with produces attribute set to ‘application/xml’ would be invoked because its quality factor – 0.9 is higher than the other mime types. By default the quality factory is 1 and it can have values between 0 and 1.

A REST request can also be sent through a browser by providing the URI in the address bar. Here the browser would send the default Accept header and an appropriate REST service would be invoked. Therefore if you try to send the same request from two different browsers, it would return different results.

ColdFusion 10: Using HTTP Content Negotiation to invoke a REST service

2012-02-23T20:05:00.000+05:30

The HTTP protocol provides a Content negotiation mechanism using which different formats of the document can be served using the same URI. For example, a JavaScript application can request the content in JSON format and an external system say a Java client can request for the same content in XML format. Here the clients need to specify the content format in the Accept attribute of the HTTP request. The REST service can specify the format in which the data will be returned to the client in ‘produces’ attribute.

In ColdFusion, if you want to retrieve content in either JSON or XML format then the same can appended to the URI i.e. the URI will be of the form:

http://localhost:8500/rest/contentNeg/customerService/1.json

or

http://localhost:8500/rest/contentNeg/customerService/1.xml

Observe that the content-type is specified at the end of the URI (json\xml). ColdFusion would parse the URI and will invoke the corresponding REST service. The below code lists the two services that produce the data in JSON and XML format:

<cfcomponent rest="true" restpath="/customerService"> <cffunction name="pathHandlerJSON" access="remote" returntype="query" httpmethod="GET" produces="application/json" restpath="{customerID}"> <cfargument name="customerID" required="true" type="string" restargsource="path"/> <cfset resultQuery = retrieveCustomerRecord(arguments.customerID)> <cfreturn resultQuery> </cffunction> <cffunction name="pathHandlerXML" access="remote" returntype="query" httpmethod="GET" produces="application/xml" restpath="{customerID}"> <cfargument name="customerID" required="true" type="string" restargsource="path"/> <cfset resultQuery = retrieveCustomerRecord(arguments.customerID)> <cfreturn resultQuery> </cffunction> <cffunction name="retrieveCustomerRecord" returntype="query"> <cfargument name="customerID" type="numeric" required="true"/> <cfset myQuery = queryNew("id,name", "Integer,varchar", [[1, "Sagar"], [2, "Ganatra"]])> <cfquery dbtype="query" name="resultQuery"> select * from myQuery where id = #arguments.customerID# </cfquery> <cfreturn resultQuery> </cffunction> </cfcomponent>

In the above functions pathHandlerJSON and pathHandlerXML, a query is returned in either JSON or XML format. If you observe the only difference between the two functions is that the 'produces' attribute is different. Complex data types in ColdFusion are converted to either JSON or XML format and sent to the client.

As mentioned earlier the client can specify the desired Content-Type in the Accept header of the HTTP request. For example, a ColdFusion client can send a CFHTTP request with the Accept header specified in the CFHTTPPARAM tag:

When making request through cfhttp, the expected content-type can be anything (text/html, text/plain etc,.) and can be specified in the cfhttpparam tag. Only JSON and XML can be specified in the URI. The HTTP result is de-serialized to obtain the below output:

Similarly other complex data types in ColdFusion can be serialized to either JSON or XML format. I’ll explain this in coming posts.

ColdFusion 10: Understanding REST parameters

2012-02-22T18:23:00.001+05:30

As mentioned in my earlier post there are various ways in which data can passed to a REST service. The cfargument tag has a new attribute restargsource, it can take one of these values – path, query, matrix, form, cookie and header.

Path Param:
Here you can pass arguments to a REST service by specifying the same in the URL path. The URL may look like:

http://localhost:8500/rest/restapp/customerService/CF/Zeus

Here two values ‘CF’ and ‘Zeus’ are passed as an argument to the REST service. The function defined as a REST service in CFC will have two arguments and the functions restpath would have two parameters:

Observe that the restpath attribute in the above function has two values separated by a slash ‘/’ i.e. ‘{productName}/{productCodeName}’. The values ‘CF’ and ‘Zeus’ are copied to these parameters. Another variant would be to pass a hyphen(-) in the restpath in which case the URL would end with CF-Zeus and the function has to updated with its restpath attribute set to {productName}-{productCodeName}.

Query Param:

Query params are the most commonly used way to pass data to a REST service by specifying the parameters in URL after question mark(?). The URL would look like this:

http://localhost:8500/rest/restapp/productService?productName=ColdFusion&productCodeName=Zeus

Unlike Path parameters, the name of the argument is specified in the URL itself and the arguments are separated with an ampersand(&). The function to handle this service need not have the restpath attribute defined since the argument is passed as a query parameter in the URL. The other change would be to change the restargsource value to ‘query’.

Matrix Param:

Similar to Query param, in matrix param the arguments are passed to a REST service by specifying same in the URL where the arguments are separated by semicolon(;). Therefore the URL would look something like this:

http://localhost:8500/rest/restapp/productService;productName=ColdFusion;productCodeName=Zeus

Observe that there is no ? symbol used in the URL. Instead a semicolon is used. Here the function providing REST service must have its arguments' restargsource set to ‘matrix’.

Cookie and Header Param:

In case of Cookie and Header param the data is sent in the HTTP request. While sending a REST service request, same can be included by specifying it in the chttpparam tag.
In some cases where the variable name may contain a hyphen(-). For example, the request header may contain variable fname-lname. Now on the server side the argument name cannot be fname-lname because it’s not a valid identifier. To handle this there is an attribute 'restargname'. Here, you can specify the argument name as anything say ‘fname_lname’ and restargname as ‘fname-lname’. The value passed to fname-lname will be mapped to fname_lname.

Form Param:

In many scenarios, data entered in the form has to be processed by a REST service. This data can be used to make a new entry (POST) or update an existing record (PUT) in the database. If form fields are used then the restargsource should be set ‘form’. This will extract the data present in request and will be available for further processing. Also, the content-type header has to be set to ‘application/x-www-form-urlencoded’ when sending data as form fields.

ColdFusion 10: Accessing a REST service without specifying the Application name or Service mapping in URL

2012-02-21T10:02:00.000+05:30

In my previous post, I’d explained how REST services can be created, published and accessed in ColdFusion 10. Andy, asked me “Is there any way to avoid having the /rest/restapp/ in the URL?”. In short Yes. ‘rest’ in the URL lets the ColdFusion Server know that the incoming request is for a REST service. As mentioned in my previous post, you can update the servlet mapping defined in web.xml located at cfusion_home\wwwroot\WEB-INF directory. But it can't be avoided. Coming to the ‘restapp’ in the URL which indicates the Application name or the Servlet mapping. It can be removed from the URL by placing the CFCs in a default directory. While registering a REST service in the ColdFusion Administrator, there is an option to set the service as a default service, meaning all the CFCs placed in the directory would not require the Application name or Service mapping to be provided in the URL.

Here’s the REST Services page in ColdFusion Administrator:

After providing the directory containing CFCs to be published as REST services, you can set the same as default application. The CFCs found in this directory will not require a mapping to be specified in the URL. One thing to note here is that, there can be only one such directory for the Server.

In the Administrator say you have provided a path to the directory containing a CFC as ‘C:\work\ColdFusion\cf_main\cfusion\wwwroot\restapp\default’ and the CFC contains a function that is to be exposed as a REST service:

<cfcomponent rest="true" restpath="/customerService"> <cffunction name="getRequestHandler" access="remote" returntype="String" httpmethod="GET" produces="text/html" restpath="{name}"> <cfargument name="name" type="string" restargsource="path"/> <cfreturn "<h1>Hello " & name & "</h1>"> </cffunction> </cfcomponent>

Once this CFC has been registered with the Administrator it can be accessed using the URL: http://localhost:8500/rest/customerService/Sagar

Notice the URL now. It has the ‘customerService’ right after ‘rest’. 'customerService' is the restpath defined in the above CFC. There is no Application name or the Service mapping present in the URL.

ColdFusion 10: RESTful WebServices in ColdFusion - Introduction

2012-02-20T18:10:00.000+05:30

In ColdFusion 10, support for creating and publishing REST services has been added. The ColdFusion components can now be made available as REST services and these services can be consumed by various clients. REST stands for Representational State Transfer. It is an architectural style which is based on web standards and HTTP protocol. The idea here is to use HTTP protocol instead of complex mechanisms such as CORBA, RPC or SOAP to connect between the machines. In fact, the World Wide Web which is based on HTTP can be viewed as a REST based architecture.

REST Architectural principles:

A REST based application follows some architectural principles:

Resource Identification: In a REST based architecture everything is a resource. Each of these resources should be identified with a URI. In ColdFusion, the functions are identified as resources, each of these resources can then be invoked using an URI.
Uniform and constrained interface: Every resource in a RESTful application should support HTTP common operations. The resources are manipulated with the HTTP protocol methods – GET, PUT, POST, DELETE. In ColdFusion, the resources (functions) can be accessed via HTTP and each of these resource support the HTTP verbs. Depending on the verb specified in the request, the corresponding resource would be invoked.
Representation oriented: REST allows resources to have different representation – plain, html, xml, json etc. A client can request a specific representation via the HTTP protocol. HTTP provides a simple content-type negotiation protocol between the client and the server. For example, an AJAX application may need data in JSON format, where as a Java application may need it in XML format.
Stateless communication: In REST, the server doesn’t store the client session data. However, many techniques exist to exchange state information such as URI rewriting, cookies and hidden form fields. Also, for encryption REST can be used on top of HTTPS.

Getting Started with creating REST services

New attributes have been added to cfcomponent, cffunction and cfargument to aid in creating a REST service. Once a component is created it has to be registered with the Administrator and then it can be accessed via a HTTP request.

Creating a RESTful Web Service

cfcomponent:

As mentioned above, functions in a CFC are the resources and are invoked using a HTTP request. To mark a component as a REST service, attributes rest and restpath are provided. The attribute rest is a boolean attribute, if true the component is enabled as a REST service. This is an optional attribute if restpath is specified in cfcomponent tag. The restpath attribute is used to specify the path using which the REST service would be accessed. If restpath is not specified then the path to the CFC would be used in the URI to invoke the service.

<cfcomponent rest="true" restpath="/crudService">  <cffunction name="getHandlerJSON" access="remote" httpmethod="GET" restpath="{customerID}" returntype="query" produces="application/json"> <cfargument name="customerID" required="true" restargsource="Path" type="numeric"/> <cfset myQuery = queryNew("id,name", "Integer,varchar", [[1, "Sagar"], [2, "Ganatra"]])> <cfquery dbtype="query" name="resultQuery"> select * from myQuery where id = #arguments.customerID# </cfquery> <cfreturn resultQuery> </cffunction> </cfcomponent>

The function ‘getHandlerJSON’ handles a GET request and accepts an argument customerID. Notice the additional attributes in cffunction tag. The attribute ‘httpmethod’ is used to specify the type of request this function would handle (GET,POST etc,.). Attribute ‘restpath’ is used to specify the path that should be used in the URL, here the path is specified in curly braces as {customerID}. When this type of notation is used it indicates that a value is passed in the URL and the same has to be copied to the functions’ argument. Therefore the name of the argument is same as the one specified in restpath. There are different ways to pass arguments to a REST service, I’ll explain this in my next post.

Complex data types in ColdFusion such as Array, Query, Struct etc, will be serialized to either JSON or XML format. The produces attribute specifies the mime type to which the data returned by the function will be serialized to. There is also an attribute ‘consumes’ that specifies the mime type of data present in the request body.

Coming to the function arguments, the new attribute restargsource specifies the way in which arguments are passed to a rest service. In this example it is path which indicates the argument will passed in the URL path itself. The other possible values include Matrix, Header, Cookie, Form and Query.

Registering a REST Service

There are two ways in which the REST services can be registered with the Administrator. You can either use the Admin API (functions defined in extensions.cfc) or use the function restinitApplicaiton. The former method requires a Administrator privileges and therefore would be available only to selected users. The function restInitApplication can be used to register a REST service and doesn’t require Administrator privileges.

restInitApplication(‘Absolute_path’,[‘Service mapping’])

The directory containing CFC files with with either rest=’true’ or with a restpath in the cfcomponent tag should be specified as the first argument. To identify the set of CFCs in a directory the Service mapping has to be provided. This is an optional fied, if there is an Applicaiton.cfc file present in the directory. In which case the Application name would be used to identify the REST services in the directory.

If any changes are made to any of the components in the registered directory then the corresponding service has to be refreshed. Again this can be done in the Administrator or a call to restInitApplication would refresh the registered service.

Accessing a REST service via HTTP

A RESTful Web service can be accessed either by using HTTP or HTTPS. The URL to access a REST service in ColdFusion follows this format:

http://servername:port/context_path_j2ee/ rest/rest_application_name_or_serverMapping/restpath_or_componentPath/additionalrestPaths/params_ifany/

Here, the context_path_j2ee is applicable only if you have installed ColdFusion as J2EE on any of the Application servers. In which the context path would be cfusion (by default). However, this can be omitted on Standalone installation.

The string ‘rest’ in URL specifies that the request is for a REST service. ColdFusion has a servlet mapping for the same and would direct the request to the servlet that handles REST service. If there is a directory in the server webroot with the same name, then the servlet mapping has to be updated in web.xml file inside wwwroot\WEB-INF directory.

As mentioned earlier, while registering a REST service the application name specified in Applicaiton.cfc file would be used in the URL to access the REST service. If there is no Applicaiton.cfc then the specified service mapping would be used. To access a service specified in the component the restpath for the component has to be specified. However, if the restpath is not specified in the cfcomponent tag then the path to the CFC would be used in URL. Also, the functions defined in component can also have restpath defined and this has to be specified in the URL. If arguments are to be passed in the URL path then the same can also be specified.

In this example, the function ‘getHandlerJSON’, can be accessed using cfhttp:

<cfhttp url="http://localhost:8500/rest/restapp/crudService/1" result="restResult" method="GET"/>

Here restapp is the application name defined in Applicaiton.cfc file. /crudService is the restpath specified in the cfcomponent tag and the numeric 1 is the argument to the REST service. There are various ways in which arguments can be passed to a REST service, I’ll explain this in my next post.

ColdFusion 10: Using arrays in queryNew and queryAddRow

2012-02-19T23:50:00.000+05:30

The queryNew() and queryAddRow() functions are used to create a query data structure and add empty rows to it. To add record sets to the query, function querySetCell() is used. If there are say three columns and you want to add say five rows to the query, then you would have about sixteen lines of code. That's huge and it will increase with number of columns and the number of records that you want to add. In ColdFusion 10 there's a third parameter introduced in queryNew() and queryAddRow() functions. The third parameter can accept either a struct, an array of structs. Ray Camden had covered this in one of his POTW posts. One feedback that came from one of the ColdFusion users is to use an array or a two dimensional array to initialize or add rows to the query. This has now been implemented and is available in the public beta release. Here’s how it works:

<cfscript> myQuery=queryNew("id,name","Integer,Varchar",[ [1,"One"], [2,"Two"], [3,"Three"] ]); </cfscript>

As observed the third argument is a two dimensional array. If there is a need to add more rows to the above query then you can use the queryAddRow() function to do that:

<cfscript> queryAddRow(myQuery,[ [4,"Four"], [5,"Five"], [6,"Six"] ]); <cfscript>

Unlike initializing the query with a struct or an array of structs this doesn't require you to mention the column names in each row. However, if there are more number of columns then I suggest you to use array of structs to initialize the query.

ColdFusion 10: concatenate arrays using arrayAppend function

2012-02-18T23:13:00.000+05:30

The arrayAppend function in ColdFusion is used to append an element to the end of the array. Now in ColdFusion 10, it is possible to concatenate two arrays using the same arrayAppend function. A third parameter of type boolean is added to the function; when it is set to true the two arrays are concatenated.

<cfscript> array1 = ["One", "Two", "Three"]; array2 = ["Four", "Five", "Six"]; arrayAppend(array1, array2, true); //Concatenates array1 and array2, array1 length is 6 writeDump(array1); </cfscript>

This would output the concatenated array:

However, the arrayAppend function can used to append any element at the end of the array. So if an attempt is made to append an element say of type struct, then the third argument is ignored:

<cfscript> array1 = ["One", "Two", "Three"]; struct1 = {fname='Sagar', lname='Ganatra'}; arrayAppend(array1, struct1, true); //appends the struct to the end of the array writeDump(array1); </cfscript>

When this is executed, the array would contain four elements:

As observed, even though the third argument to the arrayAppend function is set to true, it is ignored if the second argument is of different type.

Now Showing - ColdFusion Zeus

2012-02-18T01:57:00.000+05:30

After more than 20 months of research, planning, development and keeping you all in suspense about the next version of ColdFusion, code named Zeus; I'm finally proud to announce the release of the public beta version of none else than ColdFusion Zeus. You are free to download it here and report bugs here.

This release comes with tonnes of new features and enhancements. It not only focuses on HTML5 features but also provides rich features such as RESTful WebServices, Closures, Java Integration, Security enhancements and many more.

I wanted to create a picture that depicted all the new features in ColdFusion 10, like I did when public beta of CFBuilder 2 was released. But I couldn't since its a massive release and capturing everything in one single picture was not possible at all. However, I managed to create an app (like a movie clip) and hence the title 'Now Showing - ColdFusion Zeus'. You can access the app here. Click on the chapters and learn what's new in this mega release. The app is best experienced on Chrome, Firefox or Safari.

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.