Brad Melendy

So the Dreamweaver CS4 beta is freely available at the time of this writing.  If you have a previous version of Dreamweaver, you can use the serial number to get a special BETA serial that will be good for up to 30 days AFTER CS4 is released.  I’ve been using CS4 for about 4 days now and I must say, I’m very happy with it.

You may have read my previous post regarding Dreamweaver CS3 and the terrible performance I have gotten from it.  It was so bad that I’ve never really gotten into CS3 or what it can do.  So far, I have had none of those problems with the BETA of CS4.  In fact, I’ve been using the BETA as my primary coding tool these last few days.

CS4 sports a new look, as did CS3.  Over the years, I found UltraDev to be quite different from previous versions, and then Dreamweaver MX and MX 2004 seemed pretty much the same.  CS3 had a new look but was still pretty close to the MX versions.  CS4 looks like alien software by comparison.  It also has so many default layouts that until you find what you want, it feels a little cumbersome.  In the end, I created a new workspace layout and named it “Brad”.  It is a cross between the Coder and Classic layouts and none of the default layouts completely matched what I was use to in Dreamweaver 8 or what was available in CS3.

Of the new features in CS4 my favorite are the addition of Adobe AIR Authoring and Subversion integration.  I recently got a copy of FLEX Builder and have been learning that, but before I wondered what I could use to do AIR development if I wasn’t already using FLEX?  Now you can use Dreamweaver.

As for Subversion integration, it isn’t as full featured as Subeclipse, but it is a welcome enhancement.  With CS4 behaving the way it has and basic Subversion support, I feel like I can continue using Dreamweaver. 

This was the next step toward a FLEX crud application that I wanted to document.  I find that in addition to potentially helping others to learn, I retain much more when I spend the time to explain how these things are done.  So today, we will read the XML I produced using Coldfusion in my previous posting and display it in a Flex DataGrid control.  So lets get started. 

I’m going to assume you know how to start up Flex Builder and create a new Flex project or MXML application.  We have three core steps to populate our DataGrid;

1. Call our XML document via the Flex HTTPService 
2. Add our DataGrid control
3. Write some ActionScript to pump the data from the HTTPService into the DataGrid

So get to a new MXML document and we’ll begin by adding our HTTPService after your opening <mx:Application> tag.  It should look like this:

 <mx:HTTPService result=”handleXML(event);” id=”xmlGet” resultFormat=”e4x” url=”http://brad.melendy.com/projects/webservice/employees.cfc?method=findAll” />         

I’m using the XML trailing slash notation because I don’t have any arguments to pass.  If I had arguments to send, I’d need to include them between opening and then a closing </HTTPService> tag.  Here we have only a result function (yet to be written), an id by which to reference the HTTPService (make up your own name), resultFormat which needs to be “e4x” and finally the URL.  e4x will give us all the pre-built functions Flex has for working with XML. The URL is straight forward enough.  In my case, I’m referencing a Coldfusion Component that generates XML on the fly from a database.  It could just as easily be a static XML document residing on a web server. 

Next, add your data grid control which will look like this:

<mx:DataGrid dataProvider=”{employeeInfo}” width=”400” height=”200” id=”employeeList” editable=”false” enabled=”true“>
  <mx:columns>
    <mx:DataGridColumn headerText=”First Name” dataField=”firstName” />
    <mx:DataGridColumn headerText=”Last Name” dataField=”lastName” />
    <mx:DataGridColumn headerText=”Office Phone” dataField=”officePhone” />
  </mx:columns>
</mx:DataGrid> 

 Notice I already have a dataProvider.  It doesn’t yet exist, but I know that is what I am going to name it when I create it and I don’t really want to post duplicate lines of code save for one minor change.  I already know what my XML document looks like and that I have three elements, First, Last and Phone.  I tell it the width and height I want for my grid, it won’t be editable and it will be enabled.  So lets create the dataProvider employeeInfo we just referenced in our DataGrid.

At this point we need some action script to funnel the data from our XML to the DataGrid.  Lets examine the following code:

<mx:Script>
  <![CDATA[
  import mx.rpc.events.ResultEvent;
  [Bindable]
  private var employeeInfo:XMLList;
  public function handleXML(event:ResultEvent): void
    {
      employeeInfo = event.result.data.row as XMLList;
    }
  ]]>
</mx:Script>

Here we do several things, we import mx.rpc.events.ResultEvent as we need that for the HTTPService “result=” argument, which is how we instruct the service what action we want it to take once it has read in our XML.  Next we create a bindable private var employeeInfo of type XMLList.  In our only function called handleXML, we pass it the result from our HTTPService which is dealing with an XML formate “e4x” and will be held in employeeInfo as XMLList.  Now you see our dataProvider, employeeInfo of type XMLList. 

