Rendering PopupView as a clickable image

Vaadin 6 / 7 / 8 Framework UI
1

Hie

I am willing to render my popupview as a clickable image. Is it possible ? Right now it just comes like a text with a gray background. See the example below for how it renders currently.

http://uilder.virtuallypreinstalled.com/run/PopupViewDemo/

Vik
http://adfjsf.blogspot.com

2

PopupView can be rendered as any html.

3

any sample example to render it just a link ? right now the code is:

final ObjectProperty prop = new ObjectProperty(“Join Us”);
PopupView.Content content = new PopupView.Content() {
public String getMinimizedValueAsHTML() {
return prop.toString();
}

I this this part is responsible to render it as a plain text. so how to make it render as a link or a clickable image

4

You mean something like this?

PopupView.Content content = new PopupView.Content() {
    public String getMinimizedValueAsHTML() {
        return "<a href=\"#\">Join Us</a>";
    }
}

or

PopupView.Content content = new PopupView.Content() {
    public String getMinimizedValueAsHTML() {
        return "<img src=\"http://vaadin.com/favicon.ico\"/>";
    }
}
5

You know this image rendering does not render any image most of the time in chrome broswer.

Works fine in ie and firefox. Any idea?

6

even in case of firefox: mostly u need to press F5 again to see it.
So this works great only with IE.

any help?

7

This might be worth a ticket, so that PopupView supported resources as icons etc. The way I resolved this in a project of mine, was to use a div like [code]

[/code] Then I used CSS to size the div according to the image proportions and used the image as a background for the div. A bit cumbersome, but it worked with all the major browsers.
8

Well in my case the div is specified as:

which is enough for the image to render.

Does your statement still holds good?

Vik
http://adfjsf.blogspot.com

9

+1 for a ticket. Please create ;)

10

here is one
http://dev.vaadin.com/ticket/3709

11

can anyone please comment on how to implement the workaround suggested in above ticket.

12

Added sample code to the ticket for the workaround.

13

Thanks for the help… but yesterday I finally gave up with Vaadin and now trying GWT.

14

I’ve done it like this:


        // icon size 
        popupView.setWidth("20px");
		popupView.setHeight("16px");
        popupView.setStyleName("image-popup");

		Content content = new Content() {

			@Override
			public Component getPopupComponent() {
				return createPopupComponent();
			}

			@Override
			public String getMinimizedValueAsHTML() {
				return "&nbsp";   // show nothing 
			}
		};
		popupView.setContent(content);

and then I add my css style:

.image-popup {
        //  image you want to see 
	background: url('./images/dashboard-ico.png') no-repeat scroll center
	center transparent !important;
        //  no underline text in popup
	text-decoration: none;
}