Shaun Mccran

My digital playground

02
M
A
R
2010

Changing the 404 template handler in IIS

You could use a 404 ColdFusion template to handle missing templates, or the onmissingtemplate Application CFC function. Luckily I have a client with half a dozen sites all on the same server, with nothing else on it, so it makes more sense to do this in Internet Information Services.

404 templates are a handy way of masking any site errors or missing templates. Not only are they a cosmetic fix to nasty display errors but they can also seriously help your server security.

[ More ]

28
F
E
B
2010

My Software Development platform specifications - whats yours?

I've been experiencing issues with my development setup, so I thought I'd write a blog entry to wrap up my findings, and try and gauge what the community is running. In this article I will detail what I use in my development environment, and how it is set up.

I've recently had errors occurring in my Eclipse IDE. There have been some very frustrating SVN client version incompatibilities, so I thought I would re install it. It turns out this was a common error (menu options in subclipse were not available) based on an incompatibility between the subclipse plug-in and the Aptana studio.

A detailed fix is in this blog entry: https://radrails.tenderapp.com/discussions/problems/173-synchronize-view-broken-after-upgrading-to-radrails-203

Software setup

I use the Eclipse Java IDE as my primary development application. Alongside this I use the CFEclipse plug-in for ColdFusion functionality, the Aptana Studio plug-in for CSS and JavaScript functionality. I also use the subclipse plug-in for SVN integration.

For Flex/AIR I use a standalone FLEX studio installation. This is pretty much a custom workspace in an Eclipse IDE. I only do this as I have had several issues trying to get FLEX installed into the regular Eclipse IDE.

I recently tried to switch to the 64 bit version of Eclipse, but it would not recognise my Java install, and from what I've read online you need to install a 64 bit version of Java. The only version of this I can find is flagged as "experimental" so I think I'll leave it well alone.

I've found it quite good to increase the default 256mb heap space in Eclipse to 512mb, there e is an article detailing how to edit the Eclipse ini file here: http://wiki.eclipse.org/FAQ_How_do_I_increase_the_heap_size_available_to_Eclipse%3F

Download links

Eclipse downloads: http://www.eclipse.org/downloads/

CFEclipse downloads: http://trac.cfeclipse.org/wiki/InstallingCfeclipse

Aptana downloads: http://www.aptana.org/studio/plugin

Subclipse downloads: http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA

26
F
E
B
2010

Combining persistent server side (ColdFusion) variables with client side (JQuery) values

I stumbled upon an interested dilemma recently whilst building a search engine. The results of a search are returned, and can be viewed in a list or thumbnail view. The view toggle is a uses a JQuery function, so no persistent data is stored concerning a users current viewing option. The dilemma is how do you maintain the viewing mode across page reloads, such as for pagination, or filtering of the search results?

[ More ]

25
F
E
B
2010

Using the JQuery dataTables plugin to display dynamic data in tables: part 1

Rather than writing out long winded table code to display your data in a tabulated fashion why not use the dataTables JQuery plugin to do it for you?

In this blog entry I'll be generating tables using a JQuery plugin, but I will also be generating the JQuery code from an XML document.

The theory behind the dataTables JQuery plugin is that when the template loads it makes an AJAX request to a remotely specified template. That template returns a JSON object of data which is formatted and used in a tabular display. This means that you can perfom filtering and sort functions inline, and the JQuery simply re submits the AJAX request, receiving new JSON each time. So no refreshing.

I'll be dealing with the auto generation of the JSON back end in the second part of this article. Here is how I setup the tabular display.

Build a standard html template, including the CSS and JQuery plugins.

view plain print about
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
2<html lang="en-GB">
3<head>
4<InvalidTag http-equiv="Content-Type" content="text/html; charset=iso-8859-1" lang="en">
5<InvalidTag name="language" content="en-GB">
6
7<style type="text/css" title="currentStyle">
8    @import "demo_page.css";
9    @import "demo_table.css";
10</style>
11
12<s/cript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
13<s/cript type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>

Next we build our JQuery function. I wont go into massive detail about all the parameters and values being passed in here, but it is well documented on http://www.datatables.net/.

