Latest version

• When using the component as an item renderer the sizing is sometimes messed up
• Prevented a toolTip from appearing when selecting an item
• Resolved tab focus issue when using the component in a Flex 4 project

One other change in this release is that all private methods and properties have been changed to protected. Minor changes should no longer require using the sourecode.

Best,
Hillel

While there are a few possible causes, the post discussed how a lack of understanding of the Flex component creation lifecycle could be a possible culprit. While everything in the post is still technically accurate (for Flex 3) I find that I often just use bindings if I need to set a property of a child component.

So… here’s the fourth way to solve the problem (at least for simpler use cases).

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[

			[Bindable]
			public var buttonLabel:String;
								
		]]>
	</mx:Script>

	<mx:Button id="button" label="{ buttonLabel }"/>

</mx:Canvas>

I realize this is pretty obvious to most Flex programmers, I just wanted to clarify for people who are new to Flex and are finding the old post.

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 );
}

I was fortunate enough to have the opportunity to speak at the event last year. I had a great time, there were a ton of really talented Flex developers at the conference.

Here’s the blurb for my presentation:

Architecting scalable Flex applications using Parsley & Cairngorm 3: Requirements will always change, the applications we build need to be able to roll with the changes. This session will cover using the Parsley framework along side Cairngorm 3 best practices to build well structured scalable applications. Topics covered include the MVCS pattern, dependency injection and the presentation model, plus I’m sure some random Flex tricks along the way.

Hope to see you there

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

If you’re looking to understand how to architect your application I can’t recommend strongly enough reading the Cairngorm 3 documentation.

http://sourceforge.net/adobe/cairngorm/home/

The name is a bit misleading. Rather than being the next version of Cairngorm (which was the first major Flex framework) it’s a collection of best practices along with a set of libraries which guide developers to build scalable applications.

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

• 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

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

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.

• Demo
• Download

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