Brad Melendy

So one of the things that Coldfusion 8 brought us was the Coldfusion Server Monitor.  Now, I’ve been around the block when it comes to monitoring systems and with Coldfusion that included writing custom scheduled tasks or 3rd part applications like Hobbit.  But it is really nice to have a very comprehensive tool built right into the server.  In a nutshell, here are the four big reasons I like the CF Server Monitor:

1. Lots of key performance data on one screen
2. Monitor multiple servers on one screen
3. System snapshots taken at times of crisis
4. Alerts

So the 8.0.1 patch for Coldfusion has been out for a while now, since Spring actually.  Well, I finally got around to patching our servers and what do you know, I download the patch and it is named, “coldfusion-801-lin_updater.zip“.  I thought that was odd considering my recolection is that ever since I’ve been working with Coldfusion (since about 2002) the Linux patches have all been executable .bin files.  So I go and extract the zip file and it dumps with the following directory structure:

Click for larger picture

It certainly looks like something you would maybe extract into your Coldfusion directory, except that I don’t recognize any of the folder names.  Why else would you name the thing with a .zip extension?? After all, the windows patch was named with a .exe extension and of course, you can’t “unzip” it so no confusion there. 

I looked all over but there were no instructions?!  I then googled for applying the patch under Linux and posted in the Adobe Coldfusion Forums.  Finally after a day and several hours wasted trying to solve this mystery, I found a post by Brian Love where he revealed that the .zip file is in actuality an installable script.  All you need to do is make it executable and launch it. 

I’d like to thank Brian Love for putting an end to my consternation, and I’d also like to ask Adobe, “Why?!”.

Continuing my work towards a very simple Flex 3/Coldfusion CRUD tutorial, I’ve completed my installment covering adding a new record to a database.  Lets go:

For starters, I am using the same Coldfusion Component I have used in all of my examples.  This time I have added a method called InsertEmployee to insert new records.  The complete CFC now looks like this:

<cfcomponent>
   <cfset dataSrc = “mydatasource”>

   <cffunction name=”InsertEmployee” access=”remote” returntype=”void” output=”no”>
      <cfargument name=”firstName” required=”yes” type=”string”>
      <cfargument name=”lastName” required=”yes” type=”string”>
      <cfargument name=”officePhone” required=”yes” type=”string”>
       <cfquery name=”addEmp” datasource=”#dataSrc#”>
         INSERT INTO employees (firstName, lastName, officePhone)
           VALUES (‘#firstName#’,'#lastName#’,'#officePhone#’)
      </cfquery>
   </cffunction>

   <cffunction name=”FindAll” access=”remote” returntype=”xml” output=”no”>
       <cfquery name=”getEmp” datasource=”#dataSrc#”>
         SELECT firstName, lastName, officePhone, id
           FROM employees
      </cfquery>
      <!— Convert Query to xml —>
      <cfprocessingdirective suppresswhitespace=”Yes”>
      <cfcontent type=”text/xml; charset=utf-8″>
      <cfxml variable=”xmlobject”> �
      <response>
         <data>
      <cfoutput query=”getEmp”>
         <row>
            <id>#id#</id>
            <firstName>#firstName#</firstName>
            <lastName>#lastName#</lastName>
            <officePhone>#officePhone#</officePhone>
          </row>
      </cfoutput>
         </data>
      </response>
      </cfxml>
      <!— Convert back to a string —>
      <cfset myvar=toString(xmlobject)>
      </cfprocessingdirective>
      <cfreturn myvar>
   </cffunction>
</cfcomponent> 

Now we just need our MXML application.  I’ve created a very simple form, nothing more.  It beings with our opening <mx:Application> tag followed by the actual form:

 <mx:Form width=”279” x=”24” y=”24“>
<mx:HBox horizontalGap=”8“>
  <mx:Label text=”First Name “/>
  <mx:TextInput id=”firstName“/>
</mx:HBox>
<mx:HBox>
  <mx:Label text=”Last Name “/>
  <mx:TextInput id=”lastName“/>
</mx:HBox>
<mx:HBox>
  <mx:Label text=”Office Phone“/>
  <mx:TextInput id=”officePhone“/>
</mx:HBox>
  <mx:Button label=”Submit” click=”clickHandler()”/>
</mx:Form>

Nothing special here, I’ve placed each Label and Textinput inside their own HBox only because that is now I saw it done someplace else.  Layout really means nothing for this example so lay it out however you want, you really only need the start and ending <mx:Form> tags and the <mx:TextInput> tags. 

Next we call our web service which is our Coldfusion CFC listed at the top of the article:

<mx:WebService id=”userRequest” wsdl=”http://brad.melendy.com/projects/webservice/employees.cfc?wsdl“>
  <mx:operation name=”InsertEmployee” fault=”mx.controls.Alert.show(event.fault.faultString)”/>
</mx:WebService>

Notice that in this case, rather than passing the method name in the URL with the <mx:HTTPService> tag, I’m using the <mx:WebService> tag, passing the web service in WSDL format and telling it the method to execute in the <mx:operation> tag. 

The last step is our ActionScript:

<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function clickHandler():void {
userRequest.InsertEmployee(firstName.text, lastName.text, officePhone.text);
firstName.text = "";
lastName.text = "";
officePhone.text = "";
Alert.show('Record Inserted!', 'Alert Box', mx.controls.Alert.OK);
}
]]>
</mx:Script>

 The only code library I import is mx.controls.Alert for my confirmation alert at the end of the script.  Then I simply call the InsertEmployee method from the userRequest object, passing the text from my three TextInput controls.  Next I blank out the contents of each TextInput and finally pop an alert that the record has been inserted.  The result produces this form:

