Having a bunch of custom tags and an XML dictionary for CFEclipse is one thing, but knowing how to use them is another! So last night I began working on every developer's favourite task... documentation :P

The ColdExt Wiki is now enabled on RIAForge and I have started out with baby steps by writing a Getting Started Tutorial which covers the absolute basic requirements of getting up and running with ColdExt.

I have a number of pages and tutorials planned for the wiki (some of which I have already made notes of on the wiki home page) and will get around to adding them as soon as I can. If anyone would like to help out with documentation (rofl!) or start a discussion about what documentation is needed the ColdExt Forums could be a good place to do it. I am open to suggestions!

The next release of ColdExt will very much be about better documentation and demos, in addition to more tags and enhancements of course :)

P.S. Does anybody know if it's possible to turn off WikiTerms on RIAForge? At the least I think a special token like __NOTERMS__ would be very useful.

I'm fairly excited about this release because it has some really cool stuff in it :) I've already dropped the biggest bombshell in the blog post title, which is support for tag insight in CFEclipse - very nice!, but there are a bunch of other nice updates and new features as well...

Changes at a glance include;

• 7 new tags, 3 new grid demos
• 90%+ of the tags have been updated with inline documentation
• EditorGridPanel provides support for editable grids (only supports input and comboBox fields at this time, more to come very soon)
• GroupingStore and GroupingView can now be used for grouping in both GridPanel and EditorGridPanel
• GridRowNumberer can be used as a numbered column in Grids (though it doesn't support paged grids - by design from the Ext Team)
• New <ext:html> tag for including arbitrary chunks of HTML inside panels and forms
• Tags which don't require a closing tag will now work as a single tag without a trailing slash (partial support)
• Tags which require a closing tag will throw an error if the closing tag is missing (partial support)
• Initial implementation of attribute validation in some tags (starting with the panel tags to assist with rendering issues)
• Support for including the Ext debugging JS
• The bundled version of CFJSON has been updated to the latest v1.9
• CFEclipse tag insight (/dictionary/coldext.xml)

Download ColdExt Beta 1 from RIAForge

Here are the new online demos:

• Row Numbered JSON Grid with rowClick events
• JSON Grid with grouping and remote paging and sorting
• Editable JSON Grid with saving, remote paging and sorting

I will refrain from posting screenshots and code listings of the demos this time round since you can download everything you need and view the working demos above (well, that and it's getting late here in Oz and I need some sleep!) :)

One thing you need to know though is how to set up the coldext.xml file to work in CFEclipse. Just browse to the "plugins\org.cfeclipse.cfml_1.3.1.5\dictionary" directory inside CFEclipse (your CFEclipse plugin version number may vary) and insert a copy of the ColdExt "dictionary\coldext.xml" file. Then in the same location, make a backup of the "dictionaryconfig.xml" (just in case) and then open it to make the following modification, inserting a single line to include the coldext.xml file:

<version key="cf8" label="Coldfusion 8">
    <grammar location="cf8.xml" />
    <grammar location="user.xml" />
    <grammar location="coldext.xml" />
</version>

Give CFEclipse a restart and you should now be swinging with ColdExt tag insight!

*Note that at this stage only the attributes for about 90% of the tags are documented, I haven't gotten around to inline help for the actual tags themselves just yet...

If you have any feedback about this release feel free to post here in the comments or make use of the features on RIAForge:

• ColdExt Forums
• ColdExt Issue Tracker
• ColdExt Contact Form

All feedback, bug submissions, feature requests and comments are much appreciated :)

This release almost took me a couple of weeks to get out the door, and with 5 new tags and 13 updated/improved tags ColdExt is getting that little bit closer to being usable in the real world.

New tags include support for components such as accordions, tools with onclick handlers, tooltips, and xtemplates. The updated tags include better support for container layouts, tabs and treePanels. And there are 2 new demos to check out as well :) As usual, just extract the folders to your webroot to get up and running quickly.

Download ColdExt Alpha 2 from RIAForge

In this release the Ext files are no longer bundled so you will need to head over to the Ext JS Download page, grab the Ext 2.0.1 release and extract it to a temporary directory. Then in your webroot, where you have already placed the "coldext" and "demos" folders from the ColdExt Alpha 2 release, create a new folder called "ext". As per the image below, into the new "ext" folder you just need to place a copy of "ext-all.js" (from the "ext-2.0.1" folder) and "ext-base.js" (from the "ext-2.0.1\adapter\ext" folder), and both the "css" and "images" folders (from the "ext-2.0.1\resources" folder), then you should be right to go.

