Ugh, I don't use Cairngorm, so I can't speak for what is "right", but I think it is very risky to update the model in such a roundabout fashion. I would directly update the item inside the renderer.
Hopefully a cairngorm user will speak up on this. But change it anyway, and see if it fixes the problem. Tracy Spratt, Lariat Services, development services available _____ From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf Of nathanpdaniel Sent: Wednesday, May 13, 2009 9:55 AM To: flexcoders@yahoogroups.com Subject: [flexcoders] Re: Buggy HorizontalList Yes - I am using a custom ItemRenderer. Also of note (as per amy's suggestion) while Q2 DOES represent what is happening, all my data is bound to a model (I believe). So, I am overriding the set data method/property already, and upon setting the data property, I'm updating my model which is updating my view (using Cairngorm on this project so - I'm sort of forced to do things "proper"). Here's my itemRenderer code: ---------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe. <http://www.adobe.com/2006/mxml> com/2006/mxml" width="106" height="100" useHandCursor="{asButton}" buttonMode="{asButton}" click="onClick()" xmlns:vo="com.r.vo.*" xmlns:degrafa="http://www.degrafa. <http://www.degrafa.com/2007> com/2007" rollOver="mouseOver()" rollOut="mouseOut()" addedEffect="{addMe}" removedEffect="{removeMe}"> <mx:states> <mx:State name="Highlighted"> <mx:SetProperty target="{this}" name="filters" value="{myFilters}" /> </mx:State> <mx:State name="Disabled"> <mx:AddChild position="lastChild"> <mx:Canvas width="100%" height="100%" backgroundColor="#999999" backgroundAlpha=".40" /> </mx:AddChild> </mx:State> <mx:State name="Hover"> <mx:SetProperty target="{info}" name="y" value="70" /> <mx:SetProperty target="{info}" name="height" value="30" /> <mx:SetProperty target="{surf}" name="y" value="70" /> </mx:State> <mx:State name="HoverHighlighted" basedOn="Highlighted"> <mx:SetProperty target="{info}" name="y" value="70" /> <mx:SetProperty target="{info}" name="height" value="30" /> <mx:SetProperty target="{surf}" name="y" value="70" /> </mx:State> </mx:states> <mx:transitions> <mx:Transition fromState="*" toState="Hover"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="30" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> <mx:Transition fromState="Highlighted" toState="HoverHighlighted"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="30" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> <mx:Transition fromState="Hover" toState="*"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="0" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> <mx:Transition fromState="HoverHighlighted" toState="Highlighted"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="0" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> </mx:transitions> <mx:Script> <![CDATA[ import mx.effects.easing.Exponential; import mx.effects.easing.Bounce; import com.r.model.AppModelLocator; import com.r.vo.Product; import com.adobe.cairngorm.control.CairngormEventDispatcher; import com.r.control.ItemClickEvent; [Bindable]private var model:AppModelLocator = AppModelLocator.getInstance(); [Bindable]private var myFilters:Array = [new GlowFilter(0x0000ff)]; override public function set data(v:Object):void { // if (v) { product = new Product(v as XML); disabledList = model.disabledList; if (product.productId >= 1000) showLink = false; else showLink = true; // } } private function onClick():void { var cgEvent:ItemClickEvent = new ItemClickEvent(product); CairngormEventDispatcher.getInstance().dispatchEvent(cgEvent); } private function set disabledList(v:String):void { if (!v) return; var a:Array = v.split(" "); var noEndTables:Boolean = false; var noDeskLamps:Boolean = false; for each (var str:String in a) { var n:Number = Number(str); if (n == AppModelLocator.END_TABLES) noEndTables = true; else if (n == AppModelLocator.DESK_LIGHTING) noDeskLamps = true; } var iAm:int = model.whatIsIt(product.productId); currentState = ''; asButton = true; if (noEndTables) if (iAm == AppModelLocator.END_TABLES) { asButton = false; currentState = "Disabled"; } if (noDeskLamps) if (iAm == AppModelLocator.DESK_LIGHTING) { asButton = false; currentState = "Disabled"; } } private function onClickMoreInfoLink(event:MouseEvent):void { event.stopImmediatePropagation(); event.preventDefault(); } private function mouseOver():void { if (currentState == "Disabled") return; currentState = (currentState == "Highlighted") ? "HoverHighlighted" : "Hover"; } private function mouseOut():void { if (currentState == "Disabled") return; currentState = (currentState == "HoverHighlighted") ? "Highlighted" : ""; } [Bindable]private var _prodDesc:String = ""; private function set prodDesc(v:String):void { if (v == null) return; var newV:String = v.replace(/[,.&?!:;]/g,""); newV = newV.replace(/ and /g," "); _prodDesc = newV.toLowerCase(); } private function onError():void { trace('here'); img.source = unavailable; } [Embed("assets/skins/unavailableImg.png")] private var unavailable:Class; [Bindable]private var asButton:Boolean = true; [Bindable]private var showLink:Boolean = true; ]]> </mx:Script> <mx:Binding source="model.disabledList" destination="disabledList" /> <mx:Binding source="product.description" destination="prodDesc" /> <vo:Product id="product" /> <mx:Image source="@Embed('assets/skins/animation.swf')" verticalCenter="0" horizontalCenter="0" width="40" height="40" /> <mx:Image width="100" height="100" id="img" source="{product.thumb}" horizontalCenter="0" top="0" completeEffect="{showIt}" securityError="onError()" ioError="onError()"/> <degrafa:Surface id="surf" x="0" y="100"><!-- y=70 --> <degrafa:fills> <degrafa:SolidFill id="neonblue" color="#11A4DE" /> </degrafa:fills> <degrafa:GeometryGroup> <degrafa:Polygon fill="{neonblue}"> <degrafa:data>0,0 {width},-8 {width},1 0,1</degrafa:data><!-- 0,0 {w},-8 {w},30 0,30 --> </degrafa:Polygon> </degrafa:GeometryGroup> </degrafa:Surface> <mx:Canvas id="info" width="100%" x="0" y="100" height="0" styleName="ThumbItemInfo"><!-- y=70 height=30 --> <mx:Text styleName="ThumbTitle" text="{_prodDesc}" selectable="false" width="100%" height="16" truncateToFit="true"/> <mx:Text visible="{showLink}" htmlText="<a href='{product.link}'>more info</a>" styleName="ThumbTitleLink" y="12" selectable="true" useHandCursor="true" buttonMode="true" click="onClickMoreInfoLink(event)" /> </mx:Canvas> <mx:Fade id="showIt" duration="250" alphaTo="1" target="{img}" /> <mx:Parallel id="fadeIn" target="{img}"> <mx:Fade target="{img}" alphaFrom="0" alphaTo="1" /> <mx:Blur target="{img}" blurXFrom="50" blurXTo="0" /> </mx:Parallel> <mx:Parallel id="addMe" duration="2500"> <mx:Blur blurXFrom="20" blurXTo="0" /> <mx:Fade alphaFrom="0" alphaTo="1" /> </mx:Parallel> <mx:Parallel id="removeMe" duration="2500"> <mx:Blur blurXFrom="0" blurXTo="20" /> <mx:Fade alphaFrom="1" alphaTo="0" /> </mx:Parallel> </mx:Canvas> --- In flexcod...@yahoogro <mailto:flexcoders%40yahoogroups.com> ups.com, "Amy" <amyblankens...@...> wrote: > > --- In flexcod...@yahoogro <mailto:flexcoders%40yahoogroups.com> ups.com, "nathanpdaniel" <ndaniel@> wrote: > > > > I'm using the HorizontalList (HList) component and I've run into an issue where when data is updated dynamically some items are not rendered. > > I load data via an XML file which sets up in my app several XMLListCollection variables. Users can select different menu options to determine which collection is used as the dataProvider for the HList. These collections range in length from 3 - 50 items. My HList only displays 5 at any given time (with a horizontal scroll bar). > > What will happen occassionally is when I go from a short list (3 items) to a larger list, items will not render. > > The new item at position HList.dataProvider[old list length - 1] (zero based index) will be missing. Not as though I have invalid data so it renders wrong but, as though the data is not there at all. It puts spacing in there to account for it but, it's the equivalent of setting an object's visible property to false but includeInLayout to true. The other 4 in the first 5 will render properly. I scroll the list to show more, HList.dataProvider[old list length + 1] and HList.dataProvider[old list length + 2] will not render. As I scroll away from the beginning of the list more and more of the 5 items to display won't render until it throws an error from all 5 not rendering. However, if I go from a short list, of say 3 items, to a list of 4 items, then a list of 5 items, the probably is avoided across all collections. It will occur if I go from a list of length < 5 directly to a list of lenght > 5. Also of note, if the list length < 10, I can avoid throwing errors, however, if it gets beyond that, it starts throwing them. > > I am setting a filter on the HList.dataProvider saying if (of all products) the product matches one of the two that need to be ignored, filter them from the list. So irregardless of which collection is the dataProvider, if product A or product B is in this list, filter it out. I am also using an itemRenderer (a custom component to display an image). > > Anyone have any ideas, it's been driving me nuts for a while now. Sometimes it doesn't even happen at all and I've yet to be able to consistantly reproduce it with anything. I'm sort of at a loss for what to do since, I don't really know what's causing the issue... ?? > > It sounds like you have the old "trying to set properties in creationcomplete" issue. Check out Q2 here http://www.magnolia <http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf> multimedia.com/flex_examples/Amys_Flex_FAQ.pdf > to see if that is it. > > HTH; > > Amy >
