建立基於AJAX技術的Scribble應用程式

來源:互聯網
上載者:User
ajax|程式|建立 簡介

  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用於釋放儲存在會話變數中的映像。

[1] [2] [3]  下一頁



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.