Yesterday I attended a meeting of the local Flex user group. The subject was comparing Flex frameworks presented by Yakov Fain. You can view the slides from the presentation here.

I myself have never used one of these frameworks, as I simply have never had the need for one. However I have been researching them and after attending this presentation I still feel that my initial inclination towards them stands; they exist mostly for standardization when working in teams.

By this I mean you can accomplish the same thing you can with the framework using standard Flex code and ActionScript, more than likely in a much simpler fashion depending on the project. What they afford you when working in a team is that you know that if everyone is using the same framework, then they are coding in the same fashion, hence the code written by one team member should work with the code by another. And as Yakov pointed out, they allow you to spilt up large projects among a team.

This is a nice benefit, but these benefits often come at a cost. For example one of the major complaints about Cairngorm is that you have to write a lot of classes. One reason for this is that in Cairngorm each event that the application triggers has to have a corresponding Command class. That’s a class for every event (its actually worse than that as there are other classes that these need to communicate with that you need to write as well). For a large application with a lot of events, this quickly becomes a lot of code.

Another implication of this is that you can only have one event responder per event. In other words, you lose the benefit of being able to have multiple responders to a single event that is built into Flex events, which as far as I am concerned was a great improvement over the AS2 model. Cairngorm essentially takes you back to the AS2 model.

Mate has a better event model and it does do a nice job of managing dependencies via dependency injection, but you have to maintain an event map and Mate is an MXML only framework.

And as far as PureMVC goes (look at the flow diagram slide for it in the presentation I linked to) all I can say is ???????. In its defense, PureMVC was designed to be language agnostic, but it seems to suffer from the “trying to be everything to everyone” syndrome.

The slides I linked to do a good job of pointing out the strengths and weaknesses of each framework, so I will refer you to them if you are interested in learning more.

So for now, it seems that these frameworks would get in the way more than they would simplify anything for me.

As the title says: http://opensource.adobe.com/wiki/display/flexsdk/Gumbo

Since I had such a fun time with the Truveo video search, I decided to do the same type of thing with YouTube. I was originally going to have it play the video, but as it turns out for some reason when loading a YouTube player into a SWFLoader, it only works the first time and the fixes I found are a little more than I can to put into something that is basically just an experiment.

A few weeks ago someone contacted me about writing about the new APIs that AOL has made available. While looking at the AOL dev site I came accross the Truveo API and decided I would try creating a search application in Flex.

So this store finder project is turning out to be full of nifty little discoveries. The latest request I got was that the client would like the 5 star (or in this case diamond) rating component to appear inside the data grid instead of simply displaying a number. Now in general when I get a request to nest one component (especially a custom one) inside of another component, I am very wary. However, as it turned out, this was incredibly simple.

The original rating component I was using can be found here.

The DataGridColumn tag allows you to specify an item renderer property.

<mx:DataGridColumn headerText=”Popularity” dataField=”popularity” itemRenderer=”custom.DataGridRating”/>

This is a component that will be used to draw the content of the cell. An item render is passed a property called data, so for simplicities sake, I simply modified the original rating component to reference the data object passed to it, and saved it as a separate component, which ended up looking like:

ORIGINAL

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

<mx:Script>
<![CDATA[

/**
* The rating value to be displayed by this component.
*/
[Bindable]
public var rating:Number = 0;

]]>
</mx:Script>

<mx:HBox horizontalGap=”1″ verticalCenter=”0″>

<mx:Spacer width=”4″ />

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(rating > stars.currentIndex) ? 1 : .35}” source=”@Embed(’diamond.gif’)” />
</mx:Repeater>

<mx:Spacer width=”4″ />

</mx:HBox>

</mx:Canvas>

Modified

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

<mx:HBox horizontalGap=”1″ verticalCenter=”0″>

<mx:Spacer width=”4″ />

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(data.popularity > stars.currentIndex) ? 1 : .35}” source=”@Embed(’diamond.gif’)” />
</mx:Repeater>

<mx:Spacer width=”4″ />

</mx:HBox>

</mx:Canvas>

Note that data.popularity matches the data field of the data column that the item renderer has been applied to. And that was it.

<mx:DataGridColumn headerText=”Popularity” dataField=”popularity” itemRenderer=”custom.DataGridRating”/>

You can see the live product at:
http://www.independentlycertifieddiamonds.com/find.html

Update

I found that this component as written would round up to the next value. For example, I tested with a value of 3.25 and it showed it as 4. This was because the original component was using th currentIndex property as opposed to the currentItem property. currentIndex is 0 based meaning the value being compared was one less than it should have been. You can fix this by modifying the code as follows.

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(rating >= stars.currentItem) ? 1 : .35}” source=”@Embed(’diamond.gif’)” />
</mx:Repeater>

A client asked me recently to to have the data being displayed in a Data Grid be initially sorted by store name (See Creating an Image Reflection in Flex to view the project in question). The way you do this is by sorting the Datagrid’s data provider. To do this, you need to create a sort object, assign it some sort fields, set that sort object as the dataprovider’s sort object (so you have to be using some sort of sortable collection to do it this way) and refresh the collection. This looks something like this:

…

private var storesXMLCollection:XMLListCollection = new XMLListCollection();
private var initSort:Sort = new Sort();

…

/ /SortField(name:String = null, caseInsensitive:Boolean = false, descending:Boolean = false, numeric:Boolean = false) so in this case companyName is the XML Node I am sorting on and the second parameter indicates that the sort should be case insensitive.

this.initSort.fields = [new SortField("companyName", true)];

this.storesXMLCollection.sort = this.initSort;

//once the sort object has been applied, refresh the collection.

this.storesXMLCollection.refresh();

One of my clients asked me if we could do an image reflection in Flex. Now as far as Flex goes, I am more on the code side so I had no idea how to do this. Luckily, this guy (Ben Stucki) did.

His original version was set to redraw the object using the enterFrame event with the idea that any changes in what was being reflected, would be updated in the reflection. My need was a little simpler than this. I just needed to reflect an image once it had loaded, so there was no need to keep redrawing the image reflection once the load had completed. However, I ran into a little challenge in that even though I was only triggering the reflection code upon completion event of the image load, no reflection was showing up. It turned out that even thought the load had completed, the rendering had not. Hence the reflection had nothing to draw.

The solution I came up with was to give a slight delay between the load event and the reflection rendering using a timer.

Code Excerpt:

…

private var reflectionTimer:Timer = new Timer(100,1);
private function appInit():void{
storesService.send();
reflectionTimer.addEventListener(’timer’, createReflection);
}
private function createReflection(e:TimerEvent = null):void{
reflection.drawReflection();

}

…

<mx:Image complete=”reflectionTimer.start();”

Here is what the final product looks like. This depends on data from an external site, so if something changes on that site, this may stop working. At the time of this witting, the first item in the data grid has an image and should show the reflection. Also, would like to give a shout out to this guy (Kimili) for creating the Wordpress Plugin for displaying flash.