How to add Vaadin Add-on into Grails project

Here is the new version of this tutorial for Vaadin 7: .../vaadin-7-and-grails-how-to-compile.html

---

I have spent quite a while by integrating Grails and Vaadin Add-on (I decided to use invient-charts). There are many things one has to do in order to get it working. The reason is that support of Vaadin Add-ons is not yet supported by Grails Vaadin plugin...

Versions: Vaadin plugin 1.4, Vaadin: 6.5.1, Grails 1.3.7

1. Eclipse and GRails plugin - use this tutorial to get it work http://grails.org/STS+Integration 
2. Create a GRails project (in this tutorial named "your-project") in Eclipse 
3. Install Vaadin plugin http://www.grails.org/plugin/vaadin 
4. Download and copy paste jar file into the lib folder: /your-project/lib/invientcharts-0.8.4.jar and add it to Java Build Path in Eclipse
5. Add this folder to Build Path /your-project/grails-app/vaadin 
6. Create your package structure and create widgetset configuration file: /your-project/grails-app/vaadin/com/yourproject/ui/vaadin/YourProjectWidgetset.gwt.xml
7. Add the widgetset set to /your-project/grails-app/conf/VaadinConfig.groovy 
   vaadin {
       // ...
       widgetset = "com.yourproject.ui.vaadin.YourProjectWidgetset"
   }
8. You have to update the creation of Vaadin page - because you want to use custom JavaScript (so you have to force Vaadin plugin to add it there) - as described in next step. Add the following code into this class: /your-project/.link_to_grails_plugins/vaadin-1.4/src/java/com/vaadin/terminal/gwt/server/GrailsAwareApplicationServlet.java. If you are using GAE, update the another class with GAE text in it's name.
   @Override
   protected void writeAjaxPageHtmlVaadinScripts(Window window, String themeName, Application application, BufferedWriter page, String appUrl, String themeUri, String appId, HttpServletRequest request) throws ServletException, IOException {
     super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request);
     page.write("<script type=\"text/javascript\">\n");
     page.write("//<![CDATA[\n");
     page.write("document.write(\"<script language='javascript' src='VAADIN/jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
     page.write("document.write(\"<script language='javascript' src='VAADIN/js/highcharts.js'><\\/script>\");\n");
     page.write("document.write(\"<script language='javascript' src='VAADIN/js/modules/exporting.js'><\\/script>\");\n");
     page.write("//]]>\n</script>\n");
   }
9. Upload JavaScript from invient-chart package 
1. /your-project/web-app/VAADIN/jquery/jquery-1.4.4.min.js 
2. /your-project/web-app/VAADIN/js/highcharts.js + sub folders
10. Compile the widget set (you have to use Ant because this is not supported by Vaadin plugin). Here is the file which must be modified (just go though and fill in missing parts or upload needed jars to "lib" folder). In case you don't know what version of gwt-user.jar and gwt-dev.jar you should use, check the release notes for your version of Vaadin:  http://vaadin.com/download/release/6.5/6.5.1/release-notes.html (you can download these jars from:  http://code.google.com/webtoolkit/versions.html) 
11. One more thing, I am not 100% sure - but when you run "clean" then you have to update GrailsAwareApplicationServlet file again (it happens to me quite offten).

I hope that my notes helped you. If you have any questions, just ask me and I will try to provide an answer. 

TextLab for Mac

Ultimate application to validate, clean and format JSON, XML, SQL, HTML.