The first new demo is the ColdExt Accordion demo which is a replica of the Accordion Window that is in the Ext Desktop demo (minus the minimize/maximize functionality).

Here is a screenshot of the accordion demo as it is rendered:

And below is the main chunk of ColdExt code used to construct the accordion demo:

<ext:init />
<ext:onReady> 

    <ext:createChild renderTo="out" tag="h1">ColdExt Example Accordion (Ext Replica)</ext:createChild> 

    <ext:window var="myWindow" title="Accordion Window" layout="accordion" iconCls="icon-accordion"
                width="250" height="400" border="false" resizable="true" show="true">
        <ext:toolbar>
            <ext:toolbarButton icon="icons/fam/connect.gif">
                <ext:tooltip title="Rich Tooltips" text="Let your users know what they can do!" />
            </ext:toolbarButton>
            <ext:separator />
            <ext:toolbarButton icon="icons/fam/user_add.gif" tooltip="Add a new user" />
            <ext:toolbarButton icon="icons/fam/user_delete.gif" tooltip="Remove the selected user" />
        </ext:toolbar>
        <ext:treePanel id="myTree" title="Online Users" lines="false" rootVisible="false" margin="0 0 5 0">
            <ext:tool id="refresh">
                <ext:onclick>
                    var tree = Ext.getCmp('myTree');
                    tree.body.mask('Loading', 'x-mask-loading');
                    tree.root.reload();
                    tree.root.collapse(true, false);
                    setTimeout(function(){
                        tree.body.unmask();
                        tree.root.expand(true, true);
                    }, 1000);
                </ext:onclick>
            </ext:tool>
            <ext:rootNode>
                <ext:treeNode text="Friends" expanded="true">
                    <ext:treeNode text="Jack" iconCls="user" />
                    <ext:treeNode text="Brian" iconCls="user" />
                    <ext:treeNode text="Jon" iconCls="user" />
                    <ext:treeNode text="Tim" iconCls="user" />
                    <ext:treeNode text="Nige" iconCls="user" />
                    <ext:treeNode text="Fred" iconCls="user" />
                    <ext:treeNode text="Bob" iconCls="user" />
                </ext:treeNode>
                <ext:treeNode text="Family" expanded="true">
                    <ext:treeNode text="Kelly" iconCls="female" />
                    <ext:treeNode text="Sarah" iconCls="female" />
                    <ext:treeNode text="Zack" iconCls="green" />
                    <ext:treeNode text="John" iconCls="green" />
                </ext:treeNode>
            </ext:rootNode>
        </ext:treePanel>
        <ext:panel title="Settings">
            Something useful would be in here.
        </ext:panel>
        <ext:panel title="Even More Stuff">
            Something useful would be in here.
        </ext:panel>
        <ext:panel title="My Stuff">
            Something useful would be in here.
        </ext:panel>
    </ext:window> 

</ext:onReady>

