Thought Delimited

A commenter named Dean recently asked me if there was a way to use an FCKEditor field with my dirtyFields jQuery plugin.

When applied to a form or any container that contains HTML form elements, the dirtyFields plugin records the intial values or states of each form element, and then anytime the change event is triggered on any of those fields, the plugin functions compares the current value or state of the field to the recorded value/state and then applies certain CSS styles to certain page elements (as defined by the user) if that particular field has been changed.

There are two problems with trying to use an FCKEditor element with dirtyFields. The first is that the FCKEditor Javascript generates the page elements it uses to represent the editor window after the page has been loaded, after the jQuery document.ready event typically used when binding plugin functions and events to page elements. The second problem is that the editor content window (where the user does their typing) is contained in an <iframe> element, and as such the text within the editor window and any events triggered within that window aren't accessible to the dirtyFields plugin.

However, it is possible to get a handle on what's going on within the editor window by utilizing the FCKEditor API and then use some of the public functions within the dirtyFields plugin to make it work.

First the code, then the explanation:

<script type="text/javascript">
    function FCKeditor_OnComplete( editorInstance )
        {
            editorInstance.Events.AttachEvent( 'OnBlur' , checkForChanges ) ;
            $.fn.dirtyFields.setStartingTextValue($("#editorField"),$("#myForm"));
        }
			
    function checkForChanges( editorInstance )
        {
            $("#editorField").val(editorInstance.GetXHTML(true));
            $.fn.dirtyFields.updateTextState($("#editorField"),$("#myForm"));
        }
	
    $(document).ready(function() { 
	$("#myForm").dirtyFields();
       ...whatever other functions you want to run...
    });
</script>

<form name="myForm" id="myForm" method="post" action="something.cfm">
    <label id="lbl_editorField" for="editorField">FCKEditor Window:</label>
    <cfmodule
        template="/fckeditor/fckeditor.cfm"
        basePath="/fckeditor"
        instanceName="editorField"
        value=''
        width="600px"
        height="200px"
    >
    ...
</form>

A note about how I'm using FCKEditor in this example: the example is based off of a ColdFusion page I wrote in order to try this out, so I used the <cfmodule> tag to create the FCKEditor field. Programmers using version 8 or higher of ColdFusion can instantiate an FCKEditor field using the <cftextarea> tag, but I suspect the FCKEditor API calls will work the same in either case. 

As I said earlier, one of the problems was that the HTML elements created by FCKEditor were created after the page loaded. The FCKeditor_OnComplete() function solves this problem: it executes as soon as FCKEditor has finished creating the HTML elements needed to support the editor, and provides the instance of the editor as an object ("editorInstance" is simply the name assigned to the object in the FCKEditor API examples, so I followed their lead). One of the elements it creates is a hidden text field with an "id" attribute equal to the name of the FCKEditor instance. My example presupposes that the FCKEditor field in the form is named "editorField", in which case a hidden text field with an id of "editorField" now exists in the form.

The first line in the FCKEditor_OnComplete function binds the checkForChanges() function to the editor's "OnBlur" event, which means that any time the user navigates away from the editor window (either by pressing the Tab key or clicking on another page element with the cursor), the checkForChanges() event will fire (Note: for a while, I was convinced the API didn't provide a way of detecting a loss of focus because "OnBlur" isn't documented on the API page). The second line uses the dirtyFields setStartingTextValue() public function to record and save the value currently contained with the "editorField" hidden text field, so that dirtyFields has an initial value to compare any changes in the editor window against.

The checkForChanges() function also receives an instance of the editor as an object. The first line in the function uses the getXHTML() method of the editor object to retrieve the current contents of the editor window and copy it into the value of the "editorField" hidden text field. The second line calls the updateTextState() function of dirtyFields, which tells dirtyFields to compare the current value of the "editorField" hidden text field with the previous value recorded by the setStartingTextValue() function. If the values are different, the label associated with the "editorField" hidden text field will be styled to indicate that the content of the FCKEditor window is "dirty."

And that's all there is to it: even though the dirtyFields plugin can't interact with FCKEditor fields by default, the public functions provided by the plugin can be used in conjunction with the FCKEditor API to make it work.

