Flex ItemRenderer Images not appearing at runtime - apache-flex

in datagrid I have an ItemRenderer (which extends UIComponent) which loads images based on a data value, eg:
_img.source = "assets/images/flags/" + value[dglistData.dataField] + ".gif";
When I run my application the images (flags) are appearing in the ItemRenderer. When I build and deploy the application into BlazeDS as an SWF file - the images do not appear. Instead there is the standard "missing icon" link that appears in Internet explorer.
As far as I can tell, my ANT build script includes the above directory "assets/images/flags/" and all the images into the SWF file.
Is this a relative path issue? Not sure, any help would be appreaciated.
Thanks
Mike

When you are assigning a path as source Flash Player is trying to load the images via HTTP requests. Therefore, embedding your images in the SWF has no effect.
There are two possible solutions. Either deploy the folder containing your images to the server and use the corresponding path as your source or embed all your images into the SWF.
A simple example for the second solution. The code assumes that value[dglistData.dataField] corresponds to one of the variables with the [Embed] metadata.
[Embed(source='assets/images/flags/Image1.png')]
private var image1:Class;
[Embed(source='assets/images/flags/Image2.png')]
private var image2:Class;
[Embed(source='assets/images/flags/Image3.png')]
private var image3:Class;
// access the image like this...
_img.source = this[value[dglistData.dataField]];

Related

JAVA FX ImageView only loads certain images when launched

I'm currently working on a poker application for fun and I've encountered another issue when trying to work with imageviews.
Right now my structure for my images is the following:
JavaFXApplication1\src\images
that "images" folder contains two more folders, one being "cards" and the other "playerImages".
Here is a screenshot of it also:project structure
Currently I am using a document relative path within scene builder to initially load the images for each of the cards and players. for each of the cards, the imagepath initially is "#..\images\cards\back.png" which is set in scenebuilder. this method works perfectly fine when launching the application. however, for the player images next to the cards, i have "#..\images\playerImages\player1.png" for example and this doesnt work for some reason.
In scenebuilder the "player1.png" image shows up where it should, but disappears when i launch everything.
I read through Images not showing on launch by the main, but showed on Scene builder but Im not not sure the solution for that is the same for me, as my images are in my source folder.
I tried using the fx:id and setting the image manually in my controller class, but was receiving an error stating that my input stream was null.
I also tried just adding "player1.png" to my root images folder and using that path, and that still didnt work. yet, when I change the player1 image path to anything in the cards folder it works. I dont understand why it works for the images in the cards folder but not in the playerImages folder. Both of those folders are in the same location.
I apologize if this was already answered somewhere else and i am too oblivious to see it, but any insight into this seemingly simple problem would be greatly appreciated.
if you have a similar project structure:
--main
--java
--src
--resources
--images
--cards
back.png
--players
player1.png
you can set images from resources in your java-code. But you need to use getResources()
For example:
#FXML
private ImageView imageView;
Image image = new Image(getClass().getResourceAsStream("/images/players/player1.png"));
imageView = new ImageView(image);
Of course directory "resources: shuild be marked as resources root

How do I load dynamic image assets into adobe air

The app I'm working on displays four random images at one point. These four images come from a set of fifty images. If this was a standard Flex project I would just set the img.source property:
this.img1.source ="../assets/img/"+randomname+".png";`
This isn't working though, I'm getting a broken image. One other way to go about it is to load the image with a urlLoader, which is also not loading the image (unsurprisingly, given that it's a local asset)
loader = new Loader();
var urlReq:URLRequest = new URLRequest("../assets/img/"+randomname+".png");
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.load(urlReq)
So this isn't working either, I'm thinking of loading all of the images into a swc and then linking the swc to the project. This is obviously not great because then all the assets are loaded into memory at runtime. Is there another way of doing this?
I'm hoping that I'm missing something really simple.
If the .swc solution is the best one, can someone point me in the right direction? I forget how that whole business works, as it's been a couple of years since I've worked with Flex/Flash.
Thanks in advance
You should add your asset directories as "source" directories.
Then you should be aware of the fact that the contents of the asset directories will be copied to the root of your application. So when you have the image "assets/interface/bg.png" you should load it using new URLRequest("interface/bg.png").
You may try:
var urlReq:URLRequest = new URLRequest("assets/img/"+randomname+".png");

How to Display Uploaded Image from File System

I'm attempting to modify an inherited project that has a convoluted process of displaying uploaded images using an ImageMap control.
The current process inserts a new database record with image file name as well as model number and part number. The image files are saved to a virtual directory visible to IIS. Each part number has a corresponding .htm file containing an image map referencing the uploaded image. The image map has to be sized for each part and saved in the file system.
How can I streamline this process using either client side or server side controls? I'd like to bypass use of image maps as they require manual sizing. Can a control be used that auto sizes the image? Should the images be stored inside the database or kept in the file system?
Thanks for your advice;)
Storing the images in the database is IMHO a much more scalable solution.
Take a look at the Image Resizer project and its associated plugins for a way to resize the images, regardless of where you store them:
http://imageresizing.net/
http://weblogs.asp.net/bleroy/archive/2011/10/22/state-of-net-image-resizing-how-does-imageresizer-do.aspx
http://nathanaeljones.com/163/20-image-resizing-pitfalls/
You could use regular ASP.NET controls to display the images, for example, a ListView.

How to use images for skins without embedding them in the external style sheet

I'm trying to create a run time css-based swf which DOES NOT have embedded images, but rather picks them up from the file system.
For example,my Current .css file has this piece of code:
.paySeatBundleAvailable {
upSkin: Embed("../images/common/pay_seat_bundle_available.gif");
overSkin: Embed("../images/common/pay_seat_bundle_available.gif");
downSkin: Embed("../images/common/pay_seat_bundle_available.gif");
}
I dont want the CSS based SWF to have all the images embedded as I have a lot of images. Rather I want the images to be loaded at runtime from the path specified.
I tried using 'Url' in place of 'Embed' , but it throws 'error #1034 type coercion' error.
Help Please!! What is the correct approach?
Create a general skin that does all states (up, over, down, etc) which only has one Image Object. Set the source of that Image object to the appropriate strings and the Image will then do an http call to that image automatically without embedding anything.

how to images store localy from xml using flex 3?

I have one xml link. that link have collections of images(apx 1000 images).
when i flex applications start at the time load all images in locally. then when i need that images then use it.
How i do this... give me some links and logic.
Using flex 3.
Thanks advance.
senthil.
Load the .xml form server or so.
Parse the .xml and create a Map where you store all the image URLs
Place an Image Component on your UI and set the "source" property to the value of the image URL
Flash Plugin will load the image from the URL and will show the image when done.
If you are facing a "SandboxVaiolationException" (or something like that) you need to tell your server to let the request go.
If you want to change the "source" Property of the Image at runtime, just set it after a click oder an other Event. (is no problem)

Resources