MVC way for Cuba - Showing HTML

Support
#1

Hi,

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?

Thanks

#2

Hi,

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: Embedded - CUBA Platform. Developer’s Manual
  2. Create custom UI component as described here: Using a JavaScript library - CUBA Platform. Developer’s Manual

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 {
    @Inject
    private Embedded embedded;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        byte[] htmlContent;
        try {
            // read from resource or we can generate it on-the-fly
            byte[] resourceContent = IOUtils.toByteArray(getClass()
                    .getResourceAsStream("/com/company/jqueryembed/web/screens/my-calendar.html"));
            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));
        embedded.setType(Type.BROWSER);
    }
}

See full example here: GitHub - cuba-labs/jquery-ui-embedded