借助基于基于Java的RESTful API支持的Flash Builder的灵活且用户可配置的图表

许多软件公司都有复杂的软件解决方案。 但是，这些解决方案通常缺乏简单而灵活的方式来使用视觉上吸引人的仪表板图表来呈现其数据的全局外观，以呈现数据趋势或将可能的风险情况告知正确的用户。 本文介绍了如何构建一个示例应用程序，该应用程序包含一个门户式主页，该主页包含用户配置的图表，这些图表已连接到基于Java的具有代表性状态传输（REST）的Web应用程序以获取其数据，并执行传入操作以创建，从其页面更新或淘汰仪表板小部件。

通常的用例包括访问系统的用户，通过从值字段列表中选择图表的两个维度来创建新图表，设置过滤（通常按范围），选择图表类型（系统可能会基于（根据所选维度的数据类型），并（可选）设置警报阈值。 从技术角度来看，最好的情况是连接到后端的数据仓库类型，其中出于性能原因已经对所有数据进行了预先计算。 但是，实际上，组织具有混合系统，数据可能来自不同的系统。 如果您要处理大型数据集和多个数据存储，则将数据聚合到中央数据存储介质中可能很有意义。

环境

设置项目的最低要求包括后端和前端。 后端由一个使用JSR 311 RESTful端点的Java Web应用程序（用Java 5编写）组成。 对于此后端，您需要：

• Java版本5
• Apache Maven版本2
• Apache Tomcat版本6或任何现代Servlet容器
• Eclipse集成开发环境（IDE） 。

前端包括一个简单的JavaServer Pages（JSP）页面（使用JSP 1.2），该页面是动态生成的，以显示包含各种用户配置图表的门户式主页。 对于此前端，您需要：

• Adobe Flash Builder 4，它也是使用Eclipse插件体系结构构建的。

根据登录凭证标识显示的图表。 （使用用户名是为了使用户在移动到另一台计算机时将看到相同的图表。）每个图表都是同一Adobe Flash Builder组件的一个实例，该组件提供了表示用户选择的仪表板式图表。 只需单击即可配置图表。 系统会为用户提供扩展版本，并可以选择更改统计图类型，统计图的轴，高级过滤等。 保留图表的选项后，将在用户主页上显示汇总的图表，以反映更新的选项。 用户可以选择将新图表添加到主页，也可以退出不再需要的图表。

后端代码

您设置了一个RESTful后端Web应用程序，以使用具有表1中所示调用的简单API来提供图表组件。

表1.后端应用程序的API调用

为了使您的项目快速启动并运行，请使用Maven原型生成一个基于JSR 311的简单项目。 选择以下Maven命令的jersey-quickstart-webapp选项：

# mvn archetype:generate -DarchetypeCatalog=http://download.java.net/maven/2 
	-DarchetypeArtifactId=charts-backend –DarchetypeGroup=example.charts

此命令生成一个Web存档（WAR）项目，并解析许多必需的依赖关系才能运行此示例。 要设置您的项目以在Eclipse中使用，请在Maven中执行eclipse：eclipse目标。 通过将以下描述的RESTful端点添加到项目中继续。

ChartsResource检索主页的图表列表，并将新图表添加到集合中（使用POST HTTP方法）：

@Path("/charts")
public class ChartsResource {
    @Context UriInfo uriInfo;
    @Resource private ChartManager chartManager;

    ChartsResource(UriInfo uriInfo) {
        this.uriInfo = uriInfo;
    }

    @GET
    @Produces("application/json")
    public JSONArray getCharts() {
        JSONArray charts = new JSONArray();
        for (Chart chart : 
            chartManager.listChartsFor(Security.getPrincipal())) {
            charts.put(chart.toJSON());
        }
        return charts;
    }

    @POST
    @Consumes("application/json")
    public Response createChart(JSONObject chartConfig) {
        final Chart chart = new Chart(chartConfig);
        chartManager.update(chart);
        return Response.created(buildUri(chart)).build();
    }

    private URI buildUri(Chart chart) {
        return uriInfo.getAbsolutePathBuilder().path(
            chart.getId().toString()).build();
    }
}

ChartResource负责检索有关统计图的详细信息，更新统计图的选项或撤消/删除统计图：

@Path("charts/{chartId}")
public class ChartResource {
    @Context UriInfo uriInfo;
    @Context Request request;

