Integration with JSP pages

Before I go down this path, can anybody tell me if the following link about integrating JSPs with Vaadin is still valid?


http://dev.vaadin.com/wiki/Articles/JSPIntegration

In our user-defined documents system, using CKEditor to generate the HTML, we generate JSPs that wrap the user-defined HTML, do conditional logic, etc., but think it might be nice to be able to use Vaadin Table, Tree, Date popup widgets, etc. for some of these JSP pages.

Thanks!

I believe the article and some of the included files are very outdated, but the general approach of embedding a Vaadin application on a JSP page should work. You should have a JSP page that starts the Vaadin application, and embed Vaadin in a div on the page. The Vaadin application can have a CustomLayout itself, but JSP is not handled within that div.

If you need to put Vaadin components here and there on the page, things get more complicated as the JSP is compiled into a servlet (see
this post
). Maybe it would be possible to e.g. extend the CustomLayout approach (on the client side) to let it add components to locations “outside” the Vaadin application - not sure if this would work.

If the HTML is user written, be extra careful with security - it is very easy to create security holes by displaying user-written HTML directly to another user, and you cannot trust the client but need to filter everything on the server side. Alternate encodings etc. can make this tricky, so do some reading first.

Maybe someone else with more experience with JSP can tell more - mine is very minimal.

Thanks for the tips, Henri.

I think I understand that Vaadin can be embedded, but only in a single DIV, so I can’t sprinkle components easily. I suppose that makes sense and I’ll stick with simpler javascript-only solutions for Calendar date pickers and the like from the JSPs.

We don’t have a concern for the JSP HTML because the users are building their own documents, web pages, etc. and so have whatever freedom they want to manipulate their own web app. It’s not like a forum where others are able to post HTML that is then rendered to others and prone to XSS. And since the web pages sent to the user’s browser are digitally signed and fully tracked by user and IP, it’s not even a good idea because it would just prove the mischief through hard-to-deny evidence.

I suppose it wouldn’t be too hard to extend/modify VCustomLayout to allow “sprinkling” of components outside the original DIV. There are probably some issues to take care of, such as theme, since you would need to add at least .v-app and maybe other classes to the containing element.

The same need has been discussed before here:

http://vaadin.com/forum/-/message_boards/message/237406

The author of the ExternalLayout promised to try packaging the component to Directory this week.

cheers,
matti

I uploaded the
ExternalLayout
to the directory. Although I marked it as beta, it has been running in production environments for a while. It’s a simple component, so let me know if there’s any additional functionality you need.

Thanks, Risto. Is there any more sizable or complete example that shows everything necessary to have a JSP page render the Vaadin components in different areas? I seem to see how the layout can be used to target a component to a DIV id, but not how the JSP page is integrated with it all.

We have two basic scenarios that I can see a need for:

  1. We have a Vaadin app that triggers a component (CKEditor in our case) that itself opens its own popup dialog that then can open a JSP window without any interaction with Vaadin, and we’d like that JSP page to reconnect back to the existing Vaadin app/session and be able to incorporate Vaadin components. Right now, our popup JSP page simply is pure JSP and has no Vaadin-isms.

  2. Users arrive at a JSP page that is not a Vaadin app at all (it’s mostly user-defined HTML content converted to a JSP), but we’d like to perhaps add a few Vaadin widgets here and there, such as calendar/date popups, rich text editor, tooltip popups, file uploaders, etc.

If you have any examples that show such flows, it would be very helpful. Thanks much!

Hi David,

An old post, but thought I’d point at least one option for the JSP integration.

The small example file
http://demo.vaadin.com/multiapp.html
has been in the package for as long as I remember (or at least from somewhere like v.5.2), and if you check the source of that HTML file, you should easily be able to pick up the things that you need to add to your JSP page for it to render Vaadin parts. And Risto’s ExternalLayout makes it possible to embed bits and pieces of Vaadin into the page, not just inside one container element.

HTH,
Jouni

Wow, exactly what I was looking for and was going to make a new thread for it.

So despite this being an old post, it was still a very useful reply.

Hi,

With respect to the displaying VAADIN application on the JSP page, there is a significant documentation gap that currently exists in Book of Vaadin and elsewhere.

The Book of VAADIN lists the necessary Javascript and CSS includes on the JSP page. However, it does NOT mention changes that needs to be added to your application
web.xml
configurations. Without these the application won’t be able to find the VAADIN resources.

Here are the things that need to be in your web.xml

I assume that the standand VAADIN servlet is used.

Vaadin Application Servlet com.vaadin.terminal.gwt.server.ApplicationServlet Vaadin application class to start application com.yourcompany.YourVAADINAppClass Vaadin Application Servlet /VAADIN/* Vaadin Application Servlet //*

Please note that
“/*”
in url-pattern is important - it will not work without it.

Then on your page section the VAADIN configuration is

This should be mentioned in
Book of Vaadin

Hello Rosti,

i think your explanation is really good.
But i still don’t understand one thing that you wrote.
In our head section of the Vaadin Configuration… Where is this Vaadin configuration? Is it the jsp page that we created???

In https://vaadin.com/book/-/page/application.embedding.html there is an embedded application. But where is this embedded application in our project?

Because vaadin has the same structure like servlet. So I imagine, to integrate JSP in our vaadin application, we need to make jsp file in the docroot.
And after that, we need to add in the web.xml. Right?

let’s say our jsp file in the docroot is upload.jsp.
So in the web.xml, we need to add



  <welcome-file-list>
    <welcome-file>upload.jsp</welcome-file>
  </welcome-file-list>

Is it right?

My goal is to use jsp page in my vaadin application. I tried to use this source code, but it’s now working 100% as it should be. http://dev.vaadin.com/wiki/Articles/JSPIntegration#no1

It should be like on the first screenshot (Unbennant.jpg)

but after I implement the source code by myself. The index.jsp is not called. only the Vaadin application is called showing the table.
It looks like on the second screenshot (Unbenannt1.jpg)

I need help and explanation please…
12453.jpg
12454.jpg

That wiki page is very old and concerns IT Mill Toolkit 5 (the predecessor of Vaadin). While many parts of the APIs from the toolkit are still present in Vaadin, these parts may have changed quite a bit.

The Vaadin configuration mentioned is what you get when navigating to a normal (non-embedded) Vaadin application - you can see it in the developer tools of your browser and copy an initial version from there to your top-level JSP page.

Hello Henri,

but how i can i map my vaadin project so that the upload.jsp is being called?

The point is, i want that once my vaadin project is deployed, it calls the jsp page that i created.

Is there an example of how to use the External Layout, i.e. how do I access components in the External Layout using a URL? I would like to include a Vaadin page in another website from a different subdomain. So, for example, I have html page at www.mydomain.com that needs to add content from vaadin.mydomain.com.

I was unable to get my changes to the example at http://demo.vaadin.com/multiapp.html to work.

Hi Enric,
i want to ask you if you have solved ur problem?
because right now I am having the same issue like you.

Thanks in Advance.

me too, thanks in advance