Sunday, March 6, 2011

DDTe1 Hours 8 to 11 - Check Boxes

With the image button created, the next step is to create a check box component. As with the ImageButton class, I opted to go with an ImageCheckBox. Before starting work on this, the artwork for the buttons and check boxes used in the game were created. I used FireWorks to do this, but any graphics program would have worked. Ideally, you want a graphics program that supports layers as they make the creation of template artwork easier. This way only a single fancy button needed to be created, with the text changed in the template to create the different buttons used in the game. For checkboxes, the image strip becomes a 2x4 image grid.

When you think about it, the ImageButton is very similar to the check box so most of the functionality that is needed to implement the check box can be inherited from the ImageButton. To this we add four additional bounding boxes to represent the image clips to use when showing the checked state of the button. We also need to know if the check box is checked so a checked flag is added.

As the ImageButton class already has a setClips method, which sets the image clips to use for the unchecked states, we only need to add a setCheckedClips method to add the ability to manually set up all the clips. This is probably an unnecessary feature, but if in the future all buttons get merged into a single image atlas, this is a handy feature to have. In addition to this new method, setChecked and isChecked methods are added to manage the state of the check.

While most of the methods inherited from ImageButton are unchanged, the mouseUp method and the drawSelf method do need to be altered. The mouseUp method needs to be able to toggle the state of the checkbox while the drawSelf method needs to distinguish between the checked and unchecked states when drawing.

To test this class as well as the new images created for the buttons, a mock-up of the sudoku sidebar was created. This is when a problem came to light. The problem is that the clicks go to a specified function for handling them. As this is a function call, the this reverence is the global this reverence not the this from the object setting the callback. While not a bug, often it is desirable to have functions be handled on an object scope and not a global scope. One solution to this would just be to attach a “parent” variable to the buttons but this is messy. A better approach would be to use interfaces. As JavaScript uses duck typing for calling methods, all that needs to be done is to set the onClick variable to an object instead of a function and have the buttons call the buttonClicked or checkboxClicked function of the passed object.

For those not familiar with the term duck typing, it essentially means that JavaScript doesn’t care what type of object is being sent as long as that object supports the method being called. The name comes from the expression, “If it looks like a duck, walks like a duck and quacks like a duck it probably is a duck.”

No comments: