Using the awesome Firebug extension for Firefox, I could see that the ext-all.css file was disabling the font-weight on the strong tag. This was quite surprising to me!

The ext-all.css file will automatically be included on your page whenever you use almost any of the UI features such as cfgrid, cflayout, etc.

You can easily reproduce the problem with this minimal code:

<cflayout type="tab"></cflayout>
<strong>This should be bold but its not.</strong>

You can fix the problem by adding this to your site’s style sheet, if you have one:

strong { font-weight: bold; }

If you don’t use a separate style sheet you can just put it directly into your page like this:

<style type="text/css">
strong { font-weight: bold; }
</style>

Hopefully this can be fixed before 9.01 comes out. I think its a pretty big deal, it disabled tons of bold content on our site. A lot of our content is created using the FCK rich text editor, which uses strong tags to indicate bold. I’ve file a bug report with Adobe, you can vote for this bug here: http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=82156

After looking through the EXT documentation, I think this css originates with the EXT group. But when Adobe repackages EXT into CF, they need to either override this style it or take it out of the css file completely.

So far I’ve found this to be a pretty neat framework. I see a lot of similarity to Rails. The documentation is very good. The plugins are pretty neat, you just drop a zip file into your plugins directory and you can start using that plugin.

To start I downloaded cfwheels and setup my database. I installed the scaffolding plugin and used that to generate my CRUD views, models and controllers. Already I had the basics working! I tried creating/listing/editing users and it worked great.

After setting up the scaffolding, I needed to define table relationships (called associations in CFWheels), and add some drop down menus where the scaffolding had put text fields.

One thing I noticed fairly quickly was that the crud pages were kind of ugly. I started to write some CSS to clean them up, but right away ran into trouble because the form inputs were nested inside the label tags like this:

<label for="name">Name:<input name="name"></label>

I haven’t seen it done that way before, I usually have the label completely separate from the input like this:

<label for="name">Name:</label><input name="name">

For me at least, that makes it a lot easier to style. That is also how the W3 demonstrates the tag. At first I thought this was a problem with the scaffolding plugin, but actually its CFWheels. The scaffolding plugin just writes code like this:

#textField(objectName='user', property='username', label='Username')#

So its the built in textField() method that generates the code this way. I found this is easy to fix though, you can add this additional attribute:

#textField(objectName='user', property='username', label='Username', labelPlacement='before')#

That will place the <label> tag before the form input, just how I like it. I didn’t have to go add the attribute to all by edit pages, either, you can set it in once in your settings.cfm file like this:

<cfset set(functionName="textField", labelPlacement="before")>

But, you’ll need to do it for all your inputs, like this:

<cfset set(functionName="textField", labelPlacement="before")>
<cfset set(functionName="textArea", labelPlacement="before")>
<cfset set(functionName="select", labelPlacement="before")>
etc.

Next I removed the created and updated timestamp fields from the create and edit pages. The scaffolding had put them on there but I want them to be updated automatically. CFWheels supports this, if the fields are named createdAt and updatedAt. Unfortunately the timestamp fields in the litepost database are not named like that.

After digging through the documentation a little I discovered you can tell cfwheels you are using differently named timestamp columns by putting lines like these in your settings.cfm file:

<cfset set(timeStampOnCreateProperty = "dateCreated")>
<cfset set(timeStampOnUpdateProperty = "dateUpdated")>

I tried that but had some problems. When trying to create a new entry (a blog article) I got this error:

Error Executing Database Query. Field 'dateCreated' doesn't have a default value.

It didn’t seem like my timeStampOnCreateProperty() call was working. I finally ended up renaming the fields in my database and related code.

Unfortunately, I still got an error:
Field 'updatedAt' doesn't have a default value

