4.5.10.1. Using Third-Party Vaadin Components

You can use third-party Vaadin components, distributed as add-ons, in the Web Client. Currently, the Vaadin library https://vaadin.com/directory has over 200 CUBA-compatible visual components. The main requirement for compatibility is the component’s support of Vaadin 7+.

The following should be done to integrate a third-party component into the project:

  1. Add web-toolkit module to the project. This module integrates with the client (browser) part of Vaadin components. The easiest way to do this is to run the Create web toolkit module command on the Project properties panel of the CUBA Studio navigator.

  2. Add the add-on dependency to the web module in the project’s build.gradle. For example: 

    configure(webModule) {
  ...
  dependencies {
      ...
      compile("org.vaadin.addons:some-addon:1.2.3")
  }

  3. Include the add-on widget set to the AppWidgetSet.gwt.xml file, created in Step 1: 

    <module>
    ...
    <inherits name="org.vaadin.someaddon.widgetset.SomeAddonWidgetset" />

  4. In a web module screen (or in a corresponding companion), get a link to the Vaadin container using the WebComponentsHelper class, create a new component instance and add it to the container.

  5. To change the component’s look, create a theme extension and make the required changes in the <theme>-ext.scss file. The easiest way to create a theme file is to run the Create theme extension command on the Project properties panel of the Studio navigator.

Section 5.8.6.1, “Example of Using a Third-party Vaadin Component ” covers the process of including and using the Stepper add-on, which allows stepping through the values.

Prev  Up  Next
  Home