blog | bio | agenda | jobs | ajaxCFC

Behold Model-Glue users! MG+AJAX Made easy

I just released a new improved version of ajaxCFC for the Model Glue framework. Now it's even easier to add Ajax to your robust ColdFusion MVC applications. I modified the Echo Example and added a Contact Manager Example to show how it works. All open source and included in the ajaxCFC download. The contact manager example is the same that comes with Model-Glue, using the same controller, models, and views ... slighly Ajaxified :)

[Updated] IMPORTANT NOTE: The XML Socket works on port 1225, so if you're behind some firewall preventing that traffic you will not see the refreshes. I am still working on some port 80 proxy, but for this experiment just open that port.

btw, I will be demonstrating all this at the upcoming Spring Conference, this week.

If that wasn't enough, included is also the next level of Web 2.0 applications; a mash-up of ColdFusion / Model Glue / ajaxCFC / XML Binary Sockets / CF Event Gateways... This combinations allows you to only for your presentation layer to interact with the server in the background, but also for the server to push data to the clients. No more Ajax pulls every 3 seconds interval, now the server can just broadcast the command to all clients. I shall call it Apocalypse. ;)

I modified the Contact Manager example that comes with model glue to use Ajax and Socket servers... now every time anyone adds/edits/deletes a contact all clients' views will get updates... just imagine the possibilities. Just try it yourself... open two browsers and see them interact.

I will try to briefly explain the framework the best I can.

First, you need the BER version of the model glue framework; Joe still hasn't officially released MG v1.1.

Now, the framework consists of a model: ajax.cfc, some JavaScripts included in the views/js folder, and a rendering view ajaxResponse.cfm. That's it...

How do it work...
The examples that come with Model-Glue use a private Layout hanlder, so I just added two more: AjaxLayout and SocketLayout... Now every time you need to respond an Ajax request you use the AjaxLayout, and if you want to broadcast something through the socket, you use the SocketLayout.

I modified the controllers init and OnRequestStart to parse the Ajax request... once it gets to your controllers handler all Ajax vars will be sent to you as regular event values, which you can get with getValue. There's not much more you need to know there...

Your controller will do its thing and set vars to be used in modelglue.xml ... now, here's the beauty ... when you use the AjaxResponse renderer your views will modify DIV Layers, or anything with the view's ID ... For example, if your body has a container calls contentForm, once you render a view with that name, all content will get placed inside that DIV...

If you need to run scripts you can use a reserved view name: 'script'. If you create a view with that name, all code inside that view will get evaluated in the client side. I modified the Echo Example to use this method so you can see what I mean.

The socket implementation is still in alpha mode... I just finished the prototype today... how does it work?!

I added a 1px Flash movie that weights only 1k that all it does is to open a socket connection to a ColdFusion Event Gateway. I rewrote the XML Binary sockets that comes with CFMX7 to better suite the Flash XML Socket protocol. I also added a few methods such as onConnect and onDisconnect. Anyways, when you need to talk to the server to do it through Ajax, but if the server needs to talk to you, it will do it through the XML Gateway. The beauty is that you do not need to modify anything or create any custom handler for it ... The flash movie uses FS Command to communicate with JavaScript and triggers the same calls the Ajax response would, so the same rendering in the server works for either method.

I included the org.gonda.socket.jar file, which would have to be registered as a custom event gateway to make the contact manager example to work. Just point your JVM class path where the file is, restart ColdFusion, and register a new gateway:
Name: FlashSocket
Class: org.gonda.socket.SocketGateway

Then create a new instance and call it 'flashSocket1'. I provided the cfg file in the example too.

In the main view, both IP and port are passed to the Flash file as FlashParams... will easily see how to modify it.

I know, you are thinking it's too much, but it's not THAT complicated ... and it's well worth it ...

Ok, so what is the catch? There are a couple of issue I still need to work on ... one) The socket binds itself to an IP and port, and I don't want to create a new socket for every application.. especially if I need to open a new IP on my firewall every time ... two) firewall... yes, I need to find a way to perform http tunneling, or to detect that it was blocked on run time to shift all socket calls to Ajax.

