Reload page in browser issue ?

Is anyone else finding that you need to quit the browser to get the UI refreshed ?

Hi!

When this kind of thing (only forcing a reload shows the changes) you’ve probably struck a bug in Vaadin. Could you please give a test case and more information about what you’re experiencing?

You can file a ticket for the problem in our trac (
dev.vaadin.com
- requires registration).

Vaadin shouldn’t in any case what-so-ever react in this way so please file a ticket and the guys’ll fix the problem for good. :slight_smile:

Thanks,
/Jonatan

I’m sorry if I’m asking for the obvious, but what do you mean by “getting the UI refreshed”? Do you mean that even if you refresh the browser, the UI stays the same and the application does not “start from the beginning”, so to say? If this is the case, then you’ve ran into a feature, not a bug. Vaadin’s state is preserved on the server, which means that the browser doesn’t actually know anything about the application’s state, it only renders the UI as how the server has told it to render it. This means that if you go to another site with your browser and then come back to your application (or like in your case, you just hit refresh), your application will still be in the exact same state as when you left the application - this is because the server remembers what you were doing and then just tells the browser to render the UI like it was when you left.

If you really want to restart your application, closing the browser will help because then the session between your browser and the server will expire, thus creating a new session in the newly opened browser. There is however a much easier way to accomplish the same effect without closing your browser. All you have to do is to add the parameter “?restartApplication” to your URL.

For example, go to the calculator demo


http://demo.vaadin.com/Calc/

Try it our, click some buttons and then hit refresh on your browser. As you will notice, the state of the application is preserved, in other words, the label will have the same value as it had before you clicked refresh. Now compare this with the following URL


http://demo.vaadin.com/Calc/?restartApplication

If you now do the same procedure, you will see that after the refresh the label will be 0.0 as application’s state is reseted when you clicked refresh.

Thanks a lot Kim - that explains it !

Hi Kim,

As I develop more screens with Vaadin I come into the problem of stale data being displayed.


Simple use case:

Imagine we have a classic application with products. There is a product table in the DB.
A page displays the product description. That Vaadin screen is mainly composed of labels arranged in layouts.

The user opens another browser tab to edit the product and changes the description.

That user comes back to the tab with the 1st screen, displaying the product description. The old description is still displayed. No problemo, it’s a web application, the user knows that and did not expect the new description. So the user press F5 to refresh the browser and … oh damned… still the old product description.

I understand the mechanics that the label is kept in the session and just rendered by Vaadin into Html. Nothing triggers querying the new description in the DB.

But for the end-user this is not understandable/acceptable.


Question

That problem is very common with Vaadin, isn’t it?

How would you solve that user case / problem with Vaadin?


Events

I could imagine that the edit screen fires a “ProductChanged” event and that the screen displaying the product would be listening to, and rebuild itself (re-instantiate the labels) when the user presses save on the edit screen.
But I fear I’ll have many listeners (all the components displaying a product somewhere in the application…).

An easier solution for the lazy programmer I am is welcome.


Special request

Can’t Vaadin understand that the http request to refresh the page entierly is special and its window should be rebuilt? The request is special in the sense it is no usual ajax request sent by a Javascript component.
If somewhere (as Application.getWindow() or TransactionListener.transactionStart(), or even a javax.servlet.Filter) I could know “this is a refresh request, man”, then I could simply kill the window instance and instantiate/construct a new one with fresh data.

But… even if you tell me how to do (which is still welcome), it brings another problem: what if a different user was looking at the display product description page? That other user does not know the description changed and will not press F5. You thoughts on that are welcome too…

Again, any idea is welcome :slight_smile:

If I understood correctly what you are describing, the clean solution is “server push”. I think you should look at
http://vaadin.com/forum/-/message_boards/message/43497
and the refresher.

Thank you Risto for the suggestion.

In the “event” solution, the refresher could be used to propagate refresh requests to the client.
My main problem with the event solution is to make components listen to events (which could quickly be a mess in the application)

I’m ok with the “user use the browser refresh” solution but currently, a browser refresh request does not change the server state (labels, lists,…) and nothing is refreshed from the DB.

