Multiple Vaadin component of same type on a page

I have a Vaadin component which is embedded using div approach on the html page.

Now, I want to use this component on another location of the same page. So how do i do that?

in head i have entry like

i tried to create another entry with id joinus2 this renders fine at both the places but when i click on first link it works. If i click on the second link i see a error saying out of sync from server. So how to fix it?

any updates on this please?

Hi!

You cannot use the same Vaadin Window at the same time. Not on a same page, not even in separate windows.

You need to use another Window instance for the other location or a totally different Vaadin application.

Check out this chapter in Book of Vaadin to get started with multiple top level windows.

http://vaadin.com/book/-/page/application.windows.html

cheers,
matti

Hie

Thankx i went throught that but kind of did not understood how to use this concept in my case.

On my every web page there has to be a subscribe link at the top and at the bottom of the page.

The code is like:

public class SubscribeModule extends Application{
SubscriptionBean bean =null;

@Override
public void init() {
	final Window mainWindow = new Window("Sakshum Application"); 

		PopupView.Content content = new PopupView.Content() {
            public String getMinimizedValueAsHTML() {
            	return "Join Us";
            }

            public Component getPopupComponent() {
                
            	Panel panel = new Panel("Join us...");
            	panel.setSizeUndefined();
            		        	     
        		final Form subscribeform = new Form();
        		subscribeform.setImmediate(true);
        		subscribeform.setCaption("Subscribe/Unsubscribe");

}

PopupView pe = new PopupView(content);
pe.setDescription(“Join Us”);
pe.setHideOnMouseOut(false);
mainWindow.addComponent(pe);
setMainWindow(mainWindow);
}
}

So i have embedded it using div method at the top. Now what should i change in code so that putting it again at bottom will work?

Hi,

First move all your UI stuff to a custom window (e.g
MyWindow extends Window
) so that your init() looks something like this:

public void init() {
   setMainWindow(new MyWindow());
}

Then override
getWindow()
to return a new
MyWindow
when needed, something like this:

public Window getWindow(String name) {
  // first see if the window already exists
  Window w = super.getWindow(name);
  if (w == null) {
    // if not, create a new one
    w = new MyWindow();
    w.setName(name);
    addWindow(w);
  }
  return w;
}  

HTH,
Marc

Hie thanks for the reply… but still a bit on complex to understand what exactly you meant. here are the doubts:

  1. you said me to move the stuff first to a custom window. So what will be there in the existing class i,e

public class SubscribeModule extends Application{

which has the initi method and all the code.

Another questions:

I understood how to get two instances of the window but as i m embedding in the same page twice this component then how will i know/ or my app know that which window to return for which link?

  1. As Marc already showed, your init in your Application class will only be one row long. Basically all the code that he posted is what should be inside your “SubscribeModule”.

  2. Look at Marcs getWindow. when you call on your application with a url like http://localhost/Subscribe/first - where “Subscribe” is the name of the application and “first” is the name of the window. getWindow(String name) will get the parameter name=“first”. It will create a new window if there is no window with that name, otherwise it will return a window that is already created.

You can put your first div to point to http://localhost/Subscribe/subscribeForm1 and the second div to point to http://localhost/Subscribe/subscribeForm2. This way they will be given own windows by the getWindow function.

HI,

Another option, if you don’t want to do it the getWindow() -way, or if you find this easier:

Modify web.xml so that you have two servlets (using the same Application):

	<servlet>
		<servlet-name>Window1</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
		<init-param>
			<param-name>application</param-name>
			<param-value>com.example.SubscribeModule</param-value>
		</init-param>
	</servlet>
	<servlet>
		<servlet-name>Window2</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
		<init-param>
			<param-name>application</param-name>
			<param-value>com.example.SubscribeModule</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>Window1</servlet-name>
		<url-pattern>/VAADIN/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Window1</servlet-name>
		<url-pattern>/win1/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Window2</servlet-name>
		<url-pattern>/win2/*</url-pattern>
	</servlet-mapping>

This is of course a little bit ‘static’ (exactly two apps, need to modify web.xml if you want a third…)

Best Regards,
Marc

hie I tried as suggested but now the join us link does not render.

i created a new class SubscribeModuleWindow extends Window

and put all the code in the init method of it.

In the original calss now i have

@Override
public void init() {
setMainWindow(new SubscribeModuleWindow());

}

public Window getWindow(String name) {
	   // first see if the window already exists
	   Window w = super.getWindow(name);
	   if (w == null) {
	     // if not, create a new one
	     w = new SubscribeModuleWindow();
	     w.setName(name);
	     addWindow(w);
	   }
	  return w;
}  

and in the index.html the div is now pointing to
var vaadin = {
vaadinConfigurations: {
‘joinus’ :{
appUri:‘/server’,
pathInfo: ‘/SubscribeModule/first’,
themeUri: ‘/VAADIN/themes/sakshumTheme’,
versionInfo : {vaadinVersion:“6.1.4”,applicationVersion:“NONVERSIONED”}
},
}};

i set the break points and could see that flow is going to both the methods. but on ui the ‘join us’ does not render.
any idea what could be the issue?

any updates please on this?

Check if it’s actually rendered but not visible due to a (e.g) 0px -sized div? (you can verify this with Firebug ‘inspect element’ - if the link is present in the DOM, then that’s your problem…)

Best Regards,
Marc

hie attaching a screenshot from firebug. i have non zero width and height specified.

firebug screenshot shows that but not sure what could be the issue now
11198.png

Looks like there’s no content inside the vertical layout in that screenshot. Might be because the JS rendering throws an exception at some point, or that there is actually no content to be rendered. Check with the ?debug window from the UIDL change that it actually contains all the components that should be rendered.

sorry Jouni looks like i m too dumb to understand what you meant on debugging if js threw any errors.

I am badly stuck at this point with Vaadin and cannot make any progress.

need help on this

You add the “?debug” URL parameter after your application URL and reload the page. The Vaadin debug window then opens in the lower right corner.

From there, you can see if any errors are printed on the console (just scroll down and read carefully).

To see if all of the components that should be visible are sent to the client, expand the first “change” node from the plus icons. There you should see something similar like in the screenshot I attached.
11199.png

i tried http://localhost:3158/index.html?debug

and no debug window opens up for me

Do you have productionMode disabled in your web.xml?

<context-param>
		<param-name>productionMode</param-name>
		<param-value>false</param-value>
		<description>Vaadin production mode</description>
	</context-param>

Having productionMode on will prevent the debug window from opening.

ok it was enabled. i disabled it but still no luck.

Here’s a video showing how to enable the debug window from the browser. Sorry for the huge watermark, I’m a cheap bastard and can’t afford the license :slight_smile:

The video was made with Vaadin version 5.3 (called IT Mill Toolkit at that time), but it’s still the same for Vaadin 6:
http://dl.dropbox.com/u/427102/debug-window.mov

ok i m doing exactly the same thing but this debug winodw does not come at all for me. any other way to find out whats happening?

my page at the load time shows revolving ajax icon for some time and finally nothing comes up