AutoComplete added to Github

I’ve been spending much less of my time these days coding in Flex and as a result haven’t done much work on the AutoComplete component. I realize many people (including myself) still use the component in production applications so it’s important that it continues to be maintained.

I’ll be the first to admit that I should have done this a while ago, but… I’ve finally added the source code to Github.

https://github.com/hillelcoren/flex-autocomplete

If you resolve any bugs or implement any features please send me a pull request and I’ll merge in your changes.

Latest project at work

For the past 8 years I’ve had the great pleasure of working for M5 Networks, a market leader in cloud-based phone systems (if your company is looking for a new phone system definitely get in touch).

One of the many great features we provide is the ability to create call flows to efficiently direct incoming calls. This tool provides a visual display of the call flow and allows the user to easily make changes.

The application makes extensive use of my AutoComplete component, as well as the excellent Flare visualization library.

In my opinion this is exactly the sort of application where Flex excels. I’m hopeful that the Apache Flex project can help keep Flex as a leading choice for web-based enterprise applications for years to come.

Flex AutoComplete: Version 1.2

I’m just wrapping up a Flex project which used the component extensively. Along the way I noticed a number of reasonably serious bugs which this update fixes.

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

Flex Error #1009: Cannot access a property or method of a null object reference (update)

A couple of years ago I wrote a post discussing the Flex error #1009 (cannot access a property or method of a null object reference). If you’ve done any serious amount of Flex coding I’m sure you’ve run into this error a number of times.

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.

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

Come hear me speak in Tel Aviv (again)

If you’re anywhere near Tel Aviv on February 22nd & 23rd, come out and hear me speak at Flash Israel.

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

 
Flash Israel 2011

 

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

Flex Resource: Cairngorm 3

One of Flex’s greatest blessings is also its biggest curse: it’s quick & easy to throw together a working app. The problem which needs to be avoided though is that it’s too easy to end up with huge mxml files which contain all of the application logic.

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.

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