As Vaadin is a Java web application framework, so is it possible to insert the jQuery javascript snippet in the Vaadin Java code?
-
1I don't see why not, but I don't see why you would want to... surely the framework allows for separated view and controller?user684934– user6849342012-02-16 00:01:03 +00:00Commented Feb 16, 2012 at 0:01
-
The framework provides the custom component to use the native js code. However, while I tried some complex js code, there is probably nothing happened. That is why I asked such question.Kyleinincubator– Kyleinincubator2012-02-27 05:14:18 +00:00Commented Feb 27, 2012 at 5:14
Add a comment
|
3 Answers
Yes it is.
Create your own ApplicationServlet extending class like this:
public class MyApplicationServlet extends ApplicationServlet {
@Override
protected void writeAjaxPageHtmlVaadinScripts(Window window,
String themeName, Application application, BufferedWriter page,
String appUrl, String themeUri, String appId,
HttpServletRequest request) throws ServletException, IOException {
page.write("<script type=\"text/javascript\">\n");
page.write("//<![CDATA[\n");
page.write("document.write(\"<script language='javascript' src='./jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
page.write("//]]>\n</script>\n");
super.writeAjaxPageHtmlVaadinScripts(window, themeName, application,
page, appUrl, themeUri, appId, request);
}
}
Then replace the Vaadin servlet in your web.xml (the default is com.vaadin.terminal.gwt.server.ApplicationServlet):
<servlet-class>com.example.MyApplicationServlet</servlet-class>
You can then make jQuery calls in your code by calling:
MyApplication.getMainWindow().executeJavascript(jQueryString);
7 Comments
Kyleinincubator
As I tried, the code of this line: MyApplication.getMainWindow().executeJavascript(jQueryString);may only work for some simple javascript code. It seems not quite to support more complex js code.
miq
I don't know jQuery that well, but at least in my Vaadin application it is used by Invient charts (based on Highcharts). Would it work for you if you declared your jQuery stuff in a js file, put it in the page headers (like jQuery.js) and called your functions with executeJavascript? And furthermore, did you check (w/ firebug or similar) that jQuery library was successfully loaded?
Kyleinincubator
I am also using Invient Charts. It works well for me. I need jQuery to implement some other components that Vaadin does not provide. The question how to communicate from the Vaadin Server side with the Client side.
miq
Can you provide an example of what you're trying to achieve?
miq
What do you mean by "The question how to communicate from the Vaadin Server side with the Client side." ?
|
You can use the @JavaScript and @StyleSheet annotations
@StyleSheet({
/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css",
})
@JavaScript({
/*
* JQuery
*/
"vaadin://jquery/jquery-1.11.1.min.js",
/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js",
})
public class MyUI extends UI {
...
}
For execution:
JavaScript.getCurrent().execute("...javascript code here...")
Be careful with larger scripts. Adding javascript via the vaadin annotation has very poor performance. Better inject the script in the html header manually.
2 Comments
luckydonald
Where do the files (e.g.
/jquery/...) go to? In which folder in the project?
d2k2
Files goes into the "VAADIN" folder of the application which can be accessed by the "vaadin://"url
One more customizing for ApplicationServlet:
public class VaadinApplicationServlet extends ApplicationServlet {
@Override
protected void writeAjaxPageHtmlHeader(BufferedWriter page, String title, String themeUri, HttpServletRequest request) throws IOException {
page.write("<script language='javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>");
super.writeAjaxPageHtmlHeader(page, title, themeUri, request);
}
}
