Rendering and accessing input params html pages in vaadin.

Hi all,

I am a newbe to Vaadin and I have situation where I have to render html pages (for static data) from Vaadin. Also when an action (like click on an image/button by the user) on the rendered html objects, is taken, I would like to be able to process those requests in Vaadin application. Depending on the request I might want to render another html page or update the server side layout/panels.

Question 1: Is there a support in Vaadin to mix and match rendering html pages and Vaadin application response for the requests coming from browser?

Question 2: Can some one point me to a working example for this.

Thanks in advance.

Raj,.

Hi Nagaraju !

In Vaadin, the CustomLayout class has the capability to render html, mixed with a Vaadin controls. So you can generate html code on the fly in your app and then pass it to the CustomLayout instance, then use this instance as a regulat component in your UI windows.

If you want to render extrenal html source (say, from other website or servlet) - try using Embedded component with the URL of html/servlet page.

In both cases, your html code may contain links. If link will point to your application - it will be re-invoked and you can catch parameters and process them. As a drawback - this will cause your web page to refresh.

Also, for the first usecase, you can replace your links in html code with the placeholders for Vaadin’s Button component - this will allow to handle clicks from those buttons more gracefully and avoid page reloads.

For both - CustomLayout and Embedded, displaying external html source - you can check the Sampler application on Vaadin website - see CustomLayout and Embedded sections.

Dimitri,

Thanks for the reply. The reason I wanted to render html is to get the hovering effect/mouse over effect that we can achieve in html very easily. Is there anyway we can achieve the same effect in Vaadin?

Thanks
Raj.

For hovering, for sure, it is easier and more correct just to adjust the css styles for a button.

The CSS pseudo class :hover could do what you need, but unfortunately that does only work for A-elements in IE6. If you don’t need to support IE6, all the better :slight_smile:

CSS psuedo:hover has just worked for my need. Thanks for the help.