ItemRenderer - What event to react to?

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

ItemRenderer - What event to react to?

bilbosax
Basically, I have a list with a custom itemrenderer containing an image, and I need to create an overlay over my custom itemrenderer to let a user know that the item has been selected, and when they select something else, I need it to turn off. Inside the itemrenderer, I need to know what event to react to to make these changes.

My approach was to create an overlay rectangle in the itemrenderer. When a user clicks on the list, an item becomes selected.  Inside the itemrenderer, when this happens, I need the itemrenderer to change the visibility of the overlay rectangle that I have created to let the user know that the item has been selected.  I decided to test the "selected" Boolean value of the itemrenderer to change the visibility of the overlay rectangle.  The only problem is, I don't know what event to react to so that I can test if the itemRenderer is selected or not.  DataChange is not the appropriate event.  Does anyone know what event I should react to in the itemrenderer?

Any thoughts greatly appreciated!  
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

douglasmccarroll
Personally, I override LabelItemRenderer.drawBackground(). It gets called
at the appropriate times.

override protected function drawBackground(unscaledWidth:Number,
unscaledHeight:Number):void
{
    if (unscaledHeight == 0)
        return;
    var c:uint;
    c = selected ? Constant_Color.LIST_ITEM_BACKGROUND__SELECTED :
Constant_Color.LIST_ITEM_BACKGROUND;
    graphics.beginFill(c, 1);
    graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
    graphics.endFill();
    graphics.lineStyle(1, 0xC0C0C0);
    graphics.moveTo(0, unscaledHeight - 1);
    graphics.lineTo(unscaledWidth, unscaledHeight - 1);
    graphics.lineStyle(1, 0xFFFFFF);
    graphics.moveTo(0, unscaledHeight);
    graphics.lineTo(unscaledWidth, unscaledHeight);
}

HTH,

Douglas


On Wed, May 3, 2017 at 12:26 AM, bilbosax <[hidden email]> wrote:

> Basically, I have a list with a custom itemrenderer containing an image,
> and
> I need to create an overlay over my custom itemrenderer to let a user know
> that the item has been selected, and when they select something else, I
> need
> it to turn off. Inside the itemrenderer, I need to know what event to react
> to to make these changes.
>
> My approach was to create an overlay rectangle in the itemrenderer. When a
> user clicks on the list, an item becomes selected.  Inside the
> itemrenderer,
> when this happens, I need the itemrenderer to change the visibility of the
> overlay rectangle that I have created to let the user know that the item
> has
> been selected.  I decided to test the "selected" Boolean value of the
> itemrenderer to change the visibility of the overlay rectangle.  The only
> problem is, I don't know what event to react to so that I can test if the
> itemRenderer is selected or not.  DataChange is not the appropriate event.
> Does anyone know what event I should react to in the itemrenderer?
>
> Any thoughts greatly appreciated!
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/ItemRenderer-What-event-to-react-to-tp15157.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

bilbosax
I think I'm a bit confused.  Do you override the drawBackground to create an overlay???  I am not trying to change the background color, my itemrenderer has an image and I need to draw a rectangular overlay over the top of the image.  Will this accomplish that?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

bilbosax
Also, I am using a standard ItemRenderer and not a LabelItemRenderer and there does not appear to be a drawBackground() method in this class.  Is there a similar method that I can override in a regular ItemRenderer??
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

Olaf Krueger
In reply to this post by bilbosax
bilbosax wrote
Does anyone know what event I should react to in the itemrenderer?
Maybe this helps? [1]

Olaf


[1] http://blog.flexexamples.com/2010/05/14/detecting-an-item-click-event-on-a-spark-list-control-in-flex-4/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

douglasmccarroll
In reply to this post by bilbosax
> I think I'm a bit confused.  Do you override the drawBackground to create
an
> overlay???  I am not trying to change the background color, my
itemrenderer
> has an image and I need to draw a rectangular overlay over the top of the
> image.  Will this accomplish that?

