Create a Scribble Application Based on AJAX technology (1)

ASP. NET Atlas is a rich set of class libraries for ASP. NET to develop AJAX-style applications. This article attempts to explain the general features of the Atlas framework. Because Atlas is a huge library, This article focuses on the two most important features of Atlas: the ability to call server-side web services from client scripts makes it quite easy to develop cross-browser compatible JavaScript code.

By introducing these two features, readers can familiarize themselves with the use of the Atlas class library.
Background
The MFC Scribble application is one of the famous examples of learning MFC programming. The Scribble application allows users to draw freely with the mouse. I have seen such an application using AJAX technology on the Internet. Unfortunately, this JavaScript drawing site can only run on the Firefox browser. Therefore, I will explain in this article how to build a cross-browser version of the Scribble program.
Install Atlas
When this article is complete, click this link to download the December CTP of Atlas. If the link does not work, you can always go to the Atlas site to get the correct link. This Atlas library can be used as a template VSI of Visual Studio 2005 ). On the download site just now, we have instructions on how to install this template.
Create an Atlas project
Once the Atlas template is installed, you can click the menu option "File-> New-> Web Site" to create a blank Atlas project. Then you can open the "New Web Site" dialog box shown in Figure 1.

New Web Site

Under "location", you can select "File System" or "HTTP ". Selecting HTTP will allow you to create a site based on an IIS server, and selecting File System will allow you to create a site in the local File System you can use the development web server for debugging and testing. You can select any option, but I found that this application works better if it uses Internet Explorer and runs based on IIS.
Atlas Empty Project
The newly created Atlas website has the following directory structure:
• App_Data
This is an empty directory for storing data files.
• Bin
This directory contains the dll files corresponding to the Assembly set Microsoft. Web. Atlas. This directory contains the server location of the Atlas library.
• ScriptLibrary
In this directory, you can place any JavaScript file of the application.
Atlas
The Atlas client script is put here, which has the following two sub-directories:
§ Debug
The debug version of the JavaScript file on the Atlas client is stored in this directory.
§ Release
The release version of the JavaScript file on the Atlas client is stored in this directory. The scripts in this directory are more compact and some debugging code is removed.
Atlas client script
The release of Atlas in September provides the following client scripts:
• Atlas. js
This is the core Atlas script file, which includes basic tool functions and client controls and components.
• AtlasCompat. js
This file contains the Atlas compatibility layer to support Mozilla Firefox and Apple's iMac-Safari web browsers. This script ensures that the Atlas code is cross-browser compatible.
• AtlasCompat2.js
This file contains other functions to ensure compatibility with the Safari web browser.
• AtlasRuntime. js
This is a micro-version of the core Atlas script file, which does not contain client components and controls. This script file is used when the components or controls mentioned earlier are not used.
• AtlasUIDragDrop. js
Contains tool functions, used to provide the mouse drag and drop function in the web page.
• AtlasUIGlitz. js
Includes tool functions to provide animations and other special effects on webpages.
• AtlasUIMap. js
Supports script files using the Atlas ing framework of Virtual Earth.
Other files
Atlas also adds the following files to the root directory of the website.
• Default. aspx and Default. aspx. cs
This page contains the Atlas script Manager Control, which is used to generate a script block for reference to the Atlas client script. A client script of the test/xml-script block type is also added to this page. This script block is used to write scripts using declarative XML syntax.
• Eula. rtf
• Readme.txt
• Web. Config
This web. config is required to run the Atlas application. It contains some specific configuration settings for Atlas, and you can add the Atlas HTTP module and HTTP processor to this file.
Scribble Application
The Scribble application allows you to drag the left mouse button to draw a pattern freely. When the user releases the mouse button or moves When moving outside the painting area, end a stroke. JavaScript can be used and VML technology can be used for painting, but VML is not used in this article.
A regular HTML image with an IMG tag will appear on the default page of Scribble ). The mouse event on the image can be captured by the JavaScript event processor. This JavaScript function can send the vertex series corresponding to the strokes to a web service. The web service updates the image objects stored in session variables by making all the point paintings sent by users into a line. Finally, the client requests an updated image from the server. The image source is an HTTP processor that flows the image objects stored in session variables to the client. The following are the main components of the application.
• Default. aspx
Pages with dynamic images and Atlas script manager controls.
• ScribbleImage. ashx
This is an HTTP processor that converts image objects stored in session variables to streaming data.
• ScribbleService. asmx
All painting requests are sent to this web service. This web Service implements image modification.
• Scribble. js
The main JavaScript code of the application resides in this file to achieve a clear separation of design and code.
• Global. asax
Session_Start and Session_End events are processed in Global. asax. Session_Start is used to create session variables, while Session_End is used to release images stored in session variables.

