Command Line API in Firebug

Long time since I have made a  post. This time it is on one of my fav web development tool Firebug. It has got a cool command line API console for writing JavaScript commands that can be executed on the fly. This is particularly important when we debug large JavaScript code. We need to reload the js file each time after making any changes – which can be quite time consuming. Here is where command lines can be of great help.

There are two type of Command lines API:-

  1. One Line Command Line – This is the default command line. We can write a single line of JavaScript code here. Also it supports auto complete feature (i.e by hitting the tab key you can complete your js code just like other well known editors). After writing your code press enter. The code gets executed and you can see the execution details under the  console window. See highlighted area below.

2. Multi Lines Command Line – Here we can write and excute multipe lines of code on the fly. Write your js code and click Run button. The code gets excuted and you can see the execution details under the  console window. Firebug also provides a list of APIs to access the DOM element as well as to monitor and profile the javascript code that is getting executed. Typing these in the command line and executing helps us to  see what is the value of an HTML element,whether a function has been executed or not etc.

Firebug as always Roxx..  🙂

Customizing Ckeditor and adding a new toolbar button

It’s been a long time since i have put a blog entry. This time i will discuss how to customize a Ckeditor and how to  add new plugins(buttons in the toolbar) to the ckeditor. I got little help while googling. Hope this would be helpful.

Step 1: Download and install the Ckeditor js files. This link would get you setup a sample ckeditor in your local machine.

Step 2 : Customizing the toolbar:

We can specify which all toolbar buttons needs to be shown in our ckeditor. You can refer here for the toolbar definition.

Now we need to add a new button with a user defined functionality to our Ckeditor toolbar. In this example we are creating a button that wraps an anchor tag around a selected text inside the Ckeditor(same functionality as existing anchor button in the ckeditor).

Each button in the ckeditor toolbar is a plugin and their definitions are stored in ckeditor\plugins\ folder. In this folder we create a new folder with our plugin name. Here linkbutton. Inside the linkbutton folder we create a plugin.js file which contains the core functionality of the plugin/button.

It will contain the following code:-

(function(){
//Section 1 : Code to execute when the toolbar button is pressed
var a= {
exec:function(editor){
var theSelectedText = editor.getSelection().getNative();
CallCfWindow(theSelectedText);
}
},
//Section 2 : Create the button and add the functionality to it
b=’linkbutton’;
CKEDITOR.plugins.add(b,{
init:function(editor){
editor.addCommand(b,a);
editor.ui.addButton(‘linkbutton’,{
label:’Link Button’,
icon: this.path + ‘logo_ckeditor.png’,
command:b
});
}
});
})();
Note in the above code in Section 1  var a will contain the functionality to execute when the button is pressed. Here we are creating a coldfusion window and pass the selected text from the ckeditor. In Section 2 we create the button and add the functionality to it. We also give the path of the image that needs to be shown in the toolbar for the button. Here it is logo_ckeditor.png and is inside the linkbutton folder.
Next open the ckeditor/ckeditor.js file and search for ‘about‘ in the file. It will find a place where all the plugins are registered. Add your plugin name(here linkbutton) here.
UPDATE: Actually you don’t need to edit the ckeditor.js file as this will not work when a newer version comes. You can instead edit the config.js and add the plugin name there.
config.extraPlugins = ‘pluginX,pluginY,yourPluginNameHere’;
Go to this link for more reference.
Now open the ckeditor/config.js file and add your plugin name (here linkbutton) to the toolbar definition.
Note: The name given for the plugin should be consistent everywhere. The folder structure will look as below:-
That’s it!! We created a new plugin for our Ckeditor. For wrapping the anchor tag around the selected text we use the following code:-
function FormatEditorText()
{
var myEditor = CKEDITOR.instances.editor1;
var theSelectedText = document.getElementById(‘txtSelected’).value;
var theAnchorText = document.getElementById(‘txtAnchor’).value;
var FormattedText = ‘<a href=”‘+theAnchorText+'”>’+theSelectedText+'</a>’;
myEditor.insertHtml(FormattedText);
}
Helpful links :
http://cksource.com/forums/viewtopic.php?f=11&t=16306&hilit=+get+name+toolbar+button
http://cksource.com/forums/viewtopic.php?f=11&t=16149&hilit=get+selected+text&sid=ebf293139b6f0777b285369a136ae819
http://blog.tommed.co.uk/2009/09/07/how-to-create-a-ckeditor-v3-plugin
http://cksource.com/forums/viewtopic.php?f=11&t=15539&hilit=creating+a+custom+button
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html
http://syrinx.ph/articles/CkEditorPluginGuide.aspx
I will post a live sample soon ;-).

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.

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.

Drag and Drop with Drop Zone markers

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.

<div id=”containerdiv”>

        <div id=”childdiv_1″>

                 ..Your Content….

       </div>

       <div id=”childdiv_2″>

                  ..Your Content….

       </div>

</div>

Step 2:-

<script type=”text/javascript”>

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.


Applying CSS Styles to ColdFusion Window

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

Previous Older Entries