使用 flex4 开发通用统计系统，发布源代码至github

1，关于flex4 

很老的技术，我居然还再研究使用这个东西，自己想想都不敢相信。

技术存在总是有他的理由的。之所以想用flex4 开发一个通用统计系统，还是有几个有点的：

a，组件比较全，比较全，基本上省去了自己开发

b，在局域网下一次获取大量json数据并解析展示到flex里面速度比html快，图标效果比较好

c，开发系统一个人就够了，浏览器兼容比较好，只要安装flash就行，尤其要做成产品给xp系统的使用那个IE兼容性痛苦啊

当然也有缺点，技术学习成本不低，属于不流行的没落的技术。

但这个不影响做项目，项目的技术选型要合理，维护成本低，综合考虑，而不是所有的全部用新技术，把自己玩死。

存在就有他的意义，不影响做项目，不影响挣钱。

2，系统设计原理

统计系统，设计的不是解决某一个统计问题，而是做一个统计的展示界面，把统计的sql都做xml配置起来。

系统展示界面展示效果：

其中系统的左侧菜单是menu.xml进行控制的

 

Html代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- 定义左侧菜单： -->  
3. <menus>  
4.     <menu label="用户数据统计">  
5.         <menu label="用户注册统计" module="/assets/flex/DataGrid.swf" id="stat-demo"/>  
6.         <menu label="用户登陆统计" module="/assets/flex/DataGrid.swf" id="stat-user-reg"/>  
7.     </menu>  
8.     <menu label="系统设置">  
9.         <menu label="菜单管理" module="/assets/flex/DataMenu.swf" />  
10.         <menu label="数据管理" module="/assets/flex/DataCRUD.swf" />  
11.     </menu>  
12. </menus>  

通过配置不同的flash文件可以展示不同的配置显示。

 

通过扩展module可以扩展展示效果。

stat-user-reg.xml配置，显示查询数据

 

Html代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <stats>  
3.     <!-- 统计数据xml 按照id进行查找。-->  
4.     <stat id="stat-demo-1">  
5.         <!-- 展示数据 -->  
6.         <list>  
7.             <column field="id" text="id"/>  
8.             <column field="name" text="注册姓名"/>  
9.             <column field="sex" text="注册性别"/>  
10.             <column field="city" text="注册城市"/>  
11.             <column field="phone" text="注册电话"/>  
12.         </list>  
13.         <sql><![CDATA[ 
14.             select id,`name`,sex,city,phone,address,qq,email from stat_demo_01 limit 10 
15.         ]]></sql>  
16.     </stat>  
17. </stats>  

 

显示效果如下：

目前已经完成数据显示。但没有数据查询和分页配置，继续开发。

3，服务端代码

服务端，读取xml中的sql语句和配置，拼接成json数据。

 

Java代码  

1. /** 
2.  * User: freewebsys.com 
3.  */  
4. @Service("statBaseService")  
5. public class StatBaseServiceImpl implements StatBaseService {  
6.   
7.     @Autowired  
8.     private StatBaseDao statBaseDao;  
9.   
10.     //读取xml文件返回Document。  
11.     private Document xmlReader(String confXml) {  
12.         try {  
13.             SAXReader reader = new SAXReader();  
14.             return reader.read(IOUtils.toInputStream(confXml));  
15.         } catch (DocumentException e) {  
16.             e.printStackTrace();  
17.             return null;  
18.         }  
19.     }  
20.   
21.     //主函数，负责循环处理节点。  
22.     public String findStat(String confXml) {  
23.   
24.         Document document = xmlReader(confXml);  
25.         System.out.println(document);  
26.         List<DefaultElement> list = document.selectNodes("/stats/stat");  
27.         for (DefaultElement element : list) {  
28.             mergeStatElement(element);  
29.         }  
30.         return document.asXML();  
31.     }  
32.   
33.     private DefaultElement mergeStatElement(DefaultElement element) {  
34.         System.out.println(element);  
35.         //处理查询出所有列表显示的元素。  
36.         List<DefaultElement> columnList = element.selectNodes("list/column");  
37.   
38.         //找到查询sql。  
39.         Node sqlNode = element.selectSingleNode("sql");  
40.         String sql = sqlNode.getText();  
41.         //获取数据后将节点删除。在客户端不显示。  
42.         element.remove(sqlNode);  
43.         System.out.println(sql);  
44.   
45.         List<Map<String, Object>> list = statBaseDao.findStat(sql, null);  
46.         JSONArray jsonArray = new JSONArray();  
47.         for (Map<String, Object> tmpData : list) {  
48.             JSONObject jsonObject = new JSONObject();  
49.             for (DefaultElement column : columnList) {  
50.                 System.out.println(column);  
51.                 String columnName = column.attributeValue("field");  
52.                 Object objValue = tmpData.get(columnName);  
53.                 jsonObject.put(columnName, objValue);  
54.                 //将一行数据组织成对象，放到数组里面。  
55.             }  
56.             jsonArray.add(jsonObject);  
57.         }  
58.         DefaultElement elementData = new DefaultElement("data");  
59.         elementData.add(new DefaultCDATA(jsonArray.toJSONString()));  
60.         //增加data字段，保存json数据。  
61.         element.add(elementData);  
62.         return element;  
63.     }  
64.   
65.     //读取配置文件。  
66.     public String readConfFile(String configName) {  
67.         String basePath = StatBaseServiceImpl.class.getResource("/")  
68.                 .toString().replace("file:", "");  
69.         try {  
70.             return FileUtils.readFileToString(new File(basePath + configName), "utf-8");  
71.         } catch (IOException e) {  
72.             e.printStackTrace();  
73.             return "";  
74.         }  
75.     }  
76. }  