NOTE: you must know the names of the various nodes in your XML document so you can properly assign the node that has your records in it.  In this case, it is “data.row” making the complete assignment line, “employeeInfo = event.result.data.row as XMLList;”.

 Our last and final step is adding an argument to our opening <mx:Application> tag.  We need to use creationComplete=”" to tell our application what to do when it loads.  Here is what the <mx:Application> tag should look like:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” viewSourceURL=”srcview/index.html” creationComplete=”xmlGet.send();”>

creationComplete will execute “xmlGet.send();” on application load.  In this case, xmlGet is the id of our HTTPService and we tell it to execute the existing send() method which tells it to get the XML in our URL.  The result agument of the HTTPService then calls the handleXML() function which finally creates the dataProvider for our DataGrid control.  The DataGrid control just waits for data to come in from the dataProvider and finally we get a nice grid of data:

The source code is available here.  This is a very simple example, but I wanted to break it down to a very low level.  Getting data and sticking it in a DataGrid is probably one of the most basic, yet most used tasks in Flex applications.  Next I’ll write up inserting data.

If you haven’t heard of Thermo yet, keep an eye out for it.  It promises to take RIA GUI design to the next level.  It is built on the Flex platform and will facilitate code generation through graphical means.  The way I understand it you will be able to graphically work through the design of a new RIA application and Thermo will generate working code along the way, all while you drag and drop objects onto your application canvas. 

I for one am eagerly looking forward to Thermo because I see GUI design as a weak spot for the current edition of Flex Builder.  I think a tool like Thermo will let you generate a great deal of your application, after which, you will go back in with Flex Builder and customize or fine tune your application.

As I have been delving into AJAX libraries and posting some articles, I realized that I needed to go back and cover the foundation of getting data into an AJAX application, the XML that holds your data.  For this you should be using a CFC (Coldfusion Component).  So lets begin:

1. For starters, you will need your database.  In my case, I’m using MySQL but it could be anything that Coldfusion can connect to.  Here is my schema:

DROP TABLE IF EXISTS `dbname`.`employees`;
CREATE TABLE  `dbname`.`employees` (
  `ID` int(10) unsigned NOT NULL auto_increment,
  `firstName` varchar(45) NOT NULL default ”,
  `lastName` varchar(45) NOT NULL default ”,
  `officePhone` varchar(45) NOT NULL default ”,
  PRIMARY KEY  (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=latin1;

In this example, my database is named “dbname” and my working table will be “employees”.  Once you have your database, I’ll assume you know how to add some test records to it.  I only have a dozen or so records in my own. 

2. Now that we have our Database, we need to access the data.  With contemporary CFML coding, you should use a CFC and store methods that that do the reads and writes to your database.  Here is my very basic CFC that has a single method to lookup records:

<cfcomponent>
   <cffunction name=”FindAll” access=”remote” returntype=”xml” output=”no”>
       <cfquery name=”getEmp” datasource=”datasource_name”>
         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>

You will notice that the CFC has a single method named, “FindAll” and that this method (or function) has two parts, the CFQUERY that looks up the result set, and then it loops over the results inside the CFXML tag.  You can see that I’m actually including the XML tags that label our various nodes and elements of the XML document.  You will also notice the use of CFCONTENT which sets the type to “text/xml” and also sets the charset to “UTF-8″. 

NOTE: It is important that the value you set in CFCONTENT matches the charset that is autodetected by your browser.  If your browser detects UTF-8 and you set it manually to UTF-16 in the CFCONTENT tag, it won’t work in all browsers. 

I should also mention that this is one of several ways to come up with an XML document and it just happens to be the method that seems to be the most compatible for me. 

Once you have your CFC completed, you can test it by calling it directly in your browser.  You can call mine like this:

http://brad.melendy.com/projects/webservice/employees.cfc?method=FindALL

I think that is it, you should have a nicely formatted XML document pop up in your browser (at least IE or Firefox, I’m not sure how the others do it).  Now you are ready to move on to reading XML with an AJAX library.  Wherever your AJAX library wants to know the name of the XML document to read, just give it the URL to your CFC like the example above and you’ll be displaying data in realtime from your database.

Did you know that the Coldfusion 8 extensions are not standard in Dreamweaver CS3? I didn’t until I noticed I didn’t get context sensitive help for the <CFZIP> tag. It just lie there grey and dead. However, it is easy to get up to date. You can download the extensions for CF 8 here and install them with the Extension Manager. This will provide support for all the new tags available in Coldfusion 8.

So there was a great article in the August Dr. Dobbs about developing RIAs with Flex and Coldfusion by Joe Rinehart.  I think the coolest thing beyond it being a very good article was that I’ve never seen Coldfusion make the cover of a prominant development journal that covers development in general.  Anyway, it was a good read so I suggest you have a look.