Showcase app on iPad

[Shawn Quinn]

Thanks for posting Rob. Exciting to see GWT Highcharts in use within the gwt-cx project!

Regarding the layout on the showcase landing page: we're just using the standard SmartGWT HLayout/VLayout containers for that, setting the appropriate "width" or "height" properties to "*" to handle the resizing case. E.g. here's the code for the guts of how that pane is setup:

public class HomePane extends VLayout {

    public HomePane() {
        super();

        this.setWidth100();
        this.setHeight100();
        this.setLayoutMargin(8);
        this.setMembersMargin(8);

        HLayout hLayout = new HLayout();
        hLayout.setWidth100();
        hLayout.setHeight(200);
        hLayout.setMembersMargin(8);
        hLayout.addMember(createChart1());
        hLayout.addMember(createChart2());

        this.addMember(hLayout);
        final Canvas chart3 = createChart3();
        chart3.setWidth100();
        chart3.setHeight("*");
        this.addMember(chart3);
    }
    ...
}

I hope that helps, but just let me know if you run into trouble.

[Rob]

Hi Shawn,

The following works Ok with one chart in the North layout and one chart in the South layout:

public class SerendipityHighChartsDashboardsView extends DashboardsView<DashboardsUiHandlers> implements
    SerendipityDashboardsPresenter.MyView {

  public SerendipityHighChartsDashboardsView() {
    super();

    if (GWT.isScript()) {

      HLayout northLayout = new HLayout();
      northLayout.setHeight("50%");
      northLayout.setBackgroundColor("white");

      Chart chart1 = createDynamicSplineChart();

      chart1.setWidth100();
      Chart chart2 = createStackedAreaChart();
      chart2.setWidth100();

      northLayout.setMembersMargin(8);
      northLayout.addMember(chart1);
      // northLayout.addMember(chart2);

      HLayout southLayout = new HLayout();
      southLayout.setHeight("50%");
      southLayout.setBackgroundColor("white");

      Chart chart3 = createBasicPieChart();
      chart3.setWidth100();
      Chart chart4 = createDonutChart();
      chart4.setWidth100();

      southLayout.setMembersMargin(8);
      southLayout.addMember(chart3);
      // southLayout.addMember(chart4);

      panel.addMember(northLayout);
      panel.addMember(southLayout);
    }
  }

However, if you place another chart into a layout (as per the commented code) you run into a few sizing issues.

It's fine the first time the "view" (Dashboards View) is selected (chosen via the Navigation Pane). And, if you manually re-size the browser window its fine. But, if you navigate between views (e.g. click Activities then click Dashboards) the heights are OK but the layouts are double the viewport width:

|XX|
|XX|

|X X |
|X X |

If you then manually re-size the browser window the charts will jump back into the correct place.

Have you tried placing more than one chart in a layout and then toggled between views?

Cheers
Rob

[Shawn Quinn]

Hi Rob,

Does the SmartGWT layout work correctly when you just place a regular SmartGWT widget in the containers instead of the chart widget? If so, I think you're probably being affected by the chart's size not being recalculated until after the SmartGWT containers are re-laid out, so SmartGWT is getting confused by the child widgets being bigger than the space available. If that is the case, you may be able to fix it by placing the chart in a separate "container" canvas, and then using the SmartGWT ResizedEvent and DrawEvent to control the size of the chart. E.g. something like:

    final Canvas chartContainer = new Canvas();
    final WidgetCanvas widgetCanvas = new WidgetCanvas(myChartWidget);
    chartContainer.addResizedHandler(new ResizedHandler() {
        public void onResized(ResizedEvent event) {
            chart.setSize(chartContainer.getWidth(), chartContainer.getHeight(), false);
        }
    });
    chartContainer.addDrawHandler(new DrawHandler() {
        public void onDraw(DrawEvent event) {
            chart.setSize(chartContainer.getWidth(), chartContainer.getHeight(), false);
        }
    });
    chartContainer.addChild(widgetCanvas);
    panel.addMember(chartContainer);

Keep us posted if that helps at all...

   -Shawn

[Rob]

Hi Shawn,

Thanks, yes it was a smartGWT layout issue.

I have updated the gwt-cx demo:

-> http://gwt-cx.com/serendipity/Serendipity.html

public class SerendipityHighChartsDashboardsView extends DashboardsView<DashboardsUiHandlers> implements
    SerendipityDashboardsPresenter.MyView {

  public SerendipityHighChartsDashboardsView() {
    super();

    if (GWT.isScript()) {

      HLayout northLayout = new HLayout();
      northLayout.setHeight("50%");
      northLayout.setBackgroundColor("white");
      northLayout.setMembersMargin(8);

      final Chart chart1 = createDynamicSplineChart();
      chart1.setWidth100();
      final Canvas chart1Container = new Canvas();
      final WidgetCanvas chart1WidgetCanvas = new WidgetCanvas(chart1);

      chart1Container.addResizedHandler(new ResizedHandler() {
          public void onResized(ResizedEvent event) {
              chart1.setSize(chart1Container.getWidth(), chart1Container.getHeight(), false);
          }
      });
      chart1Container.addDrawHandler(new DrawHandler() {
          public void onDraw(DrawEvent event) {
              chart1.setSize(chart1Container.getWidth(), chart1Container.getHeight(), false);
          }
      });

      final Chart chart2 = createSplineWithPlotBandsChart();
      chart2.setWidth100();
      final Canvas chart2Container = new Canvas();
      final WidgetCanvas chart2WidgetCanvas = new WidgetCanvas(chart2);

      chart2Container.addResizedHandler(new ResizedHandler() {
          public void onResized(ResizedEvent event) {
              chart2.setSize(chart2Container.getWidth(), chart2Container.getHeight(), false);
          }
      });
      chart2Container.addDrawHandler(new DrawHandler() {
          public void onDraw(DrawEvent event) {
              chart2.setSize(chart2Container.getWidth(), chart2Container.getHeight(), false);
          }
      });

      chart1Container.addChild(chart1WidgetCanvas);
      chart2Container.addChild(chart2WidgetCanvas);
      northLayout.addMember(chart1Container);
      northLayout.addMember(chart2Container);

      HLayout southLayout = new HLayout();
      southLayout.setHeight("50%");
      southLayout.setBackgroundColor("white");

      final Chart chart3 = createStackedAreaChart();
      chart3.setWidth100();
      final Canvas chart3Container = new Canvas();
      final WidgetCanvas chart3WidgetCanvas = new WidgetCanvas(chart3);

      chart3Container.addResizedHandler(new ResizedHandler() {
          public void onResized(ResizedEvent event) {
              chart3.setSize(chart3Container.getWidth(), chart3Container.getHeight(), false);
          }
      });
      chart3Container.addDrawHandler(new DrawHandler() {
          public void onDraw(DrawEvent event) {
              chart3.setSize(chart3Container.getWidth(), chart3Container.getHeight(), false);
          }
      });

      chart3Container.addChild(chart3WidgetCanvas);
      southLayout.addMember(chart3Container);

      panel.addMember(northLayout);
      panel.addMember(southLayout);
    }
  }

Thanks again for your help.

Cheers
Rob