ASP.NET项目中使用FLEX4开发的应用 小记
最近在项目开发过程中,客户要求对统计数据除了报表显示之外,还要看到饼图 柱状图等图形展示,之前对flex的了解,对于图形这块可以很好的实现,于是决定试一试。开发工具flashbuider4+vs2005.
1、新建FLEX项目
对于这种已经快完成的asp.net项目如何和flex应用结合起来,我最终选择了httpservice来进行,flex端创建httpservice服务,与asp.net端的ashx文件进行通讯。
flex端利用flex提供的组件创建httpservice:
resultFormat="e4x" result="httpService_resultHandler(event)">
</mx: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端,具体如下:
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用户组设置读取/写入权限即可.
客户端处理返回值,并绑定数据组件:
myADGHour.dataProvider = xml.FlightHours;
piechart1.dataProvider=xml.FlightHours;
column.dataProvider=xml.FlightHours;
对于饼图和柱状图属性设置,可以参考源码。
最后如何将两者的开发结果进行综合到asp.net项目中呢?
解决办法:发布flex项目,加入asp.net项目中即可,将httpservice的url地址可以设置为相对地址,如下图:
最后在asp.net项目中调用发布之后的html页面即可。源码
效果图:
接下来将学习如何导出flex端的报表,图形文件等,请大家说说自己的看法,我正在苦恼