I’ve been trying to integrate a JavaScript tool (JHeatmap) into a Vaadin portlet. Since it uses the document.ready() function, which is called before the Vaadin components are ready, I am now trying to just show a html page I want to create dynamically containing the Javascript or even just link to it. However, I can’t get it to work. My code looks like this:
@Override
protected void init(VaadinRequest request) {
final String context = request.getContextPath();
layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Button button = new Button("Load");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
initHeatmap(context);
}
});
layout.addComponent(button);
}
public void initHeatmap(String context) {
String heatmap =
"<!DOCTYPE html><html>" + "<link href='"
+ context
+ "/VAADIN/heatmap/jheatmap-1.0.0-min.css' rel='stylesheet' type='text/css'/>"
+ "<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.min.js'></script>"
+ "<script src='"
+ context
+ "/VAADIN/heatmap/jheatmap-1.0.0.js' type='text/javascript'></script>"
+ "<script>"
+ "$(document).ready(function () {"
+ "$('#heatmap').heatmap("
+ "{"
+ "data: {"
+ "values: new jheatmap.readers.TableHeatmapReader({ url: 'samples\\tsymbol\\tmutation\\tcna status\\texpression\\n'+\n"
+ "'a\\t1\\t-\\t-\\t0.132\\n'+\n" + "'a\\t2\\t-\\t-\\t2.078\\n'+\n"
+ "'c\\t7\\t-\\t-\\t2.078\\n'+\n" + "'c\\t8\\t-\\t-\\t2.078\\n'+\n"
+ "'c\\t9\\t-\\t-\\t0.383'})" + "}" + "});" + "});" + "</script>"
+ "<div id='heatmap'></div>" + "</html>";
PrintWriter writer = null;
try {
writer = new PrintWriter(filename, "UTF-8");
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
writer.println(heatmap);
writer.close();
FileResource r = new FileResource(new File(filename));
Link link = new Link("Click Me!", r);
layout.addComponent(link);
}The JS and CSS files for the tool are stored in the WebContent/VAADIN subfolder as suggested by someone with a similar problem and it seems that they are indeed found this way as changing the path to something else leads to an error. While there is no error now, the created html page doesn’t show anything in the browser.
What am I missing?