Could you please post an example for how to embed a Vaadin 7 UI in a div element? I can get my ‘VaadinUI’ to work, but cannot embed that UI in a div element using the instructions found in https://vaadin.com/book/-/page/application.embedding.html. I am using Vaadin 7.0.0.beta2.
Are the application configurations the same as with vaadin 6? I am using the following configurations:
VaadinConfigurations seems to be have been removed(ported?) from the
ApplicationConfiguration > loadFromDOM() class in Vaadin 7
Any workaround to this functionality yet?
thank you for your post. Your workaround is very similar to the page generated by a stand-alone Vaadin app.
However, (Beta6), neither the originally generated page nor your posted code works for me. I also have a html/jsp page at the context root and a Vaadin app somewhere below, but even with any thinkable adaptations to appUri or initialPath I cannot get it work. There is no error message, the bootstrap JS seemed to run without error and the app loader animated gif appears. But nothing else then (app loader is shown forever) …
Entering the subpath for the Vaadin app, the app starts without problems.
Any suggestions?
Isn’t there any “official” documentation about embedding a Vaadin 7 app into a web page? The Vaadin 7 book seems to be simply a copy of the Vaadin 6 book in most parts …
As of beta4, appUri and initialPath are not used any more and the separation between appl. You should instead use the same HTML that is generated for the normal case and adjust vaadinDir and serviceUrl as needed. Please note that serviceUrl is not included in the default case which causes the URL in the browser’s address field to be used instead. setDefault has also been removed, now all the parameters go to initApplication.
The initial path and appUri are the pain points in the snippet I posted.
However my advise would be see how your Vaadin HTML is rendered per your Vaadin 7 beta version and work around that.
Per beta 3, only vaadinBootstrap.js would be needed on the embedding page and the widgetset nocache.js is automatically picked up by bootstrap.
I notice that the beta code is changing pretty frequently and sometimes heavily across beta versions.
I have yet to test the code posted against Beta 6 and as Leif says above some changes would be required to make it work.
thanks for your suggestions, but I still cannot make it work.
I started again from the generated code for the running stand-alone app and inserted the “serviceUrl” parameter as suggested:
<script type="text/javascript">//<![CDATA[
if (!window.vaadin) alert("Failed to load the bootstrap javascript: ./VAADIN/vaadinBootstrap.js");
vaadin.initApplication("emobevuwebapp-764586218",{
"authErrMsg": {
"caption": "Authentication problem",
"message": "Take note of any unsaved data, and click here to continue."
},
"comErrMsg": {
"caption": "Communication problem",
"message": "Take note of any unsaved data, and click here to continue."
},
"debug": true,
[b]
"serviceUrl": "./app/",
[/b]
"heartbeatInterval": 300,
"standalone": true,
"theme": "reindeer",
"vaadinDir": "./VAADIN/",
"versionInfo": {"vaadinVersion": "9.9.9.INTERNAL-DEBUG-BUILD"},
"widgetset": "com.vaadin.DefaultWidgetSet"
});//]]>
</script>
Still the same behaviour, i.e., nothing happens, no error and the loader image does not disappear.
Calling the app by using the servlets mapped URL (“./app” here) works fine.
It seems you also have to define a browserDetailsUrl with the same value as serviceUrl, though that will not be needed any more once
ticket #10122 gets fixed.
To debug this kind of setup, it is very useful to use e.g. the Network tab in Firebug to see where Vaadin’s initialization sends various requests.
Are there any updates on this issue? It would be nice to have a note of this in the migration guide, or to have the Book of Vaadin page on Application embedding updated.
Thank you for the help! I finally got div-embedding to work. Although it seems that
https://vaadin.com/book/vaadin7/-/page/advanced.embedding.html is missing parameter ‘serviceUrl’. There should be some notice about it, because the example web page does not seem to work without it.
I tried to create an embedded application based on the example helloworld application and the aforementioned exaple, with the following setup:
MyVaadinUI is embedded to ‘index.html’ using a div-element
Clicking the button in MyVaadinUI results in: Communication problem: UIDL could not be read from server. Check servlets mapping. Error code: 404. This is because the UIDL request is sent to /UIDL instead of /helloworld/UIDL. Setting “serviceUrl”: “./helloworld/” in the initialisation parameters fixes this. It took me a while to find out what’s wrong, so it would be nice to have a mention of it in the Book.
Here’s the working setup, in case someone is interested:
Create a new Vaadin project from an archetype with:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=9;chrome=1" />
<title>Embedding a Vaadin Application in HTML Page</title>
<!-- Set up the favicon from the Vaadin theme -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon"
href="/VAADIN/themes/reindeer/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon"
href="/VAADIN/themes/reindeer/favicon.ico" />
</head>
<body>
<!-- Loads the Vaadin widget set, etc. -->
<script type="text/javascript"
src="VAADIN/vaadinBootstrap.js"></script>
<!-- GWT requires an invisible history frame. It is -->
<!-- needed for page/fragment history in the browser. -->
<iframe tabindex="-1" id="__gwt_historyFrame"
style="position: absolute; width: 0; height: 0;
border: 0; overflow: hidden"
src="javascript:false"></iframe>
<h1>Embedding a Vaadin UI</h1>
<p>This is a static web page that contains an embedded Vaadin
application. It's here:</p>
<!-- So here comes the div element in which the Vaadin -->
<!-- application is embedded. -->
<div style="width: 300px; border: 2px solid green;"
id="helloworld" class="v-app">
<!-- Optional placeholder for the loading indicator -->
<div class=" v-app-loading"></div>
<!-- Alternative fallback text -->
<noscript>You have to enable javascript in your browser to
use an application built with Vaadin.</noscript>
</div>
<script type="text/javascript">//<![CDATA[
if (!window.vaadin)
alert("Failed to load the bootstrap JavaScript: "+
"VAADIN/vaadinBootstrap.js");
/* The UI Configuration */
vaadin.initApplication("helloworld", {
"browserDetailsUrl": "helloworld",
[b]
"serviceUrl": "./helloworld/",
[/b]
"widgetset": "com.vaadin.DefaultWidgetSet",
"theme": "reindeer",
"versionInfo": {"vaadinVersion": "7.0.0.rc2"},
"vaadinDir": "VAADIN/",
"heartbeatInterval": 300,
"debug": true,
"standalone": false,
"authErrMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Authentication problem"
},
"comErrMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Communication problem"
},
"sessExpMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Session Expired"
}
});//]] >
</script>
<p>Please view the page source to see how embedding works.</p>
</body>
</html>
I can’t replicate the problem, whether I do not have the [tt]
serviceUrl
[/tt] parameter, or have it with with some invalid value.
The code given in the book works for me, as is demonstrated in
this example . The embedding page is located at the context root and the UI has servlet mapping [tt]
/helloworld/*
[/tt].
Reading from the sources, the [tt]
serviceUrl
[/tt] parameter only appears to be used in portlets…though I could be wrong.
POST http://localhost:8148/desc?v-browserDetails=1&...&v-wn=descui-0.31314008495405565&v-1373986639688
302 Found 128ms
vaadin...trap.js (Zeile 169)
GET http://dev0010-111:8148/desc/?v-browserDetails=1...&v-wn=descui-0.31314008495405565&v-1373986639688
200 OK 3ms
SyntaxError: JSON.parse: unexpected character (http://localhost:8148/desc/VAADIN/vaadinBootstrap.js (Line 145))
var updatedConfig = JSON.parse(text);
it took me two days to get my Vaadin 7 app running in an embedding HTML page. Finally, I got it running thanks to Topi’s hint about the serviceUrl parameter which is missing from the Vaadin book. For me, the embedding does not work without the service parameter. (Even with a trailing / to the browserDetailsUrl parameter as suggested by Richard it does not work for me). So may be, one should check again, under which circumstances the serviceUrl is needed.