Global. asax
We start the encoding process from the Global. asax file.
1. Click "Add New Item" on the "Website" menu or press Ctrl + Shift +.
2. In the "Add New Item" dialog box, select "Global Application Class" and click OK. You will see that the Global. asax file is automatically created.
3. At the beginning, we imported the System. Drawing namespace. You only need to insert the following line of code after the first line of the above file:
<% @ Import Namespace = "System. Drawing" %>
4. Add the following code to the Session_Start function.

Void Session_Start (object sender, EventArgs e ){ Bitmap bmp = new Bitmap (200,200 ); Using (Graphics g = Graphics. FromImage (bmp )) { G. FillRectangle (new SolidBrush (Color. White), new Rectangle (0, 0, bmp. Width, bmp. Height )); G. Flush (); } Session ["Image"] = bmp; }

This Code creates a simple white 200x200 pixel bitmap with the background white and assigns it to the session variable Image.
5. The Session_End function should release the image stored in the session variable.

Bitmap bmp = (Bitmap) Session ["Image"]; Bmp. Dispose ();

6. Select "Add Reference" from the "Website" menu ".
7. In the "Add Reference" dialog box, select "System. Drawing" and click OK.
8. Click "Build Web Site" under the "Build" menu or press Ctrl + Shift + B to ensure that no Build error occurs.

ScribbleImage. ashx

This web processor is used to stream images stored in session variables back to the client.
1. Click "Add New Item" in the "WebSite" menu or press Ctrl + Shift +.
2. Select "Generic Handler" in the "Add New Item" dialog box, set the processor name to ScribbleImage. ashx, and click OK.
3. A web processor needs to use session variables. It needs to implement the IRequiresSessionState interface. This is the only method to mark the interface and there is no method to overload it. Edit the declaration of the class as follows:

Public class ScribbleImage: IHttpHandler, System. Web. SessionState. IRequiresSessionState

4. Next, add the code to the ProcessRequest method.

Public void ProcessRequest (HttpContext context ){ Context. Response. ContentType = "image/png "; Context. Response. Cache. SetNoStore (); Context. Response. Cache. SetCacheability (HttpCacheability. NoCache ); Context. Response. Cache. SetExpires (DateTime. Now ); Context. Response. Cache. SetValidUntilExpires (false ); System. Drawing. Bitmap bmp = (System. Drawing. Bitmap) context. Session ["Image"]; Lock (bmp) { Using (MemoryStream MS = new MemoryStream ()) { Bmp. Save (MS, ImageFormat. Png ); Ms. Flush (); Context. Response. BinaryWrite (ms. GetBuffer ()); } } } }

Set the ContentType header corresponding to the response of image/png in the first line. This ensures that the browser recognizes the response as a png image rather than a common HTML code.
The following four lines indicate to the browser that the response should not be buffered. All these four lines are necessary to ensure that the Code is cross-browser compatible. We will optimize the code later in this tutorial.
Finally, the bitmap in the session variable is stored in a memory stream, and the content of the memory stream is written to the response. Because the image is binary data, the BinaryWrite function is used here.