MVC way for Cuba - Showing HTML


I may be missing something simple here but I have a HTML page using JQuery to display a calendar widget and I want to use it in my Cuba application. How do I get to use it within a screen? Is it related to templates and HtmlBox?



There are several ways to show JQuery widgets:

  1. The easiest way - use Embedded component to show HTML page with all the JS / CSS / HTML content:
  2. Create custom UI component as described here:

In case 1 you can add your static JS / CSS files into the modules/web/web/VAADIN/ folder (create it if does not exist) and generate the page on the fly or load it from resources:

public class ExtAppMainWindow extends AppMainWindow {
    private Embedded embedded;

    public void init(Map<String, Object> params) {

        byte[] htmlContent;
        try {
            // read from resource or we can generate it on-the-fly
            byte[] resourceContent = IOUtils.toByteArray(getClass()
            String html = new String(resourceContent, StandardCharsets.UTF_8);
            // insert full URL for resources
            html = html.replace("<app-url>", ControllerUtils.getLocationWithoutParams());
            htmlContent = html.getBytes(StandardCharsets.UTF_8);
        } catch (IOException e) {
            throw new RuntimeException("Unable to read html");
        embedded.setSource("my-calendar-" + UUID.randomUUID() + ".html",
                new ByteArrayInputStream(htmlContent));

See full example here: