actionscript 3 - Spark images in spark list with TileLayout disappear on scroll and drag in Flex app -
i have renderer looks this:
<s:itemrenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autodrawbackground="true"> <s:group width="160" tooltip="{data.tooltip}" doubleclickenabled="true"> <s:layout> <s:verticallayout gap="5" horizontalalign="center" paddingbottom="2" paddingleft="2" paddingright="2" paddingtop="2"/> </s:layout> <mx:canvas width="156" height="156" borderstyle="solid" bordercolor="#aaaaaa" verticalscrollpolicy="off" horizontalscrollpolicy="off"> <mx:image id="image" source="{data.thumbnail}" width="{data.thumbwidth}" height="{data.thumbheight}" horizontalcenter="0" verticalcenter="0"/> </mx:canvas> <s:label text="{data.data.name}" maxdisplayedlines="2" textalign="center" width="100%"/> </s:group> </s:itemrenderer> in list looks this
<s:list id="fileiconview" dataprovider="{files}" width="100%" height="100%" bordervisible="false" dragenabled="true" allowmultipleselection="true" doubleclickenabled="true" mousedown="fileiconviewmousedown(event)" mousemove="fileiconviewmousemove(event)" mouseup="clearselectionrectangle()" change="fileselectionchanged()" itemrenderer="view.thumbnailrenderer"> <s:layout> <s:tilelayout clipandenablescrolling="true" /> </s:layout> </s:list> when scroll images in list disappear. how fix this?
the same happens when drag 1 of them fixed (partially) regenerating list when drag completed or cancelled.
update july 11, 2011, 2:02pm est data object being sent renderer looks this
[bindable] public class filewrapper { /** file wrapper holds, file, onlinedocument , symboliclinks */ public var data:*; /** file size */ public var size:string; /** file's author */ public var author:string; /** file's created date */ public var date:string; /** tooltip file */ public var tooltip:string; /** image */ public var img:string; /** thumbnail source */ public var thumbnail:object; /** width of thumbnail image */ public var thumbwidth:int; /** height of thumbnail image */ public var thumbheight:int; /** folder mime type icons */ public const mime_icons_folder:string = "fileexplorer/mimetypeicons/"; public function filewrapper(file:*, controller:fileexplorercontroller) { this.data = file; if (file file) { var f:file = file file; this.size = numberutils.humanreadablebytes(f.latestrevision.sizeondisk); this.author = f.latestrevision.author.displayname; this.date = numberutils.formatdate(f.latestrevision.timeuploaded); this.tooltip = f.name + "\n" +"size: " + this.size + "\n" + "type: " + f.latestrevision.mimetype; this.img = mime_icons_folder+getmimetypeicon(f.latestrevision.mimetype); var self:filewrapper = this; controller.getthumbnail(f.latestrevision, function (tumbnailbitmap:object):void { self.thumbnail = tumbnailbitmap; self.thumbwidth = tumbnailbitmap.width; self.thumbheight = tumbnailbitmap.height; }); } else if(file onlinedocument) { this.tooltip = file.name + "\nonline document"; this.img = mime_icons_folder+"onlinedocument.png"; } else if(file symbolicfilelink) { this.tooltip = file.name + "\nshortcut"; this.img = mime_icons_folder+"system-shortcut-icon.png"; } else { this.size = ""; this.author = ""; this.date = ""; this.tooltip = "unknown file type"; this.img = mime_icons_folder+"unknown.png"; } this.thumbnail = this.img; this.thumbwidth = 32; this.thumbheight = 32; } /** * gets icon image given mime type * * @param mime type string * @return image name string */ protected static function getmimetypeicon(mimetype:string):string { switch (mimetype) { case "application/msword": return "file-doc.png"; case "application/octet-stream": return "system-binary.png"; case "application/ogg": return "audio-ogg.png"; case "application/pdf": return "file-pdf.png"; case "application/vnd.ms-excel": return "file-xls.png"; case "application/vnd.ms-powerpoint": return "file-ppt.png"; case "application/x-bzip2": return "archive-zip.png"; case "application/x-gtar": return "archive-tar.png"; case "application/x-gzip": return "archive-gzip.png"; case "application/x-tar": return "archive-tar.png"; case "application/xhtml+xml": return "file-html.png"; case "application/zip": return "archive-zip.png"; case "audio/x-mpegurl": return "audio-mp3.png"; case "audio/mpeg": return "audio-mp3.png"; case "audio/x-aiff": return "audio-aiff.png"; case "audio/x-wav": return "audio-wav.png"; case "image/bmp": return "image-bmp.png"; case "image/gif": return "image-gif.png"; case "image/jpeg": return "image-jpg.png"; case "image/png": return "image-png.png"; case "image/tiff": return "image-bmp.png"; case "text/html": return "file-html.png"; case "text/plain": return "file-txt.png"; case "application/vnd.oasis.opendocument.presentation": return "presentation.png"; case "application/vnd.oasis.opendocument.spreadsheet": return "spreadsheet.png"; case "application/vnd.oasis.opendocument.text": case "text/richtext": return "text.png"; case "text/xml": return "text.png"; case "video/mpeg": return "video-mpeg.png"; case "video/quicktime": return "video-movie.png"; case "video/vnd.mpegurl": return "video-mpeg.png"; case "video/x-msvideo": return "video-avi.png"; case "video/x-sgi-movie": return "video-movie.png"; default: return "system-default.png"; } } } the controller.getthumbnail method calls model method
public function getthumbnail(revision:revision, callback:function):void { // image revisions if (revision.mimetype.indexof("image") > -1) { var loader:loader = new loader(); // create request var urlvars:urlvariables = new urlvariables(); urlvars.authtoken = useraccountmodel.token; urlvars.id = revision.id; var req:urlrequest = new urlrequest(thumbnail_url); req.data = urlvars; var context:loadercontext = new loadercontext(true); loader.load(req, context); // set load handler loader.contentloaderinfo.addeventlistener(event.complete, function(event:event):void { callback(event.currenttarget.content); }); } } loading thumbnails using method works perfectly. issue happens when scroll list.
my first suspicion when seeing "usevirtuallayout" issue. summarize, renderer can re-used when usevirtuallayout true, default. when renderer gets reused may decide data hasn't changed, , incorrectly render things such images.
the 2 solutions have used ensure accurate rendering are: first, turn usevirtuallayout false. prevents re-use of renderer. second, override set data function , create own private variables hold data displaying. allow more debug setting of data, , ensure data being set correctly every time renderer used/re-used.
one final note. may totally unrelated, noticed particular problem occurred less after updating flash player 10.3.
Comments
Post a Comment