原文地址: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对象。
未完!!