ColdFusion 8 AJAX
Posted on 22 October, 2007 by maximinus in Web design, Web development, Interface design
I've lately been playing around a bit with the new ColdFusion 8 AJAX and related stuff. There are a few different things I'd like to touch on here:
cfajaxproxy
This one's a really great idea - basically, with one tag, CF8 will automatically create a JavaScript class which mirrors the CFC you name. It acts as an interface for the CFC - you create an instance of it in your JavaScript, and then call the (public, remote-access) methods from the CFC as if from ColdFusion. It returns whatever the CFC's method would return.
I'm using this to easily turn a static calendar (based on Randy Drisgill's Simple ColdFusion Calendar - I fixed the year bug (my way, see comment on Randy's blog post), converted it to a method in a CFC, changed it to use DIVs instead of tables and generally tidied things up, rewriting some chunks of it. I then made it so that it doesn't require reloading the page, but instead uses JavaScript to swap out the calendar for a whole new one. I've yet to make it also display information in the day DIVs, but that will be coming soon.
More at CF8 Livedocs.
cfwindow
This one's also kind of neat; it allows you to easily create a draggable, closable 'window' on the page. You can either have it show on page load, or use JavaScript to trigger it to pop up whenever and however you want. You can either specify content within the cfwindow tags, or specify a source file - if you specify a source file, it'll load that page using AJAX and shove its contents into the 'window' - no, not using an iframe, but actually using AJAX.
I do have a couple of gripes with it, though:
More at CF8 Livedocs.
cflayout / cflayoutarea
Okay, so I've only actually used the tab layout so far. But even so, I've discovered a few cool things and a few annoying things. First off, it's really easy to use these tags; just nest a new cflayoutarea within the cflayout tag to add a new tab. Just like cfwindow, you can either specify the contents of each tab between the cflayoutarea tags, or use the 'source' attribute to specify a file which will be loaded in using AJAX. With both cfwindow and tabs, you can also use refreshOnActivate (refreshOnShow for cfwindow) to tell it to fetch a new copy of the contents (when using 'source') when opening the window / showing the tab.
Issues I have with the tabbed layout are:
There may be more later, but right now I can't think of anything to add.
cfajaxproxy
This one's a really great idea - basically, with one tag, CF8 will automatically create a JavaScript class which mirrors the CFC you name. It acts as an interface for the CFC - you create an instance of it in your JavaScript, and then call the (public, remote-access) methods from the CFC as if from ColdFusion. It returns whatever the CFC's method would return.
I'm using this to easily turn a static calendar (based on Randy Drisgill's Simple ColdFusion Calendar - I fixed the year bug (my way, see comment on Randy's blog post), converted it to a method in a CFC, changed it to use DIVs instead of tables and generally tidied things up, rewriting some chunks of it. I then made it so that it doesn't require reloading the page, but instead uses JavaScript to swap out the calendar for a whole new one. I've yet to make it also display information in the day DIVs, but that will be coming soon.
More at CF8 Livedocs.
cfwindow
This one's also kind of neat; it allows you to easily create a draggable, closable 'window' on the page. You can either have it show on page load, or use JavaScript to trigger it to pop up whenever and however you want. You can either specify content within the cfwindow tags, or specify a source file - if you specify a source file, it'll load that page using AJAX and shove its contents into the 'window' - no, not using an iframe, but actually using AJAX.
I do have a couple of gripes with it, though:
- It's not the easiest thing in the world to style, and the default styles are a bit crappy - especially with some colours behind it, which can make some of the outer lines 'disappear' and thus make the box look a bit odd; and
- It doesn't have a 'minimise' button. It's based on Ext JS - which does have a 'minimise' button, which shrinks the 'window' to its titlebar.
More at CF8 Livedocs.
cflayout / cflayoutarea
Okay, so I've only actually used the tab layout so far. But even so, I've discovered a few cool things and a few annoying things. First off, it's really easy to use these tags; just nest a new cflayoutarea within the cflayout tag to add a new tab. Just like cfwindow, you can either specify the contents of each tab between the cflayoutarea tags, or use the 'source' attribute to specify a file which will be loaded in using AJAX. With both cfwindow and tabs, you can also use refreshOnActivate (refreshOnShow for cfwindow) to tell it to fetch a new copy of the contents (when using 'source') when opening the window / showing the tab.
Issues I have with the tabbed layout are:
- The tabs are rather poorly styled by default; the top left corner of each tab in particular looks odd / broken. Thankfully, FireBug showed me that it's relatively easily to restyle the tabs - I've made mine quite plain and simple at the moment;
- The 'align' attribute of the cflayout tag relates to the tab content, not the tabs themselves - surely if I wanted to change the alignment of the content, I'd do it at the content level - or perhaps there could be an 'align' attribute on the cflayoutarea tag? Tabs are stuck at the left hand side, unless you manually shift them with CSS as I have done; and
- There appears to be some weirdness with regards to the height of the content area when it contains absolutely positioned elements. I'll need to investigate this a bit further.
There may be more later, but right now I can't think of anything to add.
No comments have been posted on this entry.
Post a comment:
Sorry, comments have been disabled.
Sorry, comments have been disabled.