(text will look like this)

Introducing the AJAX Whiteboard

Although it isn't apparent, AJAX can draw as well, and in this case study we'll see how. Our goal here is to build an online whiteboard application, where your visitors can draw and publicly express their artistic skills.

Implementing a whiteboard certainly isn't the best real-world scenario for using AJAX, because technologies such as Flash or Java do a much better job at handling complex graphics. However, implementing a whiteboard with AJAX allows us to study some of the more sensitive areas of AJAX development, such as:

• Drawing graphics using specific algorithms and div elements
• Efficiently packaging data for client-server communication
• Synchronizing the same view among many clients
• Optimizing the database storage and SQL queries for increasing performance

For the whiteboard application we'll build in this chapter, we have the following requirements:

• Responsiveness is a key factor: We seek for low times of response from a real-time application.
• Support for concurrent access, enabling collaborative work: Two or more users need to be able to access the application at the same time.
• Data sharing: All participants can interact with the whiteboard differently, yet they must share the same view of the board, just as with the blackboard used in a classroom. (All of us need to have the same view in order to participate in the classroom, don't we?)

One might say that these are the characteristics of a desktop application, more or less. One well-known example of a whiteboard is NetMeeting from Microsoft. Popular instant messenger applications such as Yahoo Messenger and MSN Messenger support this feature as well. After having established the base for developing this application, we need to examine the context: What does JavaScript have to say about graphics?

JavaScript and HTML Graphics

JavaScript isn't very effective at drawing with HTML because HTML wasn't built to draw graphics; hence we need to find "special" ways to draw into the web page.

It's worth taking a look at the Vector Graphics Library that can be found at http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm. This library provides a large number of basic functions for drawing, such as: setColor, setStroke, drawLine, drawPolyline, drawRect, fillRect, drawPolygon, fillPolygon, drawEllipse, fillEllipse, setFont, drawString, and drawRectString. These functions provide most functionality that you need for basic drawings. The technique behind this library resides on building many div elements that form the desired shapes. Besides using fast Bresenham algorithms to compute the shapes, it also tries to minimize the number of div elements that are used for creating a shape by grouping pixels together.

An alternative to using div elements in drawing is using Scalable Vector Graphics (SVG). You'll learn how to work with SVG in Chapter 7, AJAX Real-Time Charting with SVG.

Implementing the AJAX Whiteboard

Before getting our hands on the source code and on the theoretical aspects of this application, let's see what the main technical features are:

• Generate div elements on the client to enable drawing
• Use a database back end to store the pixel coordinates
• Allow drawing with multiple colors
• Make the solution work with multiple users at the same time
• Implement a design that permits easy extension

In order to have this example working, you need to enable support for the GD PHP library. The installation instructions in Appendix A include support for the GD library.

The complete AJAX and PHP tutorial features even more AJAX web development examples.

PHP developer? Learn PHP SEO programming. (ASP.NET SEO tutorial forthcoming)