A Simple Jquery Twitter Widget

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.

Ajax call in ModelGlue without rendering a view

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.

Removing viewstate values in ModelGlue

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')

Reading Schedule task details from neo-cron.xml

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

Passing multiple arguments to onSuccess/onFailure function in Prototype

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.

CF9 out in the wild…

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.
Read More

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.

Read More

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

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.

Read More

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSD628ADC4-A5F7-4079-99E0-FD725BE9B4BD.html

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.

Read More

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WS45F7E41F-825B-4fcd-B96D-D5B7E2107E7E.html

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.

Read More

http://forta.com/blog/index.cfm/2009/6/19/ColdFusion-Functionality-Exposed-As-Services

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>.

Read More

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7ebf.html

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.

Read More

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WS56EA2935-FBD2-4089-8402-FDDA2BAF55FB.html

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.

Read More

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WS3D7763CA-4F04-4376-BF4C-9232C87C409F.html

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 .

Read More

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cdd76f064-8000.html

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.

Read More

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSe9cbe5cf462523a06a6137d81220767786c-8000.html

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.

Read More

http://labs.adobe.com/technologies/coldfusionbuilder/

Playing SWF files using cfcontent

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”>

Previous Older Entries Next Newer Entries