原文:Flex and .NET Tutorials (1)
Flex和.NET指南(1)(转载本文,请做连接)
首先是为初学者了解如何在.NET上运行Flex做的一些前期准备工作。首先指导你通过创建一个简单的Flex应用程序,一个展示关于美国经济增长率的简单直线图,他的数据是来自一个.NET servlet。稍后将说明你的.NET servlet如何对Flex产生的事件做出反应,如何对服务器端的.NET数据类型进行转换(serialize不知道如何翻译-_-)以使Flex能很好的吸收。
完成这些工作你需要:
- Adobe Flex Builder V2 Beta3 (测试) 或 Flex SDK V2 Beta3 (免费)
- Adobe Flash Player V9 Beta3 (免费)
- Microsoft Visual Web Developer 2005 Express Edition 或 .NET V2.0 SDK (免费)
- Microsoft Windows
我选择Microsoft Web Developer 2005 Express在这篇指南里,因为它是免费的。它是基于.NET V2.0 framework 并且包括内嵌的web server。使用Visual Web Developer(或Visual Studio 2005)允许你在HOME版的XP上开发.NET servlet来测试你的Flex应用程序。你也同样可以使用Dreamweaver 8或记事本来开发.NET servlet,但是如果你使用这些IDE,你将需要一个iis服务器(只能是XP专业版不能是HOME版的XP)和.NET V2.0 SDK。
完成的Flex应用程序看起来是这样的:
源文件:
应用程序应该是这样工作的。当浏览器请求Flex应用程序的HTML页面时。这个页面和编译好的嵌到页面中的Flex Swf文件将被从web服务器上下载下来。这时浏览器将在Flash Player插件中执行这个swf文件。这个swf发送一个HTTP请求给相同的服务器上的.NET servlet,以获得图表的数据。.NET servlet产生一个以XML格式为数据的HTTP响应。当响应被swf文件接受时这个图表的线条将被描绘。
这时你如何构造这个简单发Flex图表应用程序?
第一步:构造.NET servlet
构造这个应用程序的第一步是构造一个能接受Flex应用程序请求并返回增长比率数据的servlet。ASP.NET能正确的对HTTP请求产生响应,但是不幸的是产生的是HTML而不是XML。虽然如此,加如少量的说明,ASP.NET能够构造产生纯XML响应的程序。Microsoft至今还没有发明一种能动态产生XML的ASP.NET页面。但是在java的页面有这样的功能,称做servlet,因此在这里我也使用这个术语。
在Visual Web Developer中没有为XML servlet打造的特殊工程类型,因此我们将使用普通的ASP.NET网站工程而修改这个web应用程序以此来响应一个XML来代替HTML。创建一个新的网站如下图所示:
选择文件系统(filesystem)如果你使用Visual Web Developer当web服务器而…\GrowthServlet作为网站在文件系统中的位置。选择语言。在这个示例里我使用C#,但你能使用任何一种你最熟悉的.NET语言。
第二步:从Servlet的aspx页面中移除html。
在Visual Web Developer中任何一个新的web页面中都包含一些html代码。移除servlet中Default.aspx页面中所有的html代码。在适当的位置留下页面标志(这些元素被包括在一些标记里)但是去掉所有其他的元素。添加ContentType="text/xml"到页面标志中去。
这最后的Default.aspx页面将是下面的样子。
<%@Page Language="c#" ContentType="text/xml" CodeFile="Default.aspx.cs" Inherits="_Default" %>
第三步:更改Servlet的后台代码去产生XML
接下来的一步是添加产生XML的程序代码到Servlet的后台代码文件中的Page_Load事件句柄中。输出XML最简单的办法就是使用ASP.NET的Response.Write()来把XML文字写到HTTP的响应流中。以下的例子展示这个方法:
using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write( "<GrowthRates>" ) ;
Response.Write( "<Rate>36.5</Rate>" ) ;
Response.Write( "<Rate>36.1</Rate>" ) ;
Response.Write( "<Rate>36.4</Rate>" ) ;
Response.Write( "<Rate>36.7</Rate>" ) ;
Response.Write( "<Rate>37.1</Rate>" ) ;
Response.Write( "<Rate>37.4</Rate>" ) ;
Response.Write( "<Rate>36.6</Rate>" ) ;
Response.Write( "</GrowthRates>" ) ;
}
}
第四步:在浏览器中测试Servlet
测试ASP.NET servlet是否你预期的产生XML你可以在Visual Web Developer中按F5。这样做首先Visual Web Developer将显示如下的一个对话框:你是否想创建一个web.config文件而能够调试?
选择添加一个新的web.config文件并按下OK。这样将启动你默认的浏览器并显示XML。
当你准备建一个Flex应用程序时如果你的XML看起来图形。要注意端口号当用ASP.NET Development Server使用Servlet,它是你在你的Flex应用程序要使用的。
第五步:构建Flex应用程序
使用Flex Builder或者记事本来构建Flex应用程序GrowthRates.mxml。这个HTTPService 组件收到来自Servlet的数据而LineChart组件使用HTTPService的结果作为这个图表的数据级数:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="white" backgroundImage=""
creationComplete="this.servlet.send();">
<mx:HTTPService id="servlet"
url="http://localhost:1317/GrowthServlet/Default.aspx" />
<mx:LineChart showDataTips="true"
dataProvider="{this.servlet.lastResult.GrowthRates.Rate}">
<mx:series>
<mx:LineSeries />
</mx:series>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" />
</mx:verticalAxis>
</mx:LineChart>
</mx:Application>
完成后的Flex应用程序如下图所示: