Ajithmanmu on Coldfusion,Web2.0

A Simple Jquery Twitter Widget

October 4, 2009 · 2 Comments

Twitter is familiar for all of us now…Listing twitter feeds using Jquery will be fun as well…Let’s create a Jquery – Twitter widget that can be used in our website. I have only started off with learning Jquery. So i guess this might be easy for beginners of Jquery…

Our Jquery-Twitter widget will have 3 tabs. The first tab will show the public twitter timeline (means the 20 most recent statuses from non-protected users). The next tab shows the latest 5 tweets of the user and the final tab shows the Twitter profile info of the user.

The first step is to create the Jquery widget. Later we will call the Twitter feeds using inbuilt ajax functions of Jquery.

Step 1 : Creating the Jquery Widget

Creating a Jquery Widget have been wonderfully explained in Webitect. You can refer that tutorial here. Below is my version.

Create an HTML page with the following code:-



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="sidebar">
<div>
<h5>Public</h5>
</div>
<div>
<h5>Mine</h5>
</div>
<div>
<h5>About Me</h5>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="sidebar">
<div class="widget">
<h5>Public</h5>
</div>
<div class="widget">
<h5>Mine</h5>
</div>
<div class="widget">
<h5>About Me</h5>
</div>
</div>
</body>
</html>

Here we include the jquery library inside the script tag. We then create the skeletal structure of our widget. The three divs corresponds to three tabs. We give the title for each tab in the <h5> tag.

So the basic structure is ready. Now let’s use Jquery to create a tabbed appearence.


$(document).ready(function(){

var newWidget="<div class='widget-wrapper'><ul class='tab-wrapper'></ul><div class='new-widget'></div></div>";
$(".widget").hide();
$(".widget:first").before(newWidget);
$(".widget > ul").each(function(){
$(".tab-wrapper").append("<li class='tab'>"+this.id+"</li>");
$(this).appendTo(".new-widget");
 });
});

The above code runs as soon as the page runs. Here we are creating a main div (with class name widget-wrapper) that holds the Widget. Inside this main div we create a unordered list with class tab-wrapper that holds the tab name and then another div with class name new-widget that holds the content inside each tab. We create an html string for these and assigns to a variable newWidget. Next step is to hide all elements with class name widget . Now, we’ll use the first widget as a reference point to insert our tabbed container, using the jQuery before() function.

Now we will loop thru each unordered lists inside a div with class widget and then append a list with class “tab” and the text inside the <li> as the id of each <ul>. Please note that the id of each <ul> will be shown as the tab header.

So our Jquery widget is created in tabbed format with no content in it. Let’s fill each tabs with twitter content while clicking the tab header. We use separate twitter API methods to fill the content for each tab. The code is as below:-



$(".tab").click(function(){
 
var obj = this; 
 
if($(obj).text() == 'public')
{
var url ="http://twitter.com/statuses/public_timeline.json?callback=?";
}
else if($(obj).text() == 'mine')
{
var url = "http://twitter.com/status/user_timeline/ajithmanmu.json?count=5&callback=?";
}
else
{
var url = "http://twitter.com/users/show/ajithmanmu.json?callback=?";
}
 
$.getJSON(url,{obj:obj},
function(data){
   
$("#"+$(obj).text()).html('');
var mystr = '';
if($(obj).text() == 'about')
{
mystr = "<li><table><tr><td>"+"<img src='"+data.profile_image_url+"'>"+"</td><td>"+data.friends_count+" following</td><td>"+data.followers_count+" followers</td></tr>"
mystr = mystr + "<tr><td>"+data.name+"</td></tr>"
mystr = mystr + "<tr><td>"+data.description+"</td></tr>"
mystr = mystr + "<tr><td><a href='"+data.url+ "' target='_blank'>Website</a></td></tr>"
mystr = mystr + "<tr><td><img src='twitter-bird-2.png' height='60px' width='40px'/></td><td><a href='http://twitter.com/ajithmanmu'>Follow Me</a></td></tr></table></li>"
 
}
else{
 
$(data).each(function(i,tweetobj)
 {
  if(mystr == '')
  {mystr = "<li>"+"<img src='"+tweetobj.user["profile_image_url"]+"'>"+tweetobj.text+"</li>"
  }
else
  {
  mystr = mystr + "<li>"+"<img src='"+tweetobj.user["profile_image_url"]+"'>"+tweetobj.text+"</li>"
}
})}
$("#"+$(obj).text()).append(mystr);
$(".new-widget > ul").hide();
$('#'+$(obj).text()).show();
$(".tab").removeClass("active-tab");
$(obj).addClass("active-tab");
 });
});

