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 <[email protected]> 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
> [email protected]
> http://www.danvega.org
>
>
> On Mon, Jan 19, 2009 at 12:38 PM, Tracy Spratt <[email protected]>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:* [email protected] [mailto:[email protected]] *On
>> Behalf Of *Dan Vega
>> *Sent:* Monday, January 19, 2009 12:07 PM
>> *To:* [email protected]
>> *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
>> [email protected]
>> http://www.danvega.org
>>
>>
>
>
--
Fotis Chatzinikos, Ph.D.
Founder,
Phinnovation
[email protected],