Next up is the ColdExt Combobox demo which makes use of the XTemplate templating features that Ext provides. Templates are mostly used with the DataView component which the Combobox uses internally for rendering its list of items (note that I haven't yet implemented DataViews directly in ColdExt, they will be coming in the next release!). Not only can templates display simple data values but they can do logic, simple calculations and even implement member functions for more complex actions, as per the example below.

Here is a screenshot of the Combobox and XTemplate in action, rendering some data side-by-side in a list:

And below is the code used to produce the Combobox. Take special note of the XTemplate tag and the nested member function that is used in the template, it's a super powerful feature IMO.

<ext:init />
<ext:onReady>

	<ext:createChild renderTo="out" tag="h1">ColdExt Custom Example Combobox</ext:createChild>

	<!--- coldext custom example - combobox --->
	<ext:createChild renderTo="out" tag="h2">Combobox 1 - XTemplate Example</ext:createChild>

	<ext:jsonStore var="myJSON" url="data.cfm">
		<ext:storeField name="id" />
		<ext:storeField name="country" />
	</ext:jsonStore>

	<ext:formPanel border="false" renderTo="out">
		<ext:comboBox name="country" emptyText="Select a Country..." hideLabel="true"
				displayField="country" valueField="id" store="myJSON">
			<ext:xtemplate>
				<tpl for="."><div class="x-combo-list-item">
					<span class="country">{country}<tpl if="this.isCode('KZ', id)">, very nice!</tpl></span>
					<span class="code">{id}</span>
				</div></tpl>
				<ext:script>
					isCode: function(a, b){
						return a == b;
					}
				</ext:script>
			</ext:xtemplate>
		</ext:combobox>
	</ext:formPanel>

</ext:onReady>

Anyway, that's about it for this release. If you have any questions, comments, feedback or feature requests please feel free to drop me a note in the comments.

I've made a few updates to ColdExt during the week which I thought I would share now, since I'll be away for the weekend (a friends buck's weekend with some Paintball Skirmish action - and plenty of drinking no doubt!).

Some new tags include basic support for menus, trees, viewports and other various enhancements. Here are a few new live demos:

• http://madfellas.com/demos/menus1.cfm
• http://madfellas.com/demos/tree1.cfm
• http://madfellas.com/demos/viewport.cfm

You can download ColdExt Alpha 1b from RIAForge.

From the next release onwards the Ext JS files will no longer be bundled so you will need to download them separately and drop them into your project.

I have a few clear goals that I am trying to achieve with ColdExt which will hopefully give you an idea of where I am coming from and where I am heading with development.

First of all, I want you to be able to drop ColdExt into a project without any hassles and without any configuration beyond an Application Name (although a small amount of configuration may be unavoidable for an existing Ext project).

Second, I want the ColdExt API to match the Ext API as closely as possible so that the Ext documentation is entirely relevant to using the ColdExt tags. I also want to retain the power and flexibility of Ext in it's entirety, not have ColdExt force you down some specific path for how your UI must be declared and rendered. For example many component tags should be able to be used stand-alone to simply create JavaScript objects that can be used (and reused) later on in the code; components shouldn't always have to be rendered immediately. (Note that this hasn't yet been achieved in the Alpha 1 release, everything is constructed by config objects at the moment).

Third, I want to provide some default configuration options that will set up the UI controls with consistent display properties Application-wide and allow you to customise these global defaults with your own values if you wish. This can just help to keep to keep your code a bit cleaner by letting you write less and repeat yourself less :) Of course, any global defaults can be overridden at the tag level.

The ultimate goal is to achieve near complete coverage of all Ext features and functionality, so that you don't have to drop back to pure JS to use the more complex or obscure features that Ext has to offer. The ColdExt tags should be useful for the vast majority of cases, and then for any hardcore client-side programming ColdExt can still wrap handlers, listeners and any other pieces of JavaScript.

For the road ahead I also have a few ideas that could make development with ColdExt quite interesting;

• Built-in handlers for common client-side actions/events
• Support for ColdFusion Structs/Queries/JSON/XML/Objects(?) when applying values to FormPanel fields (and other types of forms)
• Form generation/scaffolding of some description (tags make this so much easier, it would be a PITA to do this directly with JS!)
• Code assistance in CFEclipse

Anyway, if you have any comments or opinions on the direction I'm taking I would like to hear them :)

Well, I've finally got the ColdExt code into a clean enough and complete enough state to release something that is useful enough to be played with :) There are a number of things this release doesn't do, but it does handle form functionality well enough that you can use it to build reasonably rich forms, validate the input and POST form data back to the server. Just a taste of things to come I guess!

Download ColdExt Alpha 1 from RIAForge

ColdExt comes bundled with the latest Ext 2.0.1 release so you don't need to download it separately. Basically you can just drop the "coldext" and "ext" folders into your web root, set your Application Name in an application.cfc/cfm and start playing with it immediately.

At this stage the examples are very light (check the /demos folder), but if you are familiar with Ext or don't mind browsing the Ext documentation and the Ext examples then I'm sure you will pick things up in no time (there are LOTS of attributes that can be used with each tag if you want to/need to).

I also have a couple of live demos up here:

• http://www.madfellas.com/demos/forms1.cfm
• http://www.madfellas.com/demos/forms2.cfm

Keep your eyes peeled for more ColdExt related posts to follow shortly...

Over the last few months I've been tinkering with Ext JS and the possibilities of a ColdFusion tag library to make development with Ext a little easier and quicker. I had originally started working with Ext 1.1, concentrating simply on Forms support, but put development on hold because I had heard Ext 2.0 was on the horizon. With it's release towards the end of 2007 I realised that the small amount of work I had already done wasn't compatible with the changes in Ext 2.0, and I was also short on time in the weeks leading up to Christmas.

Over the New Year's break I found myself with some spare hours and finally sat down to write a few tags. I thought I'd try my hand at a Panel component, until I hit a bit of a roadblock with custom tag generated content and outputting to a variable inside a block of JavaScript output. After returning from my holiday (yeah I was coding on holiday, who does that?!) I came across a post by Dan Vega titled Custom Tag JavaScript problem mentioning the toScript function, which was exactly what I needed - thanks Dan! ;)

Since then I've written about 25 custom tags to support various Ext components including; Button, ColumnLayout, DateField, FieldSet, FormPanel, HTMLEditor, Panel, TabPanel, TextField, TimeField, Toolbar, Toolbar.Button, Toolbar.Fill, Toolbar.Separator, and other helper tags to define global configuration of some default options, initialise the library, define form submission handlers for AJAX support, and more...

At this point I'm considering what to do with the library, which I've unimaginatively named ColdExt.

Back in early December 2007 when Brian Love released Ext.cfc there was a bit of talk about a tag library which a number of us had seemingly been mulling over. My situation is that I need to start using some kind of UI library during February, and over the last couple of weeks I think the concept has proved to be feasible. My aim is to cover as many as components as I can but with as much flexibility as I can so that nothing will interfere with using Ext in the pure JS form that it was intended. As far as sharing the code goes I'm more than happy to release it and/or set up a project on RIAForge if there is any interest. I'll save the discussion of the technical design aspects of the library for another post to follow though, because there are a few things that I would like to open up to comments :)

