Hi,
See -> http://code.google.com/p/smartgwt/issues/detail?id=584
Some more feedback:
The following will display the chart (in Chrome) in a nested layout
container but the image is hidden if you re-size the browser window.
In FF3 the chart is not shown but if you re-size the browser window
you can see it momentarily.
->
public class ContextArea extends VLayout {
private static final String CONTEXT_AREA_WIDTH = "*";
private static String html = "<div id=\"chart_nested_div\" style=
\"position: absolute; z-index: 1000000\"> </div>\n";
private HTMLFlow htmlFlow;
private PieChart pie;
public ContextArea() {
super();
Log.debug("init Context Area()...");
this.setWidth(CONTEXT_AREA_WIDTH);
this.setBackgroundColor("#EEEEEE");
htmlFlow = new HTMLFlow(html);
this.addMember(htmlFlow);
loadVisualizationApi();
}
public void loadVisualizationApi() {
Log.debug("loadVisualizationApi()");
// Create a callback to be called when the visualization API has
been loaded.
Runnable onLoadCallback = new Runnable() {
public void run() {
Log.debug("onLoadCallback()");
// pie = new PieChart(createTable(), createOptions());
// RootPanel.get("chart_sibling_div").add(pie);
// RootPanel.get("chart_nested_div").add(pie);
drawChart();
}
};
// Load the visualization api, passing the onLoadCallback to be
called when loading is complete.
VisualizationUtils.loadVisualizationApi("1.1", onLoadCallback,
PieChart.PACKAGE);
}
private native void drawChart() /*-{
// Create our data table.
var dataTable = new $wnd.google.visualization.DataTable();
dataTable.addColumn('string', 'Task');
dataTable.addColumn('number', 'Hours per Day');
dataTable.addRows(5);
dataTable.setValue(0, 0, "Work");
dataTable.setValue(0, 1, 11);
dataTable.setValue(1, 0, "Eat");
dataTable.setValue(1, 1, 2);
dataTable.setValue(2, 0, "Commute");
dataTable.setValue(2, 1, 2);
dataTable.setValue(3, 0, "Watch TV");
dataTable.setValue(3, 1, 2);
dataTable.setValue(4, 0, "Sleep");
dataTable.setValue(4, 1, 7);
// Instantiate and draw our chart, passing in some options.
// var chart = new
$wnd.google.visualization.PieChart($doc.getElementById('chart_sibling_div'));
var chart = new
$wnd.google.visualization.PieChart($doc.getElementById('chart_nested_div'));
chart.draw(dataTable, {width: 400, height: 240});
}-*/;
...
}
->
Cheers
Rob
On May 11, 1:09 am, Rob <[email protected]> wrote:
> Hi,
>
> Originally posted here
> ->http://groups.google.com/group/google-visualization-api/browse_thread...
>
> and here
> ->http://forums.smartclient.com/showthread.php?s=394a0c94510a814b755f12...
>
> And suggested I should also post here. To summarise:
>
> I would like to addvisualizationsupport via the gwt-google-apis
> (VisualizationAPI 1.1)
> to an existing GWT (2.1.1) andsmartGWT(2.4) application.
>
> I followed the approach described in this post
> ->http://forums.smartclient.com/showpost.php?p=37754&postcount=2and
> theVisualizationGetting Started
> guide->http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingSta....
>
> And, then found this post
> ->http://groups.google.com/group/google-visualization-api/browse_thread...
> in the GoogleVisualizationAPI discussion group.
>
> For example:
>
> ->
>
> public void loadVisualizationApi() {
>
> Log.debug("loadVisualizationApi()");
>
> // Create a callback to be called when thevisualizationAPI
> // has been loaded.
> Runnable onLoadCallback = new Runnable() {
> public void run() {
>
> Log.debug("onLoadCallback()");
>
> // Create a pie chartvisualization.
> pie = new PieChart(createTable(), createOptions());
> pie.setWidth("80%");
>
> Canvas canvas = new Canvas();
> canvas.setID("sys_pie_canvas");
> canvas.setWidth100();
> canvas.setHeight("50%");
> canvas.addChild(pie);
>
> panel.addMember(canvas, 0);
>
> Log.debug("panel.addMember(canvas, 0)");
> }
> };
>
> // Load thevisualizationapi, passing the onLoadCallback
> // to be called when loading is complete.
> VisualizationUtils.loadVisualizationApi("1.1", onLoadCallback,
> PieChart.PACKAGE);
> }
>
> // The code for createTable() and createOptions()) is as per
> // the post mentioned above.
>
> ->
>
> However, this results in the following error:
> java.lang.AssertionError: A widget that has an existing parent widget
> may not be added to the detach list at
> com.google.gwt.user.client.ui.RootPanel.detachOnWi
> ndowClose(RootPanel.java:136) when using GWT (2.1.1),smartGWTLGPL
> (2.5 nightly build) and GoogleVisualizationAPI (1.1).
>
> Note: I also tested the code usingsmartGWT(2.4) and received the
> following error: (NativeMethodAccessorImpl.java:-2) 2011-05-09
> 10:26:21,613 [FATAL] Uncaught JavaScript exception [Script error.]
> in , line 0
>
> If I comment out the call to "panel.addMember(pie)" and replace it
> with "RootPanel.get().add(pie)" no exception is thrown and the "chart"
> is rendered correctly (you can see it momentarily if you re-size the
> browser window) but as a child of the root panel. Which means it is
> hidden by the application's other nested layout containers (e.g.
> North, West, East and South).
>
> I would like to be able to place the "chart" in a nested layout
> container if possible?
>
> then
>
> After a bit more investigation I found this post (GWT layout gotcha) -
>
> >http://turbomanage.wordpress.com/2010/01/12/gwt-layout-gotcha/on
>
> David Chandler's blog.
>
> Which states "One gotcha I’ve found is that you must be careful not to
> attach a widget to a DIV nested inside a DIV that is attached to a
> widget."
>
> ->
>
> public class DashboardsView extends
> ViewWithUiHandlers<DashboardsUiHandlers> implements
> DashboardsPresenter.MyView {
>
> private static final String CONTEXT_AREA_WIDTH = "*";
> private static String html = "<div id=\"chart_nested_div\"> </div>
> \n";
>
> private VLayout panel;
> private HTMLFlow htmlFlow;
>
> private PieChart pie;
>
> public DashboardsView() {
>
> panel = new VLayout();
> panel.setWidth(CONTEXT_AREA_WIDTH);
>
> htmlFlow = new HTMLFlow(html);
>
> panel.addMember(htmlFlow);
>
> loadVisualizationApi();
> }
>
> @Override
> public Widget asWidget() {
> return panel;
> }
>
> public void loadVisualizationApi() {
>
> Log.debug("loadVisualizationApi()");
>
> // Create a callback to be called when thevisualizationAPI has
> been loaded.
> Runnable onLoadCallback = new Runnable() {
> public void run() {
>
> Log.debug("onLoadCallback()");
>
> pie = new PieChart(createTable(), createOptions());
>
> RootPanel.get("chart_sibling_div").add(pie);
> // RootPanel.get("chart_nested_div").add(pie);
> }
> };
>
> // Load thevisualizationapi, passing the onLoadCallback to be
> called when loading is complete.
> VisualizationUtils.loadVisualizationApi("1.1", onLoadCallback,
> PieChart.PACKAGE);
> }
>
> ->
>
> Host file:
>
> ->
>
> <body>
>
> <div id="loading" style="display: block;position: absolute;top:
> 50%;left: 50%;
> text-align: center;font-family: Tahoma, Verdana, sans-
> serif;font-size: 11px;">
> Loading
> <img src="images/loading.gif" />
> </div>
>
> <!-- OPTIONAL: include this if you want history support -->
> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
> style="position: absolute; width: 0; height: 0; border:
> 0">
> </iframe>
>
> <div id="chart_sibling_div"> </div>
>
> </body>
>
> ->
>
> The call to RootPanel.get("chart_sibling_div").add(pie) works as
> expected (albeit the chart isn't where I'd like it to be). However,
> the same call (using a nested div)
> "RootPanel.get("chart_nested_div").add(pie)" fails as per David's post
>
> [ERROR] Uncaught exception escaped
> java.lang.AssertionError: A widget that has an existing parent widget
> may not be added to the detach list
> at
> com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:
> 122)
>
> N.B. The application (http://code.google.com/p/crmdipity/) usessmartGWTnested
> layout containers to achieve a look very similar to a
> GWT's SplitLayoutPanel.
>
> See also ->http://code.google.com/p/google-web-toolkit/issues/detail?id=3511
>
> Sample code and screen shot
> ->http://forums.smartclient.com/showthread.php?t=16703
>
> Any suggestions much appreciated :-)
>
> Cheers
> Rob
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
