Vaadin 7 - Multiple browser tabs support

I found that Vaadin 7 manages the multiple tabs problem automatically. But, I’m still facing the issue.

I use ICEPush in my project for some real time updates. (say, to add a row in a table).

When I open the url in the browser for the first time; it works fine. No issues.

The problem occurs when I open the url in another tab or when I refresh the url in the same tab.

The row gets updated to the table in the tab that is opened or refreshed last time and also the row gets added to the table for the number of times I refreshed/opened the url in the tabs.

CASE 1: If I open the url in three tabs; the row is added for three times in the table in the tab that is opened last(3rd tab).

CASE 2: If I refresh the url in the same tab for five times; the row is added for five times in the table in the tab.

CASE 3: Will be one for sure…

Is it a problem with Vaadin? or you think I would have done any mistake in my code?

I don’t quite understand your problem. Is it like this:
In you UI constructor or in a class which gets called from it, you’re adding a row to a table. Now when you open the new Tabs / refresh a Tab more rows get added to the table but the real amount of rows is only displayed in the last opened/refreshed Tab. Is that right?

In Vaadin 7 when you don’t add @PreserveOnRefresh to your UI every time when you’re opening a new tab or refresh the browser, a new UI gets created.

How are you populating the Table? When you populate it in the UI constructor for example with an iterator in which you addItem values into the table it also makes sense that only the last tab hast the right values because when the Data Source get’s updated by another tab being openend the table never receives the update.

Btw. Why are you using ICEPush in Vaadin 7 when you could use the Vaadin 7.1. built-in push mechanism?

Hey Marius,

My problem is that everything is updated on the last opened tab. Nothing is updated to the tabs opened before. And also, The update occurs no. of times I open the url in the tabs. If I open 3 tabs, the update goes to the third tab and also three times(Ex: 3 rows gets added to the table in the third tab).
Check out.

But, It will not solve my problem I guess.

I’m building the table using HierarchicalContainer.

OMG! Vaadin 7 has built-in ICEPush. Can you show me some links.!

Is your Container filled by a Database or using addItem? If it’s the second, how is the Container shared between the UI instances (stored in a static variable, the session or something else)?
Does the same happen when you open the application in 3 different browsers?

In Vaadin 6 when you were trying to do multiple browser support, you got tabs which target the same window instance in the same session. In Vaadin 7 you get multiple UI instances which are stored in the same session (per Browser). Also described
here
.

Server Push Links:

One


Two
and

Three

I’m using addItem() in tables. whenever I add a new item, I get the container datasource and add a new item in the container and use ICEPush to push the changes.

Yes, the same problem happens when I open the application in different browsers.

yes. But there seems to be some problem with it rite.

Thanks for the links Marius. I will check them.

Are you adding the Items in your init or a method which is called by it? …because in that case i think your problem lies in the way you’re trying to push the changes. Then it would make sense:
Tab 1 opens:

  • No entries in the container
  • adding entry A

Tab 2 opens:

  • Entry A in the Container
  • adding entry B

Tab 3 opens:

  • Entries A and B in the Container
  • adding entry C

Changes in the Database doesn’t normally get pushed to other clients/UI.
If you want to Broadcast a message in which you “manually” refresh the Container with the new entries from the Database use
this
.

I’m calling a function from the init() to update the container Marius. And I don’t want to show any broadcast messages that says to refresh the container manually.

Is that not the multiple tabs problem? If so, am I handling the push wrongly.

And the problem is not only with the tables. I found that nothing is pushed to the UI(tabs opened before)(Ex: Update labels, etc). Everything is updated in the tab that is opened recently.

I’m guessing that you’re neither using static variables nor saving variables in the session. This way when you open 3 tabs you have 3 instances of these variables. You have to think of muli-tab support in Vaadin 7 like you’re having 3 different instances of your app open and the only thing they share is the session.

Could you post a little code snippet to show how you’re updating the container?

Also i think you misunderstood the broadcast message thing. I didn’t mean to show a notification to the user. The method in the wiki just executes the same function in every client. This way you can update the container in this function and it would happen for all the clients/tabs.

I noticed the same problem in my environment, using Vaadin 7 and @Push annotation on my UI class.
It would seem that the connectors get mixed up, as the output expected on one browser window or tab) goes to the other one.

I’m not sure Reuben. My problem is that I have made a static reference in the table. That was the reason for all the mess up there. and It is fixed now.

I am going to reopen this thread based on this use case:

    Notification notify = new Notification(null, htmlContent, Notification.Type.TRAY_NOTIFICATION);
    notify.setHtmlContentAllowed(true);

    notify.setDelayMsec(800);
    notify.show(Page.getCurrent()); 

I have my app showing on three tabs: two Firefox tabs and one Chrome tab.
All my notifications from the different tabs are displayed in only one place: one of the FF tabs.
I would have expected Page.getCurrent() to go to the most recently clicked UI, but it seems to always go to the same old tab.

Thanks.