The getJSON function calls the required twitter method and then generates the html content inside its success function.

Also make sure that on page load one tab always needs to be selected. For that just before the closing of the $(document).ready function give the following code:-


$(".tab:first").click();

So we have created a simple Jquery-Twitter widget. I hope its not very confusing for u….If you have any queries please feel free to get back in touch.

You can see a running example here.

→ 2 CommentsCategories: javascript
Tagged: jquery, twitter, widget

Ajax call in ModelGlue without rendering a view

August 10, 2009 · Leave a Comment

Making an Ajax call is simple and straight forward in ModelGlue. The concept is simple and is given in detail in Doug’s blog. Read the full tutorial.

In ModelGlue(2) to call the Ajax call we need to have a view. i.e a page needs to be created to act as the view. This is in need if we are using the Ajax call to dynamically load HTML content. The Javascript receives the rendered view and does whatever it was told to do with it. But however there are times when we do not want to have a view rendered for our event(i.e our Ajax call). We simply want to return a value from server(it can even be a mere checking..!!) and assign it to a Javascript variable. For this simple purpose we do not want to create a new page/view.

In order to accomplish this we will have to break the ModelGlue architecture (till now..i couldn’t find any other suitable methods). Anyone who is familiar to ModelGlue architecture will find it easy to understand the below code.

My ModelGlue event:

<event-handler name="test.testFunction">          
     <broadcasts>
          <message name="testFunction" />
     </broadcasts>
</event-handler>

Please note that i am not using a view in this event.

And my controller function:-

<cffunction name="testFunction" returnType="any" output="true" >    
<cfargument name="event" type="any" required="true">        

<cfset justtest = 1>

<CFCONTENT TYPE="text" RESET="Yes"><CFOUTPUT>#serializeJSON(justTest)#
<cfset request.modelGlueSuppressDebugging = true />
<cfsetting showdebugoutput="false" /></CFOUTPUT><cfabort>

</cffunction>

Here we are converting the justtest variable in JSON format and outputting via cfcontent. Here cfcontent acts as the rendered view and returns justtest in JSON format. Here aborting at the end of controller function can be considered as breaking the ModelGlue archi , but this is one way around to solve the problem.

By the way here is my Ajax call:-

new Ajax.Request(root+'test.testFunction',{
  method: 'post',
  parameters: {param1:paramval},
  onSuccess: function(response){
    alert(response.responseText);
    var myresult = response.responseText;
  }
});

I am making use of prototype library for this.

We will get 1 if we alert the responseText call back from the server.

This is only applicable to ModelGlue2. If you are using ModelGlue3 then you would also need to check out how to use fomats in MG3. Thanks Ray Camdon for sharing this link.

→ Leave a CommentCategories: Model Glue · cold fusion · javascript
Tagged: ajax, coldfusion, ModelGlue

Removing viewstate values in ModelGlue

August 5, 2009 · Leave a Comment

A quick blog post on removing viewstate values in Model Glue…everyone knows about this, but i didn’t find any useful reference while googling this…also for my reference as well just in case i forget…

Removing a value from the viewstate:

<!--- Here key is the name of the value you want to remove--->
viewstate.removeValue('key')

→ Leave a CommentCategories: Model Glue · cold fusion
Tagged: coldfusion, ModelGlue, viewstate

Reading Schedule task details from neo-cron.xml

August 1, 2009 · Leave a Comment

I found this code helpful while working with schedule tasks(i’ve been working with it for a while now ).

Schedule tasks that are created in the Coldfusion Administrator can be accessed as structure programatically. This is particularly in need when we need to check through code whether a schedule task has been executed or not. We can also get the details of the existing schedule tasks that are in the Coldfusion administrator.

<!--- Get the scheduler xml file.  It's stored as WDDX in CFroot dir--->
<cffile action="Read"
          file="#Server.ColdFusion.RootDir#/lib/neo-cron.xml"
          variable="TaskXML">

<!--- Convert the WDDX to CFML - and array of structs --->  
<cfwddx action="WDDX2CFML" input="#TaskXML#" output="GetTasks">

