Atlas指南: 建立一个AJAX 涂鸦程序（一）

原文地址：http://www.codeproject.com/aspnet/ajax_scribble.asp

Atlas指南: 建立一个AJAX 涂鸦程序（一）

下载源代码后，要想知道如何运行程序请阅读本文最后的说明。





介绍

ASP.NET Atlas 是一套丰富的客户端和服务器端的程序库，Asp.net使用它们开发AJAX形式的应用程序。这个指南（以及在这个系列中也许还有更多的文章）试图提供对所有Atlas的特性一个总体了解。既然，Atlas是一个非常巨大的库，所以在这第一个指南中主要阐述Atlas两个非常重要的特性：

能够从客户端脚本中调用服务器端的Web服务。

轻松开发跨浏览器的兼容的JavaScript脚本代码

背景

MFC Scribble 程序是我用来学习MFC的第一个程序，因此我绝对让这个指南作为Scribble的基础，Scribble应用程序允许用户用鼠标进行徒手绘制草图。我第一次在web上看到类似的程序，使用AJAX技术，是在一个JavaScript Draw的站点上。但这个站点仅工作在Mozilla Firefox浏览器上。本文就是要描述如何建立一个跨浏览器版本的程序。我将针对每篇该系列的文章建立该程序来演示Atlas更多的特性。

安装Atlas

在写这篇文章时， 能通过这个连接连接下载December CTP of Atlas.如果这个链接不正确，你可以去Atlas的网站上得到正确的链接。该Atlas库是一个可用的Visual Studio 2005模板（VSI）。下载站点有如何安装模板的用法说明。

建立一个新的Atlas工程

当你安装了Atlas模板，你就能建立一个空白的Altas工程： File -> New -> Web Site. 这就会出现一个“New Web Site”对话框，如下图所示。



在“location”你能选择File System 或者 HTTP. 选择HTTP将允许你建立一个ISS服务器上的web站点，选择File System将允许你建立一个基于你本机文件系统的web站点（你能使用ASP.NET开发web服务器调试和测试它）。你能选择其中一个，但我发现程序在使用IIS的IE上工作得更加好。

Atlas空白工程

新建的Atlas Web站点有如下的目录结构：

App_Data
是一个空目录，你可用把数据文件放在其中。

Bin
程序集Microsoft.Web.Atlas的dll文件放在这下面，它包含了服务器端的Atlas库。

ScriptLibrary
你能把应用程序的所有的JavaScript脚本放在下面。

Atlas
Atlas客户端脚本放在该目录下两个不同的子目录中。

Debug
Debug 版本的Atlas客户JavaScript脚本文件放在这个目录下。

Release
Release 版本的Atlas客户端JavaScript文件放在这个目录下。在这个目录下的脚本书写得更加简洁，除去了一些调试代码。

Atlas 客户端脚本

九月发布的Atlas有如下客户端脚本。

Atlas.js
这是Atlas的核心脚本文件，由基本的实用函数和客户端控件和组件组成。

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

AtlasCompat2.js
确保兼容Safari web浏览器的附加函数放在这个文件中。

AtlasRuntime.js
这是核心Atlas脚本文件的精简版本，该脚本文件没有客户端的组件和控件，当上述的的组件和控件没有在web页面中使用时就可以使用该脚本文件。

AtlasUIDragDrop.js
这个文件包含在web页面提供拖拽功能的实用函数。

AtlasUIGlitz.js
这个文件包含在web页面提供动画以及其它特殊效果的实用函数。

AtlasUIMap.js
这个脚本文件是使用虚拟地球（Virtual Earth）的Atlas绘制地图框架

其它文件

Atlas在Web站点的根目录下增加了如下文件。

Default.aspx and Default.aspx.cs
这是一个包含了Atlas Script Manager控件的web页面，Script Manager控件负责根据Atlas客户端脚本绘制脚本块。在页面中也增加了一个类型为test/xml-script的客户脚本块。该脚本块用来使用公布的XML语法书写脚本。

eula.rtf

readme.txt

Web.Config
web.config 是运行Atlas程序最基本的文件。它包含一些对Atlas的配置说明细节，也加入了Atlas HTTP模块和HTTP handlers。

Scribble程序

Scribble 程序运行用户通过点击鼠标左键并移动鼠标来徒手绘制草图。当用户释放鼠标按钮并把鼠标移出绘制区域，草图绘制就结束了，有些方法是利用VML使用JavaScript来画图，但我们在这个例子中不准备使用VML。

在Scribble中默认的web页将有一个image（一个规则的HTML image – IMG标签）。用JavaScript的事件处理器来捕捉image上的鼠标事件。在一笔绘制（译者注：就是我们在image上画一笔）JavaScript函数向web服务发送一系列的点。通过客户端发过来的点画线，Web服务更新并且image对象被保存在一个session变量中，最后客户端向服务器请求一个已经被更新的image。Image 源是一个把保存在session变量中的iamge流向客户端的HTTP处理器。这些就是程序的主要组件。

Default.aspx
有一个动态image和Atlas Script Manager控件的页面。

ScribbleImage.ashx
这是一个把存储在session变量中的image对象流向客户端的HTTP handler。

ScribbleService.asmx
处理所有的绘制请求的web服务。Web服务修改image对象。

Scribble.js
供程序使用的JavaScript代码在这个文件中，清楚地分离设计和代码。

Global.asax
Session_Start 和 Session_End 事件在Global.asax中处理。 Session_Start 建立Session变量，Session_End 除去存储在session变量中的image对象。

未完！！