I was stuck on this for a while, but one of the guys behind the contest, Mike Henke was nice enough to help (several times in fact). He pointed out that the error was actually about the updatedAt column now, not about the createdAt field. Hmmm. It would make sense that updatedAt would be null when the record is first created. But looking at the database I could see that it didn’t allow nulls for the updated timestamp. I changed the database to allow nulls and tried creating an entry again. This time: Success!

Some other things I’ve gone through:

By default the textField() method will use the column name for the label. So the page ends up looking like

Fname:

I would like it to use “First Name” for the label. I found that you can specify a label using the label attribute (hey that makes sense!).

#textField(objectName='user', property='fname', label='First Name')#

I ran into a similar issue with the CFWheels validation code. Validation is done in your model file like this:

validatesPresenceOf(properties="fname,lname,email,username,password")

This makes sure those fields are not blank. If you leave fname blank for example, you’ll get this error “Fname can’t be empty”. I didn’t find any easy way to specify the label. I did find there was a way to specify a custom error message, so I was able to use that and call the validation method for every field:

<cfset validatesPresenceOf(properties="fname",message="First Name can't be empty")>
<cfset validatesPresenceOf(properties="lname",message="Last Name can't be empty")>
etc.

I thought it would be nice if I could specify just a label to use, something like this:

validatesPresenceOf(properties="fname:First Name,lname:Last Name,email,username,password")

Even better, what if you could define a column’s label in a central place? Maybe in the settings file, similar to how you set other column properties. Then it could automatically use the label everywhere, including the textField() calls. So instead of having to do this:

#textField(objectName='user', property='fname', label='First Name')#

You could just do this:

#textField(objectName='user', property='fname')#

And wheels would know what label to use for fname. This would make it really easy to change labels across the whole site!

To wrap it up, I think this is a promising framework that is gaining popularity. I’ve even seen some job postings mentioning cfwheels experience desired. I’ve done a lot of work with Model Glue, and I find it to be very heavy on configuration. I’d like to see some changes to MG to pick up some of the great things from CFWheels.

The tabs generated by ColdFusion 9 are completely different, since they use Ext version 3. ColdFusion 8 used Ext 1.

The tabs in ColdFusion 9 do not wrap by default, but they do automatically add scroll controls so you can scroll through the long horizontal line of tabs. If you’d rather have them wrap into multiple lines, this little bit of CSS will do it:

.x-tab-panel ul.x-tab-strip {
    width: auto !important;
}

Here is the announcement http://lizfrederick.blogspot.com/2010/01/new-acps-for-2010.html

Given this bit of code:

<cflayout name="tabtest" type="tab">
	<cflayoutarea name="tab1" title="tab one">
		<p>this is tab number one.</p>
	</cflayoutarea>
	<cflayoutarea name="tab2" title="tab two">
		<p>And here is tab two.</p>
	</cflayoutarea>
</cflayout>

ColdFusion 8 generates a set of tabs that look like this:

Here is what that same code generates in ColdFusion 9.

This is quite a bit different, and in our early user testing they liked the old look better. So I came up with this CSS:

div.x-tab-panel-header, ul.x-tab-strip-top {
    background-image: none;
    background-color: transparent;
    padding-bottom: 0px;
}

div.x-tab-panel-header {
	border: 0px;
}

With that applied, the ColdFusion9 tabs come out like this:

I still don’t like that in CF9 the tabs jump around as you select different tabs. This happens because the current selected tab is indicated by a bold label. The bold text takes up more room, so as you select different tabs everything gets shifted around. This is especially odd when you are wrapping tabs – sometimes the wrap point changes when switching between tabs, so a whole tab will jump from one line to another. I think this could be fixed, too, if you came up with a different way to indicate the current tab. If someone figures this out and wants to send it to me I’d appreciate it.

Anyway, once in a while this causes issues. In this case, there was code on the server that required a username and password in order to access the page. The security was done at the web server level, aka “HTTP authentication”, which causes your browser to prompt you for a username and password. These credentials then get sent along in the request headers (its actually a little more complicated than that but I won’t get into that here). After authenticating, the username is available to ColdFusion as a CGI variable – CGI.REMOTE_USER.

