Img in it's default size

[drakator]

I would like to display an image file in it's original size (not to declare the size in code, but to use the size of the image)

the following code

  public void onModuleLoad ()
  {
    VLayout v = new VLayout ();
    v.setIsGroup (true);
    v.setGroupTitle ("V");
    v.setWidth100 ();
    v.setHeight100 ();
    v.draw ();

    Img img = new Img ("sistimikiBanner.png");
    img.setAutoFit (true);
    v.addMember (img);
}

does not display the image at all
I try to use
img.setAutoWidth ();
img.setAutoHeight ();
and the image doesn't appear again.



If I change the code into

    VLayout v = new VLayout ();
    v.setIsGroup (true);
    v.setGroupTitle ("V");
    v.setWidth100 ();
    v.setHeight100 ();
    v.draw ();

    Img img = new Img ("sistimikiBanner.png");
    v.addMember (img);
}

(removed the img.setAutoWidth (); img.setAutoHeight ();)

The image comes in the correct height but it is streched in full windows width.
Then...
removing the v.setWidth100 ();
the width of the image is shrinked too mach.


The following code

    HLayout h = new HLayout ();
    h.setIsGroup (true);
    h.setGroupTitle ("V");
    h.setWidth100 ();
    h.setHeight100 ();
    h.draw ();

    Img img3 = new Img ("sistimikiBanner.png");
    h.addMember (img3);

stretches the image in full windows height, but the width is still shrinked (not right)

How coudl I display the image withoud declaring the size in the code?


Best regards

Yorgos Tryfon

[Isomorphic]

Hi Yorgos,

Your issue here is that the image loads asynchronously and SmartClient cannot auto-size to the image until it's been loaded and the browser is reporting it's true size.

You can call adjustForContent() after the images are loaded to auto-size.

The completely correct solution to this is to use FileLoader.cacheFiles() to load the images, then use the callback to call adjustForContent().

[drakator]

Thank you, this was very helpfull, but still it seems that I don't understand something

the following code:

  public void onModuleLoad ()
  {
    final VLayout v = new VLayout ();
    v.setIsGroup (true);
    v.setGroupTitle ("H");
    v.setWidth100 ();
    v.setHeight100 ();
    v.draw ();

    final Img img = new Img ("sistimikiBanner.png");
    v.addMember (img);
    v.addDrawHandler (new DrawHandler()
                          {
                             public void onDraw(DrawEvent event)
                             {
                                img.adjustForContent (true);
                                v.adjustForContent (true);
                             }
                          });
    Button b = new Button ("adjust");
    v.addMember (b);
    b.addClickHandler (new ClickHandler()
                           {
                             public void onClick(ClickEvent k)
                             {
                                img.adjustForContent (true);
                                v.adjustForContent (true);
                             }
                           });
  }

still stretches the image horizontally.
Even if I press the "adjust" button after the image is in the screen, the image does not come into it's right size

Best regards

Yorogs Tryfon

[drakator]

I found
img.setImageType (ImageStyle.CENTER);
If I add this Chrome and Firefox, display the image in it's right dimentions, but IE shrinks the image almost into a point.

I have the impression that this is a small bug from SmartGWT

Best regards

Yorgos Tryfon

[Isomorphic]

The IE difference is because it's a .png and with the technique required to get .png transparency, we can't get the natural size of the image. It's something we can work around and may do so in the future.

The full solution is to load the images, measure them, then provide sizes to components.

[drakator]

I tested it with .jpg and works fine,
thank you.

[gyrofx]

Same problem.

I have the same issue, unfortuneatly I can't make my image a jpg because I use it in different backgrounds (user defined).

I do not understand the solution of measureing the image after the initial load and then setting the sizes etc etc. Perhaps you can provide a code snipet or some such?

My code looks like this: Works fine in Chrome and Firefox but IE it renderers as a pinprick.

String image = "/images/foo.png";
Img logoImg = new Img(image);
logoImg.setImageType(ImageStyle.CENTER);

Thanks and regards.