Category: Flex

Like I had mentioned in my earlier post, the Flex team at Comcast Interactive Media in undergoing a training for three days on all things Flex with Jeff Tapper (of the Adobe Flex Training from the Source book fame). I have been in and out for the most part but the team seems to have absorbed a lot.

Here is a quick list of things that I learnt:

Using [style] metatags to create accessable styles:
By just putting the [Style] tag, you can make the styles available to you (well, more visibly anyway). You can also add the inherit=yes value in the style definition and the style will get picked up from the parent’s style values. Something a lot more interesting that I was looking for is the StyleManager.registerParentSizeInvalidatingStyle method that forces the parent to measure itself when a style value could potentially grow the component to a larger value needing the parent to do the same.

Using BindingUtils and the ability to bind to events:
I have never done the latter (weird I know). However it seems if you but the bindable metatag with the event name on top of a function, that function is called whenever that event is fired. Since we didnt specify a target (source) of the event, does this event get fired anytime anyone fires that event? I am still not sure.

Using namespaced XML:
If an XML file has namespaced nodes, you cant access those nodes until you include that namespace in the XML definition. To do that you would create a namespace variable and then use that to reference the namespaced nodes:

For example

x:XML = …
var rdf:Namespace = new Namespace(“http://rdf……”)
var dirvalue = xml.rdf::Directories
Note the use of the ::

Using ASyncToken:
This is returned from the HttpService call. It acts as a token for the call and can be used to attach fault and result functions to. I have never used it. Interestingly the Flex source code doesnt including the rpc package so I have no idea how its created.

Event Lifecycle:
We saw the difference between the event.target and the event.currentTarget. Also what was really useful was figuring out the event.stopPropagation and the event.stopImmediatePropagation. The former stops the event from going anywhere up the Displaylist but if you have two event listeners added to the same displayobject, both will get the event if you only use stopPropagation, but if you use stopImmediatePropagation, you can intercept the event preventing it from going any further even to other listeners on the same node in the DL. This property can get more useful when you use event priorities to register listeners.

Modules
Ran through a simple example of using modules especially using the -link-report and the -exclude-externs compiler directives to make sure the modules only compile whats needed. Apparently this gets easier in Flex 3.

These are just my notes, since most of the other stuff we talked about I already know ;). More stuff here tomorrow.

I have seen a couple of posts recently from people looking for some information on integrating AS2 and AS3 code. I recently worked on a project that I ended up spending quite a few hours trying to get some things to work right so I figured I should post about it. Hopefully someone will find it useful.
So I wrote a Flex application that I was able to knock out fairly quickly. The core framework really made a lot of the grunt work disappear and I was pretty pleased with what I had. It was only when I was done with the application itself was I informed that the application was supposed to be loaded in an AS2 swf. Ah well, I could always loadmovie it.
Wrong.
AS2 swfs cannot loadmovie AS3 swfs. I guess the swf headers dont get recognized by the Flash Player and the AVM2 doesnt startup. So we had to find a workaround to that. I was hoping Javascript popups would work but that was unacceptable user experience. So we went back to the drawing board. The other option seemed loading the existing AS2 base swf using an AS3 basic loader as the root. It worked well for a few initial scenarios but soon hit a wall since there were _root references all over some of the AS2 code and the root loader killed all that functionality (For those who still do so, please STOP using _root in your code !!!).
Just when I was ready to quit and about to just port the whole app to AS2, I tried going completely out of the flash player to get my application to show up on top of the base swf. Go html positioning. I ended up writing both the swfs into 2 separate divs using swfobject and then absolutely positioning the base swf and relatively positioning the container with the Flex application on top of it.

The css styles looked like this:
[css]
#div1{
position: absolute;
margin:0px;

width:100%;
height:100%;
}

#div2{
width:500px;
height:360px;
position: relative;
margin-left: auto;
margin-right:auto;

}
[/css]

Works pretty well :).

After being involved with AS3 and Flex for so long, I think I am now at a point where I have a really good understanding of the Flex framework. So when I was asked to build this online app, I immediately started it with Flex and before long had most of it working. However, the application was supposed to be a subcomponent of a larger AS2 project and was supposed to be loadmovie-ed. I didn’t realize till too late that AS2 swfs actually cannot loadmovie AS3 swfs (well Flex for sure, not sure about AS3 but doubt that too). This definitely left me feeling very ‘d-uh’. We ended up working around this by creating an AS3 base swf that loads the AS2 swf and then when the sub-app was supposed to be loaded, the AS2 swf told the base movie to do so via LocalConnection. This is definitely a hack but I couldn’t think of any other way to get this to work.

If anyone is aware of this or has successfully managed to load an as3 swf into an as2 swf via loadmovie, do drop me a comment. For others, be careful what you loadmovie ;).

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 🙂