Doodle, A Demo Drawing Program - Part 3 | 3

Doodle, A Demo Drawing Program - Part 3

The Graphics Package

The graphics package first introduced in OO JavaScript Graphics and now used by Doodle to display widgets needs some enhancements. In particular, the Doodle widgets need some way to be notified when users click on them.

In the graphics package, a shape is a collection of plot elements. Each plot element is represented in the browser as a <div> element. The Graphics.Shape base class now provides the generic code that controls the maintenance of these elements.

The plots array stores these <div> elements for each shape. Since this array stores all the <div> elements used to display the graphics shape, it's easy to attach event handlers to the entire shape by iterating through all of the elements...

Other attributes like cursor style can be set in the same way.

The canvas widgets use these functions in their setTrigger() methods; setMouseDown() is used to trigger the object deletion and setStyle() is used to change the cursor style to a pointer to give the user a visual cue that something will happen if they click on the widget.

The graphics line now inherits from the shape class.

Download The Code

Right click the links below and select "Save Target As" to download copies of the demo code.
core.js	Core utilities and functions.
graphics.js	Object Oriented JavaScript graphics package
doodle_canvas.js	Canvas class
doodle_doc.js	Document class
doodle.js	Doodle application class
doodle.html	Simple demonstration HTML page

Conclusion

In this article, we've put the Doodle application through a minor refactoring exercise with a number of different parts to the code changing shape:

A structured JavaScript inheritance mechanism has been employed to assist with the development of JavaScript classes.
A Java style namespacing system has been imposed on the code to help keep different parts of the application separate. Namespacing also makes choosing names for classes much easier as it's no longer necessary to worry about clashing with other code.
The document has gained a shape heirarchy (albeit with a grand total of one shape so far). The shape heirarchy will help simplify the document code by providing a convenient place for generic behaviour which will become more important as more shape types are added.
The canvas has gained a widget heirarchy. The Widget class simplifies the canvas code by encapsulating the user-document interaction for each type of document shape. As more shapes are added, matching widget types will also be added to create the user interface.
The graphics package has been tidied up by introducing the namespacing technique and adding a few hooks to set cursor styles and attach mouse handlers.

The refactoring exercise in this article hasn't had much effect on the user's on-screen experience. In fact, the only difference is that lines may now be removed once drawn. The changes behind the scenes are significant; as the application becomes more complex, a solid code structure will prevent the complexity from escalating to unmanageable levels.

The refactoring process might seem unnecessary considering its lack of effect on the user experience, but without it, an application may flounder before it gets anywhere. The trick to maintainable development is to recognise the need for refactoring early and do it before the code becomes too coupled.

Disclaimer

While I've endeavoured to make this code as browser compatible as possible, I've only tested it with Internet Explorer (6.0), Firefox (1.5) and Netscape (7.1) as this represents of a large proportion of users.

About the Author

Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit www.codusoperandi.com for more details.

[previous]

Created: October 13, 2006
Revised: November 29, 2006

URL: https://webreference.com/programming/javascript/gr/column22/1