Anyway, here is a sneak peak of some screenshots and the code snippets that produce them:

Initialising the library is as simple as:

<cfimport prefix="ext" taglib="coldext"> <ext:init />

To create and render a FormPanel that uses AJAX:

<div id="out"></div> <ext:onReady> <ext:formPanel var="myForm" title="Sample AJAX Form" url="submit.cfm" renderTo="out"> <ext:toolbar position="top"> <ext:toolbarButton text="Save Form" icon="icon-save.gif" handler="myHandler" /> </ext:toolbar> <ext:input name="firstName" required="true" /> <ext:input name="lastName" /> <ext:input name="company" /> <ext:input name="email" /> <ext:dateField name="date" /> <ext:timeField name="time" /> </ext:formPanel> <ext:handler name="myHandler" action="submit" form="myForm" /> </ext:onReady>

... which produces this working form:

A replica of a slightly more complex layout from the Ext Example Dynamic Forms:

<ext:formPanel title="Inner Tabs" width="600" labelAlign="top" renderTo="out"> <ext:columns> <ext:column width="0.5"> <ext:input name="firstName" anchor="95%" /> <ext:input name="lastName" anchor="95%" /> </ext:column> <ext:column width="0.5"> <ext:input name="company" anchor="95%" /> <ext:input name="email" anchor="95%" /> </ext:column> </ext:columns> <ext:tabPanel height="235"> <ext:tab title="Personal Details" width="230"> <ext:input name="firstName" /> <ext:input name="lastName" /> <ext:input name="company" /> <ext:input name="email" /> </ext:tab> <ext:tab title="Phone Numbers" width="230"> <ext:input name="home" /> <ext:input name="business" /> <ext:input name="mobile" /> <ext:input name="fax" /> </ext:tab> <ext:tab title="Biography" layout="fit"> <ext:htmlEditor label="Rich Text" /> </ext:tab> </ext:tabPanel> <ext:buttons> <ext:button text="Save" /> <ext:button text="Cancel" /> </ext:buttons> </ext:formPanel>

... which produces:

So there you have it! As I said I'll write another post to discuss how I've designed the library so far, and I'll see if I can put some working examples up by the end of the week. Please feel free to give me your thoughts on what I've shown so far :)

Rules in FarCry are cool. Rules let you easily add dynamic content to a page, such as News or Events, simply by placing rules into a Container when you are viewing the site in Design Mode.

This example is very simple and makes use of FarCry 4's "Form Tools". The two cfproperty tags are all we need for FarCry to be able to deploy the appropriate table and fields to the database and to display and save the form when the user is editing the rule. Nice :) The only other required pieces of code are for the component to extend farcry.core.packages.rules.rules (or another rule that has already extended that component), and to implement a public function called execute() so that we can display something.

My ruleRecentlyUpdated.cfc rule simply does a query for dmHTML records whose status match the allowed options in request.mode.lValidStatus - i.e. if you are logged in and are in Draft Mode then Drafts will be included, otherwise it defaults to Approved page only - and sorts them in descending order using the datetimelastupdated field. It also makes use of a display method so that you can choose which display teaser you would like to use for output. See the sample code below...

