Code Zen

Another one of the Flex gotchas…I spent way too much time on this only to have an adobe engineer himself answer this on the flexcoders mailing list:
I had created custom renderers for my list and it looked great. But there was a 2 pixel gap between the renderers that was driving me insane. After my own efforts went nowhere I asked the question on the flexcoders mailing list. The answer, use paddingTop and paddingBottom = 0 in your style. The Flex documentation on the 2 styles says “Number of pixels between the container’s {…} border and the {…} edge of its content area”. This is definitely not something I would read and use that property to manage my item renderers in a list. Ah well, now I know better :).

This tip is going straight to flextips.corank.com, a site dedicated to these weird gotchas and helpful hints. Do check it out and post your own tips there.

One thing that amazes me is that there isnt a site that aggregates tips on flex that developers find in the course of developing applications. With that in mind, I have just completed some work on my new site: flextips.corank.com. Running on the corank platform, the site essentially works like Digg (actually corank is a platform for creating Digg type sites). The idea is, if you find a good tip, link to it on flextips. I typically find a lot of value in people posting really simple tips that save me hours of investigative work.

Anyway so here is the model for the site:

If you find a cool tip on a website or post a cool tip on your blog, link to it on flextips.corank.com. Put it under one of the categories mentioned there (if anyone feels we need more categories, let me know). Tag it appropriately as well. For tags, use the name of the flex component or class this will affect.

When you come to flextips at other times (usually more than once a day 😉 ), give various tips a thumbs up or down. That way, the more important tips start surfacing above the trivial ones.

Please leave me some feedback on the project.

Cheers.

When using Drag-and-Drop enabled controls, you can use a public function called calculateDropIndex(event:DragEvent) to figure out where Flex will drop the element being dragged. This method is part of the ListBase class and is overridden for TileBase (which extends Listbase but is the superclass for containers that layout stuff horizontally).

Here is a quick tip for Flex newbies although I imagine this is something thats fairly obvious. If you want to change the complete dataset of an ArrayCollection, do not create a new ArrayCollection object pointing to the same variable(well you can, but it will kill all the databound controls that are listening to events on the ArrayCollection instance). Instead use arraycollection.source = [ … ] to repopulate the source value with a new Array. This will broadcast a CollectionEvent with the ‘kind’ property of the event set to ‘RESET’ and keep all the controls in sync. CollectionEvents are broadcasted everytime the values in an ListCollectionView instance are changed (ArrayCollections extend ListCollectionView).

I just saw this bug on an application I was working on where the controls kept getting out of sync with the core data in the ArrayCollection and this was the culprit ! The code looked something like this:

[AS]

[Bindable]
public var dataAC:ArrayCollection;
…
private function onDataLoaded(evt:Event){
dataAC = new ArrayCollection(parseIntoArray(evt.data));
}

[/AS]

So everytime the new data came in, databinding was destroyed. The correct solution should have looked like:

[AS]

[Bindable]
public var dataAC:ArrayCollection = new ArrayCollection;
…
private function onDataLoaded(evt:Event){
dataAC.source = parseIntoArray(evt.data);
}

[/AS]

Hope this saves some time for someone 🙂