The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

dmaucher (1) [Avatar] Offline
#1
Hi together,

I have the following problem:
I am trying to write a small example wrapper for EJSChart. (http://www.ejschart.com)

This is my EJSChartImpl.java:

package com.mycompany.project.client.jswrap.ejschart;

public class EJSChartImpl {
public native EJSChart create() /*-{
var myChart = new $wnd.EJSC.Chart("myChart");
var myChartSeries = new $wnd.EJSC.BarSeries(new
$wnd.EJSC.ArrayDataHandler([["Month 1",1],["Month 2",2]]));
myChart.addSeries(myChartSeries);
return myChart;
}-*/;

}

The problem is, that the EJSC class is looking for the DOM id
"myChart" to add the chart. I don't know how to create such
a placeholder in GWT for this chart object.

This is my EJSChart.java:

package com.mycompany.project.client.jswrap.ejschart;

import com.google.gwt.core.client.JavaScriptObject;

public class EJSChart extends JavaScriptObject {
private static EJSChartImpl impl = new EJSChartImpl();

public static EJSChart create() {
return impl.create();
}

}

This is my EJSCWidget.java:

package com.mycompany.project.client.jswrap.ejschart;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;

public class EJSCWidget extends Composite {
VerticalPanel theArea = new VerticalPanel();
Label myChart = new Label("Loading Chart...");

static EJSChart ejschart = null;

public EJSChart getEJSChart() {
if (ejschart == null) {
ejschart = EJSChart.create();
}
return ejschart;
}

public EJSCWidget() {
theArea.add(myChart);
initWidget(theArea);
getEJSChart();
}

}

And this is the way I am trying to get the chart be displayed:

public static EJSCWidget chart = null;
final Button chartButton = new Button();

rootPanel.add(chartButton, 89, 143);
chartButton.setSize("146px", "24px");

chartButton.addClickListener(new ClickListener() {
public void onClick(final Widget sender) {
chart = new EJSCWidget();
}
});

if (chart != null) {
rootPanel.add(chart, 89, 225);
}

chartButton.setText("Chart");

final HTML html = new HTML("<div id="myChart"></div>");
rootPanel.add(html, 89, 172);
html.setSize("305px", "256px");

Maybe there are better ways to to this - I hope you can just show me a
good way...

Thanks in advance

Regards,
Dirk
adam.tacy (269) [Avatar] Offline
#2
Re: Wrapping JS library with JSNI
Hi Dirk,

You can set attributes of DOM elements using GWT, using the DOM.setAttribute(element,attribute,value) method.

Just off the top of my head, you should try adding the following line to your Composite constructor:

DOM.setElementAttribute(theArea.getElement(),"id","myChart");

That at least sets the id of the vertical panel (which happens to be a div) and should then be accessible to the wrapper you have around the EJSChart.

//Adam