通过读取xml配置文件，将数据返回

 

 

Html代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <stats>  
3.     <!-- 统计数据xml 按照id进行查找。-->  
4.     <stat id="stat-demo-1">  
5.   
6.         <!-- 展示数据 -->  
7.         <list>  
8.             <column field="id" text="id"/>  
9.             <column field="name" text="注册姓名"/>  
10.             <column field="sex" text="注册性别"/>  
11.             <column field="city" text="注册城市"/>  
12.             <column field="phone" text="注册电话"/>  
13.         </list>  
14.           
15.     <data><![CDATA[[{"city":"city_222","id":1,"name":"222","phone":"1222","sex":"1"}, 
16.     {"city":"city_33","id":2,"name":"33","phone":"233","sex":"0"}, 
17.     {"city":"city_33","id":3,"name":"33","phone":"333","sex":"1"}, 
18.     {"city":"city_45","id":4,"name":"45","phone":"445","sex":"0"}, 
19.     {"city":"city_6","id":5,"name":"6","phone":"56","sex":"1"}, 
20.     {"city":"city_7","id":6,"name":"7","phone":"67","sex":"0"}, 
21.     {"city":"city_8","id":7,"name":"8","phone":"78","sex":"1"}, 
22.     {"city":"city_9","id":8,"name":"9","phone":"89","sex":"0"}, 
23.     {"city":"city_9","id":9,"name":"9","phone":"99","sex":"1"}, 
24.     {"city":"city_11","id":10,"name":"11","phone":"1011","sex":"0"}]]]></data></stat>  
25. </stats>  

数据包括配置的xml和返回的数据。

 

4，客户端flex4代码

跟新xml返回的数据，动态生成AdvancedDataGridColumn，并添加到 AdvancedDataGrid里面。

 

