Hi,
I would like to use AmCharts in one of my vaadin project. But I missed something…
I have tried to move in small steps.
First goal: could I use the amcharts.
My project structure picture is attached to this post.
- I have create a custom layout (amchartlayout.html). I planned to create here the chart. Now it consists a simple check method, checks the amcharts:
[code]
[/code]2. Component and state class:
@JavaScript({"amchartcomponent-connector.js"})
public class AmChartComponent extends AbstractJavaScriptComponent {
private static final long serialVersionUID = 201605191300345345L;
public void setValue(String value) {
getState().setValue(value);
}
public String getValue() {
return getState().getValue();
}
@Override
protected AmChartComponentState getState() {
return (AmChartComponentState) super.getState();
}
}
[code]
public class AmChartComponentState extends JavaScriptComponentState {
private static final long serialVersionUID = 201605191301234236L;
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
[/code]3. Placeholser: this is a panel. It uses the custom layout:
[code]
public class AmChartPlaceholder extends Panel implements Serializable {
private static final long serialVersionUID = 201605191255983245L;
public AmChartPlaceholder() {
CustomLayout content = new CustomLayout("amchartlayout");
content.setSizeUndefined();
AmChartComponent amComp = new AmChartComponent();
content.addComponent(amComp);
setContent(content);
setSizeUndefined();
}
}
[/code]4. Here is the connector javascript file (amchartcomponent-connector.js):
window.com_ash_amcharts_AmChartComponent = function () {
alert('here connector 1');
};
5. I have linked to the amcharts.js (to the main amcharts library) in the UI source file:
[code]
@Theme(“mytheme”)
@Widgetset(“com.ash.chartexample003_amchart.MyAppWidgetset”)
@JavaScript({“vaadin://themes/mytheme/js/amcharts/amcharts.js”, “vaadin://themes/mytheme/js/amcharts/serial.js”})
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
final TextField name = new TextField();
name.setCaption("Type your name here:");
Button button = new Button("Click Me");
button.addClickListener( e -> {
layout.addComponent(new Label("Thanks " + name.getValue()
+ ", it works!"));
});
AmChartPlaceholder c1 = new AmChartPlaceholder();
layout.addComponents(name, button, c1);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);
}
[/code]Something I missed, because the script in the amchartlayout.html shows:
here1
here2
here6
here3
and ‘here 4’, ‘here 5’ and ‘here 7’? Amcharts is not ready? What did I miss?
after that it shows the connector alert:
here connector 1