Flex Gotchas

On the whole, one of the aspects I like most about Flex is that it generally works the way you expect it to. That being said there are definitely certain things which don’t quite work as expected.

Corner Radius

This is actually what inspired me to write this post. I’m a fan of rounded rectangles (add a vertical gradient and a drop shadow and you’ve got a classic Web 2.0 look). I’d expect this to do the trick.

<mx:Box backgroundColor="#888888" cornerRadius="8"/>

However, to make it work you need to set the borderStyle property

<mx:Box backgroundColor="#888888" cornerRadius="8" borderStyle="solid"/>

Hand Cursor

A similar example is when trying to show a hand cursor. I’d expect this to work.

<mx:Label text="test" useHandCursor="true"/>

However, you need to use the following

<mx:Label text="test" useHandCursor="true" buttonMode="true" mouseChildren="false"/>

SWF Caching

This is more of a Firefox bug, however if you rely on the browser to handle caching the SWF (and updating when a new SWF is created) you’ll run into problems in Firefox. The best solution I’ve found so far is to convert the html wrapper file into a PHP script (any scripting language should do). You can then add the following to the SWF name.

?checksum=<? echo md5_file("__SWF_file_name__") ?>

Binding

I’ve written about this before but it’s caused me enough trouble that it’s worth repeating. If there are null errors inside of a function used in binding the Flash player will swallow them. It needs to do that as binding expression will often have null errors (ie, if you bind to person.name and person isn’t yet set). However, this can be very confusing.

Copying Objects

A really useful function is ObjectUtil.copy(), it will make a deep copy of your object. However, in order to use it you need to first register any classes which your object is composed of. Here’s the code I use.

for each (var classRef:Class in [ Class1, Class2, etc... ])
{
	var className:String = getQualifiedClassName( new classRef()) ;
	registerClassAlias( className, classRef );
}

Flex AutoComplete: Version 1.1

It’s been well over a year since I released the 1.0 version of the component. Since then I’ve received countless emails/comments with feature requests and bug reports. This new release addresses all of the major issues.

Latest version

Here’s what’s new:

  • Full support for Flex 4: The component now supports Flex 4 100%. The demo has been rebuilt using the Flex 4 SDK
  • Added allowEditingSelectedItems property: You can now enable making changes to items once they’re selected.
  • Added delimiter property: When allowing the user to select multiple items you can now specify which character to use as the delimiter.
  • Added clearSearchOnFocusOut property: This enables specifying whether the search text should be cleared on focus out
  • Added clear method: Makes clearing the selection much simpler
  • Better overall usability

In addition, I’ve also fixed a number of critical bugs:

  • Fixed problems when binding to the AutoComplete’s values
  • Fixed issue where setting selectedItem multiple times would fail
  • Fixed problem where allowDuplicates didn’t works for objects
  • Resolved issues when using with Validators
  • Improved garbage collection performance
  • Resolved issues when using an XMLListCollection as the dataProvider
  • Does a better job handling invalid data
  • Fixed issues related to using the tabIndex property
  • Other bug fixes and tweaks..

Best,
Hillel

Come hear me speak in Tel Aviv

I’ll be speaking at Flash and Flex Israel on Sunday, April 25th.

Here’s the blurb for my presentation

Flex in the Trenches – This session will cover a variety of topics to help you transition from a beginner/intermediate Flex programmer to an advanced one. Topics will include resolving common performance issues, making your apps look pretty, effective use of the Flex DataGrid/ItemRenderers, getting compilation times down, plus more…

Mihai Corlan, a Platform Evangelist with Adobe will also be speaking. His blog has an excellent list of Flex frameworks and libraries which is definitely worth checking out.

Best,
Hillel

Flex Builder Shortcuts

I find that good keyboard shortcuts can save me a ton of time. Here are some of my favorites for Flex Builder (note: these can all be customized in the preferences).

  • F11: Debug last launched
  • Ctrl + Shift + R: Open Resource
  • Ctrl + O: Quick Outline
  • Ctrl + F7: Next View
  • Ctrl + F8: Next Perspective
  • Ctrl + Shift + L: Key Assist

Hope you find these useful,
Hillel

Flex Tip: Two really useful tools

I was just introduced to two incredibly useful tools.

FlexPMD helps to improve code quality by auditing any AS3/Flex source directory and detecting common bad practices.

fxSpy allow you to inspect and dynamically change most properties and styles of the visual components in your Flex application. You can – for example – try out a specific width or a background color for your component before changing it in your code.

If you haven’t yet seen them I highly recommend checking them out.

Best,
Hillel

Import, Export, Copy & Paste Flex DataGrid

In addition to searching, two common features implemented in DataGrids are import/export and copy/paste. There are a number of great solutions already out there. The purpose of this post is to show how we can bring them together (along with some additional code/tweaks) to provide the user with a DataGrid which plays nicely with their favorite spreadsheet application.

Overview of demo

  • There are three ways to copy the selected items from the left DataGrid: using the “Copy” button, pressing Ctrl+C or right clicking and then selecting “Copy Item(s)”.
  • The copied data is stored in tab separated format, when pasting it into a spreadsheet it will retain its column structure.
  • To paste data into the right DataGrid give it the focus by clicking on it and then press Ctrl+V.
  • Click “Import” to upload either a CSV (comma sperated) or TSV (tab separated) file.
  • Click “Export” to generate a CSV file of the data in the DataGrid.

Import/Export

In Flex 3, in order to upload a file you need a small script on the server (in Flex 4/Flash 10 the client is able to handle this locally). Included in the source you’ll find two PHP files: csvImport.php and csvExport.php. To support exporting the data from the DataGrid I’m leveraging a nice algorithm written by Sasa Radovanovic explained in this post.

This solution is meant to work with plain text csv and tsv files, if you need to support Excel (.xls) files I’d recommend checking out as3xls.

Copy/Paste

One of the limitations of the Flash Player is that (for security reasons) we’re unable to access data from the user’s clipboard. This makes pasting rather tricky. Manish Jethani has documented a clever solution in this post where he uses a hidden text field to allow the user to paste data into a DataGrid.

Field Mapper

This component provides the user with a way to map the columns in the data to the properties of the objects. It will attempt to determine if the first row of the data looks like it should be a header row and will then try to automatically map the fields.

Hope you find this useful,
Hillel