This is very simple, there is no error trapping or validation as we are just demonstrating the act of getting a record from a Flex form into a database using Coldfusion as the server side platform.  You can see the results here:

According to cnet news, Adobe has announced a release date of September 23rd.  I couldn’t find any press releases, but it looks like there won’t be long to wait for the final product if cnet is accurate.  The beta should still be good for 30 days after the release of the final product which I have been using solidly for the last week and a half.  So far it looks like I’ll be upgrading on the 23rd.

The new Google browser, Chrome, is said to be released in Beta in over 100 countries today according to an official announcement.  I’ll be eagerly awaiting it for the following reasons:

1. It is supposed to be faster
2. It is supposed to be more secure
3. It will be open source
4. Tabs or windows will run as multiple processes (if one tab locks, your others won’t crash)
5. Separate JavaScript threads

There is more, but these are the big items for me.  It all spells a better browser, more stable and most important, when I have 8 tabs running, and one hangs, I won’t lose everything else!  Anyway, I’ll be checking for the beta the rest of the day. 

9/2/2008 12:53 PM PDT UPDATE: Chrome is now live.  You can get it here:

http://www.google.com/chrome

I’ve been evaluating various AJAX libraries lately, trying to determine which we’ll use for an upcomming project, one that will be our first foray into an AJAX based application.  I’ve looked at Adobe SPRY but most recently took a look at YUI (Yahoo User Interface).  Specifically I’ve been looking at how easily DataGrid or DataTable controls can be used. 

The YUI DataTable control is currently in a BETA release at the time of this writing.  Even so, it seems pretty complete and solid from my perspective.  In this example, I’m going to read the same dynamically generated XML I have used in my previous examples.  It could be static XML, but I’m generating data from a MySQL database using a Coldfusion CFC.  Lets get started.

One thing I like about YUI is that Yahoo will host all the libraries, requiring that you only include the libraries you need.  In this example, we’ll include the following style sheets and YUI libraries:

<link rel=”stylesheet” type=”text/css” href=”http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css” />
<link rel=”stylesheet” type=”text/css” href=”http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css” />
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js”></script>
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js”></script>
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js”></script>
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js”></script>
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js”></script>

 I won’t break down what each library is responsible for, these are the libraries and style sheets that were used in the Yahoo example.  Just include them in the <HEAD> section of your HTML.

We need to tell it where to display the actual output.  In this case, we will use a div with id localxml:

<div id=”localxml”></div>

Next, we have the javascript that calls upon and uses the various functions from the above mentioned libraries:

<script type=”text/javascript”>
YAHOO.util.Event.addListener(window, “load”, function() {
    YAHOO.example.Local_XML = new function() {
        this.connectionCallback = {
            success: function(o) {
                var xmlDoc = o.responseXML;
                var myColumnDefs = [
                    {key:"id", sortable:true, formatter:this.formatUrl},
                    {key:"firstName", sortable:true, formatter:this.formatUrl},
                    {key:"lastName", sortable:true, formatter:this.formatUrl},
                    {key:"officePhone"}
                ];
                this.myDataSource = new YAHOO.util.DataSource(xmlDoc);
                this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
                this.myDataSource.responseSchema = {
                    resultNode: “row”,
                    fields: ["id","firstName","lastName","officePhone"]
                };
                this.myDataTable = new YAHOO.widget.DataTable(“localxml”, myColumnDefs, this.myDataSource);
            },
            failure: function(o) {
           }
        };
        this.getXML = YAHOO.util.Connect.asyncRequest(“GET”,
                “http://brad.melendy.com/projects/webservice/employees.cfc?method=FindAll“,
                this.connectionCallback);
    };
});
</script>

Now, there are a couple KEY spots here you must update for each XML document you plan to read into the DataTable:

1. You must define the structure myColumnDefs to match your own XML document.  In this case as you can see above, our key headers are id, firstName, lastName and officePhone.  Also make note of the sortable:true argument.  These items will toggle asc/desc sorts on click.
2. You must update the resultNode in the responseSchema to reflect the proper value from your XML document.  In this example, the name of our node is row. 
3. You also must update the fields element of the responseSchema to match the values you outlined in myColumnDefs.  These are the same as item one above. 
4. The last step is to update the asyncReqeust() function value, second argument to the location of our XML document.  This can be a static XML document residing on the local web server (relative path) or it can be a fully qualified URL as in our example above. 

That’s it really.  Once you have this in place and fire it up, you should see a very nicely formatted data table/grid:

http://brad.melendy.com/projects/ajax/yui/yui_data3.cfm

I wasn’t able to embed the sample in this post without the WordPress CSS breaking the YUI CSS so you will have to click the link above. 

I found Adobe SPRY to be a little faster to develop using Dreamweaver, however, YUI is nicer on the eyes with a lot of readily available style sheets.