科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件创建基于AJAX技术的Scribble应用程序

创建基于AJAX技术的Scribble应用程序

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

ASP.NET Atlas是一套丰富的类库,用于ASP.NET开发AJAX风格的应用程序

作者:朱先忠编译 来源:天极开发 2007年11月4日

关键字: AJAX Scribble 应用程序

  • 评论
  • 分享微博
  • 分享邮件
简介

  ASP.NET Atlas是一套丰富的类库,用于ASP.NET开发AJAX风格的应用程序。本文试图解说Atlas框架的一般性特征,由于Atlas是一个庞大的库,故本文集中探讨Atlas的两个最重要的特征:

  1. 能够从客户端脚本中调用服务器端web服务

  2. 使得开发跨浏览器兼容的JavaScript代码相当容易

  通过对这两个特征的介绍,读者朋友可以熟悉Atlas类库的使用方法。

  背景

  MFC Scribble应用程序是学习MFC编程的著名例子之一。Scribble应用程序允许用户使用鼠标自由涂画。我在网络中曾看见这样一个类似的利用AJAX技术的应用程序。但遗憾的是,这个JavaScript绘图站点仅能在Firefox浏览器上运行。因此,我在本文中将解释怎样构建一个跨浏览器版本的Scribble程序。

  安装Atlas

  在本文完成时,可以点按这个链接下载Atlas的十二月CTP。如果这个链接不能工作,你总可以转到Atlas站点得到正确的链接。该Atlas库可以作为Visual Studio 2005的一个模板(VSI)。在刚才的这个下载站点上有关于怎样安装这个模板的说明。

  创建一个Atlas工程

  一旦安装了Atlas模板,你就可以通过点按菜单选项"File->New->Web Site"来创建一个空白的Atlas工程。然后就可以打开图1所示的"New Web Site"对话框。


  在"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用于释放存储在会话变量中的图像。
    • 评论
    • 分享微博
    • 分享邮件
    闂傚倸鍊搁崐鎼佸磹妞嬪孩顐介柨鐔哄Т閻骞栧ǎ顒€濡肩紒鎰殜閺岋繝宕堕埡浣锋睏闂佸搫顑呴柊锝夊蓟閺囷紕鐤€閻庯綆浜炴禒鐐節濞堝灝鐏犻柕鍫熸倐瀵寮撮敍鍕澑闁诲函缍嗘禍鏍磻閹捐鍐€妞ゆ挶鍔庣粙蹇涙⒑鐠恒劌娅愰柟鍑ゆ嫹

    婵犵數濮烽弫鍛婃叏閻戝鈧倹绂掔€n亞鍔﹀銈嗗坊閸嬫捇鏌涢悢閿嬪仴闁糕斁鍋撳銈嗗坊閸嬫挾绱撳鍜冭含妤犵偛鍟灒閻犲洩灏欑粣鐐烘⒑瑜版帒浜伴柛鎾寸洴閹儳煤椤忓應鎷洪梻鍌氱墛閸楁洟宕奸妷銉ф煣濠电姴锕ょ€氼參宕h箛鏃傜瘈濠电姴鍊绘晶娑㈡煕鐎c劌濡介柕鍥у瀵粙濡歌閳ь剚甯¢弻鐔兼寠婢跺﹥娈婚梺鍝勭灱閸犳牠骞冨⿰鍫濈厸闁稿本绋撹ぐ瀣煟鎼淬値娼愭繛鍙壝悾婵堢矙鐠恒劍娈鹃梺鍓插亝濞叉牠鎮″☉銏$厱閻忕偛澧介惌瀣箾閸喐鍊愭慨濠勭帛閹峰懐绮电€n亝鐣伴梻浣规偠閸斿宕¢崘鑼殾闁靛繈鍊曢崘鈧銈嗗姂閸庡崬鐨梻鍌欑劍鐎笛呯矙閹寸姭鍋撳鐓庡籍鐎规洑鍗冲畷鍗炍熼梹鎰泿闂備線娼ч悧鍡涘箠鎼淬垺鍙忔い鎺嗗亾闁宠鍨块崺銉╁幢濡炲墽鍑规繝鐢靛О閸ㄦ椽鏁嬮柧鑽ゅ仦娣囧﹪濡堕崨顔兼闂佺ǹ顑呴崐鍦崲濞戙垹骞㈡俊顖濐嚙绾板秹鏌f惔銏e妞わ妇鏁诲璇差吋閸偅顎囬梻浣告啞閹搁箖宕版惔顭戞晪闁挎繂顦介弫鍡椼€掑顒婂姛闁活厽顨嗙换娑㈠箻閺夋垹鍔伴梺绋款儐閹瑰洭寮婚敐鍛婵炲棙鍔曠壕鎶芥⒑閸濆嫭婀扮紒瀣灴閸╃偤骞嬮敃鈧婵囥亜閺囩偞鍣洪柍璇诧功缁辨捇宕掑▎鎴濆濡炪們鍔岄幊姗€骞嗗畝鍕<闁绘劙娼х粊锕傛煙閸忚偐鏆橀柛鏂跨焸閹偤宕归鐘辩盎闂佸湱鍎ら崹鐢割敂閳哄懏鍊垫慨姗嗗墻濡插綊鏌曢崶褍顏€殿喕绮欐俊姝岊槼闁革絻鍎崇槐鎾存媴缁涘娈┑鈽嗗亝缁诲牆顕f繝姘亜缁炬媽椴搁弲锝夋偡濠婂啰效闁诡喗锕㈤幊鐘活敆閸屾粣绱查梺鍝勵槸閻楀嫰宕濇惔锝囦笉闁绘劗鍎ら悡娑㈡倶閻愯泛袚闁哥姵锕㈤弻鈩冩媴閻熸澘顫掗悗瑙勬礈閸犳牠銆佸鈧幃鈺呮惞椤愩倝鎷婚梻鍌氬€峰ù鍥х暦閸偅鍙忛柟鎯板Г閳锋梻鈧箍鍎遍ˇ顖炲垂閸岀偞鐓㈡俊顖滃皑缁辨岸鏌ㄥ┑鍡╂Ц缂佲偓鐎n偁浜滈柡宥冨妿閳藉绻涢崼鐔虹煉婵﹨娅e☉鐢稿川椤斾勘鈧劕顪冮妶搴′簼婵炶尙鍠栧畷娲焵椤掍降浜滈柟鍝勬娴滈箖姊洪幐搴㈢┛濠碘€虫搐鍗遍柟鐗堟緲缁秹鏌涢锝囩畼妞ゆ挻妞藉铏圭磼濡搫顫岄悗娈垮櫘閸撴瑨鐏冮梺鍛婁緱閸犳岸宕㈤幖浣光拺闁告挻褰冩禍浠嬫煕鐎n亜顏柟顔斤耿閺佸啴宕掑☉姘箞闂佽鍑界紞鍡涘磻閸℃ɑ娅犳い鎺戝€荤壕濂告煕鐏炲墽鈽夌紒妞﹀洦鐓欓柣鐔告緲椤忣參鏌熼悡搴㈣础闁瑰弶鎸冲畷鐔兼濞戞瑦鐝¢梻鍌氬€搁崐椋庣矆娓氣偓楠炴牠顢曢妶鍌氫壕婵ê宕崢瀵糕偓瑙勬礀缂嶅﹪寮婚崱妤婂悑闁告侗鍨界槐閬嶆煟鎼达紕鐣柛搴ㄤ憾钘濆ù鍏兼綑绾捐法鈧箍鍎遍ˇ浼存偂閺囥垺鐓涢柛銉e劚婵$厧顭胯閸ㄤ即婀侀梺缁樓圭粔顕€顢旈崼鐔虹暢闂傚倷鐒︾€笛呮崲閸屾娑樜旈崨顓犲幒闂佸搫娲㈤崹娲偂閸愵亝鍠愭繝濠傜墕缁€鍫熸叏濡寧纭鹃柦鍐枛閺屾洘绻涜鐎氱兘宕戦妸鈺傗拺缂備焦锚婵洦銇勯弴銊ュ籍闁糕斂鍨藉鎾閳ユ枼鍋撻悽鍛婄叆婵犻潧妫楅埀顒傛嚀閳诲秹宕堕妸锝勭盎闂婎偄娲︾粙鎰板箟妤e啯鐓涢悘鐐靛亾缁€瀣偓瑙勬礋娴滃爼銆佸鈧幃銏$附婢跺澶�

    重磅专题
    往期文章
    最新文章