Extending EaselJS Display Objects - Beginning HTML5 Games with CreateJS - page 182

var p = SimpleButton.prototype = new createjs.Container();
p.label;
p.Container_initialize = p.initialize;
p.initialize = function () {
this.Container_initialize();
}
window.ui.SimpleButton = SimpleButton;
}());
Before the constructor function for SimpleButton , a ui namespace is declared, but only if it has not yet been
created. Doing this allows you to tack onto an existing ui object if it already exists. You set up the rest of the class in the
same way you did with Shape , but of course this time, you extend Container instead.
The constructor takes one parameter, label . This is the text that will be drawn on the button. This value is
immediately set to the button's label property so you can set it when you first draw or redraw the button.
This button needs to be customizable, so some more properties are needed. Below the label property, several
more are added. Listing 8-7 lists these button properties.
Listing 8-7. SimpleButton Properties
p.label;
p.width;
p.height;
p.background;
p.labelTxt;
p.fontSize = 24;
p.borderColor = '#000';
p.buttonColor = '#ccc';
p.upColor = '#ccc';
p.overColor = '#aaa';
These values will be used when drawing the button. The background property will hold your shape object that
will draw the stroke and background color for the button. The width and height of the button is driven by the size and
length of the label, and won't be set until you create the text object labelTxt .
The initialize function will call a few functions to draw the button and set its listeners (see Listing 8-8).
Listing 8-8. SimpleButton Initialization Method Draws Button and Sets Up Mouse Events
p.initialize = function () {
this.Container_initialize();
this.drawButton();
this.setButtonListeners();
}
p.drawButton = function(){
this.removeAllChildren();
this.labelTxt = new createjs.Text(this.label,this.fontSize + 'px
Arial',this.color);
this.labelTxt.textAlign = 'center';