Uploading files with Flex
To upload files with flex you need to use either the FileReferenceList classes, the main difference between these two is that FileReference is for uploading single files and FileReferenceList allows multiple file uploads.

Issue 1: How to send other data, such as meta/model data with the file upload:

Say you want to upload an image and save that using Rails along with other model data for that image (such as a title etc.) then you’ll have to hack that into the request that FileReference sends.

This Adobe tech note recommends using the uploadDataFieldName argument of the upload() method, however to me this seems like a really awful hack as you’ll then have to parse the name/value pair string in your uploadDataFieldName param at the backend. What you really want is separate parameters (ideally within the POST body).

The only viable solution I could come across was using the query string to pass the parameters through, your mileage may vary on this depending on the parameters you are sending, but I’m pretty sure that no modern browsers enforce the 255 character limit on a URL anymore.

Issue 2: Session cookie not sent in Firefox:

This problem is explained really well over at Thanks Mister!, it may apply to other browsers (probably the other gecko-based browsers work the same) but quite simply it means that if you’re relying on some data in your session during the upload you need to manually pass the session cookie through, however this raises further issues with Rails, so I’ll break it down further.

Issue 2: Part 1 — Passing the cookie when uploading files with FileReference:
It’s fairly simple to get around this part of the problem, you just need to include your session identifier within the query string, the biggest issue with this is getting the cookie value — as Flash doesn’t have native access to the browsers cookies.
To get the cookie you’ll need to use the ExternalInterface to call some JavaScript to retrieve the cookie, this is covered quite nicely in this post. So when working with Rails we just need to retrieve the cookie that lives in whatever we’re using as the session ID and pass that through via the query string, but that brings us to another problem:

Issue 2: Part 2 — Rails won’t let you pass session ids in the query string:
So now we need to tweak Rails to let us pass the session id via the query string, luckily there is another great post on this, however some of the Rails 2 security improvements require further workarounds which are in the comments on that post.

To quickly cover what you need to do is as follows:

1. Add the patch (make sure you get the one for Mongrel/Apache linked at the bottom of the post) to the CGI::Session class to your application — it really deserves to live in a plugin rather than the environment.rb file, which you’ll have to roll yourself.
2. For Rails 2 you have to add another override by adding session :cookie_only => false at the controller level. I personally feel it is best to do this in just the controller that you’re using to upload the files with.
3. I still had issues with it not picking up my session — I was using the Rails 2 default of saving the session information in the cookie. There is probably another hack or change that I could make to get around this, but I chose to move (back to) Active Record sessions but this time using the Fast Sessions plugin for a bit of a performance boost.

   I’ll probably look into this again at a later date, but right now I just wanted to get this part working and move on.

So now we’ve got our file uploading to the backend, within our session and our other model/meta data being sent as well. “Great we’re done, what else could go wrong now?” is just the kind of thought you’d be forgiven for having. Of course there was another issue that came up which needed to be handled.

Issue 3: Attachment_fu and Flex file uploads

FileReference uploads all files with the MIME type of application/octet-stream which gives us a couple of problems:

1. Your attachment_fu content-type filter will probably reject all uploads out of hand – the easy hack would seem to be to add in the application/octet-stream to your acceptable content-types, but that’s an awful hack that basically removes the content-type filtering and doesn’t address our second issue.
2. If using attachment_fu to create thumbnails and you do accept the application/octet-stream MIME then you won’t have any thumbnails generated, because as far as attachment_fu is concerned your upload is not an image.

Again the solution was only a few searches away, and the changes covered in this post over at Vixiom Axioms do fix the issue — although note that I had issues with that fix and had to apply my own changes – see the comment on that post.

Conclusion

So finally we have file uploads working from Flex to Rails, our session information is maintained, we’re passing along our model data and our images are being handled as they are supposed to.

This really shouldn’t have been this difficult, it should have been a simple case of using FileReference add some data to be POSTed and we’d be done but alas decisions made in/or issues with the Flash player lead to this merry dance of hacks, tweaks and workarounds to make everything sing to the same hymn-sheet.

