[flexcoders] Re: Styling AdvancedDataGridItemRenderer

[Amy]

--- In flexcoders@yahoogroups.com, "Jonathan Branam" 
<[EMAIL PROTECTED]> wrote:
>
> Hi Amy,
> 
> I'm trying to follow along, but you've asked several questions now!
> 
> Setting the alpha property should work based on a simple test that 
I did. As
> I look at your code, though, I think you have some confusion 
between the
> alpha *property* and an alpha *style*. The alpha property is from 
Flash and
> indeed you cannot see the source to it. It does appear to apply 
correctly to
> Flex components and their skins. However, if you have a style 
called "alpha"
> that does not affect the alpha property (unless you have coded this
> connection).

Which I did.  Just to back up a bit, the goal was to allow the 
styleFunction to set the color and the amount that you could see the 
rollover or selection indicator when the row was colored.  

But nothing I tried actually affected the alpha, until finally I 
changed the blendMode, which allowed the change to be visible, but 
both the text and the background, which wasn't the effect I was 
looking for, especially since it didn't match the 
AdvancedDataGridGroupItemRenderer, which descends from UIComponent 
and behaves sensibly.

> 
> OK. I think I see the problem. ADGItemRenderer extends UITextField 
which is
> not a rendering component. The flexpearls post notes this, but 
doesn't
> really get into the implications. The inheritance tree is: 
UITextField <
> FlexTextField < TextField < InteractiveObject < DisplayObject. 
Therefore, a
> UITextField doesn't have a graphics property (only descendants of 
Shape and
> Sprite do), nor is it a DisplayObjectContainer. This means you 
cannot use
> the drawing API or addChild(). Looking at the livedocs for 
TextField, it
> doesn't appear to support alpha for background, so this is probably 
just not
> possible. 

It actually does, which is why it has an alpha property.  The secret 
is that you either have to embed the font or change the blend mode, 
otherwise it stubbornly refuses to show any changes you make to the 
property.

>If you set the Flash alpha property, it might fade the background,
> but it will also fade the text (if you have it embedded). The alpha 
property
> is almost never used in Flex components. Although I don't know why, 
I would
> steer away from it for that reason.
> 
> I would recommend forgetting about ADGItemRenderer. It is a very 
optimized
> class that only displays text.

And also icons...

> Subclass something else and do your background manipulation there. 
You can
> make a fairly simple subclass of Label that is still pretty 
lightweight and
> supports rowColor and rowAlpha (if you add the drawing yourself).
> 
> This is about as simple as I could get. You should keep all the 
nice code
> you have about initializing styles and all that, of course!
> 
> [Style(name="rowColor")]
> [Style(name="rowAlpha")]
> public class ADGItemRendererBackgroundAlpha extends Label
> {
>     override protected function updateDisplayList
(unscaledWidth:Number,
> unscaledHeight:Number):void
>     {
>         super.updateDisplayList(unscaledWidth, unscaledHeight);
> 
>         // Don't get styles this way in real code!
>         graphics.beginFill(getStyle("rowColor"), getStyle
("rowAlpha"));
>         graphics.drawRect(0,0,unscaledWidth, unscaledHeight);
> 
>         textField.setActualSize(unscaledWidth, unscaledHeight);
>     }
> 
> }

The problem is that I don't properly understand how it draws the leaf 
icon, so I am reluctant to mess with it too much.  My explorations in 
the source code didn't leave me any the wiser about this.

Ultimately, I abandoned my attempts to gain control over the alpha of 
the background and opted for something that allowed me to see the 
rollover in a reasonably attractive manner--setting blendMode on both 
itemRenderer classes to DARKEN.  I may have to change the mode on 
that once I get the real styleFunction working rather than just a 
placeholder that returns back yellow to everything.  I'll probably 
just add a style that sets the blendMode, so I can adjust it based on 
the color needed.

I wish the docs would point out these limitations so that people can 
estimate time needed to accomplish tasks better.  If you read the 
docs, it sounds like this task should be a walk in the park.

-Amy