电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Flex3 开发 OLAP 应用（5）OLAPDataGrid 的扩展 [打印本页]

作者: look_w 时间: 2018-9-3 12:19 标题: 使用 Flex3 开发 OLAP 应用（5）OLAPDataGrid 的扩展

OLAPDataGrid 的扩展作为 Flex3 后新添加的组件，OLAPDataGrid 仍有一定的局限性。如一般的 OLAP 操作中均允许客户在图表直接进行点击，以达到数据上钻及下钻的效果。
对 Flex 已有组件扩展需要在其之上创建自定义的渲染器，而这通常有两种方法：定义一个 renderer（item 类型或 header 类型）在 MXML 的组件内部；或定义在另一个类文件中，再把这个类名指定在组件的 itemRenderer 或 headerRenderer 属性里。
对于 OLAPDataGrid 组件而言，虽然扩展了 AdvancedDataGrid 的功能，但最主要目的是为了支持 OLAP 查询结果的显示，也就是说，数据是由 OLAPCube 决定的。这就决定了其渲染器（OLAPDataGrid**Renderer）行为与普通组件的渲染器相比有着诸多限制，如不允许列的拖拽，不允许在表格上进行修改操作，不允许对列数据进行排序。而对于 OLAP 应用最重要的上钻与下钻操作，OLAPDataGrid**Renderer 亦不支持，我们需要继承 AdvancedDataGrid**Renderer 来完成此功能。
OLAP 常见操作 OLAP 的基本多维分析操作有钻取（Drill-up 和 Drill-down）、切片（Slice）和切块（Dice）、以及旋转（Pivot）等。钻取：是改变维的层次，变换分析的粒度。它包括向下钻取（Drill-down）和向上钻取（Drill-up）/ 上卷 (Roll-up)。Drill-up 是在某一维上将低层次的细节数据概括到高层次的汇总数据，或者减少维数；而 Drill- down 则相反，它从汇总数据深入到细节数据进行观察或增加新维。切片和切块：是在一部分维上选定值后，关心度量数据在剩余维上的分布。如果剩余的维只有两个，则是切片；如果有三个或以上，则是切块。旋转：是变换维的方向，即在表格中重新安排维的放置（例如行列互换）。

首先在 mxml 文件中给出 OLAPDataGrid 的初始定义。清单 9. OLAPDataGrid 定义
1
2
3
4
5
<mx:Canvas width="100%" height="25%">
<mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"
initialize="configureGrid()">
</mx:OLAPDataGrid>
</mx:Canvas>
通过点击标题栏的方式进行数据的钻取，并使用 header 类型的自定义渲染器来处理上钻，下钻行为。（当然你还可以自定义的添加其他类型的渲染器，如 item 和 groupItem）清单 10. configureGrid
1
2
3
public function configureGrid():void {
myOLAPDG.headerRenderer = new ClassFactory(DAXHeadItemReader);
}

接着覆写主 header 以及其 subheader（以递归的方式），并以回调函数的方式处理各种鼠标事件。清单 10. 父 header 的覆写函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

protected override function createChildren():void {
super.createChildren();

label.addEventListener(MouseEvent.CLICK, headerLabelClicked);
label.addEventListener(MouseEvent.MOUSE_OVER, headerLabelMouseOver);
label.addEventListener(MouseEvent.MOUSE_OUT, headerLabelMouseOut);

if (data != null && data.hasOwnProperty("children")) {
   var children:Array = this.data.children;
   var child:AdvancedDataGridColumn;
   for (var i:int = 0; i < children.length; i++) {
         child = children;
         child.rendererIsEditor = true;
         child.headerRenderer = new ClassFactory(DAXSubHeadRender);
   }
}
}

清单 11. 上钻回调函数

1
2
3
4
5
6
7
8
9
10
11

private function headerLabelClicked(mouseEvent:MouseEvent):void {
var textField:String = mouseEvent.target.getRawText();

if (textField == 'Year Level')
   Alert.show("It's the top now! Drill up unavailable!");
else {
   // 模拟本应通过 HttpService 与服务端通信返回的数据
   var newXML:XML = …… ;
   dispatchEvent(new DrillEvent(DrillEvent.DRILL_UP, newXML, true, false));
}
}

Subheader 的构建方式与下钻回调函数与此类似，具体详见附件中代码。
这样就把一个 Flex 中的标准 OLAPDataGrid 组件用自定义的渲染器进行了扩展。

接下来我们再来看看具体的钻取逻辑实现。我们可以根据多种方式来判断钻取操作是上钻还是下钻：例如根据点击组件的 textField，或是从后端返回的数据中某字段的值。当上钻或下钻操作无效时，及时地提醒用户。清单 12. 下钻回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

private function subheaderLabelMouseClick(mouseEvent:MouseEvent):void {
var textField:String = mouseEvent.target.getRawText();

if (textField == 'Day Level')
   Alert.show("It's the bottom now! Drill down unavailable!");
else {
   // 模拟本应通过 HttpService 与服务端通信返回的数据
   var newXML:XML;
   if (textField == 'Year Level')
         newXML = …… ;
   else if (textField == 'Quarter Level')
         newXML = …… ;
   else if (textField == 'Month Level')
         newXML = …… ;

   dispatchEvent(new DrillEvent(DrillEvent.DRILL_DOWN, newXML, true, false));
}

最后看一看具体显示的效果。

点击子 Header，鼠标移过时的特效在 headerLabelMouseOver() 和 headerLabelMouseOut() 方法中定义，如图 5 所示。（可与图 4 不进行任何扩展的 OLAPDataGrid 行为进行比较）图 5. 下钻操作 1这时候若点击即完成了下钻操作，将显示季度这个度量的各种数据。如图 6 所示。
图 6. 下钻操作 2继续点击，数据将会越来越细化，在月之后，最后显示天的数据。而这时若仍进行下钻，则会出现提示用户：下钻操作无法执行。如图 7 所示。
图 7. 非法下钻操作
点击父 Header，则将一步步进行上钻操作，如图 7 的“Day Level”和图 6 的“Quarter Level”。而若在图 5 的基础上点击“Year Level”，也将提示用户：上钻操作无法执行，如图 8 所示。图 8. 非法上钻操作

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)