Image with vertical and horizontal scroll bars

Hi, I’m trying to display a large image inside a small panel. I would like vertical and horizontal scroll bars to appear when necessary on the panel. This will allow the user to use the scroll bars to ‘pan’ over the image. The image will be too large to fit in the panel. I can’t for the life of me get the scroll bars to both show up. I am hoping a Vaadin expert can help me out with this simple example.

Here’s the code that I have, but it doesn’t work:


public class SimpleEditor extends Window implements ClickListener, MouseEvents.ClickListener {

	public SimpleEditor(MainScreen app) {
		super("Simple Editor");
		
		this.setWidth("70%");
		this.setHeight("70%");
		
		Label tl = new Label("Top Label With Instructions");
		addComponent(tl);
		
		Panel p = new Panel("Image Panel");
		p.setSizeFull();
		p.setScrollable(true);
		Embedded e = new Embedded("Image", new ExternalResource("http://www.arthistoryarchive.com/arthistory/cubism/images/PabloPicasso-Blue-Nude-1902.jpg"));
		p.addComponent(e);
		
		addComponent(p);
	}

I want the scroll bars to show up only on the Panel ‘p’. If you could add in the additional code to make both the scroll bars show up, that would be great. I’ve tried just about every combination of setSizeFull(), setSizeUndefined(), setExpandRatio() that I can think of. I also read the forums, but I can’t figure it out yet. Thank-you very much for your help.

Hi,

for the scrolling to work correctly, the content of the panel must have undefined size. Try adding the following code:

p.getContent().setSizeUndefined(); Panel has by default a VerticalLayout as its content.


Tepi

Hi, I went through the same task recently.

This is what works well for me:

panel = new Panel(null,
new VerDashLayout()
);
panel.setSizeFull();
panel.setScrollable(true);

embedded = new Embedded(null, resource);

embedded.setSizeUndefined();

panel.addComponent(embedded);

Notice the use of alternative VerDashLayout (add-on) instead of standard VerticalLayout. With VerticalLayout I was able to get only vertical scrollbar visible, whilst with VerDashLayout both scrollbars are on.

It’s also possible to switch between embedded.setSizeFull() and embedded.setSizeUndefined() to change view mode on the fly (like on mouse click). Sweet.


Image 3072px × 2304px displayed in setSizeUndefined setup (1:1 with scrollbars)


Image 3072px × 2304px displayed in setSizeFull setup (stretched to panel size respecting image aspect ratio)

Thank-you both for your help. I finally got it to work.

One more thing that I think is important is the order in which you call addComponent. It seems as though the ‘proper’ way is to add ‘leaf’ components to their parents first, and then add those branches to their ‘parents’ all the way up the tree. I didn’t see any mention of this in the documentation. However, from my tests:


Label l = new Label("Label");
Panel p = new Panel("Panel");
addComponent(p);
p.addComponent(l);

will give different results than


Label l = new Label("Label");
Panel p = new Panel("Panel");
p.addComponent(l);
addComponent(p);

Not sure why this is. Maybe someone from Vaadin dev can comment. If my claim is correct, then it would be very useful to have this made clear in the API documentation and Book of Vaadin.

Thanks
Alex.

The order in which components are added to the component hierarchy should not have any effect on the resulting component tree (and the rendering in the browser), as long as the hierarchy is the same in both cases.

If there really is a difference, it is definitely a bug in Vaadin and you should file a ticket to the vaadin trac. Preferably include a small test case and point out what are the differences in the rendering.


Tepi