Mind the Flex

Windows Classic skin for Flex 3: Updated

During this weekend I have updated my Windows classic skin for Flex. See original blog entry for details, or go directly to the demo page by clicking here. Transition to release 3 wasn't smooth enough. Some skinning components worked consistently even from Flex 2.0.1 to Flex 3 beta3 broke with the final SDK.

There was a long and although not very friendly thread (see Panel contents overlap when using borderSkin [SDK-14806]). I completely understand the folks who are attempting to migrate large apps from Flex 2 to Flex 3 and should now manually adjust all of the controls. I'am also working on a relatively mission-critical Flex project in a banking environment, but we are using fortunately only modified Halo theme. I have waited with interest to see Adobe's reaction. I personally think that, for now, advanced skinning solutions in the production environments should wait a little bit more.

Panel is no longer using scaleGrid values for border metrics:

Since I'm using anyway extended Panel class, I overrided get viewMetrics() method:

 
public var skinBorder:Object;
...
override public function get viewMetrics():EdgeMetrics {
   return new EdgeMetrics(skinBorder[0], skinBorder[1], skinBorder[2], skinBorder[3]);
}
 

The MXML looks like:

 
<ResizableWindow xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
   layout="absolute" width="720" height="480" creationComplete="initApp();"
   title="My application" showControls="true"
   enableResize="true" skinBorder="[6,32,6,6]">
...
</ResizableWindow>
 

The same border issue in DG. You can see the skinned border by setting DataGridColumn backgroundAlpha to 0 or create DG without columns.

 
package {
   import mx.controls.DataGrid;
   import mx.core.EdgeMetrics;
   import mx.core.ScrollPolicy;
 
   public class MyDataGrid extends DataGrid {
      public var skinBorder:Object;
 
      public function MyDataGrid() {
         super();
      }     
 
      override public function get viewMetrics():EdgeMetrics {
         var vScrollBarWidth:int;
         var hScrollBarHeight:int;
         if (verticalScrollPolicy == ScrollPolicy.AUTO && verticalScrollBar && verticalScrollBar.visible)
            vScrollBarWidth = this.verticalScrollBar.width;
         if (horizontalScrollPolicy == ScrollPolicy.AUTO && horizontalScrollBar && horizontalScrollBar.visible)
            hScrollBarHeight = this.horizontalScrollBar.height;
 
         return new EdgeMetrics(
            skinBorder[0],
            skinBorder[1],
            skinBorder[2]+vScrollBarWidth,
            skinBorder[3]+hScrollBarHeight);
      }
   }
}
 

Declaring DG in MXML:

 
<MyDataGrid horizontalScrollPolicy="auto" id="myGrid" skinBorder="[2,2,1,2]">
   ...
</MyDataGrid>