Dec 13, 2010

Game created with jQuery

Last week I had published an application on facebook "Which smartphone is for you?" which was created with javascript and HTML. I have always tried to experiment things with jQuery and HTML. I thought of making a good use of my jQuery skills in creating a game (a simple one - but still fun to play). Today I'm launching this game and it is titled "Shoot your friends". This application (game) pulls the pictures of your facebook friends and you can shoot them. Once you have hit enough, it will allow you to publish the results. You can either let the shot ones know that they have been shot by you or just publish the story to your wall. Login to your facebook account and try it out.

Which smartphone is for you: http://apps.facebook.com/sagarganatra/
Shoot your friends: http://apps.facebook.com/shootyourfriendsapp/

Nov 15, 2010

Speaking at Scotch on the Rocks 2011

The title says it all. I will be speaking at Scotch on the Rocks (SOTR) conference to be held at Edinburgh, Scotland on March 3rd and 4th 2011. I will talking about the next version of ColdFusion Builder codenamed Storm. The speakers and sessions were announced a month back and I must say the session topics look very impressive. Of course there will be sessions on ColdFusion and related technologies, but one would also get to know more about HTML5, Regular expressions, Software Requirements etc,.

This is going to be my first ever ColdFusion conference and I'm very excited.

Nov 13, 2010

Audio in HTML5

I have been looking into HTML5 and it's capabilities to play audio and video content on the web without requiring any browser plug-in. In this post I will be explaining how one can embed an audio file into a web page and add controls to perform various operations on it.

Jul 29, 2010

Showing Notifications with HTML5/Webkit

Most of us use popular twitter clients such as TweetDeck, Seesmic which are developed using Adobe AIR. One thing  I like about these clients is that they show notifications when the application is in the minimized mode. Now with browsers implementing webkit such as Google chrome one can use the notification API to send notification to the browser. In this blog post I will be explaining how one can implement webkit notifications in their web application. 

Jul 14, 2010

Server Monitoring in CF 9.0.1 - Multi Server monitor changes

Multi server monitor enables you to monitor multiple ColdFusion instances and at any point one can check the load on the added instance. If your remote server is running on the jetty (please refer to my previous post here) i.e. when the remote machine has monitoring server enabled then the cross-domain details are required to be specified in crossdomain.xml located under {CF_ROOT}/MonitoringServer/. 



Jul 13, 2010

ColdFusion 9.0.1 Server monitoring enhancements

This post gives an Introduction to Server Monitoring Enhancements in CF 9 updater 1. Server Monitoring helps the user to monitor various statistics such as slow requests, load at any point of time, active requests,  requests with errors etc,. In the updater version of ColdFusion,  an embedded server - Jetty is added which listens to a different port: 5500. A page -  Monitoring Settings is added to the administrator where in the user can check the current status of server monitor. This avoids the step of launching and checking whether monitoring, profiling and memory tracking are enabled/disabled.

Configuring and starting Server Monitor:
By default Server Monitor will run on the same port on which coldfusion is running (i.e. without Jetty). However, to improve the performance the embedded server jetty can be enabled. There are three ways of starting Server monitoring with Jetty on a different port:
  • ColdFusion administrator: Sever Monitoring -> Monitoring Settings.
  • Manually by configuring jetty.xml and neo-monitoring.xml
  • Using Admin API.
Configure and start Server Monitor using the Administrator:
Login into the administrator with the administrator credentials and navigate to Server Monitoring -> Monitoring settings. 


The monitoring settings page shows the current status of the Server Monitor; one can enable/disable the same. To enable Jetty check Enable Monitoring Server and specify the port. By default port 5500 will be used. Changes made here will be reflected in the jetty.xml file which can be found in the lib directory. Any attempt made to change the port to a port which is currently not available will result in an error. 

Manually by configuring jetty.xml and neo-monitoring.xml:
Monitoring server can be started manually by setting 'ismonitoringserverenabled' in neo-monitoring.xml to true and restarting the server so that the changes are picked up. As mentioned earlier, the default port at which monitoring server would start is 5500. One can change this in jetty.xml file. One can always change the port number to any other number by referring jetty.xml connector section

Configure and start Server Monitor using Admin API:
Several methods have been added to servermonitoring.cfc, these can be used to configure server monitor. The list of methods added are as mentioned below:

  • setMonitoringServerPort(port_number): This method will change the monitoring server port to the port_number passed in as an argument. As mentioned earlier 5500 port will be used as a default port. However this will not start the monitoring server.
  • getMonitoringServerPort(): This method returns the current monitoring server port number.
  • getMonitoringServerProtocol(): This method will return http or https based on jetty.xml configuration.
  • stopMonitoringServer(): This method will stop monitoring server.
  • startMonitoringServer(): This method will start monitoring server.
  • isMonitoringServerRunning(): This method will check whether a separate monitoring server is running.
  • configureMonitoringServer(flag,port_number): This method can be used to start/stop the monitoring server. 
    • flag (true/false): when set to true will start the monitoring server.
    • port_number: port at which a separate monitoring server should start.
Monitoring Settings page:
With CF 901 a page Monitoring Settings was added under Server Monitoring section. One can not only enable/disable the monitoring server and monitoring port but can also start/stop server monitoring settings: Monitoring, Profiling and Memory tracking. This will also avoid the step of launching the server monitor to check the status of the same. 

Jun 13, 2010

ColdFusion meets Photoshop

I have been looking into Photoshop very lately and I must say it's the most amazing software that I have ever experienced. I have created a few Wallpapers using Photoshop with ColdFusion as theme. I have referred to few tutorials available on the web and have created these pictures. Feel free to download and use it.


May 7, 2010

ColdFusion Builder - A few tweaks

ColdFusion Builder sometimes might take a lot of time during startup or when a large project is imported into workspace. This post explains how one can change Builder settings to improve the startup experience.

Server settings:

If you have added a server to CFB, then you can see at the bottom right corner of the IDE that the CFCs are getting indexed. CFB uses the server settings to provide code assist for datasources, CFCs. This might take a lot of time since it indexes all the files in the webroot. This setting can be disabled in the preferences section. Navigate to Window -> Preferences -> ColdFusion -> Server Settings. Mac users can find Preferences under Adobe ColdFusion Builder (standalone) or under Eclipse (plugin installation).


CFB indexes all the CFCs located under webroot and mappings directory for the servers defined. By default these options are checked. One can uncheck 'Build server settings' and can observe that the build is not initiated when the CFB is started or when the server is started/added/refreshed. 

If the webroot or mappings path contain a few files then I would recommend users to keep the default settings  as it is since it would not take much time for the CFCs to get indexed.

Startup settings: 

ColdFusion Builder also provides an option of indexing files only in workspace and not the entire server webroot and mappings directory. This can be achieved by unchecking the options available under Server settings page (as explained in the previous section) and enabling 'Build CFCs in project on startup' under Preferences -> ColdFusion -> Startup. By default this is enabled.

If you are importing a very large project then I would recommend that you disable this option since it might take long time to index these project files. Once the project is imported successfully then enable this option and restart Builder. Indexing large project is always an expensive operation, however if one disables this then the code assist for the CFCs will not be shown.




Apr 10, 2010

ColdFusion Builder - Project Support

ColdFusion Builder is a brand new IDE from Adobe for building ColdFusion applications. ColdFusion Builder is based on Eclipse and can be downloaded from http://www.adobe.com/products/coldfusion/buy/#cfb.

In this series I will be explaining about creating Projects/Applications in ColdFusion Builder. CF Builder provides wizards for creating projects. It also provides wizards for creating CFCs, CFMs and CF Interfaces. I would like to cover the latter in the next post. In this post I will be explaining the project creation with CF Builder.



To get started with creating Projects switch to ColdFusion perspective. The project creation wizard can be invoked from four places:

  • Start page -> ColdFusion project.
  • File -> New -> ColdFusion project
  • Clicking New ColdFusion project Icon on the toolbar.
  • Right click Navigator view and select New -> ColdFusion Project.
The 'New ColdFusion project' page is as shown below:


