Vaadin 8 integration

Support
#1

Hi,

I don’t know when and how will be vaadin 8 included into platform.
My question is the following. Is there any guide or how-to or some tip how I can integrate a vaadin 8 app (frontend or gui module) into the cuba project?
I thinking about using the REST interface to access the backend.
I play recently with vaadin 8.1 responsive gui and a mobile web application feature. I would like to use it as a public interface for a cuba application (the backend gui for administration wil lbe the standard vaadin 7.7).
Can it work like this? Or i need to start a separate vaadin project and simply try to connect it over REST to the cuba app?

Rather I would like to have a vaadin 8 module in that cuba application if it is possible.

Regards

#2

Hi,

Yes you can use Vaadin 8.1 in a separate application and you can even create a separate module in your cuba application project. I’ve tried to do that, you can see the result here: GitHub - cuba-labs/demo-v8-module: Vaadin 8.1 optional module for CUBA application

I’ve created a simple module with Vaadin 8.1 application without CUBA entities and services, just Java Vaadin application. It is deployed to the same tomcat instance as a separate app-v8 web application.

In you project you can follow these steps to add Vaadin 8.1 module:

  1. Declare app-v8 module to settings.gradle file:

rootProject.name = 'demo-v8'
include(':app-global', ':app-core', ':app-gui', ':app-web', ':app-v8') // add here
project(':app-global').projectDir = new File(settingsDir, 'modules/global')
project(':app-core').projectDir = new File(settingsDir, 'modules/core')
project(':app-gui').projectDir = new File(settingsDir, 'modules/gui')
project(':app-web').projectDir = new File(settingsDir, 'modules/web')
project(':app-v8').projectDir = new File(settingsDir, 'modules/v8') // and here
  1. Add the following module configuration to build.gradle:

configure(project(':app-v8')) {
    apply(plugin: 'java')
    apply(plugin: 'maven')
    apply(plugin: 'idea')
    apply(plugin: 'cuba')

    sourceSets {
        main {
            java {
                srcDir 'src'
            }
            resources {
                srcDir 'src'
            }
        }
    }

    dependencies {
        provided(servletApi)
        compile('com.vaadin:vaadin-server:8.1.0')
        compile('com.vaadin:vaadin-themes:8.1.0')
        compile('com.vaadin:vaadin-client-compiled:8.1.0')
    }

    task sourceJar(type: Jar) {
        from file('src')
        classifier = 'sources'
    }

    artifacts {
        archives sourceJar
    }

    // Custom deploy task that will copy libs and config files to tomcat
    task deploy(dependsOn: assemble) {
        doLast {
            def tomcatRootDir = project.file(project.cuba.tomcat.dir).canonicalPath

            // copy all jars to tomcat/webapps/app-v8
            project.copy {
                from project.configurations.runtime
                from project.libsDir
                into "${tomcatRootDir}/webapps/app-v8/WEB-INF/lib"
                include { details ->
                    String name = details.file.name
                    return !name.contains("-sources")
                }
            }

            project.copy {
                from "${project.projectDir}/web"
                into "${tomcatRootDir}/webapps/app-v8"
            }
        }
    }
}
  1. Create file structure:

modules/
-- v8
-- -- src
-- -- web
-- -- -- META-INF
-- -- -- -- context.xml
-- -- -- WEB-INF
-- -- -- -- web.xml
  1. context.xml:

<Context>
    <!-- Switch off session serialization -->
    <Manager pathname=""/>
</Context>
  1. web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app 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_3_0.xsd"
         version="3.0">
    <listener>
        <listener-class>com.vaadin.server.communication.JSR356WebsocketInitializer</listener-class>
    </listener>
    <servlet>
        <servlet-name>vaadinServlet</servlet-name>
        <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
        <init-param>
            <description>UI class</description>
            <param-name>UI</param-name>
            <param-value>com.company.demov8.DemoV8UI</param-value>
        </init-param>
        <init-param>
            <description>productionMode</description>
            <param-name>productionMode</param-name>
            <param-value>false</param-value>
        </init-param>
        <async-supported>true</async-supported>
    </servlet>
    <servlet-mapping>
        <servlet-name>vaadinServlet</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>
</web-app>
  1. Create your first UI class, see com.company.demov8.DemoV8UI for example

Please note, that you have to use REST-API to access data of the main system or set up Spring context with cuba-client, cuba-shared-lib dependencies.
In the second case you will be able to execute services and use entities without network operations.

We are planning to introduce support for Vaadin 8.x (latest available version of 8) in the next year together with the Major release 7.