When using IIS, that value is also available as CGI.AUTH_USER. In all CGI variable specs I could find, they all reference REMOTE_USER, not AUTH_USER, I’m not sure when AUTH_USER started to be used. Anyway, this ColdFusion code running on the IIS server would look to the CGI.AUTH_USER variable and display some things differently depending on who the user was.

This posed a problem when trying to run this code locally under apache. The CGI.AUTH_USER variable did exist, but it was always blank. One could change the code to use the more multi-platform friendly “REMOTE_USER”, but sometimes there are hurdles to changing existing code.

But there is a way to mimic the behavior of IIS, by copying the REMOTE_USER value into AUTH_USER. Its only three simple lines but it took me quite a while to figure this out.

RewriteEngine on
RewriteCond %{REMOTE_USER} (.*)
RewriteRule .* - [E=AUTH_USER:%1]

You’ll need to have mod_rewrite enabled of course. Usually all you need to do is uncomment a line that looks like this in httpd.conf:

LoadModule rewrite_module modules/mod_rewrite.so

The three magic lines can go into the httpd.conf file, or you could place them in a .htaccess file in the directory you’re working in.

Turns out this is a simple thing to fix, I had to add a line to MySQL’s config file: my.cnf. Mine was located at [MySQL installed root]\bin\my.cnf. The setting that needs to change is lower_case_table_names, I set the value to 2, like this:

lower_case_table_names=2

If you are interested, here are the different possible values:

On Windows the default is 1.

More information at http://dev.mysql.com/doc/refman/5.0/en/identifier-case-sensitivity.html

By default Eclipse keeps a local history of the files you work on. From within Eclipse, right click on a file and select Team->Show Local History.

From here you will get a list of revisions, generally one is made each time you save the file. You can open a revision, or even use a built in diff tool to compare it to your current version.

But in this case we had no current version to even right click on to start the process. So we simply created a new, empty file in the same location as the old one. Then we were able to right click on it and pull up the history.

This local history is stored under your workspace in workspace\.metadata\.plugins\org.eclipse.core.resources\.history, but its not easy to manually browse. There any many directories and the files in those directories are given nonsense file names. Much easier to stick with the Eclipse interface.

Keep in mind that if you haven’t edited the file in a while there may not be any history to go to.

But there is a way. When CF8 generates the grid it writes out CSS ids and classes that you can use to style the grid. For example to right align the 5th column you can use this:

.x-grid-td-5 {text-align:right;}

The number you need to use in the class name does not always match up with the column. Sometimes I had to use .x-grid-td-8 to reference the 6th column for example. I think the number increments for each cfgrid item, even if you have display=no.

If you have more than one cfgrid on your page and only want to align the nth column in one of them, you can wrap the cfgird in a div with an ID so you can reference only that grid in your CSS.

For example, lets say you need the second particular element in an XML document. You might fetch some XML with cffeed and then use XMLSearch() to get all the matching elements. Then reference the second element of the resulting array, like this:

<cffeed source = "http://weather.yahooapis.com/forecastrss?p=90210" xmlVar= "myXML">

<cfset Forecasts =
     xmlSearch(myXML,"//*[local-name()='forecast' and namespace-uri()='http://xml.weather.yahoo.com/ns/rss/1.0']")>

<cfset theForecastIwant = Forecasts[2]>

In CF9 you can take a little shortcut, like you can in many other languages:

<cffeed source = "http://weather.yahooapis.com/forecastrss?p=90210" xmlVar= "myXML">

<cfset theForecastIwant =
     xmlSearch(myXML,
     "//*[local-name()='forecast' and namespace-uri()='http://xml.weather.yahoo.com/ns/rss/1.0']")[2]>

Nice! This probably happened when the team added the anonymous variables feature.

And if you are wondering, this works fine in Railo 3.1 but not in OpenBD 1.1.