Html代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.           xmlns:s="library://ns.adobe.com/flex/spark"   
4.           xmlns:mx="library://ns.adobe.com/flex/mx"   
5.           width="100%" height="100%"  initialize="initApp();">  
6.     <fx:Style source="./assets/main.css" />  
7.     <fx:Declarations>  
8.         <mx:HTTPService id="moduleService" method="GET"  
9.                         resultFormat="e4x" result="resultHandler();"/>  
10.     </fx:Declarations>  
11.     <fx:Style>  
12.         @namespace s "library://ns.adobe.com/flex/spark";  
13.         @namespace mx "library://ns.adobe.com/flex/mx";  
14.         mx|Text.headLabelStyle{fontSize:20;fontWeight:bold;}  
15.     </fx:Style>  
16.     <fx:Script>  
17.         <![CDATA[     
18.             import mx.collections.*; 
19.             import mx.controls.*; 
20.             import mx.controls.advancedDataGridClasses.*; 
21.             import mx.utils.*; 
22.              
23.             import spark.components.*; 
24.              
25.             private function initApp():void{ 
26.                 try {  
27.                     /* 删除问号前面的所有内容，包括问号。 */  
28.                     var myPattern:RegExp = /.*\?/;  
29.                     var url:String = this.loaderInfo.url.toString(); 
30.                     //Alert.show(this.loaderInfo.height+","+this.loaderInfo.width); 
31.                      
32.                     dataGridGroup.width = this.loaderInfo.width; 
33.                     //dataGridGroup.height = this.loaderInfo.height; 
34.                      
35.                     url = url.replace(myPattern, "");  
36.                      
37.                     /* 创建一个形如name=value字符串数组 */  
38.                     var params:Array = url.split("&");  
39.                      
40.                     /* 输出数组中的参数，找到moduleId，这个参数，其他参数类似。 */  
41.                     var moduleId:String = ""; 
42.                     for (var key:String in params) {  
43.                         var value:String = String(params[key]); 
44.                         if(value.indexOf("moduleId=") >= 0){ 
45.                             moduleId = value.replace("moduleId=",""); 
46.                             break; 
47.                         }  
48.                     } 
49.                     //Alert.show(moduleId); 
50.                     //设置请求地址获取模块参数配置。 
51.                     moduleService.url = "/stat/module/data.do?moduleId="+moduleId; 
52.                     moduleService.send(); 
53.                      
54.                 } catch (e:Error) {  
55.                     trace(e);  
56.                 }  
57.                  
58.                 /* 显示loaderInfo的一些有用的信息 */  
59.                 trace("AS version: " + this.loaderInfo.actionScriptVersion);  
60.                 //trace("App height: " + this.loaderIno.height);  
61.                 //trace("App width: " + this.loaderInffo.width);  
62.                 trace("App bytes: " + this.loaderInfo.bytesTotal);  
63.             } 
64.              
65.             private function genWhere(dataXml:XML):HGroup{ 
66.                 var hgroup:HGroup = new HGroup(); 
67.                 //保证居中和左对齐。 
68.                 hgroup.verticalAlign="middle" 
69.                 hgroup.horizontalAlign = "left"; 
70.                  
71.                 //Alert.show(dataXml.where.column); 
72.                 for each(var objWhere:Object in dataXml.where.column){ 
73.                     var field:String = objWhere.@field; 
74.                     var text:String = objWhere.@text; 
75.                      
76.                     var inputLabel:spark.components.Label = new spark.components.Label(); 
77.                     inputLabel.text = text; 
78.                     hgroup.addElement(inputLabel); 
79.                     var input:spark.components.TextInput = new spark.components.TextInput(); 
80.                     input.id = field; 
81.                     hgroup.addElement(input); 
82.                     var sp:Spacer = new Spacer(); 
83.                     sp.width = 10; 
84.                     hgroup.addElement(sp); 
85.                 } 
86.                 //如果存在where数据则增加查询按钮。 
87.                 if(dataXml.where.column.length() > 0){ 
88.                     var search:spark.components.Button = new spark.components.Button(); 
89.                     search.label = "查询"; 
90.                     hgroup.addElement(search); 
91.                 } 
92.                 return hgroup; 
93.             } 
94.              
95.             //动态生成 AdvancedDataGrid 数据表单. 
96.             private function genAdvancedDataGrid(dataXml:XML):AdvancedDataGrid{ 
97.                 //Alert.show(menuList.source.columns.column); 
98.                 //Alert.show(menuList.source.data); 
99.                 //格式化json数据。将数据转换成数组。放到DataGrid里面。 
100.                 var tmpArray:Array = (JSON.parse(dataXml.data) as Array); 
101.                 //Alert.show(array.length()); 
102.                 var dataArray:ArrayCollection = new ArrayCollection(tmpArray); 
103.                  
104.                 //#######################设置列表显示顶部标题. 
105.                 var columnArray:Array = new Array(); 
106.                 for each(var objColumn:Object in dataXml.list.column){ 
107.                     var dataField:String = objColumn.@field; 
108.                     var headerText:String = objColumn.@text; 
109.                     var width:String = objColumn.@width; 
110.                     //设置DataGridColun标题，和显示属性。 
111.                     var adColumn:AdvancedDataGridColumn  = new AdvancedDataGridColumn(dataField); 
112.                     adColumn.headerText = headerText; 
113.                     if(width){ 
114.                         adColumn.width = Number(width); 
115.                     } 
116.                     columnArray.push(adColumn); 
117.                 } 
118.                 //adg1.columns(); 
119.                 //adg1.columnCount(); 
120.                 //adg1.columns(columnArray); 
121.                  
122.                 var adg:AdvancedDataGrid = new AdvancedDataGrid(); 
123.                 adg.id = "adg-"+id; 
124.                  
125.                 adg.dataProvider = dataArray; 
126.                 adg.columns = columnArray; 
127.                 adg.rowCount = tmpArray.length + 1; 
128.                 return adg; 
129.             } 
130.              
131.             //请求数据成功之后处理动态生成表格。 
132.             private function resultHandler():void{ 
133.                  
134.                 for each(var obj:Object in moduleService.lastResult.stat){ 
135.                     var dataXml:XML = obj as XML; 
136.                     //获得模板id,标题. 
137.                     var id:String = dataXml.@id; 
138.                     var title:String = dataXml.@title; 
139.                      
140.                     //设置 
141.                     var vgroup:VGroup = new VGroup(); 
142.                     //设置内边距15。                       
143.                     vgroup.paddingTop = 15; 
144.                     vgroup.paddingLeft = 15; 
145.                     vgroup.paddingRight = 15; 
146.                     vgroup.paddingBottom =  15; 
147.                     //设置标题。 
148.                     var titleText:Text = new Text(); 
149.                     titleText.text = title; 
150.                     titleText.styleName = "headLabelStyle"; 
151.                     vgroup.addElement(titleText); 
152.                      
153.                     var hgroup:HGroup = genWhere(dataXml); 
154.                     vgroup.addElement(hgroup); 
155.                     //生成高级表格。 
156.                     var adg:AdvancedDataGrid = genAdvancedDataGrid(dataXml); 
157.                     vgroup.addElement(adg); 
158.                      
159.                     dataGridGroup.addElement(vgroup); 
160.                 } 
161.                  
162.                  
163.             } 
164.         ]]>  
165.     </fx:Script>  
166.     <!-- 设置如果超过高度滚动. -->  
167.     <s:VGroup id="dataGridGroup" height="100%"/>  
168.       
169. </mx:Module>  

 

5，后续&代码

 

这只是最简单的应用，功能还需要完善。

代码已经放到github上面了。  https://github.com/freewebsys/flex4-stat

工程需要使用flahs builder 打开。

 

这个也发布到csdn上面了：

http://blog.csdn.net/freewebsys/article/details/39137035