I didn't realize how easy it was to disable Flash in Firefox until I needed to troubleshoot a problem with a user who had just had their web browsers re-installed after an incident with a computer virus. The web page they were having trouble with included a jQuery-powered file uploader that also leveraged Flash to generate an upload progress bar, and after the browser re-install the page no longer worked correctly.

So here's how you can disable/re-enable Flash in Firefox:

1. In the Firefox menu bar, click on Tools -> Add-ons
2. Click on the Plugins button in the Add-ons window.
3. Click on the entry for "Shockwave Flash" and click the Disable button.

That's it: you don't even need to restart Firefox for the change to take effect.

Over the past few days, one particular CFC in my current project has grown rather large (a few hundred lines of code), and as it grew larger it became harder and harder to edit it in ColdFusion Builder (the second beta): the editor would struggle to keep up with my typing, pausing for a few seconds before displaying the changes I'd made. 

Not being in the mood to try and break up that CFC into several smaller ones quite yet, I did some experimenting and came up with two short-term solutions to the problem:

• The chief cause of the performance lag seems to be the syntax checking. You can turn off the syntax checking in the editor by going into Preferences, navigating to ColdFusion -> Editor Profiles -> Editor -> Syntax Checking and unchecking the "Enable Syntax Checking" box. The setting change takes place immediately (no need to restart Builder). The drawback of course is that the editor will no longer point out syntax errors until you change the setting back.

• I discovered that collapsing the code blocks I wasn't currently working with also dramatically improved performance (I'm guessing that the syntax checker ignores the code in collapsed code blocks, which makes sense). You can selectively collapse code blocks manually by clicking on the minus signs in the line-numbering column to the left of your code, or you can right-click on the line-numbering column and select Folding -> Collapse All from the context menu to collapse all of the code and then just expand the parts of the file you're working on.

  The drawback to this solution is that the collapsing/folding isn't preserved when you save the file:  if you close the file and open it again, all of the code will be visible. I couldn't find any option for preserving the current viewing state of the file.

The Model-Glue framework has a number of configuration settings that modify its behavior. Perhaps the most important of these settings is the "reload" setting. When the reload setting is set to "true", the framework itself will be reload on each request, and any changes you made to the Model-Glue, ColdSpring, or ORM settings of your application since the last reload will be implemented. When reload is set to "false," those framework files will not be reloaded, and any changes you might have made to them are ignored.

So the idea is that you would have the reload setting set to "true" during development so that any changes you make are processed in the next request. The drawback to being in this constant-reload mode is that it takes time to reload the framework, an amount of time that increases as you add event handlers, message broadcasts, and such to the ModelGlue.xml file and add more bean definitions to your ColdSpring file. It's for this very reason that the Model-Glue team state that it is "imperative" that you set reload to "false" when you put your application into production.

As the development of your application progresses, you'll reach a point where you don't want to reload the framework for every single request because you're spending too much time waiting between requests. At that point, you would set reload to "false", and manually force a reload of the framework when necessary by adding the reloadKey and reloadPassword to the URL of one of your page requests, like so:

http://www.myModelGlueApp.org/index.cfm?init=true

...where "init" is the reloadKey and "true" is the reloadPassword.

Many Model-Glue developers open a separate tab in their web browsers pointing a URL for their application that contains the reloadKey and reloadPassword and simply reload that page whenever they need the framework reloaded, rather than navigating away from the current page they're working on. I decided to go a slightly different route and create a reload event-handler that I could trigger from any page in my Model-Glue application and execute the reload event in a new browser tab or window.

The page layouts of my applications always include some sort of header area at the top of the page. In the header area, I added a hyperlink labeled "Reload MG" with a URL pointing at my reload event-handler:

<cfif viewState.getValue("appEnvironment") EQ "local">
    <cfset reloadURL= viewState.getValue("myself") & "performReload&init=true">
    <p align="right"><a href="#reloadURL#" target="_blank">Reload MG</a></p>
</cfif>

In my last blog post, I explained how my applications determine whether they're running in my local development environment or my remote production environment. The <cfif> statement ensures that the reload link only appears in the header when I'm running the application on my local box. Having the "target" of the hyperlink set to "_blank" ensures that the reloader page opens in a new tab or window.

