梦想与现实的落差,就是我们离成功的距离!!

博客园 首页 新随笔 联系 订阅 管理

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

Atlas指南: 建立一个AJAX 涂鸦程序(一)

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

 

介绍

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

  1. 能够从客户端脚本中调用服务器端的Web服务。
  2. 轻松开发跨浏览器的兼容的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服务器调试和测试它)。你能选择其中一个,但我发现程序在使用IISIE上工作得更加好。

Atlas空白工程

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

  • App_Data
    是一个空目录,你可用把数据文件放在其中
  • Bin
    程序集Microsoft.Web.Atlasdll文件放在这下面,它包含了服务器端的Atlas库。
  • ScriptLibrary
    你能把应用程序的所有的JavaScript脚本放在下面。
    • Atlas
      Atlas
      客户端脚本放在该目录下两个不同的子目录中。
      • Debug
        Debug
        版本的Atlas客户JavaScript脚本文件放在这个目录下。
      • Release
        Release
        版本的Atlas客户端JavaScript文件放在这个目录下。在这个目录下的脚本书写得更加简洁,除去了一些调试代码。

Atlas 客户端脚本

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

  • Atlas.js
    这是Atlas的核心脚本文件,由基本的实用函数和客户端控件和组件组成。
  • AtlasCompat.js
    这个文件包含支持Mozilla FirefoxApple-iMac-Safari web浏览器的兼容层。该脚本确保Atlas代码是跨浏览器兼容的。
  • AtlasCompat2.js
    确保兼容Safari web浏览器的附加函数放在这个文件中。
  • AtlasRuntime.js
    这是核心Atlas脚本文件的精简版本,该脚本文件没有客户端的组件和控件,当上述的的组件和控件没有在web页面中使用时就可以使用该脚本文件。
  • AtlasUIDragDrop.js
    这个文件包含在web页面提供拖拽功能的实用函数。
  • AtlasUIGlitz.js
    这个文件包含在web页面提供动画以及其它特殊效果的实用函数。
  • AtlasUIMap.js
    这个脚本文件是使用虚拟地球(Virtual Earth)的Atlas绘制地图框架

其它文件

AtlasWeb站点的根目录下增加了如下文件。

  • 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变量中,最后客户端向服务器请求一个已经被更新的imageImage 源是一个把保存在session变量中的iamge流向客户端的HTTP处理器。这些就是程序的主要组件。

  • Default.aspx
    有一个动态imageAtlas 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对象。

未完!!

posted on 2006-05-23 15:12  叶漂  阅读(2639)  评论(5编辑  收藏  举报