This example requires a valid XPages Plugin Development Environment. The execution environment used is the XPages Domino JRE.
1. Create a new plug-in project and select “Equinox” as OSGi framework
![01 - New Plugin Project](http://hasselba.ch/blog/wp-content/uploads/2015/01/01-New-Plugin-Project-241x300.png)
2. Set the name of the activator class to “ch.hasselba.vaadin.Activator”
![02 - Activator Class](http://hasselba.ch/blog/wp-content/uploads/2015/01/02-Activator-Class-242x300.png)
3. Open the MANIFEST.MF file
![03 - Manifest](http://hasselba.ch/blog/wp-content/uploads/2015/01/03-Manifest.png)
4. On Tab “Overview“, activate the option for lazy loading and the singleton property
![04 - Singleton](http://hasselba.ch/blog/wp-content/uploads/2015/01/04-Singleton-300x148.png)
5. Go to “Dependencies” tab and add the required plugin “com.ibm.pvc.webcontainer”
![05 - Dependencies - Required Plugins 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/05-Dependencies-Required-Plugins-01-300x99.png)
When entering “pvc“, you can easily find the plugin from the list:
![05 - Dependencies - Required Plugins 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/05-Dependencies-Required-Plugins-02-300x251.png)
6. Then, add “javax.servlet” and “javax.servlet.http” to the list of imported packages
![06 - Dependencies -ImportedPackages](http://hasselba.ch/blog/wp-content/uploads/2015/01/06-Dependencies-ImportedPackages-300x87.png)
7. Now, download the Jar files for Vaadin. The files can be found here (the All-in-One archive is the right one).
8. Import the Jars to the project
![08 - Import - Vaadin Jars 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/08-Import-Vaadin-Jars-01-300x281.png)
![08 - Import - Vaadin Jars 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/08-Import-Vaadin-Jars-02-287x300.png)
The required Jars are:
- vaadin-client-7.3.8.jar
- vaadin-client-compiled-7.3.8.jar
- vaadin-client-compiler-7.3.8.jar
- vaadin-push-7.3.8.jar
- vaadin-server-7.3.8.jar
- vaadin-shared-7.3.8.jar
- vaadin-themes-7.3.8.jar
![08 - Import - Vaadin Jars 03](http://hasselba.ch/blog/wp-content/uploads/2015/01/08-Import-Vaadin-Jars-03-287x300.png)
9. Do this with „jsoup“ and „org.json“ libaries too:
![09 - Import - Other Jar](http://hasselba.ch/blog/wp-content/uploads/2015/01/09-Import-Other-Jar-287x300.png)
10. Now, go to the “Runtime” tab and add the classpathes (don’t forget to move the “.” to the top of the list)
![10 - Runtime - Classpath 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/10-Runtime-Classpath-02-234x300.png)
![10 - Runtime - Classpath](http://hasselba.ch/blog/wp-content/uploads/2015/01/10-Runtime-Classpath-300x165.png)
The symbol of the filetypes have now changed:
![10 - Runtime - Classpath 03](http://hasselba.ch/blog/wp-content/uploads/2015/01/10-Runtime-Classpath-03-257x300.png)
11. On tab “Overview“, click on “Extensions” to open the Extension tab
![11 - Overview - Extensions](http://hasselba.ch/blog/wp-content/uploads/2015/01/11-Overview-Extensions-300x75.png)
Click on “Yes” to open the “Extension” tab:
![11 - Overview - Extensions 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/11-Overview-Extensions-02-300x90.png)
12. Here, you have to add the extension point “com.ibm.pvc.webcontainer.application”
![12 - Extension - Add 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/12-Extension-Add-01-300x150.png)
![12 - Extension - Add 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/12-Extension-Add-02-206x300.png)
13. Open “plugin.xml”…
![13 - Plugin_XML](http://hasselba.ch/blog/wp-content/uploads/2015/01/13-Plugin_XML-300x285.png)
14. … and configure the extension point:
<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
<extension
point="com.ibm.pvc.webcontainer.application">
<contextRoot>
/helloVaadin
</contextRoot>
<contentLocation>
WebContent
</contentLocation>
</extension>
</plugin>
contextRoot defines the URL pattern where the Vaadin servlet is reachable. contentLocation is a folder where the required web.xml configuration file can be found.
Save the “plugin.xml” file.
15. Create the folder “WebContent“…
![15 - Folder 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/15-Folder-01-300x143.png)
![15 - Folder 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/15-Folder-02-253x300.png)
16. … and then a second folder “WEB-INF” inside of “WebContent”
17. Create the “web.xml” file in this folder, the tree should look like this:
![17 - WebFolder Structure](http://hasselba.ch/blog/wp-content/uploads/2015/01/17-WebFolder-Structure.png)
18. The “web.xml” contains the configuration of the servlet:
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name>HelloVaadin</display-name>
<context-param>
<description>Vaadin production mode</description>
<param-name>productionMode</param-name>
<param-value>false</param-value>
</context-param>
<servlet>
<servlet-name>HelloVaadinServlet</servlet-name>
<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
<init-param>
<param-name>UI</param-name>
<param-value>ch.hasselba.vaadin.HelloVaadinUI</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>HelloVaadinServlet</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>
The <init-param> tag inside <servlet> defines our UI class of our application. We will create this class later. The <servlet-mapping> defines a mapping inside the webapplication path.
This means, if you would add a url-pattern like “/helloVaadinServlet/*” to the Vaadin servlet, the URL to reach the application is
http://example.com/helloVaadin/helloVaadinServlet/
The “/helloVaadin/” part is the defined in the contextPath parameter in the web application. When using another pattern as “/*“, an additional mapping for the Vaadin resources is required:
<servlet-mapping>
<servlet-name>HelloVaadinServlet</servlet-name>
<url-pattern>/VAADIN/*</url-pattern>
</servlet-mapping>
19. Go to “Build” tab, and include the “Web-Content” folder:
![19 - Build - Add WebContent 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/19-Build-Add-WebContent-01-300x286.png)
The following line should now appear in the build.properties file which includes the folder in the final Jar.
![19 - Build - Add WebContent 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/19-Build-Add-WebContent-02-300x210.png)
20. Create the Vaadin servlet class “ch.hasselba.vaadin.HelloVaadinUI”
![20. Servlet Class 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/20.-Servlet-Class-01-300x140.png)
![](http://hasselba.ch/blog/wp-content/uploads/2015/01/20.-Servlet-Class-02-262x300.png)
![20. Servlet Class 03](http://hasselba.ch/blog/wp-content/uploads/2015/01/20.-Servlet-Class-03.png)
21. Add the following code to the class
package ch.hasselba.vaadin;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
@SuppressWarnings("serial")
public class HelloVaadinUI extends UI {
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
HorizontalLayout layout = new HorizontalLayout();
setContent(layout);
layout.setSizeFull();
Label label = new Label();
label.setValue("<h1>Hello Vaadin!</h1>");
label.setContentMode(ContentMode.HTML);
layout.addComponent(label);
layout.setComponentAlignment(label, Alignment.TOP_CENTER);
}
}
22. At the end, organize the manifest. Open tab “Overview” and start the “Organize Manifest Wizard”
![22 - Overview - Organize Manifest 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/22-Overview-Organize-Manifest-01-300x166.png)
![22 - Overview - Organize Manifest 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/22-Overview-Organize-Manifest-02-277x300.png)
This updates the manifest and adds all resources for the Vaadin application.
![22 - Overview - Organize Manifest 03](http://hasselba.ch/blog/wp-content/uploads/2015/01/22-Overview-Organize-Manifest-03-274x300.png)
Last but not least, save all project files.
25. Create a Feature Project named “HelloVaadinFeature” and click on “Next”
![Feature 00](http://hasselba.ch/blog/wp-content/uploads/2015/01/Feature-00-300x50.png)
![](http://hasselba.ch/blog/wp-content/uploads/2015/01/Feature-01-262x300.png)
27. Select the “HelloVaadin” Plug-In
![Feature 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/Feature-02-262x300.png)
28. On the “Plugins” tab, check the option “Unpack the plug-in archive after the installation“:
![Feature 03](http://hasselba.ch/blog/wp-content/uploads/2015/01/Feature-03-300x77.png)
Save the file and…
29. … create the Update Site “HelloVaadinUpdateSite”
![UpdateSite 01](http://hasselba.ch/blog/wp-content/uploads/2015/01/UpdateSite-01-300x287.png)
![UpdateSite 02](http://hasselba.ch/blog/wp-content/uploads/2015/01/UpdateSite-02-300x286.png)
Add the feature…
![UpdateSite 03](http://hasselba.ch/blog/wp-content/uploads/2015/01/UpdateSite-03-300x157.png)
![UpdateSite 04](http://hasselba.ch/blog/wp-content/uploads/2015/01/UpdateSite-04-300x250.png)
… and build the site:
![UpdateSite 05](http://hasselba.ch/blog/wp-content/uploads/2015/01/UpdateSite-05-300x161.png)
30. Import it to the Update Site on the Domino server and restart the HTTP task
31. That’s it! Open the URL in the browser and enjoy.
![99 - Hello Vaadin](http://hasselba.ch/blog/wp-content/uploads/2015/01/99-Hello-Vaadin-300x119.png)