GXT之旅：第九章：Charts图表——准备工作

最新推荐文章于 2019-03-08 11:07:35 发布

茜茜770

最新推荐文章于 2019-03-08 11:07:35 发布

阅读量2.5k

点赞数 1

分类专栏： GWT/GXT GXT之旅文章标签： charts stylesheet module javascript resources flash

本文链接：https://blog.csdn.net/miqi770/article/details/7549947

版权

GWT/GXT 同时被 2 个专栏收录

61 篇文章 5 订阅

订阅专栏

GXT之旅

61 篇文章 17 订阅

订阅专栏

第九章：Charts

本章我们要了解GXT的Chart功能。我们会全面了解Chart。为了消除对Chart功能的疑惑，我们会使用真实的数据展示Chart。

我们会涉及到如下GXt功能集

Chart
ChartModel
ChartConfig
BarChart
CylinderBarChart
FilledBarChart
SketchBarChart
HorizontalBarChart
PieChart
LineChart
AreaChart

Chart有些不同于GXT其他的功能集，与其说他是GXT framework的另一个核心部分，不如说他是“Open Flash Charts 2”被加入到GXT当中的。关于具体的“Open Flash Charts 2”内容可以参考 http://teethgrinder.co.uk/open-flash-chart-2/

因此GXT的Chart功能，在使用上需要有一些配置步骤，这些步骤并不是那么显而易见的，这也就意味着我们在使用Chart的时候很容易遇上麻烦。因此，在我们开始之前，我们先按照基本步骤建立几个example程序，先熟悉熟悉。同时让我们了解如果少了几个步骤会显示什么样子的出错信息，有助于解决以后搭建自己程序时遇到的问题。

导入chart module

来到我们RSSReader项目的module配置文件——RSSReader.gwt.xml，导入有关chart的module

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='rssreader'>
	<!-- Inherit the core Web Toolkit stuff. -->
	<inherits name='com.google.gwt.user.User' />

	<!-- Inherit the default GWT style sheet. You can change -->
	<!-- the theme of your GWT application by uncommenting -->
	<!-- any one of the following lines. -->
	<inherits name='com.google.gwt.user.theme.standard.Standard' />
	<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
	<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

	<!-- Other module inherits -->
	<inherits name='com.extjs.gxt.ui.GXT' />
	<inherits name='com.extjs.gxt.charts.Chart' />
	<!-- Specify the app entry point class. -->
	<entry-point class='com.danielvaughan.rssreader.client.RSSReader' />

	<!-- Specify the paths for translatable code -->
	<source path='client' />
	<source path='shared' />

</module>

如果你缺少这一步，当你使用Chart组件的时候，会有如下error message:

[ERROR] [rssreader] Line 26: No source code is
available for type com.extjs.gxt.charts.client.Chart; did you
forget to inherit a required module?

导入chart resource

就chart自身而言，其内容是由flash和JavaScript组成的。代码里面不单单需要引用chart module还要引用resource文件。这些resource文件需要，我们导入到项目里面。

找到GXT发布包里面的gxt-2.2.5\resources\chart\下所有内容，复制到项目的WebContent\gxt\下。
如果上述文件忘记以用的话，会有如下error message。

[WARN] 404 - GET /gxt/chart/open-flash-chart.swf (127.0.0.1) 1416
bytes

同样的gxt-2.2.5\resources\flash\下所有内容，复制到项目的WebContent\gxt\下。
如果上述文件忘记以用的话，会有如下error message。

18:27:08.015 [ERROR] [rssreader] Unable to load module entry point
class
com.danielvaughan.rssreader.client.RSSReader (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: (TypeError):
Cannot call method 'embedSWF' of undefined
stack: TypeError: Cannot call method 'embedSWF' of undefined
as well as the following message on the Java console:
[WARN] 404 - GET /gxt/flash/swfobject.js (127.0.0.1) 1408 bytes

（当然，先前我都直接复制过来了，^_^）

加载chart所用的JavaScript库

其实大家也应该知道，页面引用flash文件，离不开swfobject.js。编辑RSSReader.html，如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="RSSReader.css">
<link type="text/css" rel="stylesheet" href="css/item.css">
<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">
<script language='javascript' src='gxt/flash/swfobject.js'>
</script>
<title>RSSReader</title>
</head>
<body>
	<div id="loading">
		<div class="loading-indicator">
			<img src="gxt/images/default/shared/large-loading.gif" width="32"
				height="32" />RSS Reader<br /> <span id="loading-msg">Loading...</span>
		</div>
	</div>
	<script type="text/javascript" language="javascript"
		src="rssreader/rssreader.nocache.js"></script>
</body>
</html>

如果swfobject.js没有引入的话，控制台会报错的哦

[ERROR] [rssreader] Unable to load module entry point
class
com.danielvaughan.rssreader.client.RSSReader (see associated
exception for
details)
com.google.gwt.core.client.JavaScriptException: (TypeError):
Cannot call
method 'embedSWF' of undefined
stack: TypeError: Cannot call method 'embedSWF' of undefined:

茜茜770

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
GXT之旅：第九章：Charts图表——准备工作

第九章：Charts本章我们要了解GXT的Chart功能。我们会全面了解Chart。为了消除对Chart功能的疑惑，我们会使用真实的数据展示Chart。我们会涉及到如下GXt功能集ChartChartModelChartConfigBarChartCylinderBarChartFilledBarChartSketchBarChartHorizont
复制链接

扫一扫