<!--- Dump all the schedule tasks in CF Admin in Struct format. ---> 
<cfdump var="#GetTasks#">

The Scheduler configuration file neo-cron.xml stores all the schedule task details in the CF Admin in xml format. We are simply reading the file and converting the WDDX into an array of structs.

The output should look something like this:

scheduletaskdump

→ Leave a CommentCategories: cold fusion
Tagged: coldfusion, schedule tasks

Passing multiple arguments to onSuccess/onFailure function in Prototype

July 26, 2009 · Leave a Comment

While using Prototype framework for using Ajax operations we use the OnSuccess function quite frequently. Calling an Ajax function in Prototype is quite simple and the basic syntax goes like this.

new Ajax.Request('testurl',{
                method: 'post',
                parameters: {param1:"A", param2:"B", param3:"C"},
                onSuccess: fnSccs,
                onFailure: fnFail
                })

And my onSuccess function :-

function fnSccs(response)
{
        alert(response.responseText);
}

But when i had to pass multiple arguments to onSuccess/onFailure function i didn’t find any helpful links searching. Finally forums came to the rescue and i had to rewire the code as below:-

new Ajax.Request('testurl',{
                method: 'post',
                parameters: {param1:"A", param2:"B", param3:"C"},
                onSuccess: mySuccess('myValue1', 'myValue2'),
                onFailure: fnFail
                })

function mySuccess(param1, param2){
  return function(response){ // Your old success function
    alert(param1);  // The parameter still accessible here
    alert(param2);
    alert(response);
  }
}

What happens is that when you call mySuccess(…) your old function is returned, but you still have access to the parameters because the variables remain allocated on the outer closure. To know more about javascript closures go here.

→ Leave a CommentCategories: javascript
Tagged: javascript, js closures, prototype

CF9 out in the wild…

July 20, 2009 · 1 Comment

Adobe Labs just released the much anticipated public beta versions of ColdFusion 9(Centaur) and ColdFusion Builder(BOLT). Adobe went for three simple categories of improvement with this release: Increase user productivity, improve integration with popular enterprise software, and simplify the workflow between Adobe products.

Top 10 ColdFusion 9 Features to lookout for:-

1.Adobe AIR database synchronization

By enabling this feature in your AIR application (both on the server and in the client app), the application syncs the data from a ColdFusion datasource to a local SQLite database. To support offline AIR data access, you code ActionScript elements on the client side and CFML on the server side.

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSAFE323E5-CA8B-429e-BC1C-450DA839D705.html

http://askjayvir.blogspot.com/2009/07/coldfusion-9-air-sqlite-offline-support.html

1.Adobe AIR database synchronization

http://askjayvir.blogspot.com/2009/07/coldfusion-9-air-sqlite-offline-support.html

2.Object Relational Mapping (ORM)

ORM allows you to do complex database calls without writing a single SQL query thus making your code a lot cleaner and more manageable. This helps save lot of time and your apps will even run faster because of the built-in ORM optimizations in CF9.

http://forta.com/blog/index.cfm/2009/7/7/ORM-Rethinking-ColdFusion-Database-Integration

3.Flex integration

By using the ColdFusion proxy ActionScript classes, you can access several ColdFusion services without actually writing any ColdFusion code for Flex-based applications that run on Flash and AIR . You just call the ColdFusion service straight from your Flex code. ColdFusion 9 now uses Blaze DS to power Flex remoting and messaging.

http://www.mischefamily.com/nathan/index.cfm/2009/7/15/ColdFusion-9-Flex-Improvements

4.ColdFusion as a service

ColdFusion 9 has an exposed service layer that lets you to have direct access to a bunch of CF9 services from any server language you use. You can even call them using SOAP or Flash Remoting without writing a single line of CFML. These services include charting, document services, PDF utilities, image manipulation and email. Also these web services can be sandboxed, permitting access only to authorized applications.

5.New Enhancements in <cfscript>

You can now build CFCs entirely in CFSCRIPT, including Application.cfc. You can invoke any tags and functions in cfscript. You can use new operators like abort, exit, include, and throw, to simplify your cfscript. WriteDump() is the equivalent of <CFDUMP>, WriteLog()is the equivalent of <CFLOG> (both of these are named similarly to the existing WriteOutput() function), Trace() is the equivalent of <CFTRACE>, Location() is the equivalent of <CFLOCATION>, and Throw() is the equivalent of <CFTHROW>.

6.Office application integration

ColdFusion 9 extends its reach into .NET based technologies like Microsoft SharePoint and MSOffice.The <cfpresentation> tag allows you to create, convert and read presentation files with just a few lines of code.The same thing goes for documents and spreadsheets.

7.Server manager

Server Manager is an AIR-based desktop application that allows you to centrally manage multiple ColdFusion servers from one location. We can apply hot fixes, change configs, create data sources etc to all servers at once. We can also clear caches across a cluster of ColdFusion servers.

8.PDF integration

With the enhanced PDF support in CF9, you can extract all the content form a PDF file. You can also update PDFs and even optimize them on the server .

9.Dynamic UI Controls

ColdFusion 9 provides access to a broader set of AJAX controls that use the new Ext JS 3.0 library via easy to use CFML tags and attributes. New controls include mapping, Video Player, multi-file upload, enhanced data grid, accordion navigation, progress indicator, confirmations and alerts as well as customizable buttons and sliders.

10.ColdFusion Builder (BOLT)

ColdFusion Builder is an Eclipse based IDE for CF development that is deeply integrated with CF9. With just a few clicks, you can create all the necessary CRUD code to use in your CF application or your Flex application. We can also extend ColdFusion Builder with our own extensions using CFML.

→ 1 CommentCategories: cold fusion
Tagged: bolt, centaur, cf9, coldfusion9

Playing SWF files using cfcontent

July 14, 2009 · 1 Comment

Playing swf files using cfcontent is very simple.

The video will not play when we call only the HTML page in which the flash video is embedded. Instead we also need to call the swf file using cfcontent to play the video files.

Playing flash files embedded in HTML can be done by the following code snippet:-

<cfcontent type=”application/x-shockwave-flash;” file=”#FilePathandFileNameOfSWFFile#” deletefile=”no”>

<cfcontent type=”text/html” file=”#FilePathandFileNameOfHTMLFile#” deletefile=”no”>

→ 1 CommentCategories: cold fusion
Tagged: cfcontent, coldfusion, swf

Drag and Drop with Drop Zone markers

May 30, 2009 · 1 Comment

Using drag and drop functionality(for Sorting) in Prototype/Scriptaculous is rather simple. But in order have the drag and drop functionality with drop zone marker we need to use the patched Prototype/Scriptaculous JS libraries.

The code is simple and goes like this:-

Step 1:-

We need to have a conatiner div that holds the draggable child elements.

..Your Content….

</div>

..Your Content….

</div>

Step 2:-

Sortable.create(‘containerdiv’,{tag:’div’,overlap:’vertical’,scroll:window,

onUpdate:updateFunction,onChange:changeFunction});

</script>

The Sortable.Create function creates a drag and drop sortables. We need to specify the id of the parent div(here containerdiv ).The tag attribute specifies the type of child element (here we use div). The onUpdate function is called when the sort order changes and the dragging ends(i.e after we drag and drops). There is also a onChange function which is triggered when the sort order changes while dragging. The attribute scroll:window (this is important)is for enabling the scroll bar for the browser while we drag in a large page. We can use the updateFunction that is triggered while the onUpdate event to get the current sorted list of the child elements and can use it for updating the order in the database.

var orderedarray = Sortable.serialize(‘containerdiv’,{name:’orderlist’});

By this we get the order of the child elements after each drag and drop. See more on Sortable.serialize.

The value of orderedarray will be similar like this orderlist[]=1&orderlist[]=3&orderlist[]=4&orderlist[]=2

Strip off the orderlist[] value from the array elements by the following method:-

var neworderarray = orderedarray.match(/\d+/g);

Now the value of neworderarray will be 1,3,4,2. This order means that div with id childdiv_1 is at the first position,div with id childdiv_3 is at the second position and so on. Use this to update the order in the DB.

Now regarding the drop zone marker we need to include the patched JS libraries in our page. Also we need include the style for drop zone marker in our page. See below:-

.emptyPlaceMarker

{

z-index: 999;

border-right: #9D9D9D thin dashed;

border-top: #9D9D9D thin dashed;

border-left: #9D9D9D thin dashed;

border-bottom: #9D9D9D thin dashed;

background-color: Transparent;

border-width:2px;

}

.emptyPlaceMarker

{

z-index: 999;

border-right: #9D9D9D thin dashed;

border-top: #9D9D9D thin dashed;

border-left: #9D9D9D thin dashed;

border-bottom: #9D9D9D thin dashed;

background-color: Transparent;

border-width:2px;

}

