Flex和.NET指南（1）(原创翻译)

  原文：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应用程序如下图所示：

 

这如果你的鼠标放到图表的数据点上数据提示会弹出来。这真是太方便了。

转载于:https://www.cnblogs.com/FireYang/archive/2006/09/22/512310.html