I know it's not crystal clear, but I wanted to get it out there and get people thinking ... I'll try to document it better this week before the conference.

Related Blog Entries

TrackBacks
Rob Got It Working !!!
Rob Gonda has gotten an implementation of data push working with ColdFusion. It's pretty slick in the way that it talks to the XML Socket. Go over to his site and take a look at it....
Tracked by Info Accelerator | Tracked on 3/20/06 3:15 PM
Rob Gonda's Ajax + Push in Model-Glue
Wow - this is pretty slick. By using his AjaxCFC, an event gateway, and a tiny Flash movie as a conduit, Rob Gonda has come up with a way to do *push* in Model-Glue via Ajax. That...is...pretty...slick!
Tracked by clearsoftware.net | Tracked on 3/21/06 9:17 AM
Rob Gonda - Hero of the day
Looking at the header over at Rob Gondas blog one must wonder if he think himself some kind of super hero. Well today he has proven his position as such - at least in my eyes. The MG+Ajax examples he has posted is truly cool stuff.
Tracked by Waterswing Blog | Tracked on 3/21/06 9:48 AM

Trackback URL for this entry:
http://www.robgonda.com/blog/trackback.cfm?1617217E-3048-7431-E42B302C6D8C2B42

Comments
Would it be asking too much to have the same for Mach II? (pleading/begging)
# Posted By Sami Hoda | 3/20/06 2:01 PM
Sami, I'd love to, but I really dont have the time right now. I'll be willing to assist anyone who wishes to take on that task ... If you think you're the one, just drop me an email... I'll give you my IM and we can discuss it further.

As a side note, I'll be intensively teaching this at the CFUnited Pre-conference classes... It's 8 hours of picking Rob's brain, heh ... see you guys there.
# Posted By Rob Gonda | 3/20/06 9:19 PM
oh yeah, here's the link btw
http://www.cfunited.com/classes06.cfm#CU214
# Posted By Rob Gonda | 3/20/06 9:53 PM
Rob, this is my first dip into the realm of AJAX. Thanks for the example. I have been playing around with MachII lately so I may take a shot at MachII-ifying it if time permits. If I do I will be sure to pass it on to you.

Also I just signed up for your pre-CFUnited class last week. I am really looking forward to it.

~Dave
# Posted By Dave Shuck | 3/20/06 11:00 PM
Dave, looking forward to having you there.

Just like for all of us, time is a scarce resource, and for that matter, I haven't playing much with Mach II. Actually, I don't use Model-Glue all that much either, but I like the way if flows... I just feel it :)

Whenever you feel you have time, just drop me an email and we'll chat about that. I have a feeling Sami may help too... he's being using MII for a long time now.
# Posted By Rob Gonda | 3/20/06 11:26 PM
Wow, is my reputation that prevalant? I have been doing it for almost 3 years, still wouldn't consider myself an expert. Its interesting too since I've been looking for a project to start on the side. This would be a good one, especially as I look to start my blog.

I've already asked my boss to attend your class. :D

I'll be contacting you soon!

Sami
# Posted By Sami Hoda | 3/21/06 12:13 AM
Cool, update took me couple of hours but the pay off seems worth it.
BTW, DWR files are still "Version 1.76" in MG examples, but the core files were updated to 1.83 (as per engine.js in-line comment). Am I missed something?
# Posted By Jura Khrapunov | 3/21/06 4:39 AM
Nice! I've blogged it.
# Posted By Joe Rinehart | 3/21/06 7:34 AM
Awesome! Looking forwards to playing around with this one.
# Posted By Trond Ulseth | 3/21/06 8:51 AM
Jura, nice attention to detail. My engine.js is based on dwr, and the one Model Glue is using is a branch of my regular ajaxCFC one. I updated the main one, but haven't had a chance to update the one for Model Glue yet .. that's what you have to face with branches, unfortunately.. it's on my list, just like adding a few updates to the core of ajax.cfc.
# Posted By Rob Gonda | 3/21/06 10:11 AM
Where do you get the BER of Model-Glue? I looked around on Joe's site and couldn't find a link (or CVS site).
# Posted By Matt Williams | 3/21/06 12:37 PM
I hope Joe doesn't mind, because this link was only available through mailing lists.