The performReload event-handler is defined in the ModelGlue.xml file like so:

<event-handler name="performReload">
    <broadcasts />
    <results />
    <views>
        <include name="body" template="util/dspReload.cfm" />
    </views>
</event-handler>

The reload action is initiated by the presence of the reloadKey and reloadPassword in the URL, so there isn't a need to execute any additional controller or model code. The event-handler simply loads the dspReload.cfm page in my "util" directory. This is what the dspReload.cfm page looks like:

<h2>Page Should Close Automatically</h2>

<script type="text/javascript">
    window.close();
</script>

The single Javascript statement is pretty self-explanatory: close the current window.

So when I click on the "Reload MG" link at the top of any of my Model-Glue application pages, a new browser tab opens and the focus of the browser is on that new tab. I can return to my previous tab (where I'm working) and simply wait for the reload event to complete over in the new tab. Once it does complete, the Javascript executes and the new tab is closed: I don't have to close it myself.

So instead of keeping an open browser tab that I'd have click on, click the reload button for, and the click back to my previous tab, I can just click a link in my current page to spawn a reload tab and simply navigate back to my original tab. While it's not a huge improvement, I prefer it over maintaining a reload tab.

When I develop my ColdFusion applications, I work in two different environments. I develop the applications on my local machine, then deploy them to the server when I reach particular milestones or when it's ready for limited user testing. Even though I mimic the server environment as best as I can on my local machine, there are still certain aspects of the application that are different when it executes on the server. For example, my local machine isn't configured to send and receive e-mail, but I want my application (when it's running in production) to send out an e-mail when certain functions are executed.

What I used to do to solve this problem was to run a series of functions via the onApplicationStart() function in Application.cfc that would determine where the application was running (development or production), record that fact in an application-scoped variable called "locale", and then set a series of additional application-scoped variables based on what the current environment was. I would then code certain aspects of my applications, such as those responsible for sending e-mail, to examine the value of the application.locale variable to determine if certain function should execute and then use any other application-level settings necessary for the actual execution (like the e-mail address associated with the application).

I recently started using Model-Glue as my application framework, and since Model-Glue uses ColdSpring to manage some of its internal settings, I decided to revise my technique to take advantage of ColdSpring as well.

Here is the code of the appConfig.cfc I created for managing the application settings:

<cfcomponent displayname="appConfig" hint="I provide the configuration settings for the application dependent on where the application is running.">

    <cffunction name="init" access="public" returntype="any" hint="I accept all of the possible setting configurations">
        <cfargument name="universalSettings" type="struct" required="true" hint="A struct of all of the configuration settings that are true regardless of environment" />
        <cfargument name="localSettings" type="struct" required="true" hint="A struct of all of the configuration settings for the local environment" />
        <cfargument name="remoteSettings" type="struct" required="true" hint="A struct of all of the configuration settings for the remote environment" />
        <cfset var loc= StructNew()>
        <cfset variables.config= StructNew()>
        <cfloop collection="#arguments.universalSettings#" item="loc.ukey">
            <cfset variables.config[loc.ukey]= arguments.universalSettings[loc.ukey]>
        </cfloop>	
		
        <cfset loc.env= determineEnvironment()>
		
        <cfloop collection="#arguments[loc.env]#" item="loc.ekey">
            <cfset variables.config[loc.ekey]= arguments[loc.env][loc.ekey]>
        </cfloop>
		
        <cfreturn this />
    </cffunction>
	
    <cffunction name="determineEnvironment" access="private" output="false" returntype="string" hint="I determine the application environment">
        <cfif Left(cgi.cf_template_path,6) EQ "/Users">
            <cfreturn "localSettings" />
        <cfelse>
            <cfreturn "remoteSettings" />
        </cfif>
    </cffunction>
	
    <cffunction name="getConfig" access="public" output="false" returntype="any" hint="I return a config setting">
        <cfargument name="configName" type="string" required="true" hint="The name of the configuration setting">
        <cfreturn variables.config[arguments.configName]>
    </cffunction>
	
    <cffunction name="setConfig" access="public" output="false" returntype="void" hint="I set a config setting">
        <cfargument name="configName" type="string" required="true" hint="The name of the configuration setting">
        <cfargument name="configValue" type="any" required="true" hint="The value/data to store in the configuration setting">
        <cfset variables.config[arguments.configName]= arguments.configValue>
    </cffunction>
	
</cfcomponent>

The init() constructor function takes three structs as arguments: one that contains the universal application settings that are the same regardless of environment, one that contains the application configuration settings for my local/development environment, and one that contains the configuration settings specific to my remote/production environment. The universal settings are copied into the "config" struct in the variables scope, and then a call is made out to the determineEnvironment() function to determine the current application environment. The determineEnvironment() function uses the cgi.cf_template_path to determine if the current ColdFusion template is running on a Macintosh system (my work laptop is a Mac) and returns the name of the constructor argument that should be used to populate the rest of the "config" struct. The getConfig() function provides a means of retrieving the value of a configuration setting, while the setConfig() function allows you to change a configuration setting.

So populating this appConfig object with the correct application configuration settings is simply a matter of providing the three different configuration structs into the init() constructor argument. That's where ColdSpring comes into play: ColdSpring is ideal for managing and documenting the data and objects that need to be injected into singleton objects. Here is an example ColdSpring bean definition (within a ColdSpring.xml file) for the appConfig object:

<bean id="appConfig" class="myApp.model.csBeans.appConfig">
    <constructor-arg name="universalSettings">  
        <map>
            <entry key="ds"><value>myDatasource</value></entry>
            <entry key="appName"><value>myApp</value></entry>
            <entry key="approot"><value>/myApp</value></entry>
        </map>
    </constructor-arg>
    <constructor-arg name="localSettings">  
        <map>
            <entry key="locale"><value>local</value></entry>
            <entry key="emailNotification"><value>false</value></entry>
            <entry key="uploadDirectory"><value>/Users/Brian/Websites/myApp/fileRepo/</value></entry>
        </map>
    </constructor-arg>
    <constructor-arg name="remoteSettings">  
        <map>
            <entry key="locale"><value>remote</value></entry>
            <entry key="emailNotification"><value>true</value></entry>
            <entry key="errorSenderName"><value>myApp System</value></entry>
            <entry key="errorSenderEmail"><value>myApp@domain.org</value></entry>
            <entry key="errorDefaultSubject"><value>An error has occurred in the myApp system</value></entry>
            <entry key="uploadDirectory"><value>/wwwroot/myApp/uploadedFiles/</value></entry>
        </map>
    </constructor-arg>
</bean>

As you can see, the ColdSpring bean definition contains three <constructor-arg> XML blocks, one for each argument to be passed into the appConfig.cfc during instantiation, and each constructor argument contains a <map> XML block that defines the struct variable for that argument.

What's the advantage of defining these settings in ColdSpring? Once the appConfig object is defined as a ColdSpring bean, I can inject an appConfig bean into any other singleton bean object I define in ColdSpring or retrieve appConfig from the ColdSpring beanFactory object (which is usually instantiated during application startup). Plus, Model-Glue makes it very easy to inject ColdSpring beans into any of your controller objects simply by passing a list of ColdSpring bean names into a "beans" attribute in either the controller's &lt;cfcontroller&gt; tag or the starting &lt;controller&gt; tag of the controller's XML block in the ModelGlue.xml file of the application (see the "How to Use Bean Injection" page on Model-Glue documentation site for more details on that).  And it makes sense to put my application configuration settings alongside the Model-Glue configuration settings in ColdSpring so there's only one file I need to refer to for my configuration data.

The end result? I end up with an appConfig object containing the correct application settings for the current environment that my code can retrieve variable settings from whenever a function's behavior is dependent upon the application environment.

This technique I've just outlined works for me because I'm a solo developer with only two application environments, a simple way of determining which environment an application is running in, and usually only a small number of environment-specific app settings to deal with. If you're working in a team or with multiple application environments, you made need a more robust approach.  One option you might want to consider is the Environment Config project on RIAForge.org. The project also lets you leverage ColdSpring to define environment-specific variables, but it provides more options for distinguishing between different application environments and more flexibility in how you structure and retrieve your application configuration information. It's still in beta at the moment, but it looks promising.