    int chartId;

    @Resource private ChartManager chartManager;
	
    ChartResource(UriInfo uriInfo, Request request, int chartId) {
        this.uriInfo = uriInfo;
        this.request = request;
        this.chartId = chartId;
    }
	
    @GET
    @Produces("application/json")
    public JSONObject getChart() {
        return chartManager.get(chartId).toJSON();
    }
		
    @PUT
    @Consumes("application/json")
    public void updateChart() {
        chartManager.update(chartManager.get(chartId));
    }
		
    @DELETE
    public void deleteChart() {
        chartManager.delete(chartId);
    }
}

最后，添加旨在检索图表组件用于呈现数据的实际数据点的端点：

@Path("/charts/{chartId}/data")
public class ChartDataResource {

    @Resource private ChartManager chartManager;

    @GET 
    @Produces("application/json")
    public JSONObject getData(@PathParam("chartId") int chartId) {
        return chartManager.getDataForChart(chartId).toJSON();
    }
}

ChartManager的实施取决于您，因为它是特定于站点的。

注意：部署后，您可以通过单击上面提到的URI（使用cURL或诸如soapUI之类的东西）来快速测试Web应用程序端点。

前端代码

前端由两个图表组件组成：汇总的仪表板视图和展开的视图，用户可以在其中编辑图表的选项以及预览更改如何影响所显示的数据，当然还有最终的JSP页面，用户的图表选择的仪表板样式聚合。

在Adobe Flash Builder 4环境中，首先创建仪表板视图图表组件项目，如图1所示。

图1.创建一个图表项目 [1]

从“组件”视图中添加PieChart组件。 在“数据/服务”视图中，单击“连接到数据/服务”，然后选择HTTP服务，如图2所示。

图2.连接到HTPP服务

单击“ 下一步”连接到您为后端定义的RESTful端点之一。 确保您的后端WAR已部署并正在运行； 否则，您将无法执行此步骤。 通过指向您配置的/ charts / {chartId} / data端点来配置HTTP服务，如图3所示。请注意，提供的URL中存在的{chartId}变量将被自动识别并显示在带有参数类型的parameters部分中网址。 这是正确的预期行为，因为每个图表选项都会不同，并且以后您需要使用{chartId}变量来检索它们各自的选项。 使用标准的flashvars参数将此变量传递给组件。

图3.配置HTTP服务

现在，切换到组件的“源”视图。 注意，HTTP服务出现在您的<fx：Declarations>部分中：

<fx:Declarations>
    <s:CallResponder id="getChartDataResult"/>
    <chartdataservice:ChartDataService id="chartDataService"
        fault="Alert.show(event.fault.faultString + 'n' + event.fault.faultDetail)"
        showBusyCursor="true"/>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

在“数据/服务”视图中，单击getChartData（）。 单击Configure Return Type，然后让系统自动从样本数据中检测返回类型，如图4所示。

图4.配置返回类型

完成后，系统将创建正确的数据类型，以便能够从RESTful调用中接收图表数据。 现在，将getChartData（）服务调用从您最初添加到项目中的图表顶部的数据/服务视图中拖动。 在“绑定到数据”窗口中，将数据绑定到图表组件，如图5所示。

图5.绑定到图表组件

现在，您在图表上注册click事件，以方便向原始页面发送JavaScript调用以展开此特定图表：

protected function chart_creationCompleteHandler(event:FlexEvent):void
{
    getChartDataResult.token = chartDataService.getChartData(
        FlexGlobals.topLevelApplication.parameters.chartId);

    // register the click event
    chart.addEventListener(ChartItemEvent.ITEM_CLICK, expand);
}

public function expand(e:Event):void {
    ExternalInterface.call(
        "expandChart", FlexGlobals.topLevelApplication.parameters.chartId);
}

请注意，此函数依赖于chartId变量，该变量是从传递给它的flashvars参数中提取的。

继续展开的图表，首先创建另一个项目，如图6所示。

图6.创建一个扩展的图表项目

重复从“数据/服务”视图添加HTTP服务的步骤，但是这次，向后端添加更多RESTful调用。 添加相同的/ charts / {chartId} / data后，使用GET和/ charts / {chartId}使用PUT HTTP方法在/ charts / options处添加用于检索图表选项的RESTful端点（请参见图7）。 它们旨在检索和更新图表支持的所有可能选项。

