GXT之旅：第九章：Charts图表——Chart的基本创建(1)

原创

茜茜770 2022-12-06 10:43:53 博主文章分类：GWT/GXT ©著作权

文章标签 charts portlet string class components 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者茜茜770的原创作品，请联系作者获取转载授权，否则将追究法律责任

Chart class

作为一个java类，Chart其实就是针对Open Flash Chart 库做了包装，并且让用户在使用起来就像其他的GXT的components一样。

需要注意的是，在使用Chart的时候，需要给定一个open-flash-chart.swf的URL地址——上一节，我们拷入到RSSReader项目里面的地址。当然URL必须有效，否则Chart不会被渲染出来，除了控制室台404error之外，页面上是没有什么错误的。

比如如下的URL是有效的：

Chart chart = new Chart("gxt/chart/open-flash-chart.swf");

因此，如下URL是无效的：

Chart chart = new Chart("wrong/path/open-flash-chart.swf");

那么就会有如下的error message

[WARN] 404 - GET /wrong/path/open-flash-chart.swf (127.0.0.1) 1417
bytes

接下来，让我们新建一个Portlet来展示Chart

新建package：com.danielvaughan.rssreader.client.charts——在此package下，新建一个FeedChart 容器，extends LayoutContainer。

package com.danielvaughan.rssreader.client.charts;

import com.extjs.gxt.ui.client.widget.LayoutContainer;

public class FeedChart extends LayoutContainer {

}

新建属性——chart，注意传入的URL

private final Chart chart = new Chart("gxt/chart/open-flash-chart.swf");

Override onRender()，具体实现如下

@Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    setLayout(new FitLayout());
    chart.setBorders(true);
    add(chart);
  }

进入package：com.danielvaughan.rssreader.client.portlets，为FeedChart新建一个ChartPortlet

package com.danielvaughan.rssreader.client.portlets;

import com.extjs.gxt.ui.client.widget.custom.Portlet;

public class ChartPortlet extends Portlet {

}

在ChartPortlet类，新建属性feedChart

private final FeedChart feedChart = new FeedChart();

构造函数ChartPortlet()里定义一些基本属性：

public ChartPortlet() {
    setHeading("Chart");
    setId(RSSReaderConstants.CHART_PORTLET);
    setLayout(new FitLayout());
    setHeight(250);
  }

当然对于恒量CHART_PORTLET，定义：

package com.danielvaughan.rssreader.client;

public class RSSReaderConstants {
  public static final String FEED_SERVICE = "feedService";
  public static final String FEED_STORE = "feedStore";
  public static final String NAV_PORTLET = "navPortlet";
  public static final String FEED_PORTLET = "feedPortlet";
  public static final String ITEM_PORTLET = "itemPortlet";
  public static final String FEED_DD_GROUP = "feedDDGroup";
  public static final String ITEM_DD_GROUP = "itemDDGroup";
  public static final String OVERVIEW_PORTLET = "overviewPortlet";

        public static final String CHART_PORTLET = "chartPortlet";
}

回到，ChartPortlet构造函数。将feedChart加入到Portlet里这一完毕过程，派发出去，并且传入自己（this）

public ChartPortlet() {
    setHeading("Chart");
    setId(RSSReaderConstants.CHART_PORTLET);
    setLayout(new FitLayout());
    setHeight(250);
    
    Dispatcher.forwardEvent(AppEvents.NewPortletCreated, this);
  }

我们想要让，ChartPortlet显示在Portal里面的第一列。所以我们需要修改PortalView.onAddPortlet()方法。

package com.danielvaughan.rssreader.client.mvc.views;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.mvc.controllers.PortalController;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.extjs.gxt.ui.client.event.EventType;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.View;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.custom.Portal;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.ui.RootPanel;

public class PortalView extends View {
  private final Portal portal = new Portal(2);

  public PortalView(PortalController controller) {
    super(controller);
  }

  @Override
  protected void handleEvent(AppEvent event) {
    EventType eventType = event.getType();
    if (eventType.equals(AppEvents.NewPortletCreated)) {
      onNewPortletCreated(event);
    }
  }

  private void onNewPortletCreated(AppEvent event) {
    final Portlet portlet = (Portlet) event.getData();
    if (portlet.getId() == RSSReaderConstants.NAV_PORTLET
        || portlet.getId() == RSSReaderConstants.CHART_PORTLET) { //here
      portal.add(portlet, 0);
    } else {
      portal.add(portlet, 1);
    }
  }

  @Override
  protected void initialize() {
    portal.setColumnWidth(0, 0.3);
    portal.setColumnWidth(1, 0.7);
    final Viewport viewport = new Viewport();
    viewport.setLayout(new FitLayout());
    viewport.add(portal);
    RootPanel.get().add(viewport);
  }
}

因为NavPortlet 和 ChartPortlet都要添加到第一列，所以我们要缩短NavPortlet的高度。

package com.danielvaughan.rssreader.client.portlets;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.components.NavPanel;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;

public class NavPortlet extends Portlet {
  public NavPortlet() {
    setHeading("Navigation");
    setLayout(new FitLayout());
    setHeight(350); // here
    
    setId(RSSReaderConstants.NAV_PORTLET);

    NavPanel navPanel = new NavPanel();
    navPanel.setHeaderVisible(false);
    add(navPanel);
    
    Dispatcher.forwardEvent(AppEvents.NewPortletCreated , this);
  }
}

最后，在程序入口方法RSSReader.onModuleLoad()，新建ChartPortlet

package com.danielvaughan.rssreader.client;

import com.danielvaughan.rssreader.client.mvc.controllers.PortalController;
import com.danielvaughan.rssreader.client.portlets.ChartPortlet;
import com.danielvaughan.rssreader.client.portlets.FeedPortlet;
import com.danielvaughan.rssreader.client.portlets.ItemPortlet;
import com.danielvaughan.rssreader.client.portlets.NavPortlet;
import com.danielvaughan.rssreader.client.portlets.OverviewPortlet;
import com.danielvaughan.rssreader.client.services.FeedService;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class RSSReader implements EntryPoint {

  /**
   * This is the entry point method.
   */
  @Override
  public void onModuleLoad() {
    final FeedServiceAsync feedService = GWT.create(FeedService.class);
    Registry.register(RSSReaderConstants.FEED_SERVICE, feedService);
    Dispatcher dispatcher = Dispatcher.get();
    dispatcher.addController(new PortalController());
    new NavPortlet();
    new OverviewPortlet();
    new FeedPortlet();
    new ItemPortlet();

    new ChartPortlet();// here
  }
}