26 August 2008

Changing Selection Indicator in Datagrid

add Tween, alpha, shape, etc.

Categories:   Flex

So I was recently working on a project, and the client wanted to have a different effect on the DataGrid's selection indicator. He said that he wanted the indicator to fade rather than the default "hard" appear.  After doing some digging, I found a post about changing the List Selection indicator which was pretty close to what I needed, but this was for a TileList.  The good news is that DataGrid inherits from the List base class, and the List Selection indicator methods are in there as well. Sound easy! 

The two methods in question are the drawSelectionIndicator() and drawHighlightIndicator() in the ListBase.as class.  If you override these two methods, you can create some pretty cool effects.  Here is an example of implementing a Tweener fade, and setting the final alpha to 50%:

   override protected function drawSelectionIndicator(
      indicator:Sprite, x:Number, y:Number, width:Number,
      height:Number, color:uint,
      itemRenderer:IListItemRenderer):void{
      var g:Graphics = Sprite(indicator).graphics;
      g.clear();
      g.beginFill(color,.25);
      g.drawRect(0,0,width,height);
      g.endFill();
     
      indicator.x = x;
      indicator.y = y;
     
 }
 override protected function drawHighlightIndicator(
  indicator:Sprite, x:Number, y:Number, width:Number,
  height:Number, color:uint,
  itemRenderer:IListItemRenderer):void{
  var g:Graphics = Sprite(indicator).graphics;
  g.clear();
  g.beginFill(color,.5);
  g.drawRect(0,0,width,height);
  g.endFill();
  
  indicator.x = x;
        indicator.y = y;
        indicator.alpha = 0;
        Tweener.addTween(indicator,({alpha:.5, time:1, transition:"easeOutCubic"})); }

As the code above shows, you can just override the draw and fill methods with your custom settings.  One neat thing is that you can even replace the drawRect method with a drawCircle and get a completely different shape for the indicator.  Below is an extended DataGrid class that changes the hightlight indicator's alpha to 50% and adds a fade-in effect using Tweener:

package com.swfflex
{
 import caurina.transitions.*;
 
 import flash.display.Graphics;
 import flash.display.Sprite;
 
 import mx.controls.DataGrid;
 import mx.controls.listClasses.IListItemRenderer; public class DataGridEx extends DataGrid
 { override protected function drawSelectionIndicator(
      indicator:Sprite, x:Number, y:Number, width:Number,
      height:Number, color:uint,
      itemRenderer:IListItemRenderer):void{
      var g:Graphics = Sprite(indicator).graphics;
      g.clear();
      g.beginFill(color,.25);
      g.drawRect(0,0,width,height);
      g.endFill();
     
      indicator.x = x;
      indicator.y = y;
     
 }
 override protected function drawHighlightIndicator(
  indicator:Sprite, x:Number, y:Number, width:Number,
  height:Number, color:uint,
  itemRenderer:IListItemRenderer):void{
  var g:Graphics = Sprite(indicator).graphics;
  g.clear();
  g.beginFill(color,.5);
  g.drawRect(0,0,width,height);
  g.endFill();
  
  indicator.x = x;
        indicator.y = y;
        indicator.alpha = 0;
        Tweener.addTween(indicator,({alpha:.5, time:1, transition:"easeOutCubic"})); }
 override protected function clearHighlightIndicator(indicator:Sprite, itemRenderer:IListItemRenderer):void{
  if(highlightIndicator)
   Tweener.addTween(indicator,({alpha:0, time:1, transition:"easeOutCubic", onComplete:function():void{Sprite(highlightIndicator).graphics.clear()}}));
 } }  

-Christopher Keeler

25 August 2008

360 Flex recap

My recap of the event in San Jose

Categories:   360 Flex

So, here is my recap from the 360|Flex conference in San Jose:

First off, I would like to congratulate Tom & John for putting on such a great event.  The venue at eBay was awesome, and the turnout was equally as good.  Second, as promised, I have posted my slides from my hands-on presentation here, and my example app with source code (right-click) here.  Also, you can watch my session on AMP by following the instructions here.  While I haven't yet seen any of the feedback from the survey app, most people said they got a lot out of my session...which is great.  I tried to make it as unusual and hands-on as possible, so I think most people were surprised to see the full size chromakey backdrop set and lighting.  I was running out of time at the end though, so I did feel a bit rushed when writing the example application with the class which caused some app errors. Also if you watch the session on AMP, since it was a hands-on class, you will not get to see the lighing and camera setups.  Sorry about that!

Some of the sessions I saw that I think were great was Ben Stucki's How to Build A Framework, and Ryan Campbell's session on Plexiglass 3D.  Another one of note that was totally not expected was Joel Geraci's session on Flex and Acrobat.  It's amazing how Flash/Flex and other Adobe products are integrating so well, and how paper media seems to be just so passé now.The event parties were great networking events and most people seemed to be working the room really well.  Jeffry Houser had some great live Flex Show interviews, and even Doug McCune showed up un-expectantly at Tuesday's event.

If you missed this sold-out event, I would recommend you get on the ball for the next one, as it is the premier conference for anyone interested in Flex.

-Christopher Keeler