Enter your 'Project Name' as say 'ProjectTest'. By default the project location would point to the current workspace location. De-select 'Use Default Location' and specify a location under webroot of your ColdFusion Server in this case it would be 'C:\ColdFusion9\wwwroot\ProjectTest'. Here I have created a folder under  webroot by name 'ProjectTest'. Click on next to continue.

The Server details page allows the user to associate a server with the project. Once the server is associated with the project Sample URL field will be populated (this is not editable). Therefore make sure you create a project within the webroot of your ColdFusion server. There are various workflows involved in adding a new server/associating a server to the IDE such as adding a remote server, specifying virtual hosts and virtual directory which I would like to cover in coming posts. In this post I will associate the project with an already added server.



Here I have associated a localhost server whose server home is 'C:\ColdFusion9' and webroot is 'C:\ColdFusion9\wwwroot'. Since the project is under the webroot the Sample URL is populated with 'http://localhost:8500/projecttest'. There is also an option provided for specifying an external browser. The specified external browser would be invoked when the project is run. Click on Next and you will be prompted to specify Linked folder.

A link folder allows you to associate external files within a project. Say you have created a project outside webroot (c:\NewProject) and would like to make files inside webroot(c:\ColdFusion9\wwwroot\cfc) to be available to this project.


You can select 'Use Link Folder Name to Resolve CFCs' to see a list of CFCs present in the link directory in content assist. The CFM/CFC files from the webroot can be run within the IDE by switching to one of internal browsers.







Feb 22, 2010

Populating flex MenuBar items in mx:Script using the data retrieved from ColdFusion

Couple of days back I was looking for a piece of code that would populate a Flex MenuBar dynamically. Googled a lot, but I was not able to find the right solution. However, I learnt that a Flex MenuBar can be populated using XML data; but the examples found declared the XML right within the client with all data. What I wanted is to retrieve an array of objects(MenuBar data) from my database and send that to the client. I used ColdFusion ORM to do this for me. It is so nice to see a few lines of code not just retrieve the data and present it very clean; but also save a lot of time.

Let's get started:
On the server side I have two CFC's MenuBar.cfc and MenuBarManager.cfc. 
MenuBar.cfc contains the mapping data:


T_MENU is the table which contains MenuBar data. MenuBarManager.cfc contains a method getMenuBarItems that retrieves all MenuBar data. The output of getMenuBarItems is as shown below:



The above dump shows the Column names, their parent and the action to be taken on the client side i.e. the event to triggered when the MenuItem is clicked. Here File is parent MenuBar item and Exit is its child. The action or method exitEvent should be invoked on the client side on File->Exit .

Now on the client side after retrieving the data from the ColdFusion server, I can iterate over the resultant array of objects and construct the XML data and make that as the dataprovider for my MenuBar.

MenuBar declartion:





The code that would iterate over the array is as below:

var xmlData:XML;
//initialize the XML data
xmlData =
                    



              
;

//iterate over the resultant array and append menuitems to items.
for(var i:int=0;i    //if parent is null then add it to the MenuBar
if(event.result[i].F_COL_PARENT ==null)
xmlData.items.appendChild();

//else add the menuitem to its parent
     else{
var parentName = event.result[i].F_COL_PARENT;
xmlData.items.menuitem.(@label == parentName).appendChild();
}
}
   //set the dataprovider property of the MenuBar
HomeMenu.dataProvider = xmlData.items.menuitem;

The above code is self explanatory with inline comments. The last step would be to define the event to be triggered on clicking the File->Exit menuitem. As mentioned earlier the data retrieved from ColdFusion contains a column F_ACTION which declares the event to be triggered (exitEvent). This is identified as an attribute 'action' for each menuitem inserted into the XML data. However, instead of having a very long switch case code I have created the following method/eventHandler which would get invoked on clicking any of the menubar items:


private function menuItemHandler(event:MenuEvent):void {
        if(event.item.@parent != null)
       {
           var functionName:String=event.item.@action;
            //invoke the event
    this[functionName](event);
       }
}

this[functioname](event) would invoke the exitEvent declared in your code.

By the way I use ColdFusion Builder to develop my ColdFusion applications. ColdFusion Builder has strong content assist support which helps the user to build web based applications even more quicker.