Vaadin for Dummies
Your Rating: Results: 26 rates
In the upcoming Magnolia 5 the AdminInterface will be written in Vaadin. Same as Richard Unger we were thinking about what to do with custom AdminInterface pages that would have to be rewritten for Magnolia 5. In his excellent wiki article Vaadin for Early Birds Richard describes the solution he came up with. When trying to follow his steps I quickly faced some obstacles on the way: My lack of Vaadin know-how. This article is intended for Vaadin dummies like me, hoping that it will help them to overcome these obstacles... or to at least get the Five Minutes Version of the Vaadin Tutorial running... in 5 minutes.
Create a Magnolia module
1. Use the Module QuickStart instructions to create a standard Magnolia module. Call the Maven module "magnolia-module-vaadintest" and name the Magnolia module itself just "vaadintest". Of course you can use any name you would like, but since this is for dummies using the same names will help further down the road. 2. Add the Vaadin dependencies according to this guide. Again to keep things as simple as possible, use Version 6.7.1 for your Vaadin dependency. The section in your Magnolia module's POM should look something like this:
3. Place the Five Minutes Version tutorial class "SimpleAddressBook" in your module.
Get & build the widgets
Update
This step does not seem to be necessary. I'm currently running the test app with the widgets served from the vaadin jar. However, since I'm a newbie/dummy, I cannot say exactly what I did wrong at first and why it's working now without this. Please add your wisdom!
1. Checkout the same version of Vaadin that you used in the POM above. This should be version 6.7.1. % svn checkout http://dev.vaadin.com/svn/releases/6.7.1 vaadin-6.7.1 1.
Note
If ant barks at you, asking for Java 1.5 simply edit build.xml. Look for
2. Build the widget set % cd vaadin-6.7.1/build % ant widgetset-default
Note
Apparently one could define exactly what widgets are needed. But since I'm a dummy and don't know where my Vaadin app is going, building the default widget set worked fine for me. Maybe someone with more Vaadin experience can elaborate on this a bit.
3. Now copy the contents of the WebContent folder to your Magnolia module project to src/main/resources/mgnl-resources/vaadintest
Build & install the module
1. Do a mvn package in your module folder 2. Copy the created magnolia-module-vaadintest-1.0-SNAPSHOT.jar from the target folder to your Magnolia's WEB-INF/lib folder 3. Get a copy of Vaadin 6.7.1 and also place it in your Magnolia's WEB-INF/lib folder (either download it or build the sources you've already downloaded in the steps above 4. Restart Tomcat 5. Open Magnolia in the browser and install the new module with the installer (if you have not configured Magnolia to install new modules automatically)
Configure the Vaadin page
1. In AdminCentral go to "Configuration" and open the tree at /server/filter/servlets 2. Insert a VaadinTestServlet contentnode 3. Configure it like this: 4. Open the config node /modules/adminInterface/config/menu/toos and add a menu item configuration to access the Vaadin servlet:
Test it
1. Reload the whole page 2. Go to "Tools". There should now be a menu item called "Vaadin Test" 3. Hit it and your Vaadin tutorial application should load and look something like this:
What's next?
Well, now that the integration is working, I'm afraid it's now time to really learn about Vaadin, add custom functionality, custom widgets and write super cool Vaadin AdminCentral UIs. For instance the shop module really should get a slick back end to manage all those orders! Anyone?