No, but you can do whatever you want to do in this method. The important
bit is that this method appears to get called when you need to refresh the
UI in some way. In particular, I've been using this method to change the
appearance of the item renderer when it is selected or deselected, which is
what you want, so using this method would work for you, if you were using
LabelItemRenderer...

> Also, I am using a standard ItemRenderer and not a LabelItemRenderer and
> there does not appear to be a drawBackground() method in this class.  Is
> there a similar method that I can override in a regular ItemRenderer??

I don't know. It looks like you may need to dig into the LabelItemRenderer
code and see what events are causing the drawBackground() method to fire.
I'd either simply look at LabelItemRenderer's code, or create a simple app
that uses LabelItemRenderer, put a breakpoint into drawBackground(), then
select the item and look at the stack trace.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

bilbosax
Holy Smokes Douglas, I got it to work!  You are awesome, thanks for showing me the way!! So ItemRenderer does not expose drawBackground directly the way that LabelItemRenderer does, but I watched a very valuable video on how to dig deep into Flex Source Code that helped me search for what I needed.  That video is here:

http://tv.adobe.com/watch/360flex-conference/reading-the-flex-source-code-by-jonathan-branam/

What I found after searching is that I could override an mx_internal function called drawBackground, which you MUST be sure to include this namespace or you will get a 1004 error.

public namespace mx_internal = "http://www.adobe.com/2006/flex/mx/internal";

So, basically, I just create an overlay rectangle in my ItemRenderer with the visibility set to false.  I then override the drawBackground function to test the "selected" Boolean, and if the renderer is selected, I change the overlay visibility to true.  So it breaks down like this:

<fx:Script>
               
<![CDATA[
			public namespace mx_internal = "http://www.adobe.com/2006/flex/mx/internal";
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;

                        override mx_internal function drawBackground():void {
				if (selected == true) {
					overlayRect.visible = true;
				} else {
					overlayRect.visible = false;
				}
				trace(selected);
			}
			
		]]>

</fx:Script>

<s:Rect id="overlayRect" x="0" y="0" alpha=".3" visible="false">
        <s:fill>
                <s:SolidColor color="#A30000"/>
        </s:fill>
</s:Rect>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

Nemi
In reply to this post by bilbosax
Use item renderer states? There should be normal, hover and selected, and you set Rect visible for example only in hover state.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

bilbosax
This post was updated on .
That would probably work equally as well.  I was unaware of ItemRenderer states.  I may take a look at that as an option.  But I am pretty happy with this solution for the time being because I don't have to create any otherwise unneccessary states in order to get it to work, I just have to override a function that is already being called. My only concern is that I have been told that mx_internal overrides could possibly break one day because you never know when Adobe or Apache might change something unexpectedly.
Thanks for the suggestion!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

Nemi
No need to create any new states or anything. ItemRenderer already has these states:

Flex defines the following view states that you can support in your item renderers:
normal - The data item has no user interaction.
hovered - The mouse is over the data item.
selected - The data item is selected.
dragging - The data item is being dragged.
normalAndShowCaret - The data item is in the normal state, and it has focus in the item list.
hoveredAndShowCaret - The data item is in the hovered state, and it has focus in the item list.
selectedAndShowCaret - The data item is in the normal state, and it has focus in the item list.


So for your example, just add visible.selected="true" to overlayRect.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

bilbosax
It seems like such a simple and elegant solution, but when I tried it, I got an error saying that the state "selected" was referenced without being declared.  So, I think that even though the states are supported, you actually have to declare and create them for this solution to work. I could be wrong, but that is how I understand the error message.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ItemRenderer - What event to react to?

Nemi
Probably missing states lines in your MXML:
<s:states>
  <s:State name="normal" />
  <s:State name="hovered" />
  <s:State name="selected" />
</s:states>
Loading...