ninja captain

I don’t know about everyone else, but I think the default component skins in Flex 4 are a big mistake. Well, let me be clear: I know the new Spark components are now easier to customize. And that is great. I am all for improving customization and usability. But some people don’t like skinning the default components! Would it have been so hard to improve the functionality while still making the default skins pretty? Like the Halo skins from Flex 3? One of the best things about Flex 3 is that I could just pop in a bunch of UI elements and it would be a great-looking application right out of the box. With the addition of Spark, I am now forced to customize the look of the components.

So, for starters, I’ve corrected one of the main faults, which is the font. I found that simply changing the default Spark font, it makes a big impact. All you have to do is add the following style code to your application:

1
2
3
4
5
6
7

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	s|Application{
		font-family: "Verdana";
		font-size: 10;
	}
</fx:Style>

As you can see in the example below, the left UI is the default skin. The right UI is with this minor font change. I think it makes a big difference:

I’m sure there are some other things I can do globally, to make Spark a little better-looking out of the box. The font is just a small step in the right direction.

Another Method

 
Now, I will say that there’s another method of forcing the compiler to use the Halo skins. I don’t like this method though. For starters, the proper skins don’t show up in Design View. Also there are a few syntax issues with mixing the skins. Having said that, if you want to go that route, you can: Go to your project properties, then go to Flex Compiler, and append this text to the Additional compiler arguments:

    -theme=${flexlib}/themes/Halo/halo.swc

(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: