Flex 3 - Image cache - apache-flex

I'm doing an Image Cache following this method: http://www.brandondement.com/blog/2009/08/18/creating-an-image-cache-with-actionscript-3/
I copied the two as classes, renaming them CachedImage and CachedImageMap.
The thing is that I don't want to store the image after being loaded a first time, but while the application is being loaded.
For that, I've created a function that is called by the application pre-initialize event. This is how it looks:
private function loadImages():void
{
var im:CachedImage = new CachedImage;
var sources:ArrayCollection = new ArrayCollection;
for each(var cs in divisionData.division.collections.collection.collectionSelection)
{
sources.addItem(cs.toString());
}
for each(var se in divisionData.division.collections.collection.searchEngine)
{
sources.addItem(se.toString());
}
for each( var source:String in sources)
{
im.source = source;
im.load(source);
}
}
The sources are properly retrieved.
However, even if I use the load method, I do not get the "complete" event... As if the image is not being loaded... How is that?
Any help would be appreciated.
Thanks in advance.
Regards,
BS_C3

I found the problem with my code =)
It was a declaration problem.
I moved the declaration of the cachedImage inside the for each loop where the images are loaded. So that I get something like this:
for each( var source:String in sources)
{
var im:CachedImage = new CachedImage;
im.source = source;
im.load(source);
}
And this does the trick.

Related

SWFLoader and loading events

I'm using an SWFLoader that I declared like this:
<s:SWFLoader id="widget" maxWidth="150" maxHeight="75" maintainAspectRatio="true" />
And I also have a method to set its source from a ByteArray:
public function set widgetSource(widgetSource:ByteArray):void
{
this.widget.source = widgetSource;
}
It works fine but it seems like setting widget.source is done asynchronously and I need to know when it finishes loading the data...I tried several things without success, including adding a Event.COMPLETE listener to 'widget' but the event is never fired. Any ideas?
You need to add the event listener to the loader itself, For example
var url:String = "yourlocation of file";
var myWidgetLoader:URLLoader = new URLLoader();
myWidgetLoader.addEventListener(Event.COMPLETE, completeHandler);
myWidgetLoader.load(new URLRequest(url));
function completeHandler(event:Event):void
{
trace(" fully loaded ");
}
Also you can add a progress event to check the progress of the loader, let us know how you go.

Is there a way to get a list of all skin classes in the current application?

Is there a way to get a list of all the skin classes that are in the current application? I'm using Flex 4.5.1.
Here is the loop that I'm using now to get all the skins,
for each (var item:Object in styleManager.typeHierarchyCache) {
for (label in item) {
if (label=="spark.components.supportClasses.Skin" ||
label=="spark.skins.mobile.supportClasses.MobileSkin") {
for (label in item) {
name = label.substr(label.lastIndexOf(".")+1);
vo = new SkinObject();
vo.name = name;
vo.qualifiedName = label;
dictionary[label] = vo;
}
break;
}
}
}
for each (item in dictionary) {
array.push(item);
}
The reason why is because I want to list all the skins in the application and then be able to apply them in real time so I can see what they look like. * I have this working but I was hoping for a better way.
You definitely could iterate through all objects on the screen and see if they're of type SparkSkin. Something like this:
private function findSkins():void
{
recurseComponent(FlexGlobals.topLevelApplication);
}
private function recurseComponent(parent:UIComponent):void
{
var child:UIComponent;
for(var i:uint = 0, len:uint = parent.numElements; i<len; i++)
{
child = parent.getElementAt(i) as UIComponent;
if(child && child is SparkSkin)
{
trace("Skin Found!"); // trace whatever you need here
}
recurseComponent(child);
}
}
But be warned that this solution is very expensive since it needs to iterate through all objects on the screen, which can go into several thousands. However, I really don't see what's the purpose of this and would definitely not recommend it other than for debugging/testing purposes.
Edit: Also, this will only work for skins on the display list. Skins mentioned in CSS will not be recognized and I'm fairly sure there's no way of figuring that out short of going through all the css and see if there's a skinClass property. But then it won't catch any default skins or skins set in actionscript or inline mxml.

How to dynamically load image for drag and drop?

I am implementing drag and drop from a DataGrid onto a List in a Flex 3 AIR application. I would like to have the drag image be a photo (jpg) referenced by a String field in the data grid item, named 'imagePath'. I'm having trouble getting the image to show up during dragging. I have triple checked that it is not because of an invalid path to the image. I have tried Image's source() and load() methods in every way I can think of. I am calling this method 'dragCurrentToList(event)' on a mouseDown event.
private function dragCurrentToList(event:MouseEvent):void
{
var current:Object = event.currentTarget.selectedItem;
var dragImg:Image = new Image();
dragImg.load(current.imagePath);
dragImg.width = 100;
dragImg.width = 100;
var dsource:DragSource = new DragSource();
dsource.addData(current, 'record');
DragManager.doDrag(event.currentTarget as DataGrid, dsource, event, dragImg);
}
This works perfectly if I set the image source to the following bindable variable but I don't want to hardcode the image name.
[Bindable]
[Embed(source='assets/icons/default.jpg')]
public var dragIcon:Class;
...
dragImg.source = dragIcon
...
In your dragCurrentToList method, why are you loading the image instead of just specifying the source attribute as the URL to the image?
http://livedocs.adobe.com/flex/3/langref/mx/controls/SWFLoader.html#source
private function dragCurrentToList(event:MouseEvent):void
{
var current:Object = event.currentTarget.selectedItem;
var dragImg:Image = new Image();
dragImg.source = current.imagePath;
dragImg.width = 100;
dragImg.width = 100;
var dsource:DragSource = new DragSource();
dsource.addData(current, 'record');
DragManager.doDrag(event.currentTarget as DataGrid, dsource, event, dragImg);
}
Also make sure you are responding to the dragStart event. ( http://livedocs.adobe.com/flex/3/langref/mx/core/UIComponent.html#event:dragStart ). And I believe instead of accessing the DragManager class; you should simply modify the dragSource property of the dragStart event.

How to get the reference to a newly created Button with Actionscript?

I have a MXML button:
<mx:Button id="myButton1"/>
How do I create N number of Buttons with Actionscript: myButton2, myButton3, myButton4... myButtonN ?
And how to get the reference to the newly created buttons right after they are created? Like
I should be able to do myButtonN.x = 100 right after it's created.
This is pretty basic stuff...you might want to start with some Flex tutorials, or read through one of the many excellent books.
Here's a blob of code for you to copy & paste and see how it works for you:
private var buttons:Array = [];
public function createButtons():void {
for(var i:int=0; i<100; i++) {
buttons[i] = new Button();
buttons[i].label = "Button "+i;
buttons[i].x = i * 50;
addChild(buttons[i]); // NOTE: use addElement instead of addChild in Flex 4
}
}
It's not tested, so might need some minor typos, but you should be able to get the idea.

Getting Flex TileList image source

I have a TileList that's loaded with data from Flickr. The tilelist uses an imageRenderer to make a bunch of thumbnails.
I'm trying to create a custom drag and drop function, but I want to get the image source of the tilelist mouseEvent target. Here's what the code looks like for the drag handler:
public function onPicMouseDown(e:MouseEvent):void {
var tileList:TileList = TileList(e.currentTarget);
var item:Object = Object(tileList.selectedItem);
var source:DragSource = new DragSource();
var dragView : Image = new Image();
dragView.source = tileList.selectedItem.source;
DragManager.doDrag(
rowRenderer,
source,
e,
dragView
);
}
But tileList.selectedItem doesn't have a source property. The source is a property of the image produced by the itemrenderer. I'd like to be able to do something that's the equivalent of
tileList.selectedItem.itemRenderer.source
But that doesn't do it either.
There's got to be a simple way to do this that I'm just missing. Any help would be much appreciated.
In your onMousePicDown handler your source should be:
dragView.source = event.target.parent.source;

Resources