Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)delvpublished in(发表于) 2014/1/6 9:09:54 创建基于AJAX技术的Scribble应用程序_[Asp.Net教程]
在"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函数。
Scribble.js 我们让服务器端图像处理器和服务器端web服务来更新图像。现在,我们需要创建在scribble应用程序中的客户端脚本,由它来把来自鼠标动作的点发送到服务器web服务。 1. 点击在解决方案资源管理器中的ScriptLibrary文件夹。 2. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。 3. 在"Add New Item"对话框中选择"JScript File",指定名字为Scribble.js并且按OK。这将把Scribble.js文件放到ScriptLibrary文件夹下。 4. 然后,我们需要声明一些全局变量。在scribble的第一个版本中,我们将使用全局变量,但是在以后的版本中我们开始使用JavaScript对象。
赞