svn://clearsoftware.net/clearsoftware.net
# Posted By Rob Gonda | 3/21/06 12:59 PM
Rob,
Few Questions (Requests?)
1. Any hope for persistent session variables on AJAX calls?
2. How about AJAX integration with FuseBox?

Thanks
# Posted By Yaron | 3/22/06 3:59 PM
Rob,

Most of the links on this blog entry are bad.

Sami
# Posted By Sami Hoda | 3/22/06 8:34 PM
What do you know ... Sami, thanks! fixed them. I have not idea how that happened.
# Posted By Rob Gonda | 3/22/06 9:26 PM
Thanks for all that work Rob… great site and even better resource!
# Posted By Zack | 3/23/06 7:19 AM
Hi Rob

Just been playing with you ajaxCFC and module glue code. Im having an issue trying to load external <InvalidTag> links on the fly ? is there a way to do this with AJAX / MG ?

I cann see that if i name my view 'script' then it will execute any inline script. and if i want to return HTML then it puts the content into the div.

but what if i want to do some lazy loading of External JS files ?
# Posted By Pat Branley | 3/26/06 6:20 PM
Pat,

That's an excellent question. Thus far, I've used numerous lazy loading, but never with MG yet. The way I've been doing them is to actually open the js file with cffile and dump the content into a predefined name space. This technique works great if you OO all your js files using prototypes and objects, but it will not work for traditional js files. I have not tried loading them into the html head using dom because I've always assumed that it will only run on compile time, not run time.

I just saw your post in the MG list (thanks!), and I will try a few things in the next couple of days. If you have a good way to perform lazy loading without altering the JS files please share, and I'll find a good day to integrate it with the framework.

As a side note, even without ajax, loading js files using dom and attaching them in the html head does not work in every browser... you need to be careful with that.
# Posted By Rob Gonda | 3/28/06 12:08 AM
Yaron,

Sorry for the delay.

As far as Fusebox (nothing personal Hal), I just hate it :) I heard Hal and Sean are doing a hell of a job with fusebox 6; they rewrote the entire engine and it's fully OOP now. I would be willing to give it a chance when it comes out. For the current fusebox, same answer as Mach II... I really dont have time for that, but I will be willing to provide 100% support for whoever brave enough to assume that job. I can setup test environments and provide access to my SVN. I will also advertise it in the ADJ and all conferences where I'm speaking. After it's done, it would be just awesome to release some benchmarks and examples running on all different frameworks ... that would be a great case study for CFU if we get it out on time.

So, who's willing to give it a try?!
# Posted By Rob Gonda | 3/28/06 12:19 AM
Oh yeah, forgot about persistent variables... could you elaborate on that? Your Ajax facade can access session scoped vars if that's what you mean. Every remote call is just like a form post in the background, thus maintaining a session if you dont let it timeout, just like a regular html session. It uses cookie, nothing extraordinary. Did that answer your question?

Best,

~Rob
# Posted By Rob Gonda | 3/28/06 12:22 AM
Rob,
I saw there is some outside interest in a MACHII implementation. Sami and Dave mentioned they were interested. I'd like to see this happen and am volunteering.

Let me know what I can do to help.

DW
How is the MachII implementation coming?
I'd be glad to start on it
# Posted By Dan Wilson | 4/2/06 7:43 PM
Dan,

I exchanged a couple of emails with Sami a few weeks ago, but I haven't heard back. Drop me an email and I'll fw you what I sent him.
# Posted By Rob Gonda | 4/2/06 7:59 PM
Hi Rob,
I've been heavily into Fusebox for close on 4 yrs now and started looking into Ajax last week. If you want, I'll put my hand up for the fuseboxifying an ajaxCFC implementation.

