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).

7427 Views Send Print Comments (11)

Comments (11)

Subscribe to Comments Add Comment

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.

Posted by: Brian Love on: 2/13/08 5:04 PM

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...

Posted by: todd sharp on: 2/13/08 5:24 PM

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 ??

Posted by: Brian Love on: 2/14/08 10:14 AM

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.

Posted by: Michael White on: 2/14/08 1:27 PM

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

Posted by: Michael White on: 2/14/08 1:33 PM

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...

Posted by: todd sharp on: 2/14/08 3:22 PM

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

Posted by: todd sharp on: 2/14/08 3:24 PM

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

Posted by: Michael White on: 2/14/08 3:57 PM

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.

Posted by: todd sharp on: 2/14/08 4:49 PM

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.

Posted by: shane on: 3/17/08 12:16 AM

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

Posted by: todd sharp on: 3/17/08 3:54 PM
Add Comment

  • Calendar

    << March 2010 >>
    Sun Mon Tue Wed Thu Fri Sat
     123456
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30 31    

  • Subscribe

    • Enter your email address to subscribe to this blog.