Thanks Tankut Koray for the amazing drop zone marker and Prototype/Scriptaculous JS patches. You can get the patched Prototype/Scriptaculous JS libraries and how to use it from here.

Click here to see an example.

→ 1 CommentCategories: javascript
Tagged: drag and drop, drop zone marker, javascript, Scriptaculous

Applying CSS Styles to ColdFusion Window

February 22, 2009 · Leave a Comment

CFWINDOW is a new feature in CF8 that creates a pop-up window in the browser. Now to apply css to the cfwindow such as changing the header or body color, we can use the attributes in the <cfwindow> tag. The documentation for applying the css styles with the <cfwindow> tag are given in the Adobe’s help docs.

But what if we are creating the coldfusion window from javascript and need to apply the css styles? Hmm.. that’s a bit tricky..Ok let’s see how it’s done.

function CreatePopUp()

{

ColdFusion.Window.create(“myWindow”, “Window Header”, “./yoururl.cfm”, {height:500,width:500,modal:true,closable:true, draggable:false,resizable:false,center:true,initshow:true});

document.getElementById(ColdFusion.Window.getWindowObject(“myWindow”).header.id).className = “windowHdr”;

}

The above code creates a CFwindow with id myWindow when the CreatePopUp JS funtion is called. It also gets the id of the header of the cfwindow and apply a css class(windowHdr) to it. This css will only applicable to the header only. Now if we need to apply styles to the borders of the cfwindow, we need to specify the id of each html element (Thanks to our friends @ FireBug) in the border and apply style to it. To give color to the borders we are going to use an image (here we use cfwindowbg.gif) of suitable color and make it repeat within the html element. It should be like this:-

<STYLE>

.windowHdr {

background: url(‘/images/icons/cfwindowbg.gif’) repeat-x ;

color:#fff;

font:normal 11px tahoma, verdana, helvetica;

padding-top:100px;

padding:5px;

font-weight:bold;}

.x-dlg div.x-resizable-handle-east

{

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

}

.x-dlg div.x-resizable-handle-west {

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

}

.x-dlg div.x-resizable-handle-south {

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

}

.x-dlg .x-dlg-close{

padding-right:4px;

}

.x-dlg div.x-resizable-handle-southwest{

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

}

.x-dlg div.x-resizable-handle-southeast {

background: url(‘/images/icons/cfwindowbg.gif’) repeat-x ;

}

</STYLE>

Click here to see this example..

→ Leave a CommentCategories: cold fusion · javascript
Tagged: cfwindow, coldfusion8, styles

using coldfusion structures in javascript

February 14, 2009 · Leave a Comment

There are situations where we need to use data returned from a coldfusion function to be used in javascript. For example in some ajax operations we need the data returned from coldfusion to be used in javascript. We will see how this is done.

Below is a CFC function that returns a structure with some data:-

<cffunction name=”myTestFunction” access=”remote” returntype=”Any”>

<cfargument name=”myTestArgument” required=”yes” type=”string”>

<cfset DataStruct = StructNew()>

<cfset DataStruct.DataOne = “First Data”>

<cfset DataStruct.DataTwo = “Second Data”>

<cfset DataStruct = serializeJSON(DataStruct)>

<cfreturn DataStruct>

</cffunction>

Here we are filling a Structure with datas that are going to be used in javascript. In order to use in Javascript we are converting our structure DataStruct to JSON(Javascript Object Notation) format by the inbuilt CF function serializeJSON.

Now in our Javascript function that receives the response of the coldfusion function after the ajax function, we need to add the following code:-

var ResponseStructure = ColdFusion.JSON.decode(Response);

Here the “Response” from the coldfusion is stored into our JS variable ResponseStructure by the inbuilt ColdFusion.JSON.decode function for CF. Now the variable ResponseStructure contains the structure DataStruct that is returned from Coldfusion. The key-value pair inside the structure can be accessed by calling like this:-

var myDataOne = ResponseStructure.DATAONE;

var myDataTwo = ResponseStructure. DATATWO;

Note that the key names of the structure should be specified in CAPITAL letters. Also make sure that we have imported the required AJAX libraries for doing this in our page:-

<cfajaximport>

→ Leave a CommentCategories: cold fusion · javascript
Tagged: coldfusion, javascript