RE: [flexcoders] TileList / DataGrid View Swap
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=#00 backgroundColor=#ff
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=#ff
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=#ff paddingBottom=20 paddingTop=20
paddingLeft=20 paddingRight=20
verticalScrollPolicy=off horizontalScrollPolicy=off
borderColor=#00 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
Re: [flexcoders] TileList / DataGrid View Swap
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.comwrote:
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=#00 backgroundColor=#ff
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=#ff
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=#ff paddingBottom=20 paddingTop=20
paddingLeft=20
Re: [flexcoders] TileList / DataGrid View Swap
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=#00
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 = 0xFF ;
[Bindable]
private var comment:ProductCommentRPC;
[Bindable]
private var selected:Boolean ;
private function rollOver():void
{
borderColor=0x00FF00 ;
selected = true ;
}
private function rollOut():void
{
borderColor=0xFF
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=#FF 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.comwrote:
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/
