I recently presented a short beginner's workshop for the The Inland Empire ColdFusion User Group.  In the workshop we created a simple application that displayed hypothetical tracking data.  Through this application we covered many basic Flex topics and techniques, and I thought I would provide the files for anyone who wants them.  Download them here.

Here is a list of files you'll find the in ZIP folder, and a brief summary for each:

1. tracker_start.mxml - view
   • This is where to get started.  With only 2 lines of mxml code, we create an application that displays all our data to the user. Pretty cool!  The sample XML data has been provided for you in the data folder.
     
2. tracker_filters.mxml - view
   • This is the second file in the workshop.  Now that we are displaying the data to the user, we need to make it more usable. We want to make it easy for users to find the information they are looking for.  So, in this step we use the ArrayCollection's built in filterFunction capabilities to allow the user to easily and effeciently filter through the data. 
3. tracker_charts.mxml
   • This is a charting component that will be used in the next step, the tracker_states application.  It charts the popularity of all the processes in our data.
4. tracker_states.mxml - view
   • The third application in the workshop, in which we create a second state.  In this new state we add the tracker_charts component, giving users an alternative representation of the data.
     
5. tracker_styles.mxml - view
   • The final step, in which we turn our bland, boring application into something more presentable.  All we do in this step is add a wonderful theme from ScaleNine.
     
6. tracker_remoting.mxml
   • This file does not actually create a viewable application, it is just a reference file.  It is an example of how Flex can connect to ColdFusion; an alternative to using the Model data that we used in the preceeding applications.
7. data folder
   
   • Contains the XML data used in all applications.
     
8. assets folder
   
   • Includes the theme that was used in the tracker_styles application.

Copy the files into the src folder of your project and give it a crack.  I hope you find them useful.

I'm a big fan of optical illusions.  I love how your eyes and your mind don't always agree on things, and this is a great illustration of that. 

In the picture below, square A and square B are the exact same color. You may find this hard to believe; I still do when I look at it, but it's true.  To prove it, take any image program or a colorpicker, like ColorZilla, and compare the colors.  ColorZilla shows that both cells are the color #787878.  Furthermore, I took this image into PhotoShop, cut out square B and overlapped it over square A... guess what? They match.  Click here to see the results.

Can you get your eyes to see the truth?

Although I love Flex, it can still be a bit buggy at times. I was working with an itemRenderer the other day and came across some very odd behavior. I had a list using an itemRenderer and when the data originally loaded everything was fine, but whenever I scrolled some of the data started disappearing. You can see this demonstrated in the sample below.

Apparently, Flex likes to have all the items in a list the same height; so when an item such as the Text field in the example causes variation, Flex simply doesn't display it. I found that the easiest way to remedy the issue was to set explicit heights for the items in the renderer. Here is an example of how it works with the height explicitly set:

Now, this isn't a perfect solution. What we are doing here is effectively the same thing as setting variableRowHeight to false; thus making all the items in the List the same height. So if anybody has a better solution for this issue please let me know.

Sometimes it's hard to figure out even simple thing in a proprietary language like Apex. So here is a simple solution to a common problem.

How do I replace string elements using Regular Expressions in Apex?

//create expression as Pattern
Pattern dollarPattern = Pattern.compile('[,$]');

//replace all occurrences in a string
dollarPattern.matcher('$1,250.25').replaceAll('')

You need to use Apex's Pattern class to create the regular expression. Then you can replace all matches in the string using the replaceAll() method.

This example takes a dollar formatted string ($1,250.25) and removes the dollar sign and comma to turn it into a number. The result would be 1250.25, perfect for database insertion or what have you.

There are occasions when you need to programmatically determine if a List or DataGrid has enough rows to require ScrollBars. If your DataGrid, for example, does not have an explicit rowCount or height specified, then it's not as easy as looking at its data provider.

The easiest way I've found it to use the "maxVerticalScrollPosition" property, which the Flex 3 Language Reference describes as:

"The maximum value for the verticalScrollPosition property. Note that this is not the height of the content because the maxVerticalScrollPosition property contains the height of the content minus the height of the displayable area."

So if the the maxVerticalScrollPosition is greater than zero, then scrollbars must be available.

if(myDataGrid.maxVerticalScrollPosition > 0){
   // is scrollable
}else{
   // not scrollable
}

If anybody know of an easier or more efficient way of determine if a List has ScrollBars, please let me know.