Here is the first rendition of a simple server-side stack for the Ext.Direct protocol for ColdFusion 8. It requires the SerializeJSON function. If you are looking to use this with CFMX 6 or 7, you should look into integrating the CFJSON project.
It consists of 3 files:
- Direct.cfc - Ext.Direct specific logic
- Api.cfm - This is the file you will include via a script src tag to auto generate the API.
- Router.cfm - This is the file which will route your request.
To use:
Create a folder in your CF project, for now i will call it "servicebus". Extract these 3 files into that folder.
After all of your standard page includes for javascript and CSS, link the Api.cfm page.
Code:
<script src="servicebus/Api.cfm"></script>
Configure where your router is located in Direct.cfc:
Code:
<cfset variables.routerUrl = 'servicebus/Router.cfm' />
When your page now loads it will be creating an api descriptor in a javascript variable called Ext.ss.APIDesc.
You can configure this in the Api.cfm page:
Code:
<cfset args['ns'] = "Ext.ss" />
<cfset args['desc'] = "APIDesc" />
In order to start using Ext.Direct on the client side you will now have to add the API Descriptor as a provider within Ext.Direct.
Code:
var provider = Ext.Direct.addProvider(Ext.ss.APIDesc);
This is the generic setup, however we have not exposed any of our service CFCs yet. In order to expose a CFC, place it in the servicebus directory and add the ExtDirect meta attribute to the CFC and to each method you want to expose. For example:
Code:
<cfcomponent name="Echo" ExtDirect="true" >
<cffunction name="send" ExtDirect="true">
<cfargument name="data" required="true" />
<cfreturn data />
</cffunction>
</cfcomponent>
You will now be able to execute the Echo method after importing it (with addProvider).
Code:
Ext.ss.Echo.send('sample', function() {
// callback here...
});
CFC methods can also be marked to be handled as a form post via an ExtFormHandler attribute. This is most commonly used for things like file uploads. For example:
Code:
<cfcomponent name="File" ExtDirect="true">
<cffunction name="add" ExtDirect="true" ExtFormHandler="true">
<cfargument name="formfield" required="true" />
<cfset var file = '' />
<cffile action="upload" filefield="#arguments.formfield#" result="file" destination="#expandPath('data/')#" nameConflict="MakeUnique"/>
<cfreturn file />
</cffunction>
</cfcomponent>
Note here that we needed to specify what the name of the formfield is when we upload. This is a CF specific issue which was detailed a ways back by Ben Nadel I think... I'll try to find the blog entry.