ruleRecentlyUpdated.cfc (in /farcry/projectname/packages/rules)

<!--- $Developer: Justin Carter $ ---> <cfcomponent displayname="HTML Pages: Recently Updated" extends="farcry.core.packages.rules.rules" hint="Display the most recently updated HTML Pages"> <cfproperty ftseq="1" ftfieldset="General Details" name="displayMethod" type="string" hint="Display method to render." required="yes" default="displayTeaser" fttype="webskin" fttypename="dmHTML" ftprefix="displayTeaser" ftlabel="Display Method" /> <cfproperty ftSeq="2" ftFieldSet="General Details" name="numItems" type="numeric" hint="" ftLabel="Number of items" /> <cffunction access="public" name="execute" output="true"> <cfargument name="objectID" required="Yes" type="uuid" default=""> <cfargument name="dsn" required="false" type="string" default="#application.dsn#"> <cfparam name="request.mode.lValidStatus" default="approved"> <cfset stObj = this.getData(arguments.objectid)> <cfquery datasource="#arguments.dsn#" name="qGetPages" maxrows="#stObj.numItems#"> SELECT * FROM #application.dbowner#dmHTML WHERE status IN ('#ListChangeDelims(request.mode.lValidStatus,"','",",")#') ORDER BY datetimelastupdated DESC </cfquery> <cfif qGetPages.recordcount> <cfset arrayAppend(request.aInvocations,"<ul>")> <!--- loop over display methods ---> <cfloop query="qGetPages"> <cfscript> stInvoke = structNew(); stInvoke.objectID = qGetPages.objectID; stInvoke.typename = application.types.dmHTML.typePath; stInvoke.method = stObj.displayMethod; arrayAppend(request.aInvocations,stInvoke); </cfscript> </cfloop> <cfset arrayAppend(request.aInvocations,"</ul>")> </cfif> </cffunction> </cfcomponent>

displayTeaserRecentlyUpdated.cfm (in /farcry/projectname/webskin/dmHTML)

<cfsetting enablecfoutputonly="yes"> <!--- @@displayname: Recently Updated Pages (list) ---> <!--- @@author: Justin Carter ---> <cfimport taglib="/farcry/core/tags/webskin" prefix="skin"> <cfoutput> <li> </cfoutput> <skin:buildLink objectid="#stObj.objectid#"><cfoutput>#stObj.title#</cfoutput></skin:buildLink> <cfoutput> <span>#LSDateFormat(stObj.datetimelastupdated, "long")#</span> </li> </cfoutput> <cfsetting enablecfoutputonly="no">

* Note that I have only tested this with MS SQL, though I assume it will work with most other DB servers. Use this code at your own risk ;)

For my use case this was simply all I needed, however you could make a number of improvements to the functionality of this rule, such as:

• add a property to make the unordered list HTML tag optional
• select or exclude pages that are children of a particular navigation node
• select pages that belong to particular categories
• check pages that may be part of a members area that requires a login and include/exclude them as appropriate

If you want to look at rules, form tools and other stuff in more depth check out the FarCry 4 Developers Guide.

I've been a really hopeless blogger lately so I thought I'd kick things back into gear with some FarCry 4 goodness. FarCry 4 now uses TinyMCE for it's rich text editor and any customisations or editor replacements are done by extending richtext.cfc. This quick example just shows you how to change the configuration options of TinyMCE.

I wanted to specifically make changes to the HTML formatting output, HTML editor window, and default table attributes, but there is a whole lot more you can do with TinyMCE too - check out the TinyMCE Wiki for a full reference of configuration, button and plugin options.

In your project you will need to create a formtools folder inside /farcry/yourproject/packages, and create a file called richtext.cfc. This new component will extend farcry.core.packages.formtools.richtext and will override the getConfig() function - pretty straight forward really :)

Below is my sample richtext.cfc (use at your own peril, comments are welcome!)