Hopefully covering this and collecting together these links will save someone else from a wasted day of figuring out the solution to the myriad of problems that I encountered.

The key changes are:

• Release has two downloads – one compiled to Flex 2.0.1 and one to Flex 3 – as it appears changes to Flex internals meant you couldn’t use the Flex 2.0.1 compiled swc in a Flex 3 project.
• Fixed: Issue where error thrown when no test results selected.
• Fixed: Issue where resizing columns could cause the itemRenderer for the status to display horizontal scrollbar.
• Added: Ability to choose whether to display test results live or wait until all tests complete (as displaying them live results in slower execution of tests, as it’s constantly updating the UI) – this is saved as a preference.
• Added: Ability to toggle display of the class path for the test case – this is saved as a preference.
• Added: Test result details now extract Expected & Was from message string for failures and display in a manner that is easier to compare.
• Changed: Test details now displayed on change rather than click event, to allow keyboard navigation of test results.

Head over to the FlexUnit Test Runner code page for all the downloads and to see the updated demo.

I was using the HBox as a wrapper as I wanted to be able to add other contents in there, such as and edit button and the actual editor and keep it all on one line.

Everything was working as expected, except for the fact that the FormItemlabel would not line up with the text in the textValue, I considered hacking it by adding some padding but decided to dig through the framework to figure out what was going on.

After lots of digging I found this in the FormItem:

