URL control

Vaadin 6 / 7 / 8 Framework UI
1

Hi good forum people,

I have a running Vaadin based application that I have received a feature request on: Allow bookmarks.

I have two places where I need to be able to set bookmarks, one is a view of a particular registered user. The other is on the search.

Currently, the URL just reads http://host/appname/ for all parts of the application. This needs to change, and looking at the other threads in the forum on how to do this, it seems I’m going to have URLs that look like this:

http://host/appname/#user/127

http://host/appname/#search/search=“searchstring”/searchparam1=“5,C++”

For the user, I don’t care much about how the URL looks, as there is a single ID for each user and that’s not hidden. So anything that can say “show user number 127” is good.

For the search, it’s a bit more difficult. I have a general search string as well as any number of <skill level, skill name>. I don’t care how the URL looks, but I need it to be able to give me those things.

I need two things:

  • How to set the URL in the browser, so the user can copy and mail the links, and bookmark them.

  • How to get the URL when the user uses the bookmark or the mailed link.

I looked at the thread in this forum that did involve something similar, but didn’t find the answer in it. I also tried to find the sampler source code, but could only find the source to the individual samples, and they have no URL control.

The perfect solution for me would be to find a way where I don’t actually change the application flow. That means only setting the URL in the browser, not actually using it. And when the user does make a HTTP request with the full URL, only then use the URL to navigate to the page.

I hope someone can help here. And not only by pointing to the window discussion, because I have already read that without figuring out how to do this.

Thank you,

Bo Thorsen,
Monty Program AB.

2

Have you taken a look at
http://vaadin.com/api/com/vaadin/ui/UriFragmentUtility.html
 already?

3

Spotted “experimental” word in the javadocs. Opened a ticket for it
http://dev.vaadin.com/ticket/3258
 - I hope this is just a problem in documentation.

4

The UriFragmentUtility does indeed look useful.

The documentation doesn’t say where in the application it can be used. Can I make a new instance anywhere and just use it to set the browser URL, or should I only have one?

Where do I put the one that tests what the user enters in the URL? I tried creating an instance of this object and setting a FragmentChangeListener, but when the user changes the URL manually and hits return, I don’t see this.

I also tried calling setFragment() but this didn’t actually change the URL in the browser. I have tried both the one inside eclipse and firefox (both on Linux).

Bo.

5

Note that the UriFragmentUtility is actually a Component, and as such have to be added to your layout. Although you can in principle add it anywhere, and as many as you like, I’d really recommend you add it once to your main layout, and keep it there throughout the application lifespan.
It will not receive any events, nor update the client, before it’s ‘rendered’ on the client (obviously it can’t actually be seen, but it’s still there…)

There is one caveat with it also: since it’s a component, it can’t send the fragment to the server before it’s been ‘rendered’ on the client. This will cause a sort of ‘flicker’ of the screen if you for instance change the whole view based on fragment. This is perhaps the main reason it’s marked ‘experimental’; we’ll probably integrate this functionality ‘deeper’ (not as a component) in the framework at some point (this will not break the UriFragmentUtility, though, so you can safely use it - Sampler does).

Best Regards,
Marc

6

Bo, you may also take a look at my experimental TPTMultiView component in contrib/tpt , which solves the problem of having switchable views in the application - it supports UriFragmentUtility, so you can take a look at the sources on how it is actually used.

Regarding your links question - in several our application, we’ve used switchable views. So, for instance, search function is just the same view , say with the name “search”, so when user performs a search (or uses the bookmarked link), the url is typically as follows: http://myserver/myapp#search/find me something

In case of UriFragmentUtility actual search performed by the view activation, e.g. when receiving an event from fragment utility component on changed fragment - so you can parse the fragment, extract the parameters and perform the search. In TPTMultiView this is handled automatically, your view just receives the viewActivated event with the parameter extracted from the uri fragment.

Hope this helps,

Dmitri