Sexy ColdFusion 8 Ajax

Posted By : todd sharp Posted At : February 13, 2008 2:44 PM Posted In: Ajax, ColdFusion

11

Many folks have asked recently how I worked around the - umm - 'plain' look of the ColdFusion 8 Ajax controls. I originally planned on that being a part of my cf.Objective() Ajax presentation, but what the heck, I may as well show it now.

It's actually quite simple. Ext ships with several 'themes'. To use these with your Ajax controls, just include them on your page.

For the 'aero' theme:

<link href="/CFIDE/scripts/ajax/ext/resources/css/xtheme-aero.css" rel="stylesheet" type="text/css">

How 'bout a Vista theme?

<link href="/CFIDE/scripts/ajax/ext/resources/css/xtheme-vista.css" rel="stylesheet" type="text/css">

A few words of caution though. The first caution is to make sure you have all of the latest hot fixes applied for CF 8. There is a fix in one of them that makes sure your user included stylesheets are included after the CF added ones. This is important! (A workaround is to write your stylesheet to the <head> with <cfhtmlhead> - that should put your sheet after the CF stuff). The other thing to watch out for is to make sure the path to the necessary images is not altered (if you move the theme to your project directory instead of pointing at /CFIDE). If you don't maintain the image path, then you will need to change the path in the local stylesheet (and move the images local to your project).

Comments (11)

Brian Love's Gravatar Todd: Great tip. I gave this a try and ran into a small difference. My custom css files start with a 'y' rather than an 'x' - so I had my src attribute to the link tag look like this:

/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css

Not sure why - I think it ships as an X when you download Ext off their site. But thought I would point this out in case anyone else runs into the same thing.

todd sharp's Gravatar Did you perhaps have the issue that I mentioned about your stylesheet being included before the CF stuff?

That can produce some weird looking styles...

Brian Love's Gravatar @Todd: Nope, no problem there. My server is running CF 8,0,0,176276 - which I am pretty sure has the latest update (Hot Fix 2).

Like I said, the only difference was that I had to include the stylesheet with a leading 'y' instead of an 'x', such as 'ytheme-aero.css'. Also, my installation is running on a centOS server - maybe that has something to do with it ??

Michael White's Gravatar I have CHF 2 also but the theme thing isn't working for me. I currently have the following in my <head> section: <link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-slate.css" rel="stylesheet" type="text/css"> and I renamed the stylesheet to ytheme-slate.css (I think this is a Ext 2.0 theme though)
I checked the paths and they are right.

Michael White's Gravatar if i change to ytheme-vista.css it works fine... maybe the Ext 2.0 themes need some modifications to work with CF8

todd sharp's Gravatar I haven't tried the Ext 2 themes, but it looks like Dan Vega has. Might want to post a comment over there to see how he did it?

http://www.danvega.org/blog/index.cfm/2008/2/13/Ex...

todd sharp's Gravatar oops i see you commented there.

Michael White's Gravatar I think he's using his cfExt stuff

todd sharp's Gravatar Ah ok. Well, just make sure if you find a theme somewhere that you want to use that it is compatible with the version of Ext that ships with CF.

shane's Gravatar I just can't get it to see the different theme's it always defaults to the base theme. I have applied the latest update for cf8 and here is the code to include it... it shows up, but it does not change the theme.

<cfsavecontent variable="stylesheet">
<link href="/CFIDE/scripts/ajax/ext/resources/css/xtheme-aero.css" rel="stylesheet" type="text/css">
</cfsavecontent>
<cfhtmlhead text="#stylesheet#" />

any help would be appreciated.

todd sharp's Gravatar Do you have a demo online somewhere that I can see shane?