My main question is: how to identify that the user uses the refresh browser button, so I can trigger the full rebuild of the window?

You rock !

Hi,

Generally about the data-refreshing problem you describe (“for the record”):
It is usually (always?) a good thing that the framework does not automatically refresh everything. If one Table changes, it’s obviously not a good thing to re-load (from db) and re-render the two other tables on the page, and so on. The absolutely best thing is if you can build a mechanism to refresh only the data that has been changed. In some cases this is easy and comes naturally, in other cases it can be quite cumbersome. Actually refreshing the data is usually not hard at all (e.g a refreshUserTable() -method), but detecting what to refresh and when can be.
It might be useful to note that this is the same problem you would have with a desktop application (although redrawing the whole UI is usually ‘cheaper’ in a desktop app).

Actually you might just be able to pull this one off exactly as you want - you almost figured it out, too :slight_smile:

(Ok, a disclaimer first: your application might have some additional features/restrictions that I don’t know about)

The secret lies in getWindow() - you can make it return a new window on each reload, if you remove the window from the application in the CloseListener.

NOTE I would not recommend doing it this way usually, only if your application specifically needs this behavior.
Also note that you will really have to rebuild the window from scratch - that includes figuring out which view to display.


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

    public Window getWindow(String name) {
        Window w = super.getWindow(name);
        if (w == null) {
            w = new MyWindow();
            addWindow(w);
        }
        return w;
    }

    class MyWindow extends Window {
        MyWindow() {
            // some components to test
            addComponent(new TextField());
            addComponent(new Button("Save"));

            // we need to remove on close
            addListener(new CloseListener() {
                public void windowClose(CloseEvent e) {
                    getApplication().removeWindow(e.getWindow());
                    if (getMainWindow() == null) {
                        // can't live w/o mainWindow
                        setMainWindow(new MyWindow());
                    }
                }
            });
        }
    }

Not sure if this is directly applicable to your application, though…?

Best Regards,
Marc

I’ll go ahead an outline a different way to go about this while I’m at it:

Quite often applications will have a View -concept, and the Views will have an activate() -method that would be called when the View is displayed. At this point, one can go ahead and refresh the data - either everything that might have been changed, or by using some mechanism built in to the application to figure out which data is ‘dirty’.

How fine grained the refreshing must be depends on the amount of data, and the complexity of the UI, and which operations you deem ‘expensive’ (database queries, network latency, rendering time…) If you have a long table that takes some time to render (and your users use IE6), you will not want to render it any more than necessary. On the other hand, if the user presses ‘reload’, it will still get re-rendered - but do you want to hit the database every time? It depends…

Although the needs vary from application to application, it would probably help if we had a slightly more high-level framework for this - i.e some sort of View -framework, like the one mentioned above. This is planned, and once we get it into the release, it will at least provide a starting point so that this does not have to be thought out from scratch on a very low level for each application.

Best Regards,
Marc

John:

I’m having essentially the exact same issue, although my use-case is a bit different. We’re embedding a Vaadin page in a JSP, and we need the Vaadin component to “know” when the containing page is refreshed (e.g. like the user clicking the “reload” button, or navigating away and back again).

We worked around it for a while by just adding a “Reset” button on our form, but the user would still like to just click the “reload” button and see the “old” data. E.g. it’s the equivalent of “Discard” in our situation.

What we’ve done for now is put a scriptlet in the JSP that does the refresh call, but that’s a bit hacky, it seems.

Ideally we’d like a “onLoad”-type event that a component could subscribe to.

Any news on this problem, or should we make a feature request or even have a go at adding it and submitting a patch?

Regards,

Mike

Adding to my previous description, I’ve since learned more about GWT, and I think what I’m looking for is something like the GWT History component, where I can catch an event based on the user clicking either Refresh/Reload or Back/Forward and decide what I want to do about that in my Vaadin component.

Anyone know of a technique for this?

Can u please guide be how to implement page reloding, am searching for some many days

Looking for reply,
T.Amar,
amar.it1226@gmail.com