图7.将展开的图表连接到数据/服务

接下来，设计展开的图表。 从“组件”视图中拖动两个标签控件（每个轴一个），然后在每个控件旁边拖动ComboBox控件。 这些控件将使用从/ charts / options RESTful调用中检索的数据自动填充，该数据用于描述每个图表的配置选项。

拖动PieChart和ColumnChart，并将它们与图表下方的DataGrid控件并排放置。 在ColumnChart上方，拖动HSlider（水平滑块）控件，以基于最小-最大范围进一步过滤结果。 选择滑块控件，切换到“源”视图，并将滑块更改为mx组件而不是sparks组件，因为sparks组件不支持多个滑块。 添加一个值为2的thumbCount属性。它看起来应该像这样：

<mx:HSlider  x="301" y="11" width="429" thumbCount="2"/>

DataGrid控件旨在根据用户选择的过滤条件显示原始数据，只需单击图表的任何一项即可（见图8）。

图8.设计展开的图表

与图5等效，将PieChart和ColumnChart绑定到数据提供者的data部分，并将DataGrid绑定到rawData部分。

您将X和Y轴用作显示PieChart的标准。 基于PieChart的选择和基于滑块控件的时间线过滤是显示ColumnChart和DataGrid的条件。 （对于ColumnChart，其Y轴将替换为时间维度。）

选择两个轴尺寸后，用户可以选择单击饼图的切片。 选定的切片从饼中爆炸，表明已被选中。 ColumnChart和DataGrid将根据新选择进行更新。 此外，用户可以在顶部的任何滑块上滑动，以更改与时间轴对应的范围的最小值和最大值。 这些选择应该能够通过图表的过滤选项得以保留，并在用于更新图表选项的RESTful PUT操作上执行。 选择两个轴数据字段以及PieChart上的选择和范围选择，就相当于要更新图表选项的Web表单。

现在，将事件处理程序附加到以下组件：

• 对于PieChart，为itemClick事件；
• 对于两个ComboBox组件，change事件； 和
• 对于HSlider控件，为change事件。

通过单击Apply ，选定的条件将通过updateChart操作发送到服务器以进行保存。

尽管可以添加高级选项，以便用户可以基于非可视字段进行过滤，具有各种自定义比较器等，但是这些步骤是您可以选择显示过滤条件的一种可能方案。 另一个想法是在ColumnChart上显示基于多个字段的多个条，以便执行数据集的头对头比较。

将动画添加到图表中可提供引人注目的视觉增强效果，尽管广泛使用动画可能会分散用户的注意力。 请注意为每个图表选择哪些动画：安全选项通常是为了启用以下效果：

showDataEffect="rearrangeData"

您可能还想对DataGrid进行分页，因为在第一次访问页面时（或在访问新图表面板的创建时），没有活动的选择，并且返回的数据集可能超过了合理的数字。 在这种情况下，每次选择更改时，您可能都需要额外致电服务器。

最后，JSP聚合页面包含类似于以下jQuery示例的代码：

$.ajax({
    url: '/charts',
    success: function(result){
        for(chart in JSON.parse(result))
            $(this).displayChart(chart.id);
}})

调用的函数displayChart是一种JavaScript函数，用于显示带有传递的ID的一个图表。 此功能基本上表示将Adobe Flash对象嵌入到页面中，该对象类似于Adobe Flash自动生成的index.template.html文件中的对象。 您还需要实现扩展功能，该功能用于使用传递的ID显示扩展的组件。

结论

在本文中，我们描述了如何使用Java技术配置后端Web应用程序以提供RESTful API，用于基于用户信息创建，更新，删除和检索仪表板样式的图表，以便仅向用户显示与他们相关的数据。 然后，您可以通过创建简单的摘要图表和用于更改图表选项的扩展图表，使用Adobe Flash Builder 4组装用户界面组件。

您将面临的主要挑战涉及如何将现有数据存储与项目集成以及如何在许多用户选择要在其主页上显示的众多图表之后解决性能等问题。 一种建议是创建一个仅定期更新的数据仓库，以使应用程序中使用的实时数据不受影响。

最后，需要仔细考虑基础数据和动画的显示选项。

翻译自: https://www.infoq.com/articles/flash_builder_4_charts/?topicPageSponsorship=c1246725-b0a7-43a6-9ef9-68102c8d48e1