原文:Flex and .NET Tutorials (1) 
 

Flex.NET指南(1)(转载本文,请做连接)

首先是为初学者了解如何在.NET上运行Flex做的一些前期准备工作。首先指导你通过创建一个简单的Flex应用程序,一个展示关于美国经济增长率的简单直线图,他的数据是来自一个.NET servlet。稍后将说明你的.NET servlet如何对Flex产生的事件做出反应,如何对服务器端的.NET数据类型进行转换(serialize不知道如何翻译-_-)以使Flex能很好的吸收。

完成这些工作你需要:

我选择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应用程序请求并返回增长比率数据的servletASP.NET能正确的对HTTP请求产生响应,但是不幸的是产生的是HTML而不是XML。虽然如此,加如少量的说明,ASP.NET能够构造产生纯XML响应的程序。Microsoft至今还没有发明一种能动态产生XMLASP.NET页面。但是在java的页面有这样的功能,称做servlet,因此在这里我也使用这个术语。

Visual Web Developer中没有为XML servlet打造的特殊工程类型,因此我们将使用普通的ASP.NET网站工程而修改这个web应用程序以此来响应一个XML来代替HTML。创建一个新的网站如下图所示:

 


选择文件系统(
filesystem)如果你使用Visual Web Developerweb服务器而…\GrowthServlet作为网站在文件系统中的位置。选择语言。在这个示例里我使用C#,但你能使用任何一种你最熟悉的.NET语言。

第二步:从Servletaspx页面中移除html

Visual Web Developer中任何一个新的web页面中都包含一些html代码。移除servletDefault.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.NETResponse.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应用程序如下图所示:

 


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

posted on 2006-09-22 23:36  FireYang  阅读(810)  评论(0编辑  收藏  举报