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

转载 2006年05月27日 21:03:00

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

 

介绍

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对象。

http://sifang2004.cnblogs.com/archive/2006/05/23/407160.html

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

本想把该指南一次发表,这样各位同仁看起来也方便点,但是也许是文章稍长就是不能,希望各位朋友能够谅解!!!原文地址:http://www.codeproject.com/aspnet/ajax_scri...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年05月27日 21:06
  • 1705

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

本想把该指南一次发表,这样各位同仁看起来也方便点,但是也许是文章稍长就是不能,希望各位朋友能够谅解!!!原文地址:http://www.codeproject.com/aspnet/ajax_scri...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年05月27日 21:04
  • 2051

开源Android容器化框架Atlas开发者指南

课程介绍 随着手机淘宝业务的快速增长,协作研发团队的不断扩大,技术也面临着更多挑战:一方面代码量快速上升导致方法过多,限制打包的正常输出;另一个方面各业务线的开发和集成都需要到一个 apk上,业务间...
  • qq_36510261
  • qq_36510261
  • 2017年09月07日 14:53
  • 416

淘宝框架atlas集成

淘宝框架atlas
  • wdd1324
  • wdd1324
  • 2017年08月07日 18:47
  • 1360

微信小程序学习用demo推荐:微信涂鸦、canvas学习

这个demo,应该是作者的练习demo,表面上并没有展示完全; 结构图:
  • qq_38125123
  • qq_38125123
  • 2017年04月17日 16:03
  • 1078

Android小程序-涂鸦板

最近android课老师布置了一个课后作业,是实现android涂鸦板的功能, 然后自己写了一个简单的涂鸦板,可以实现选择颜色、尺寸、清屏的功能。 首先是效果图: 主要是使用Canvas...
  • icarus_wang
  • icarus_wang
  • 2016年04月07日 22:36
  • 1497

Atlas—微软的Ajax工具包(初学者必看)

 微软现在已经进入了ASP.NET 2.0和Visual Web Developer 2005发布版最后的RTM里程碑时刻。为了达到ZBB(Zero Bug Bounce),微软已经锁定了这些产品的特...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年06月11日 18:06
  • 856

微信小程序学习用demo推荐:微信涂鸦:canvas学习

这个demo,应该是作者的练习demo,表面上并没有展示完全;结构图:   其中微信涂鸦部分预览图:   示例代码: [AppleScript] 纯文本查看 复制代码 ...
  • sinat_17775997
  • sinat_17775997
  • 2017年01月16日 14:59
  • 1450

ios-day17-03(使用UIBezierPath实现“涂鸦”小程序)

源码下载地址:http://download.csdn.net/detail/liu537192/8546721 效果图同ios-day17-02 核心代码除了JLPaintVie...
  • liu537192
  • liu537192
  • 2015年03月30日 12:37
  • 504

Android插件化开发之OpenAtlas初体验

OpenAtlas一款强大的Android非代理动态部署框架,目前已经处于稳定定状态。 与传统的代理方式插件不同,OpenAtlas需要对注册动态部署的组件到manifest文件。 初体验,只不...
  • sbsujjbcy
  • sbsujjbcy
  • 2015年08月12日 16:29
  • 12579
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Atlas指南: 建立一个AJAX 涂鸦程序(一)
举报原因:
原因补充:

(最多只允许输入30个字)