<cfcomponent extends="farcry.core.packages.formtools.richtext" name="richtext" displayname="Rich Text Editor" hint="Used to liase with longchar type fields"> <cffunction name="getConfig" access="public" output="false" returntype="string" hint="This will return the configuration that will be used by the richtext field"> <cfset var configJS = "" /> <cfsavecontent variable="configJS"> <cfoutput> theme : "advanced", plugins : "table,advhr,farcrycontenttemplates,advimage,advlink,preview,zoom,searchreplace,print,contextmenu,paste,directionality,fullscreen,spellchecker", theme_advanced_buttons1_add : "pasteword,pastetext,separator,search,replace,spellchecker,separator,fullscreen", theme_advanced_buttons2_add : "separator,farcrycontenttemplates", theme_advanced_buttons3_add_before : "tablecontrols,separator", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", theme_advanced_resize_horizontal : true, theme_advanced_resizing : true, extended_valid_elements: "code,colgroup,col,thead,tfoot,tbody,abbr,blockquote,cite,button,textarea[name|class|cols|rows],script[type],img[style|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]", remove_linebreaks : false, relative_urls : false, <!--- customisations ---> content_css : "/css/tinymce-content.css", apply_source_formatting : true, fix_table_elements : true, remove_trailing_nbsp : true, theme_advanced_source_editor_width : "900", theme_advanced_source_editor_height : "700", <!--- customisations: table plugin ---> table_default_border: 0, table_default_cellpadding: 0, table_default_cellspacing: 1, verify_html : false </cfoutput> </cfsavecontent> <cfreturn configJS /> </cffunction> </cfcomponent>

After your new file is in place and has been saved you'll need to do an ?updateapp=1 for the new configuration to take effect. That should be all there is to it!

Last week I noticed that my posts are now aggregated on "the 'Goog" so I thought I'd give the site a bit of a brush up this weekend :)

I've given the design a quick refresh, still sticking with the dark theme and adding a bit more of a Vista touch to it (yeah, I'm a sucker for that glass effect). I've also worked in some inline comments for BlogCFC using Dan Vega's recent post as a guide. (Thanks Dan, it helped a lot!).

Since I don't have an About Me page I should introduce myself a little. I'm a 26 year old Aussie and I've been working with ColdFusion for the last couple of years. I'm currently working on a couple of FarCry sites and other internal apps for the government department I work for. I think CF is the most elegant language I've had the pleasure of working with on the web and can't wait for ColdFusion 8 to make my job even easier (and more enjoyable!). I also created the webDU 2007 countdown gadget earlier this year, which had about 150 downloads (not too shabby considering everyone loves Macs these days, haha).

I'm also addicted to Guitar Hero II on the Xbox 360 :) I'll probably throw my gamer card up on the home page in the next few days (it's currently just a blank canvas).

In the near future I hope to cover some beginner aspects of FarCry 4.x, perhaps on Custom Types, Scaffolding, Custom Admin and Formtools. Armed with a small amount of knowledge you can build some pretty neat stuff in no time at all... Needless to say I think FarCry rocks!

Anyway, enough of my rambling. I look forward to having some new readers and hopefully I can contribute something back to the community.

Cheers.

I thought I'd whip up a quick post about CF8's new "ColdFusion AJAX Logger" which I was playing around with a little bit yesterday. It's basically a floating widget which appears on your pages to give you different levels of logging information about the various JavaScript events that are occuring on your page at run-time. Here's a sample of what some output could look like:

First, to enable the Ajax Logger you'll need to do a couple of things. In CF Administrator, go to the Debugging & Logging page and tick "Enable AJAX Debug Log Window".

To ensure that your page will have access to the necessary JS resources at run-time you should put the new <cfajaximport> tag somewhere in your code (preferably somewhere at the top where you'll notice it). This will then make the ColdFusion.Log object available to you in your JavaScript which will let you make use of some functions like ColdFusion.Log.debug() for writing debug output to the logger and ColdFusion.Log.dump() for dumping JavaScript objects to the logger. In the screenshot above is an example of ColdFusion.Log.dump() which I used to dump the ColdFusion.Ajax object. You'll notice it looks strangely similar to everyone's favourite <cfdump> tag, and you may also recognise it as the JavaScript Dump function (also available as a jQuery plugin) from Net Grow.

Now that you know how to configure CF to enable the use of the Ajax Logger and which functions to call to start logging your debug output, you just need one final step to actually make the logger appear on the page when you are debugging. You can do this two ways;

• add <cfset url.cfdebug = true> somewhere in your code, or
• append cfdebug=true to the URL of the page in your browser

Also as a side note, it would be nice if the logger window was resizable to cater for the large amount of info that ColdFusion.Log.dump() spits out. Although I guess there is always FireBug and/or ColdFire :)

P.S. Does anyone else get the feeling we've recently gone from having not enough debugging tools to having debugging tool overload?! Haha :P