ninja captain

(Update: I’ve updated the itemRenderer so you can make any row bold, not just the last row. Thanks Pedro.)

I haven’t been using Flex for very long (or Flash’s built-in components for that matter), so I’m not too familiar with their capabilities and shortcomings. I became frustrated when I learned that it is far more difficult to style a specific DataGrid row than it is to style a column.

So here’s the dilemma: I have a DataGrid filled with info, and the final row is a sum of the numbers above it. Seems like a very useful application, but I was unable to find any direct help from other blogs or forums.

I created an extension to DataGridItemRenderer, and simply referenced it in my DataGrid instance by defining its itemRenderer. As you can see, each item has a custom field called “fontWeight”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<mx:DataGrid itemRenderer="dgir">
  <mx:dataProvider>
    <mx:Array>
        <mx:Object Name="Apples" Value="4" fontWeight="normal"/>
        <mx:Object Name="Oranges" Value="3" fontWeight="normal"/>
        <mx:Object Name="Pears" Value="6" fontWeight="normal"/>
        <mx:Object Name="Cherries" Value="7" fontWeight="normal"/>
        <mx:Object Name="Total" Value="20" fontWeight="bold"/>
      </mx:Array>
    </mx:dataProvider>
  <mx:columns>
    <mx:DataGridColumn dataField="Name"/>
    <mx:DataGridColumn dataField="Value"/>
  </mx:columns>
</mx:DataGrid>

The DataGridItemRenderer extension overrides the function validateNow to check the data field named “fontWeight”. Here’s the code from the extension:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package{
  import mx.controls.DataGrid;
  import mx.controls.dataGridClasses.DataGridItemRenderer;
 
  public class dgir extends DataGridItemRenderer{
    public function dgir(){
      super();
    }
 
    override public function validateNow():void{
      if (listData)
      	setStyle('fontWeight', DataGrid(listData.owner).dataProvider[listData.rowIndex].fontWeight);
      super.validateNow();
    }
  }
}

I really dig the way Flex Panels look. I’m still fairly new to the whole Flex scene, and I wasn’t sure if it was possible to create a Panel and give it the ability to be dragged around the stage. It kinda resembles a OS window, so it just makes sense to be able to drag it around.

Anyway, I found out Panels are static at first, and I was bummed. Then I found a nice, quick tutorialtutorial over at AboutFlex.net that accomplishes exactly what I need. I can see myself using this custom component more often than the normal one.

I get the feeling I might use AboutFlex.net a lot. Its a great resource for Flex beginners.

EDIT (7/17/09): AboutFlex.net went down, along with the tutorial. Here’s my replacement. This is the most stripped-down version that I could put together quickly. It has a close button on the top right. I don’t have a tutorial, but here’s the source:

My friend Jake, a Photoshop savant, inspired me to start this blog. It’s purpose is to document my adventures in programming. I mainly deal with Flex, Actionscript, Flash, and CakePHP. Thus, the majority of my posts will deal with problems and solutions related to these applications. In this effort to document my experiences, I hope to be able to help other developers with similar questions.