Flex forcing resizing when the image source update is completed - image

I update the source property of an image. When the image is loaded I want to redraw the border skin to fit the new size of the image.
newImgEdit.addEventListener(Event.COMPLETE, loadImgComplete);
newImgEdit.source = myurl_ressource;
private function loadImgComplete(evt:Event):void {
trace("redraw !!");
//invalidateDisplayList();
this.setStyle("borderSkin", ShapeContainerBorderOn);
var img:Image = evt.currentTarget as Image;
img.removeEventListener(Event.COMPLETE, loadImgComplete);
}
The trace "redraw" seems to happen once the image is loaded but the border still does not get redrawn with the correct height and width.
Do I need to remove the listener or will it be garbage-collected later?

You can manually force a component to update its layout by calling validateNow().

Related

JavaFX Auto Resizing Group

I have a quite complex scene graph which has led me to some resizing problems. I'd be glad if you could help me solve it.
My root node is a BorderPane that its center is filled with a ListView. Each cell of the ListView is filled with a customized zoomable ScrollPane as below:
public class ZoomableScrollPane extends ScrollPane {
Group zoomGroup;
Scale scaleTransform;
LineChart<Number , Number> content;
double scaleValue = 1.0;
double delta = 0.1;
public ZoomableScrollPane(LineChart<Number , Number> content, double height) {
this.content = content;
this.setPrefHeight(height);
Group contentGroup = new Group();
zoomGroup = new Group();
contentGroup.getChildren().add(zoomGroup);
zoomGroup.getChildren().add(content);
setContent(contentGroup);
scaleTransform = new Scale(scaleValue, scaleValue, 0, 0);
zoomGroup.getTransforms().add(scaleTransform);
}
}
As you can see there is a LineChart inside of each ZoomableScrollPane. I want to do two things with this chart. Firstly, to somehow bind its width with the root layout to get the desired result in case of resizing the window (not zooming, zooming is OK), and secondly to change the chart's width at run time whenever a button is pressed:
public void handleButton(ActionEvent actionEvent) {
MainController.lineChart1.setPrefWidth(MainController.lineChart1.getPrefWidth() + CONSTANT);
}
The problem is that here I face a conflict. Cause the LineChart is the child of a Group (not a pane), I just know one way of resizability and that is to bind its width manually with the root BorderPane's like this:
MainController.lineChart1.prefWidthProperty().bind(fourChannels.widthProperty().subtract(40));
And in that case, I cannot change the LineChart's width at run time and will get A bound value cannot be set Exception.
I guess one solution could be revising the ZoomableScrollPane class to somehow avoid the need of manual binding, but really have no idea how to do it.
Any help on this would be greatly appreciated.
You can detect if a property is bound and then unbind it before manipulating it:
if (content.prefWidthProperty().isBound()) {
content.prefWidthProperty().unbind();
}
...
Presumably when you are zoomed in on a chart and the window is resized the content will already be larger than the viewport, so a forced change in width shouldn't kick in until the window is resized beyond the zoomed in size of the chart?
Given the different conditions you have you might be better off monitoring the size of the BorderPane/ListView and when that changes adjust the size of the charts that need it.

highcharts image not resized after window resize

Is there any way to resize highcharts rendered image after window resize?
I have set up a fiddle file here.
events: {
load: function() {
var img = this.renderer.image('http://www.highcharts.com/demo/gfx/skies.jpg', (200),30,200,300);
img.add();
}
}
Click on the window restore down button, then you will see the image is not at the correct place. Can someone help me with this?
try using the redraw event to re-size the image
Fiddle Demo Here that should give you a start,
make sure you have a reference for the image var img; so you can remove it and added with the redraw event

What is the difference between createImageView and createView (Titanium Studio)

I am using Titanium Studio for mobile development.
The following two things used to display image. But may i know the difference between following,
1. Ti.UI.createImageView({ width:100, height:50, Image:'image path' });
2. Ti.UI.createView({ width:100, height:50, backgroundImage:'image path' });
Both displaying specified image.
what is the difference between these two.
craeteView also displaying image then , why we use createImageView.
can any one please..
View is an empty drawing surface or container, which is the base type for all UI widgets in Titanium where as image view is a view used to display a single image or series of animated images. All events of Titanium.UI.ImageView is Inherited from Titanium.UI.View. You can not make an animation using view and also an image view has some additional events like start, stop, pause, load etc.
The main difference is you can show URL image (or Remote image) in ImageView, while you can only show resource image in View
var view = Ti.UI.createView();
var imageView = Ti.UI.createImageView();
//Valid:
view.backgroundImage = 'image.png';
imageView.backgroundImage = 'image.png';
imageView.image = 'http://somesite.com/image.png';
//Invalid:
view.backgroundImage = 'http://somesite.com/image.png';
imageView.backgroundImage = 'http://somesite.com/image.png';
Also, as #Anand said, you can show series of images in ImageView

Load image and change width and height as3

i want to load image from remote url and synchronicity and change it width and height.
i am using the folowwing code, but it want let me change the width and highet, i think i needto convert the loader to a Bitmap object.
how can i do that, thank you very much.
var imageURLRequest:URLRequest = new URLRequest(pic);
var myImageLoader:Loader = new Loader();
myImageLoader.load(imageURLRequest);
var urlRequest:URLRequest = new URLRequest(pic);
var loader:Loader = new Loader();
loader.load(urlRequest);
trace(loader.width); // return 0
loader.width =100; //dosent work
allMC[i].img.addChild(loader);
To access what the loader loaded, use loader.content reference. If you are loading an image, you can retrieve its raw data via (loader.content as Bitmap).bitmapData, of course first check if it's so via if (loader.content is Bitmap). Also, you need to do all of this after your loader will finish loading, it'll send an event indicating this.
...
loader.load(urlRequest);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
...
private function loaderComplete(e:Event):void {
// now your image is fully loaded
trace(loader.content.width);
// etc etc, whatever you need to do with your image prior to
// addressing it from elsewhere.
}

Trigger effect after changing src attribute of img tag

Im using this code to change the src attribute of an image tag (using prototype and scriptaculous):
new Effect.Fade("images",{afterFinish:
function()
{
$("detail").setAttribute("src", "img/02.jpg");
new Effect.Appear("images",{duration:0.8});
}
});
Where "images" is the container (a div) and "detail" is the img tag
The result is the current image fades, appears and then the new image suddenly shows.
My question is, how can i check the new image is fully loaded by the browser to trigger the Effect.Appear after?
Is there another way to do this?
Images have an onload event you can hook up to:
$("detail").onload = function()
{ do_stuff(); } // Remember to do this BEFORE changing the src
In my experience, it is a bit flaky sometimes (at times doesn't seem to get executed). It would be better to pre-load the image and allow this effect only after the full document has loaded (onload instead of dom:load or ready).
Replace
new Effect.Appear("images",{duration:0.8});
with
Event.observe("detail", 'load', function() {
new Effect.Appear("images",{duration:0.8});
Event.stopObserving('detail', 'load');
});
To tell the user that you are loading the image, you could set a css background to the image, with a spinnging circle or whatever suits.

Resources