Creating a simple drawing area widget with google closure.

Question

Here I've tried to create a simple drawing area widget containing a single circle, using google closure.

I load it by calling sketcher.load() within html script tag and get an error:

Uncaught TypeError: Cannot set property 'Widget' of undefined - what is not right here?

goog.provide('sketcher');

goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.ui.Component');

var sketcher = {};

sketcher.prototype.Widget = function(el){
    goog.ui.Component.call(this);
    this.parent_ = goog.dom.getElement(el);

    this.g_ = new goog.graphics.createGraphics(600, 400);
    this.appendChild(this.g_);$

    var fill = new goog.graphics.SolidFill('yellow');
    var stroke = new goog.graphics.Stroke(1,'black');
    circle = this.g_.drawCircle(300, 200, 50, stroke, fill);
    this.g_.render(this._parent);
};
goog.inherits(sketcher.Widget, goog.ui.Component);

sketcher.prototype.load = function(){
    var canvas = goog.dom.createDom('div', {'id':'canvas'});
    goog.dom.appendChild(document.body, canvas);
    var widget = new sketcher.Widget(canvas);
};

Answer 1

here is a link to a simple svg drawing widget built with closure

http://webos-goodies.googlecode.com/svn/trunk/blog/articles/make_a_drawing_tool_with_closure_library/simple-draw.js

Answer 2

First problem: sketcher is a namespace, because you goog.provide it. You don't need to declare it again.

Second problem: sketcher.Widget should be thus, not sketcher.prototype.Widget. Only functions have prototypes; you should go back and review how objects work in JavaScript unless that was just a typo. It should look like this.

goog.provide('sketcher');

goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.ui.Component');

/**
 * My sketcher widget.
 * @param {Element} e1
 * @constructor
 */
sketcher.Widget = function(el){
    goog.ui.Component.call(this);
    this.parent_ = goog.dom.getElement(el);

    this.g_ = new goog.graphics.createGraphics(600, 400);
    this.appendChild(this.g_);$

    var fill = new goog.graphics.SolidFill('yellow');
    var stroke = new goog.graphics.Stroke(1,'black');
    circle = this.g_.drawCircle(300, 200, 50, stroke, fill);
    this.g_.render(this._parent);
};
goog.inherits(sketcher.Widget, goog.ui.Component);

sketcher.prototype.load = function(){
    var canvas = goog.dom.createDom('div', {'id':'canvas'});
    goog.dom.appendChild(document.body, canvas);
    var widget = new sketcher.Widget(canvas);
};