Doodle, A Demo Drawing Program - Part 2

Introduction

In Doodle: Part 1, I introduced the Doodle application; a program for editing drawings. In that article the application was little more than a graphics canvas and an input device. In this article, I add an application framework complete with a document-view architecture.

The document-view model is a powerful application programming technique that separates the document data - the information that will be saved away in a file or database somewhere, from the view - the visual representation of the data that the user can interract with.

Demonstration

New and improved Doodle

Click and drag the mouse over the 'canvas' on the left to draw lines

At first glance, the demo above looks similar to the demo from the first article, but underneath this user interface things have changed.

The most significant change is the introduction of the Doodle instance in place of where the Canvas was created. The Doodle instance will control all aspects of the application including communication between the document and views.

The Doodle constructor creates a Doodle.Doc instance and one view to the document - the Doodle.Canvas. Notice how the document and view classes Doodle.Doc and Doodle.Canvas have been nested within the Doodle class. What's happening here is that the Doodle class has two extra properties called 'Doc' and 'Canvas' that just happen to also be JavaScript classes. This technique allows all of the Doodle code to be isolated within a namespace called 'Doodle' and won't interfere or interact with other code. This has great advantages if you want to host two or more applications on the same Web page. If two applications running on the same Web page were to use global scope (i.e. the window object) for their variables and classes, it's likely that they would clash over a number of those variable or class names.

At this point, each component has yet to be initialised so the newDocument() function must be called before the application is ready.