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
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
Hi,
There are several ways to show JQuery widgets:
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