Month: March 2008

Here is an example that illustrates how you need to add some additional logic when you add ItemRenderers into a DataGrid. The way I came across this problem is I noticed that when I had ItemRenderers doing things like checkboxes or pulldowns, the choices that they were set to on a row basis would CHANGE whenever I scrolled or sorted a column.

I struggled with finding a way, as I talk about in another posting, and found that using the dataChange event does the trick, and I always create the ItemRenderer as a separate component instead of trying to put all the logic in the main mxml. The component gets the initial setting of the value for that cell via “.data” and then you need to maintain and check it within the component. This can end up with the coder doing some hacking, and my example is only that — an example. I’m sure there are more elegant ways to achieve this. But that’s one of the things I think Flex shares with Perl — there are always multiple ways to get something done!

Take a look at the first flash example, where I DON’T use the dataChange — then see how it works nicely on the 2nd example.

First example (Try sorting columns and see it randomizes each time):

This movie requires Adobe Flash Player — Download at www.adobe.com

Second example (Works!):

This movie requires Adobe Flash Player — Download at www.adobe.com

Download my code sample here.

I switched to Flex3 the other day and found that the font sizing for the default font has changed! So on most of my applications where I
painstakingly sized buttons so that they exactly fit the text label, I now see the text does NOT FIT anymore and has “…” at the end!

The Flex folks have some good solutions, see more on Flexcoders.

I ran into a problem the other day trying to create a DataGrid that had voting buttons as an itemRenderer. When an action was taken in that cell, the buttons would change, i.e., gray out or light up to show a click occurred. The problem that would happen is that, when I scrolled the list up or down, that column would randomize!

I found posts that talked about solutions for very simple things like a checkbox in a column that did not have any elaborate actionscript behind it, but not to address a component that sat behind the itemRenderer. I figured it out though, and the answer is pretty simple.

I had to add a dataChange function call in the component’s main tag so it would force the cell to rethink it’s status when the grid would scroll.

The main mxml:

<mx:DataGrid id="userGrid" dataProvider="{userData}" sortableColumns="true"
    draggableColumns="false" width="100%" height="100%">
  <mx:columns>
    <mx:DataGridColumn dataField="Topic" width="100" />
    <mx:DataGridColumn id="votecol" dataField="status" headerText="Vote" sortable="true"
        itemRenderer="castVote" width="120" />
    </mx:columns>
</mx:DataGrid>

The castVote component:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" dataChange="gridMoved()"
    width="100%" height="100%">
<mx:Script>
        <![CDATA[
        import mx.core.Application;
        import mx.events.ListEvent;

        private var myStatus:int = 0;

        private function gridMoved():void{
                if (data != null) {
                        myStatus=data.status;
                }
                doShow(myStatus);
        }

        private function doShow(n:int):void {
                // 0 means already voted, 1 is for, 2 is against
                if (n==0) {
                        buttons.visible=true;
                        v1.visible = v2.visible = false;
                        return;
                }else if (n==1) {
                        v1.visible=true; v2.visible=false;
                        myStatus = n;
                        buttons.visible=false;
                }else if (n==2) {
                        v2.visible=true; v1.visible=false;
                        myStatus = n;
                        buttons.visible=false;
                }
        }

        private function doClick(n:int):void {
                data.status = myStatus = n;
                doShow(n);
        }

        ]]>
</mx:Script>

        <mx:Label id="v1" text="You voted FOR this resolution" visible="false" />
        <mx:Label id="v2" text="You voted AGAINST this resolution!" visible="false" />
        <mx:HBox id="buttons">
                <mx:Button label="YES" click="doClick(1);" />
                <mx:Button label="NO" click="doClick(2);" />
        </mx:HBox>

</mx:Canvas>