ASP.NET项目中使用FLEX4开发的应用 小记

最近在项目开发过程中，客户要求对统计数据除了报表显示之外，还要看到饼图 柱状图等图形展示，之前对flex的了解，对于图形这块可以很好的实现，于是决定试一试。开发工具flashbuider4+vs2005.

1、新建FLEX项目

    对于这种已经快完成的asp.net项目如何和flex应用结合起来，我最终选择了httpservice来进行，flex端创建httpservice服务，与asp.net端的ashx文件进行通讯。    

flex端利用flex提供的组件创建httpservice： 

<mx:HTTPService id="httpService" url="http://localhost:2131/WebSite1/FlightHandler.ashx" 
        resultFormat="e4x" result="httpService_resultHandler(event)">
</mx:HTTPService>

 或者手动创建(灵活性强)

var serviceHour:HTTPService = new HTTPService();
serviceHour.url="http://localhost:2131/WebSite1/FlightHandler.ashx?Type=1&t="+Math.random();
serviceHour.useProxy= false;
serviceHour.resultFormat="e4x";
serviceHour.addEventListener(ResultEvent.RESULT,ServiceHour_resultHandler);
serviceHour.send();

对于httpservice各个参数的解释都很简单，一看便知。对于在url后面跟一个随机参数是很有必要的，其中用意很简单。

服务端：

服务端接受到请求之后，获取对应的参数，进行数据查询并返回给flex端，具体如下：

 

<%@ WebHandler Language="C#" Class="FlightHandler" %>

using System;
using System.Web;
using System.Data;
using System.Collections.Generic;
using System.Xml.Serialization;

public class FlightHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string selectdate = context.Request.QueryString["SelectDate"].ToString();
        
        if (int.Parse(context.Request.QueryString["Type"].ToString()) == 1)
        {
            DataTable dtHour = new DataTable();
            dtHour.Columns.Add("ID");
            dtHour.Columns.Add("Name");
            dtHour.Columns.Add("ThisYear");
            dtHour.Columns.Add("LastYear");
            dtHour.Columns.Add("CompareMoth");
            dtHour.Columns.Add("ThisCount");
            dtHour.Columns.Add("LastCount");
            dtHour.Columns.Add("CompareYear");
            dtHour.Rows.Add(new object[] { 1, "A", 100, 200, 2, 1000, 2500, 2.5 });
            dtHour.Rows.Add(new object[] { 2, "B", 200, 300, 1.5, 1200, 2400, 2 });
            dtHour.Rows.Add(new object[] { 3, "C", 100, 350, 3.5, 1000, 6000, 6 });
            dtHour.Rows.Add(new object[] { 4, "D", 100, 350, 3.5, 1000, 6000, 6 });

            List<Hours> HourList = new List<Hours>();
            for (int i = 0; i <= dtHour.Rows.Count - 1; i++)
            {
                Hours Hour = new Hours();
                Hour.ID = i;
                Hour.Name = dtHour.Rows[i]["Name"].ToString();
                Hour.ThisYear = int.Parse(dtHour.Rows[i]["ThisYear"].ToString());
                Hour.LastYear = int.Parse(dtHour.Rows[i]["LastYear"].ToString());
                Hour.CompareMoth = decimal.Parse(dtHour.Rows[i]["CompareMoth"].ToString());
                Hour.ThisCount = int.Parse(dtHour.Rows[i]["ThisCount"].ToString());
                Hour.LastCount = int.Parse(dtHour.Rows[i]["LastCount"].ToString());
                Hour.CompareYear = decimal.Parse(dtHour.Rows[i]["CompareYear"].ToString());
                HourList.Add(Hour);
            }

            XmlSerializer ser = new XmlSerializer(typeof(List<Hours>));
            ser.Serialize(context.Response.Output, HourList);
        }

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    public class Hours
    {
        public int ID;
        public string Name;
        public int ThisYear;
        public int LastYear;
        public decimal CompareMoth;
        public int ThisCount;
        public int LastCount;
        public decimal CompareYear;
    }    
}

此处使用了XmlSerializer ser = new XmlSerializer(typeof(List<Hours>));将泛型对象转序列化处理并返回到客户端，客户端对返回值进行处理就方便了。但是使用了这样的转换可能在部署项目都时候访问会遭到限制，具体原因是C:\WINDOWS\Temp 文件夹权限问题，可以对其users/network service用户组设置读取/写入权限即可.

客户端处理返回值，并绑定数据组件:

var xml:XML = event.result as XML;
myADGHour.dataProvider = xml.FlightHours;    
piechart1.dataProvider=xml.FlightHours;
column.dataProvider=xml.FlightHours;

对于饼图和柱状图属性设置，可以参考源码。

     最后如何将两者的开发结果进行综合到asp.net项目中呢？

     解决办法：发布flex项目，加入asp.net项目中即可，将httpservice的url地址可以设置为相对地址，如下图:

    

    最后在asp.net项目中调用发布之后的html页面即可。源码      

效果图: 

 

    接下来将学习如何导出flex端的报表，图形文件等，请大家说说自己的看法，我正在苦恼