创建基于AJAX技术的Scribble应用程序

【 tulaoshi.com - Web开发 】

简介

　　ASP.NET Atlas是一套丰富的类库，用于ASP.NET开发AJAX风格的应用程序。本文试图解说Atlas框架的一般性特征，由于Atlas是一个庞大的库，故本文集中探讨Atlas的两个最重要的特征：

　　1. 能够从客户端脚本中调用服务器端web服务

 
　　2. 使得开发跨浏览器兼容的JavaScript代码相当容易

　　通过对这两个特征的介绍，读者朋友可以熟悉Atlas类库的使用方法。

　　背景

　　MFC Scribble应用程序是学习MFC编程的著名例子之一。Scribble应用程序允许用户使用鼠标自由涂画。我在网络中曾看见这样一个类似的利用AJAX技术的应用程序。但遗憾的是，这个JavaScript绘图站点仅能在Firefox浏览器上运行。因此，我在本文中将解释怎样构建一个跨浏览器版本的Scribble程序。

　　安装Atlas

　　在本文完成时，可以点按这个链接下载Atlas的十二月CTP。如果这个链接不能工作，你总可以转到Atlas站点得到正确的链接。该Atlas库可以作为Visual Studio 2005的一个模板（VSI）。在刚才的这个下载站点上有关于怎样安装这个模板的说明。

　　创建一个Atlas工程

　　一旦安装了Atlas模板，你就可以通过点按菜单选项"File-＞New-＞Web Site"来创建一个空白的Atlas工程。然后就可以打开图1所示的"New Web Site"对话框。

　　在"location"下面，可以选择"File System"或"HTTP"。选择HTTP将允许你基于一个IIS服务器的站点，而选择File System将允许你在本地文件系统（你可以使用开发web服务器来进行调试和测试）上创建一站点。你可以选择任何一个选项，但是我发现该应用程序如果使用Internet Explorer且基于IIS运行效果更好一些。

　　Atlas空工程

　　上面最新创建的Atlas网站具有下列目录结构：

　　· App_Data

　　这是放置数据文件的空目录。

　　· Bin

　　这个目录下放置相应于装配集Microsoft.Web.Atlas的dll文件。这个目录下包含了Atlas库的服务器位置。

　　· ScriptLibrary

　　在这个目录下，你可以放置该应用程序的任何JavaScript文件。

　　o Atlas

　　Atlas客户端脚本放在这里，它有如下两个子目录：

　　§ Debug

　　Atlas客户端JavaScript文件的调试版本放在这个目录下。

　　§ Release

　　Atlas客户端JavaScript文件发行版本放在这个目录下。这个目录下的脚本更为紧凑，并且去除了一些调试代码。

　　Atlas客户端脚本

　　Atlas的12月份发行版本提供了下面几个客户端脚本：

　　· Atlas.js

　　这是核心Atlas脚本文件，它包括了基本的工具函数和客户端控件和组件。

　　· AtlasCompat.js

　　这个文件包含Atlas兼容层以支持Mozilla Firefox和Apple的iMac-Safari web浏览器。这个脚本可以确保Atlas代码是跨浏览器兼容的。

　　· AtlasCompat2.js

　　这个文件包含其它函数以确保与Safari web浏览器的兼容性。

　　· AtlasRuntime.js

　　这是一个核心Atlas脚本文件的缩微版本，其中并不含有客户端组件和控件。这个脚本文件在前面提到的组件或控件没有使用时使用。

　　· AtlasUIDragDrop.js

　　包含工具函数，用于提供网页中的鼠标拖放功能。

　　· AtlasUIGlitz.js

　　包含工具函数，用于提供网页中的动画和其它特殊效果。

　　· AtlasUIMap.js

　　支持使用Virtual Earth的Atlas映射框架的脚本文件。

　　其它文件

　　Atlas还把下面文件添加到网站的根目录下。

　　· Default.aspx和Default.aspx.cs

　　该网页包含Atlas脚本管理器控件-负责生成参考Atlas客户端脚本的脚本块。一个test/xml-script块类型的客户端脚本也被添加到该页面上。这个脚本块用于使用声明性XML语法写脚本。

　　· eula.rtf

　　· readme.txt

　　· Web.Config

　　这个web.config是运行Atlas应用程序所必需的。它包含一些Atlas特定的配置设置，并且可以在这个文件中添加Atlas HTTP模块和HTTP处理器。

　　Scribble应用程序

　　该Scribble应用程序允许用户拖动鼠标左键自由绘制图案。当用户释放鼠标按钮或移动到绘画区域外面时，结束一个笔画。可以使用JavaScript并利用VML技术来实现作画，但是我们在本文中不准备使用VML。

　　在Scribble的默认网页上将出现一幅图像（常规的具有IMG标签的HTML图像）。用户在该图像上的鼠标事件能够被JavaScript事件处理器所捕获。该JavaScript函数能够把绘制笔画相应的点系列发送到一个web服务中。该web服务通过把所有由用户发送来的点绘制成线同时更新保存在会话变量中的图像对象。最后，客户端向服务端请求一个更新后的图像。该图像源是一个HTTP处理器，它把存储在会话变量中的图像对象流向客户端。下面是该应用程序的主要组成部件。

