flexcoders  

Re: [flexcoders] Re: Styling AdvancedDataGridItemRenderer

Jonathan Branam
Thu, 26 Jun 2008 12:16:08 -0700

There are a bunch of comments below, but to sum up, it seems like extending
AdvancedDataGridGroupItemRenderer and drawing a background with the graphics
property will meet all of your needs. I missed the requirement to preserve
leaf icons and such. Is there a reason this doesn't meet your needs, because
you seem to have known this already?

[Style(name="rowColor")]
[Style(name="rowAlpha")]
public class ADGGroupItemRendererBackgroundAlpha extends
AdvancedDataGridGroupItemRenderer
{
    override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        graphics.clear();
        // Don't get styles this way in real code!
        //graphics.beginFill(getStyle("rowColor"), getStyle("rowAlpha"));
        graphics.beginFill(0x5566FF, 0.3);
        graphics.drawRect(0,0,unscaledWidth, unscaledHeight);
    }
}


> 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.

I guess I missed this. You can set the color already, from the flexpearls
article. Adjusting the rollover or selection indicator is a different matter
altogether.

>
> 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.

Right. Changing the blendMode alters the way that Flash decides to render
the component. You should find that setting cacheAsBitmap to true will have
the same effect. When you apply a blend to a DisplayObject Flash renders it
to a bitmap internally and then applies the blend to the bitmap. Because the
component is now rendered as a bitmap it will honor the alpha property on
its contents in a way that it would not previously. Actually, I couldn't get
cacheAsBitmap or blendMode to do this to the AdvancedDataGridItemRenderer. I
had to add a filter, which did it immediately. Maybe another "feature" of
TextFields.

> 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.
>

As explained above, when you cause the component to be rendered as a bitmap
then it will begin to behave differently, such as honoring the alpha
property when it normally would not, because it is using a non-embedded
font. Of course, embedding the font also allows the alpha to be set. But, as
I understood your question, you wanted to change the alpha of just the
background. What I said was that the component does not appear to support
that operation. All DisplayObjects have an alpha property, but text
components don't honor its setting in the same way.

> > I would recommend forgetting about ADGItemRenderer. It is a very
> optimized
> > class that only displays text.
>
> And also icons...
>
> 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.

Right. It actually doesn't display icons so it isn't in the source code. For
example, this does not display leaf icons nor does it indent the renderer:

<mx:AdvancedDataGrid id="adg"
   dataProvider="{hd}"
   width="100%" height="100%">
  <mx:columns>
      <mx:AdvancedDataGridColumn

itemRenderer="mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer"
         dataField="title"/>
  </mx:columns>
</mx:AdvancedDataGrid>

This only applies to the first column, however. Do you only have one column?
If you want leaf icons and such (maybe I missed that), you need to subclass
AdvancedDataGridGroupItemRenderer. That will draw the icons just fine for
you and, as you mentioned, it is a subclass of UIComponent and you can draw
a background on it just fine.


> 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.

Well... it's tough for Adobe. They could use the richest classes everywhere
so that customizing them is easier, but performance and memory would suffer.
They usually seem to favor being very efficient in the default
implementation and then leave the places to extend. Of course, you have to
understand the capabilities of the underlying classes to know which parent
class to choose. I think this is one of the most non-obvious when you build
custom components.

I hope this clarified some things (for both of us)! I certainly learned more
about ADG here, too.

-Jonathan

http://jonathanbranam.net - Flex 3 Anatomy and Solutions