So I did some investigating on my custom component and sure enough it didn't have a baselinePosition, which didn't make too much sense too me. So I started paring down the component until it centred with the label, it turned out that setting the verticalAlign property on the HBox was the cause of it not having a baselinePosition (I didn't dig into the reason why this was so).

So the moral of this tale is if you find your custom component doesn't line up with the label of a FormItem check your component has a baselinePosition.

• Component Class - Part One
• Component Class - Part Two
• Component Class - Part Three
• Component Class - Part Four
• Component Class - Part Five(Skins vs Styles)

This series takes you through creating a custom component in Flex with actionscript and he takes you through all the possible options (from extending an existing component from the Flex framework to starting with a clean slate by extending the UIComponent.)

As I'm still fairly new to Flex reading this exposed some new areas of Flex components to me, such as the commitProperties() and invalidateProperties() methods and also gave me more insight into the updateDisplayList() method.

This weekend I have been getting dirty at a low level with Flex creating some really customised components (and my first programmatic skins - which are really great to use once you get one under your belt) for a personal project and if I hadn't have read this series it wouldn't have half as easy as it has been.

I have used unit testing in a few different languages, so obviously when I started using Flex I wanted to start off on the right foot by using unit testing from the outset. However after a couple of days using the base runner which is provided with FlexUnit I found myself spending a lot more time than I thought I should just looking for the details of the problem in the flex runner.

So as usual I attempted to make something that would work a little better for my requirements, see the FlexUnit Custom Test Runner code page find the full details and the download. As usual any comments should be made on the code page.

I didn't have time to look at a work around during work hours as it really isn't a feature that is needed of our product, just something that annoyed me. So I decided that I would quickly knock a solution together at the weekend and then write up a short post of how it was done, in case other people wanted to find out how to do it.

However it didn't quite work out that way.

After a few frustrating hours I managed to get a fully working solution which I thought I'd share. You can read on for the story behind the component, or you can head straight to the FoxyComboBox code page to view the results.

So I sat down late Saturday afternoon and started poking through the source code for the ComboBox and its related classes (god bless Adobe for providing the source). I noticed that the listBase class (which the ComboBox uses for its drop down) has a method in there already to find an option by string, "fantastic this will be a doddle", I thought.

So I figured all I needed was to created an new List which overrode the keyDownHandler so we could build up a string to use as the search criteria (and reset it during a period of typing in-activity). Then it would be a simple case of using the new List as the dropDownFactory by extending the ComboBox.

That took a while to figure out after looking through the source code, but not that long to implement - and it worked, except for one problem: it only worked while the ComboBox option list was open.

This didn't make much sense, a bit of debugging and a lot of "Huh, why would it do that?", it seems the ComboBox gets a new drop down every time we try and change the selected index, unless the user has opened the drop down and selected an item. This wasn't going to work.

So my next attempt was to turn it on it's head, make the ComboBox the controller for this functionality, this isn't the best solution (in my opinion) but it was the only workable one I could think of.

A bit of refactoring later it worked, except now whenever the drop down was open and the user typed it would close as soon as we changed the selected index. This made no sense, the normal ComboBox wasn't doing this and I was calling the same findByString() method to select the item. I spent a bit more time digging through the source code and in the debugger trying figure out where it was being closed and why.

It turned out (and I had seen this earlier but glossed over it) that the keyDownHandler() in the ComboBox was setting a private property called bInKeyDown which if true stopped the dropdown_changeHandler() method from closing the drop down. Phew, that was a whistle stop tour of the inner workings of the ComboBox, hope you're still following along.

So I had to hack around further to emulate this functionality in as clean a way as possible in my custom ComboBox, as bInKeyDown is private. I did something very similar, but made my variable a bit more generic and protected rather than private - just in case I want to extend the FoxyComboBox later.

A bit of refactoring later it worked.

So what I thought would be a quick half an hour job turned out to be about 4 1/2 hours work and a new code release from me (as I don't want anyone else to have to suffer with this issue, either the end users of Flex or a developer digging through the ComboBoxto make a custom version with this functionality).

So if this is something you wish your Flex application could do, you can grab it now, I called it the FoxyComboBox (not very inspired, but my brain was a little fried by the end of it).

p.s. Those of you who have downloaded something of mine before will notice I've introduced a download page where I ask for a tip and give a suggested amount. In the case of the FoxyComboBox that is a measly $2, so I ask if you download it and find it useful please consider if saving yourself a few hours of time is worth $2, or maybe more :). Okay, that's the begging over with, enjoy.

So using the XML language file as a base I quickly knocked one together.

So what do I mean about being careful with your names, well today I had the following:

Which seems reasonable enough, however the compiler hated it, throwing me a 1202 error of "Access of undefined property testSteps in package testHelper.".

This seemed odd, the testSteps property definitely was defined, although I triple checked and recompiled, I tried new properties which all did the same thing. The one thing I did find that worked was the following:

This makes no sense, the compiler was telling me earlier that testSteps was not a property now it's happy, I tried playing around with my binded variable testSteps and declaring new variables (bindable and non-bindable) all to no avail.

I was at a loss, then I noticed that the id of the instance I'd created (testHelper) was the same as the package name that component lived in. Once I changed that everything compiled as expected.

This isn't the first time I've come across strangeness with naming in Flex, I suppose it makes some sense (although I'm not clear on why it only crapped out when using a bindable variable for one of the properties.

All-in-all I lost about 30 minutes to this issue so I thought it would be wise to share this to hopefully save others from the same issue.

First of all, wow, Ben Forta - so it was just a passing mention, but for anyone working in the CF or Flex development fields Ben Forta is a very important and influential figure. Secondly, I still find it amazing how quickly the web moves, I received the final copy of the interview copy in my inbox on Thursday afternoon and by Friday morning it had been picked up by Ben Forta and relayed to myself via Martin.

Finally the interview on Web Wire appears to have been edited a little, I'll try and get my hands on the original and post it here.

I simply spent the weekend watching the demo videos & running through all of the tutorials and then started to play around with the Coldfusion/Flex connectivity and believe I grasped a large amount of how to work with Flex 2.0 within that time.

I had looked at the Flex 1.5 examples previously but never took a look at their implementation, I understand that there have been substantial changes between 1.5 & 2.0 and the Flex Builder alone is a beautiful example of the power of the Eclipse IDE.

The power and simplicity of Flex itself is outstanding and I have 3 areas in mind at work where we could take advantage of Flex, combined with our existing Coldfusion domain models, and really see the benefits shine. Indeed I spent the following few days in work gushing about Flex 2.0 and all of it's benefits, which luckily was contagious with my colleagues, I guess this post is simply a continuation of that.

All I can say is I can't wait to get my hands on it for a full project, the potential of using Flex for a certain project that I have previously been apprehensive about has actually made me really excited about it.