DDTe1 Hour 5 to 7 - Image Button

The final decision that needs to be made before starting to implement the code for a button is the type of button to implement. For the needs of the DDT project, there are two types of buttons that would be useful. The first is the ImageButton, which uses a set of images to display the four states of the button.  This allows total control over the look of the buttons but at the cost of having to create artwork for every  button. The other type of button is the TextButton which draws the button itself using a string as the contents of the button.  Because this type of button draws itself, no artwork is required to use it making it really nice for getting stuff up quickly. Because the text can be changed, it is also very flexible. It is a bit more difficult to code, so I have decided to go with the ImageButton initially. If I have time I will create a TextButton as well since having both options is handy.

The first implementation issue is how to have the images. As BGLayers already supports image strips, the states will be in an image strip. However, for increased flexibility, the bounds to use for each state can be set up manually. Each state is represented by a rectangle that defines the portion of the image to be shown for each of the four states. To make setting up a button easy, the constructor will automatically generate the clipping regions based on the width and height provided. As it was simple to do, I also added  clickable image support (the whole image is all four states) making this function useful for things like adventure games or hidden object games.

Event handling will be done by having an onClick variable that holds the function to call when clicked. I see no use for onMove or onDown or onUp variables, but certainly if you prefer finer control over GUI button clicks those event functions could be added.

The rendering of the image is simply done the same way as image strips were handled in BGLayers, with the only difference being that the clip rectangle is determined based on the current state of the button. This only leaves the mouse handling. BGLayers already has some support for intercepting the browser mouse events. The ImageButton simply needs to write handlers for them.

MouseMove first looks at the state of the button. If the state is disabled or down then that state is left alone. I like allowing the mouse to be moved off the button after it has been clicked yet showing that the button is down but if you don't like that behavior, it could be changed easily enough. If the button is in a normal or over state, we then simply check to see if the mouse is over the button. If so, the state is kept/changed to over otherwise it is kept/changed to normal.

MouseDown first checks if the button is disabled. If so, this action is ignored. Next, the function checks to see if the mouse is over the button. If so, the state is changed to the down state.

Finally, the mouseUp function checks to see if the current button is in the down state. If it is down then we check to see if the mouse is still over the button. If it is, the onClick function gets called with the button being the parameter. This allows a single function to handle all the button clicks in a program by simply looking at which button called the function. The state then gets changed to normal.

That is all that is required to create a button. To make sure the button class works, a test page was created (which was a good thing as there were some bugs in my initial implementation). The next step then is the check box.