Just on the ajaxCFC zip. Unless I missed something in the installation notes, it needs a minor tweak to get working out of the box. It needs the references to 'blog/projects' removed from the modelgluesamples and of course the cfc mappings as well. Other than that it worked a treat :)
Also showing my in-experience with Javascript here but in your references to the form field (model-glue examples at least) you used a '$' sign. I googled and couldn't find an explanation of how this replaces a named reference to the field.
Cheers again for what you've done here mate, if I can help out let me know.
# Posted By Drew | 4/6/06 3:07 AM
Drew, again ... any help/contribution are highly appreciated. You can take on the fusebox project. Same offers will go for you: full support from my part, dev environment, svn, all if needed.

The modelglue examples are the only ones that need to modify paths... all the rest are relative. The MG framework requires you to use full mappings, for the xml and for the controllers ...

anyways, the $() function is nothing more than a glorified getElementById function ... it has improved functionality, and it's easier to write, heh ... not sure who came up with it, but it's being used in a number of different JS frameworks...

looking forward to work with all who volunteered.
# Posted By Rob Gonda | 4/6/06 10:17 PM
Very exciting stuff, but the sample doesn't work for me on my server. Downloaded the zip, modified MG files for my own directory structures but the echo example does not work. Getting JS error saying only "[error Object]". Is this not compatible with MG 1.1?
# Posted By Erik | 5/4/06 6:56 PM
Erik, the code is compatible with MG 1.1, and with MG 2.0 as the matter of fact. However, the version I have available for download is using the custom XML Socket, which you may have not installed. I guess it's a good idea to make an Ajax-only version. I should work of that and post it soon.

Best,

~Rob
# Posted By Rob Gonda | 5/8/06 10:27 PM
Rob,

This is great stuff! I got it to work with the Modul Glue framework. I am trying to get it to work with the MachII version you posted in one of your latter postings with no luck. Would you happen to have a version of this already tested with SocketServer and Mach-II?
# Posted By Mike Woicke | 3/5/07 6:00 PM
Nop, I don't. I wouldn't mind writing an ADS (Ajax Data Services), which is an Ajax implementation of the Flex Data Services and bind it to MG and MII. I may have something in a couple of weeks.
# Posted By Rob Gonda | 3/5/07 9:50 PM
Awesome! I really appreciate it. This is some amazing stuff!
# Posted By Mike Woicke | 3/6/07 10:29 AM
Is it possible for me to use the same methods you used in the ModelGlue example to work with Mach-II or does it require a new FDS altogether?
# Posted By Mike Woicke | 3/9/07 3:08 PM
Rob,

Would you happen to have the FLA of this Flash componenet?

Thanks In Advance,
Mike
# Posted By Mike | 3/16/07 6:00 PM
Where did you go Rob? Help me Obi Wan. You're my only hope. :)
# Posted By Mike | 3/21/07 5:58 PM
@Mike: I was away for the Spring Break Conference and then came back to Florida to land directly at the Winter Music Conference... I'll try to package the code today.
# Posted By Rob Gonda | 3/26/07 8:12 AM
Awesome. Thanks!!!
# Posted By Mike | 3/26/07 11:15 AM
Rob. Do you happen to have a copy of the FLA you used in this example?
# Posted By Mike | 3/29/07 12:58 AM
@Mike, just RAR'd my FLA and Java Code for you
http://www.robgonda.com/blog/files/robGonda/UserFi...

Enjoy
# Posted By Rob Gonda | 4/1/07 8:43 PM
Can we still expect to see your Mach-II version of this? We all are crossing our fingers. :)
# Posted By Mike | 4/4/07 11:28 PM
Any updates Obi Wan??? :)
# Posted By Mike | 4/27/07 11:12 AM
Getting error on accessing model-glue samples
# Posted By Vishnuprasad | 10/31/07 11:14 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.