RE: [flexcoders] TileList / DataGrid View Swap

[Tracy Spratt]

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
<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 <mailto:danv...@gmail.com> 
http://www.danvega.org <http://www.danvega.org>