　　· Default.aspx

　　拥有动态图像和Atlas脚本管理器控件的页面。

　　· ScribbleImage.ashx

　　这是一个HTTP处理器，它实现把存储在会话变量中的图像对象转换为流式数据。

　　· ScribbleService.asmx

　　所有的绘画请求发送到这个web服务中。这个web服务实现图像修改。

　　· Scribble.js

　　该应用程序相应的主要JavaScript代码驻留在这个文件中，以达到设计与代码的清晰分离。

　　· Global.asax

　　Session_Start和Session_End事件是在Global.asax中处理的。Session_Start用于创建会话变量，而Session_End用于释放存储在会话变量中的图像。

Global.asax

　　我们从Global.asax文件开始进行我们的编码过程。

　　1. 在"Website"菜单上点击"Add New Item"或按下Ctrl +Shift+A组合键。

　　2. 在"Add New Item"对话框中选择"Global Application Class"并且点击ok。你会看到Global.asax文件被自动创建。

　　3. 一开始，我们导入System.Drawing命名空间。这只要在上面文件的第一行的后面插入下面一行代码即可：

　　＜%@ Import Namespace="System.Drawing" %＞

　　4. 添加下列代码到Session_Start函数。

void Session_Start(object sender, EventArgs e){
　Bitmap bmp = new Bitmap(200, 200);
　using (Graphics g = Graphics.FromImage(bmp))
　{
　　g.FillRectangle(new SolidBrush(Color.White),new Rectangle(0, 0, bmp.Width, bmp.Height));
　　g.Flush();
　}
　Session["Image"] = bmp;
}

　　这部分代码创建一个简单的白色200×200像素的位图，背景全为白色并把它赋给会话变量Image。

　　5. Session_End函数应该释放掉存储在会话变量中的图像。

Bitmap bmp = (Bitmap)Session["Image"];
bmp.Dispose();

　　6. 从"Website"菜单中选择"Add Reference"。

　　7. 在"Add Reference"对话框中选择"System.Drawing"并且点击OK。

　　8. 最后，在"Build"菜单下点击"Build Web Site"或按组合键Ctrl+Shift+B来确保没有构建错误。

ScribbleImage.ashx

　　这个web处理器用于把存储在会话变量中的图像数据流回客户端。

　　1. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。

　　2. 在"Add New Item"对话框中选择"Generic Handler"，然后把该处理器的名字设置为ScribbleImage.ashx并且点击OK。

　　3. 一个web处理器要使用会话变量，它需要实现接口IRequiresSessionState。这是唯一的标记接口并且没有要重载的方法。如下所示编辑该类的声明：

public class ScribbleImage : IHttpHandler,
System.Web.SessionState.IRequiresSessionState

　　4. 接下来，我们把代码添加到ProcessRequest方法。

public void ProcessRequest (HttpContext context){
　context.Response.ContentType = "image/png";
　context.Response.Cache.SetNoStore();
　context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
　context.Response.Cache.SetExpires(DateTime.Now);
　context.Response.Cache.SetValidUntilExpires(false);
　System.Drawing.Bitmap bmp = (System.Drawing.Bitmap)context.Session["Image"];
　lock(bmp)
　{
　　using (MemoryStream ms = new MemoryStream())
　　{
　　　bmp.Save(ms, ImageFormat.Png);
　　　ms.Flush();
　　　context.Response.BinaryWrite(ms.GetBuffer());
　　}
　}
　}
}

　　o 第一行设置相应于image/png的响应的ContentType头。这确保浏览器认出该响应是一个png图像而不是普通HTML代码。

　　o 紧接着的四行向浏览器指明不应该缓冲这个响应。所有的这四行都是必要的，用于确保该代码是跨浏览器兼容的。我们将在本教程的以后的版本中优化这些代码。

　　o 最后，会话变量中的位图被存储到一个内存流中，而该内存流的内容被写到响应中。由于图像是二进制数据，所以这里使用了BinaryWrite函数。

　　ScribbleService.asmx

　　我们有办法来初始化会话图像并把该图像内容转换成流作为响应。现在，我们需要一些方法来把内容添加到图像本身。我们期望客户调用ScribbleService.asmx web服务以把线段添加到图像上。

　　1. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。

　　2. 在"Add New Item"对话框中选择"Web Service"，指定名为ScribbleService.asmx并且点击OK。确保未选定"Place Code in a Separate File"。

　　3. 通过把下列一行添加到命名空间语句中来导入命名空间System.Drawing：

using System.Drawing;

　　4. 接下来，我们需要为绘制点定义一个简单的类。我们不能使用System.Drawing.Point类，因为它是不可以XML串行化的。在后面的内容中，我们将会看到我们怎样使用System.Drawing.Point来代替定制的类。现在我们先在ScribbleService类声明之前添加下面代码：

public class Point{
　public int X;
　public int Y;
};