|Written by Ian Elliot|
|Monday, 13 August 2012|
Page 1 of 3
For example, if you use a tag like:
then processAll will call
and this function acts as the constructor for the control.
Sounds easy - and it is, but there are a few things that we have to get right if we want our custom control to work like the supplied controls - but first let's see how easy it can be.
A Simple Custom Control
First we create a canvas DOM object in the usual way and set its size:
Next we get its drawing context and draw a red filled rectangle:
the first parameter is the name of the name space i.e. the object that everything else is defined within and the second is the object containing properties that you want added to the name space. For example:
adds nothing to the name space.
adds the variable total to the name space. Following this you can use
All of the properties contained within the object are added to the name space.
If the name space doesn't exist then it is created. If it already exists the object is added which means you can use the define method to build up a namespace one object at a time.
So let's call our name space MyControls and the particular control MyCanvasControl. We need to define a constructor within the name space :
we could define the constructor function somewhere else and just refer to it in the call to define but that would mean inventing yet more names. Better to define it within the function call. In this case the body for the function is just the code given earlier to create the canvas object:
Notice that the only thing that is new is that we append the canvas object to the element passed into the constructor.
Putting all this together gives:
If you now modify the HTML to read:
and run the app you will see the canvas custom control appear below the "Content goes here" message.
You can of course include as many instances for the custom control on a page as you need. In this case take note of the fact that it is 500x500 pixels and so on the large size.
|Last Updated ( Wednesday, 29 August 2012 )|