Ok, Peter Ent sent me a working sample that didn't require any of the custom measure stuff I was trying to do. Thanks Peter! That helped me realize that I was making it a little harder than it needed to be. ...However, comparing my code to the more elegant and simple example Peter sent also made it clear that the real crux of my problem seems to be around another piece of functionality I was trying to include but didn't document in the original post. (not the measure method that I was convinced was the problem...)
I also wanted this custom renderer to set its state based on a state property of the underlying data object. So, for example, if I click on an item at the top of the list and it expands to the detail state and then I scroll down I don't want to see the same renderer instance recycled below displaying another item I haven't clicked on in "details" state. I also want to be able to scroll back up to the top of the list and see the original item I clicked on in it's details state even if it's being displayed by a different instance of the custom renderer. I was trying to accomplish this by overriding the data property setter and adding some logic to set the currentState property of the renderer based on a particular property of the data object which is updated when a user clicks on a renderer to change its state. Peter's example changed state on a rollOver and then changed back on rollout so there wasn't a need for a renderer instance to be aware of the display state of the underlying data object. So, here's my new, but still related question: How can you maintain the UI state of a particular item in a list when scrolling and things like resize effects trigger constant recycling of the renderer instances used to display the item? Here's a little test case that illustrates the difficulty... if you click one of the items at the top the details state will flash for a moment and then disappear... presumably as the renderer instance is replaced... then scroll up and down a bit and you'll see other items appearing in the details state... The application: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical"> <mx:Script> <![CDATA[ [Bindable] private var testdata:Array = [ {title : "Sample Title", selected: false, detail : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In mi. Curabitur quam arcu, dictum eget, rhoncus bibendum, posuere eu, ligula. Curabitur eget metus et quam sodales fermentum. Nunc et dui."}, {title : "Flex is Really Cool", selected: false, detail : "Donec sit amet sapien vitae elit sagittis tincidunt. Vivamus neque. In hac habitasse platea dictumst. Quisque non odio. Integer lectus. Ut mi ante, bibendum eu, pretium a, commodo eu, mauris. Integer laoreet enim eu ipsum. Curabitur vitae mi. Sed adipiscing."}, {title : "blah, blah, blah...", selected: false, detail : "Vivamus porttitor augue sit amet metus."}, {title : "Eu sou lorinho...", selected: false, detail : "Sed condimentum, purus venenatis venenatis volutpat, lacus neque dignissim eros, a ultrices quam mauris rutrum ante. Mauris hendrerit facilisis pede. In pretium. Sed rhoncus nisl eu turpis. Integer interdum eros eget sapien."}, {title : "More test data", selected: false, detail : "Pellentesque mollis euismod est. Aliquam vitae ipsum sit amet nunc vehicula cursus. Pellentesque sit amet risus et augue semper molestie. Vivamus vulputate. Morbi odio lorem, mollis in, congue vel, placerat a, ipsum. Mauris convallis aliquam sem. Ut interdum justo ut quam. Nam rutrum placerat velit. Sed interdum. Aliquam elementum malesuada libero."}, {title : "Hope this helps", selected: false, detail : "Cras porttitor facilisis lorem. Phasellus commodo ornare pede."}, {title : "Explain my problem...", selected: false, detail : "Sed libero pede, aliquet at, scelerisque ullamcorper, aliquet eget, ligula. Maecenas convallis. Maecenas cursus. Donec quam odio, semper nec, lobortis non, dapibus sit amet, erat. Nunc sit amet augue in ipsum pretium vehicula. Donec sit amet erat in velit viverra feugiat. Fusce odio. Curabitur vulputate egestas ipsum. Suspendisse diam eros, scelerisque sit amet, ornare eget, condimentum at, nisl. Ut tristique leo et neque."}, {title : "Sample Title", selected: false, detail : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In mi. Curabitur quam arcu, dictum eget, rhoncus bibendum, posuere eu, ligula. Curabitur eget metus et quam sodales fermentum. Nunc et dui."}, {title : "Flex is Really Cool", selected: false, detail : "Donec sit amet sapien vitae elit sagittis tincidunt. Vivamus neque. In hac habitasse platea dictumst. Quisque non odio. Integer lectus. Ut mi ante, bibendum eu, pretium a, commodo eu, mauris. Integer laoreet enim eu ipsum. Curabitur vitae mi. Sed adipiscing."}, {title : "blah, blah, blah...", selected: false, detail : "Vivamus porttitor augue sit amet metus."}, {title : "Eu sou lorinho...", selected: false, detail : "Sed condimentum, purus venenatis venenatis volutpat, lacus neque dignissim eros, a ultrices quam mauris rutrum ante. Mauris hendrerit facilisis pede. In pretium. Sed rhoncus nisl eu turpis. Integer interdum eros eget sapien."}, {title : "More test data", selected: false, detail : "Pellentesque mollis euismod est. Aliquam vitae ipsum sit amet nunc vehicula cursus. Pellentesque sit amet risus et augue semper molestie. Vivamus vulputate. Morbi odio lorem, mollis in, congue vel, placerat a, ipsum. Mauris convallis aliquam sem. Ut interdum justo ut quam. Nam rutrum placerat velit. Sed interdum. Aliquam elementum malesuada libero."}, {title : "Hope this helps", selected: false, detail : "Cras porttitor facilisis lorem. Phasellus commodo ornare pede."}, {title : "Explain my problem...", selected: false, detail : "Sed libero pede, aliquet at, scelerisque ullamcorper, aliquet eget, ligula. Maecenas convallis. Maecenas cursus. Donec quam odio, semper nec, lobortis non, dapibus sit amet, erat. Nunc sit amet augue in ipsum pretium vehicula. Donec sit amet erat in velit viverra feugiat. Fusce odio. Curabitur vulputate egestas ipsum. Suspendisse diam eros, scelerisque sit amet, ornare eget, condimentum at, nisl. Ut tristique leo et neque."}, {title : "Sample Title", selected: false, detail : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In mi. Curabitur quam arcu, dictum eget, rhoncus bibendum, posuere eu, ligula. Curabitur eget metus et quam sodales fermentum. Nunc et dui."}, {title : "Flex is Really Cool", selected: false, detail : "Donec sit amet sapien vitae elit sagittis tincidunt. Vivamus neque. In hac habitasse platea dictumst. Quisque non odio. Integer lectus. Ut mi ante, bibendum eu, pretium a, commodo eu, mauris. Integer laoreet enim eu ipsum. Curabitur vitae mi. Sed adipiscing."}, {title : "blah, blah, blah...", selected: false, detail : "Vivamus porttitor augue sit amet metus."}, {title : "Eu sou lorinho...", selected: false, detail : "Sed condimentum, purus venenatis venenatis volutpat, lacus neque dignissim eros, a ultrices quam mauris rutrum ante. Mauris hendrerit facilisis pede. In pretium. Sed rhoncus nisl eu turpis. Integer interdum eros eget sapien."}, {title : "More test data", selected: false, detail : "Pellentesque mollis euismod est. Aliquam vitae ipsum sit amet nunc vehicula cursus. Pellentesque sit amet risus et augue semper molestie. Vivamus vulputate. Morbi odio lorem, mollis in, congue vel, placerat a, ipsum. Mauris convallis aliquam sem. Ut interdum justo ut quam. Nam rutrum placerat velit. Sed interdum. Aliquam elementum malesuada libero."}, {title : "Hope this helps", selected: false, detail : "Cras porttitor facilisis lorem. Phasellus commodo ornare pede."}, {title : "Explain my problem...", selected: false, detail : "Sed libero pede, aliquet at, scelerisque ullamcorper, aliquet eget, ligula. Maecenas convallis. Maecenas cursus. Donec quam odio, semper nec, lobortis non, dapibus sit amet, erat. Nunc sit amet augue in ipsum pretium vehicula. Donec sit amet erat in velit viverra feugiat. Fusce odio. Curabitur vulputate egestas ipsum. Suspendisse diam eros, scelerisque sit amet, ornare eget, condimentum at, nisl. Ut tristique leo et neque."}, {title : "Eu sou lorinho...", selected: false, detail : "Sed condimentum, purus venenatis venenatis volutpat, lacus neque dignissim eros, a ultrices quam mauris rutrum ante. Mauris hendrerit facilisis pede. In pretium. Sed rhoncus nisl eu turpis. Integer interdum eros eget sapien."} ]; ]]> </mx:Script> <mx:List id="lstTest" dataProvider="{testdata}" itemRenderer="TestRenderer" variableRowHeight="true" width="400" height="400"/> </mx:Application> And the renderer: <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"; horizontalGap="0" horizontalScrollPolicy="off" backgroundColor="0xffffff" currentState="{data.selected ? 'details' : ''}" backgroundAlpha="0"> <mx:states> <mx:State name="details"> <mx:AddChild relativeTo="{vbox}" position="lastChild"> <mx:Text width="100%" id="txtDetail" text="{data.detail}"/> </mx:AddChild> </mx:State> </mx:states> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Resize target="{this}" /> </mx:Transition> </mx:transitions> <mx:Script> <![CDATA[ protected override function createChildren():void{ super.createChildren(); addEventListener(MouseEvent.CLICK, handleMouseClick); } protected function handleMouseClick(e:MouseEvent):void{ if(currentState != "details"){ currentState = "details"; data.selected = true; }else{ currentState = ""; data.selected = false; } } ]]> </mx:Script> <mx:VBox id="vbox" width="100%" height="100%" verticalGap="0"> <mx:Label width="100%" textAlign="left" text="{data.title}"/> </mx:VBox> </mx:HBox> --- In [email protected], "Alex Harui" <[EMAIL PROTECTED]> wrote: > > Try a 1-column TileList with direction="horizontal". See if you can > post a small test case if that doesn't work. > > > > ________________________________ > > From: [email protected] > [mailto:[EMAIL PROTECTED] On Behalf Of jandersen1978 > Sent: Saturday, October 20, 2007 2:47 PM > To: [email protected] > Subject: [flexcomponents] Re: Custom ItemRenderer + variableRowHeight + > states + transitions = not working > > > > Alex, as you suspected, makeRowsAndColumns is firing regardless of not > scrolling through the list... It seems to fire a variable number of > times and is triggered by a couple different methods up the stack > trace. Here's the notable methods which are triggering calls to > makeRowsAndColumns and I attempt to change state with a transition. > I'm still not clear on how to solve this problem so advice is still > quite welcome! :-) > > Set "details" state the first time > - timerHandler > - timerHandler > > Set back to default state the first time > - commitCurrentState > - doPhasedInstantiation, validateDisplayList > - ResizeInstance.onTweenEnd > - Tween.timerHandler > > Set back to "details" state again > - commitCurrentState > - ResizeInstance.onTweenEnd > - Tween.timerHandler > - ResizeInstance.onTweenEnd > - Tween.timerHandler > > Set back to default (applies to all successive calls) > - Tween.timerHandler > > Set back to "details" (applies to all successive calls) > - Tween.timerHandler > > Really appreciate the help so far! > -James > > --- In [email protected] > <mailto:flexcomponents%40yahoogroups.com> , "Alex Harui" aharui@ > wrote: > > > > Yeah, that would affect what you see. Put a breakpoint on > > makeRowsAndColumns. If it gets hit during the transition, then you > know > > recycling is going on. > > > > > > > > ________________________________ > > > > From: [email protected] > <mailto:flexcomponents%40yahoogroups.com> > > [mailto:[email protected] > <mailto:flexcomponents%40yahoogroups.com> ] On Behalf Of jandersen1978 > > Sent: Friday, October 19, 2007 5:47 PM > > To: [email protected] > <mailto:flexcomponents%40yahoogroups.com> > > Subject: [flexcomponents] Re: Custom ItemRenderer + variableRowHeight > + > > states + transitions = not working > > > > > > > > It is for List but it's not in Moxie... so you think that recycling > > is in fact coming into play huh? hmmm... tricky indeed... so if the > > renderer is switched out in the middle of a transition how do you > > actually see the transition? Perhaps that's why I'm not seeing the > > transition... > > > > --- In [email protected] > <mailto:flexcomponents%40yahoogroups.com> > > <mailto:flexcomponents%40yahoogroups.com> , "Alex Harui" <aharui@> > > wrote: > > > > > > If this is for List or TileLIst, use Moxie and the dataEffects. > > > > > > > > > > > > Anytime the size of a renderer changes, the list class will > re-render > > > everything on screen and due to recycling will probably switch out > the > > > renderer under transition. > > > > > > > > > > > > ________________________________ > > > > > > From: [email protected] > <mailto:flexcomponents%40yahoogroups.com> > > <mailto:flexcomponents%40yahoogroups.com> > > > [mailto:[email protected] > <mailto:flexcomponents%40yahoogroups.com> > > <mailto:flexcomponents%40yahoogroups.com> ] On Behalf Of jandersen1978 > > > Sent: Thursday, October 18, 2007 8:08 PM > > > To: [email protected] > <mailto:flexcomponents%40yahoogroups.com> > > <mailto:flexcomponents%40yahoogroups.com> > > > Subject: [flexcomponents] Custom ItemRenderer + variableRowHeight + > > > states + transitions = not working > > > > > > > > > > > > I'm working on a custom item renderer that basically will represent > a > > > title and then in the "details" state will add an extra paragraph of > > > variable length. I'd like the renderer to adjust to the full height > > > of the details text and I'd also like to use a resize transition for > a > > > nice smooth effect. > > > > > > I've got a custom measure method that sets the width of the title > and > > > description text components and then uses the textHeight of each to > > > set the measuredHeight of the renderer. > > > > > > What I've got seems to be working until the I add the resize > > > transition. When the transitions are added > > > 1) the first time the renderer enters the details state it does > seems > > > to resize correctly and display the full text, however there doesn't > > > seem to be any transition--the detail text is shown without a change > > > in size and then a second later the size changes appropriately. (not > > > quite what I'm going for) > > > 2) when the state is set back to default, the renderer does resize > > > back to it's original size with a nice smooth transition (good) > > > 3) when the state is then set again back to "details" the details > text > > > is again visible but there is no change in the renderer's size... > > > > > > I can post code if that's helpful but I'd just love some general > > > advice on how to approach this... By the way I'm not scrolling > > > through the list so I'm assuming the renderer recycling isn't coming > > > into play here... but maybe that's not a good assumption... > > > > > >
