Here is a simple Canvas based item render with a pic, some text and a remove button (in case you want to delete a file ;-)
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="160" height="75" borderStyle="solid" borderThickness="1" cornerRadius="10" backgroundColor="#000000" backgroundAlpha="0.25" borderColor="{borderColor}" rollOver="{rollOver()}" rollOut="{rollOut()}" toolTip="{comment.dateInserted}" horizontalScrollPolicy="off" > <mx:Script> <![CDATA[ import beans.ProductCommentRPC; import events.MySingleDataEvent; import mx.events.FlexEvent; import beans.W2WUser; [Bindable] private var borderColor:int = 0xFFFFFF ; [Bindable] private var comment:ProductCommentRPC; [Bindable] private var selected:Boolean ; private function rollOver():void { borderColor=0x00FF00 ; selected = true ; } private function rollOut():void { borderColor=0xFFFFFF selected = false ; } override public function set data(value:Object):void { if (value != null) { super.data = value ; comment = value as ProductCommentRPC ; } dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)) ; } private function removeComment(f:Object):void { var newFriendEv:MySingleDataEvent = new MySingleDataEvent("showFriend", true) ; newFriendEv.data = f ; dispatchEvent(newFriendEv) ; } ]]> </mx:Script> <mx:Image verticalCenter="0" source="{comment.userType}" left="5" height="38" width="38"/> <mx:TextArea color="#FFFFFF" backgroundAlpha="0" text="{comment.comment}" textAlign="left" fontWeight="bold" borderStyle="none" left="50" right="5" top="5" bottom="5" wordWrap="true" editable="false"/> <mx:Button label="-" right="5" verticalCenter="0" visible="{selected}" click="{removeComment(comment)}"/> </mx:Canvas> In the ovveriden set data you can do any initialization you need as it is called every time data is passed to the renderer. The button throws a custom event which i catch outside. If you do not need such functionality simple remove it. I hope it helps you continue... On Mon, Jan 19, 2009 at 7:44 PM, Dan Vega <danv...@gmail.com> wrote: > Thanks Tracy, I will dig around some more and see if I can find > anything. > > As far as the images go, they can be anywhere on the server, if they are > outside of the web root that approach will not work. > > > > Thank You > Dan Vega > danv...@gmail.com > http://www.danvega.org > > > On Mon, Jan 19, 2009 at 12:38 PM, Tracy Spratt <tspr...@lariatinc.com>wrote: > >> If the mx:Canvas component you posted is to be an item renderer, then >> you have some work to do. Item renderers myst be data driven. You cannot >> use the initialize or creationComplete events for any row-level work, >> because renderer instances are re-cycled. Thus there is no useful meaning >> in the number of itemRenderer instances, and tracing the number of times >> init() is called will tell you nothing of value. >> >> >> >> I advise you find an example of an itemRenderer and modify it as needed. >> That or study the docs. Both, probably. >> >> >> >> You can display an image file stored on a server, with just the url. >> Example, http://www.myServer.com/myImages/abc.gif. You would need a >> crosdomain.xml policy file on the image server if the domain is different >> than the domain serving the application. >> >> >> >> Tracy Spratt >> Lariat Services >> >> Flex development bandwidth available >> ------------------------------ >> >> *From:* flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] *On >> Behalf Of *Dan Vega >> *Sent:* Monday, January 19, 2009 12:07 PM >> *To:* flexcoders@yahoogroups.com >> *Subject:* [flexcoders] TileList / DataGrid View Swap >> >> >> >> I have a datagrid that displays a list of files on a server. What I have >> done is created a button for you to switch back and forth between the >> datagrid and a tile list view. >> >> <mx:ViewStack id="vs" selectedIndex="0" width="100%" >> height="100%"> >> >> <mx:Canvas width="100%" height="100%"> >> <mx:DataGrid id="filelist" width="100%" height="100%" >> dataProvider="{files}" allowMultipleSelection="true" dragEnabled="true" >> dragMoveEnabled="true"> >> <mx:columns> >> <mx:DataGridColumn headerText="File Name" >> dataField="name"/> >> <mx:DataGridColumn headerText="File Type" >> dataField="type"/> >> <mx:DataGridColumn headerText="File Size" >> dataField="size" labelFunction="bytesToKilobytes"/> >> <mx:DataGridColumn headerText="Last Modified" >> dataField="lastModified"/> >> <mx:DataGridColumn headerText="Hidden" >> dataField="isHidden"/> >> </mx:columns> >> </mx:DataGrid> >> </mx:Canvas> >> >> <mx:Canvas width="100%" height="100%"> >> <mx:TileList width="100%" height="100%" >> dataProvider="{files}" color="#000000" backgroundColor="#ffffff" >> itemRenderer="ThumbnailView"/> >> </mx:Canvas> >> >> </mx:ViewStack> >> >> >> I am struggling with 2 things here. What I want to do is to display >> thumbnails for any image file in the list. If its not an image I will >> display an icon (pdf/doc/excel). >> >> 1.) The first time my item renderer loads the init function is called 4x >> event though there are 3 data items. My thumbnails are gettiog loaded the >> 1st time but after that is some very buggy behavior. >> 2.) To display the thumbnails I am passing the image path to a server, >> resizing the image > placing in a temp directory > passing back the binary >> data and displaying the image. Is this my only option? I mean you can't just >> load a file from C:\myfolder\abc.gif as its a major security no no. >> >> <?xml version="1.0" encoding="utf-8"?> >> <mx:Canvas >> xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#ffffff" >> width="100%" height="100%" >> creationComplete="init()"> >> >> <mx:Script> >> <![CDATA[ >> import mx.controls.Image; >> import mx.core.Application; >> import mx.rpc.events.ResultEvent; >> import flash.display.Loader; >> >> private function init():void { >> trace("init called"); >> } >> >> private function loadImage(path:String,type:String):void { >> if(type.toLowerCase() == "png" || type.toLowerCase() == >> "jpg" || type.toLowerCase() == "gif"){ >> >> ImageService.getImageData(path,Application.application.tempLocation); >> } else { >> trace(type); >> } >> } >> >> private function onReadImage(event:ResultEvent):void { >> var loader:Loader = new Loader(); >> var imgData:ByteArray = new ByteArray(); >> var img:Image = new Image(); >> >> imgData = event.result as ByteArray; >> loader.loadBytes(imgData); >> img.data = imgData; >> thumbnail.addChild(img); >> } >> ]]> >> </mx:Script> >> >> <mx:RemoteObject id="ImageService" destination="ColdFusion" >> source="ImageLoader.src.ImageService" showBusyCursor="true"> >> <mx:method name="getImageData" result="onReadImage(event)"/> >> </mx:RemoteObject> >> >> <mx:VBox id="thumbnail" width="200" height="200" >> backgroundColor="#ffffff" paddingBottom="20" paddingTop="20" >> paddingLeft="20" paddingRight="20" >> verticalScrollPolicy="off" horizontalScrollPolicy="off" >> borderColor="#000000" creationComplete="loadImage(data.path,data.type)"> >> <mx:Label text="{data.name}"/> >> </mx:VBox> >> >> </mx:Canvas> >> >> >> >> Has anyone else gone through something like this? Any help would be great, >> thanks! >> >> >> Thank You >> Dan Vega >> danv...@gmail.com >> http://www.danvega.org >> >> > > -- Fotis Chatzinikos, Ph.D. Founder, Phinnovation fotis.chatzini...@gmail.com,