O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – adding the toolbar object

Let's add the Toolbar object to our application. First we add a toolbar variable to CanvasPadApp and set it to a new instance of the Toolbar object. We pass in the toolbar's root <div> element as a parameter to the constructor:

var version = "4.2",
canvas2d = new Canvas2D($("#main>canvas")),
toolbar = new Toolbar($("#toolbar")),
        // code not shown...

In start() we override the toolbar object's toolbarButtonClicked() and menuItemClicked() methods to set them to our own implementations to handle those events:

toolbar.toolbarButtonClicked = toolbarButtonClicked;
toolbar.menuItemClicked = menuItemClicked;

First let's implement our CanvasPadApp.toolbarButtonClicked() method:

function toolbarButtonClicked(action) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required