view plain print about
1<s/cript type="text/javascript" charset="utf-8">
2$(document).ready(function() {
3                $('#example').dataTable( {
4                    "bProcessing": true,
5                    "bServerSide": true,
6                    "sAjaxSource": "content.cfm",
7                    "aoColumns": [
8{ "sName": "Edit", "sTitle": "Edit", "sWidth":"10%"} ,
9{ "sName": "Band", "sTitle": "Band"} ,
10{ "sName": "Genre","sTitle": "Genre"} ,
11{ "sTitle": "Fake Column"}
12],
13                    "sPaginationType": "full_numbers",
14                    "aaSorting": [[1,'asc']],
15                    "oLanguage": {
16                        "sLengthMenu": "Page length: _MENU_",
17                        "sSearch": "Filter:"
18                    }
19                } );
20            } );
21</script>

The really important column here is the "aoColumns" JSON data block. This specifies what fields are returned from your AJAX call, and parameters they must adhere to.

In this example we are anticipating that we will receive four columns of data back (Edit,Band,Genre and Fake Column).

Lastly we create a table with an ID of "example", as this is what the JQuery is looking for. This table must be formatted in a certain way, as the JQuery plugin will re write the specified elements.

view plain print about
1<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
2<thead>
3<tr>
4 <th>Edit</th>
5 <th>Band</th>
6 <th>Genre</th>
7 <th>Fake Column</th>
8</tr>
9</thead>
10 <tbody>
11 <tr>
12 <td colspan="3" class="dataTables_empty">Loading data from server</td>
13 </tr>
14 </tbody>
15</table>

The code also contains the header elements that will match the returned column values from the AJAX request. The last part of the table is displayed when the data is loading.

This all works well, but to extend it further I have altered the code to read from an XML document. The XML document Is loaded when the template starts, and the data fields and attributes are read, and looped over to create the JQuery code and table headers. In this way it is a generic table display template, driven from an XML document.

The XML doc:

view plain print about
1<?xml version="1.0"?>
2 <form>
3 <field sName="Edit" source="data" sTitle="Edit" sWidth="10%">Edit</field>
4 <field sName="Band" source="data" sTitle="Band">Band</field>
5 <field sName="Genre" source="data" sTitle="Genre">Genre</field>
6 <field sName="fake column" source="" sTitle="Fake Column">Fake column</field>
7 </form>

Read the XML file and parse it out into an Array:

view plain print about
1<!--- parse the xml file --->
2<cfset variables.xml = XMLParse("test.xml") />
3<!--- <cfdump var="#variables.xml#" label="Raw xml document"> --->
4<cfset variables.fields = XMLSearch(variables.xml,"form/field")>
5<cfset variables.totalRecords = ArrayLen(variables.fields)>

Use something like this to dynamically generate the JQuery and table values:

view plain print about
1<cfoutput>
2<cfloop index="variables.index" from="1" to="#ArrayLen(variables.fields)#">
3 { <cfif variables.fields[variables.index].XmlAttributes.source EQ "data">"sName": "#variables.fields[variables.index].XmlAttributes.sName#",</cfif>
4 <cfif structkeyexists(variables.fields[variables.index].XmlAttributes, 'sTitle')>"sTitle": "#variables.fields[variables.index].XmlAttributes.sTitle#"</cfif>
5 <cfif structkeyexists(variables.fields[variables.index].XmlAttributes, 'sWidth')>,"sWidth":"#variables.fields[variables.index].XmlAttributes.sWidth#"</cfif>
6 } <cfif variables.index NEQ variables.totalRecords>,</cfif>
7</cfloop>
8</cfoutput>
9<!--- table values --->
10
11<cfoutput>
12 <cfloop index="variables.index" from="1" to="#ArrayLen(variables.fields)#">
13 <th align="left">#variables.fields[variables.index].XmlText#</th>
14 </cfloop>
15</cfoutput>

The JSON response is hard coded in this example, so the result will not filter or search. I'll handle that in article two.

There is a full example of this here.

_UNKNOWNTRANSLATION_ /