© 15 Feb., 2013, Martin Rinehart
Button class is the base class that all buttons extend. It extends the
Rect class, adding arguments for
hover_styles (display when the mouse pointer is over the button),
label_func (function that labels the button) and
click_func (function that responds to clicks).
The arguments to the
Button constructor are the same as the arguments to the
Rect constructor, plus the
pos_size argument may be abbreviated to a two-value array (position: left,top). Omitting the size defaults to:
The hover styles are the styles applied when the mouse pointer is over the button. These are a styles object. Many of our buttons simply change the border color, which seems to provide an adequate visual cue. The title will also be displayed in a tooltip (and by other means for non-visual browsers). When the mouse pointer leaves the button, those styles which were in the hover styles set are looked up in the original styles to return them to the non-hover condition.
label_func is called when the button is displayed and when the button state is changed. It provides a text label and/or a graphic display. It's goal is to clearly inform the user of the button's effect when clicked.
click_func is called when the user clicks on the button.
Button Class Methods
The constructor passes its parameters to this method, led by a reference to the constructor's
this, the new button being created.
This provides a stub method that states, deliberately embarrassingly, that the click handler hasn't been coded. Override this method!
The default should often be adequate. Changes the button's border colors and the cursor.
Reverses the changes from
Each property in
hover_styles is looked up in
all_styles as the button is created (and
all_styles has the normal, non-hover styles). If the property name exists in
all_styles the property (name/value) is added to
non_hover_styles. Be sure to have created a default, non-hover style (and don't just use the DOM default) to have the
mouseout() properly return the style to normal.
Button Instance Methods
Button prototype "inherits" from (is a shallow copy of) the
Rectprototype. It adds these methods:
This method calls the
mouseout event handler to return display to normal, stops listening for
mouseover events and sets
button.enabled to false.
This method resumes listening for
click events. It sets (to true) the
This is a deliberately quick. It announces that you have a
Button and gives its name.
P. S. The
Buttonoriginally extended the
Wobjclass, wrapping a DOM
<button>element. This ended when I discovered that a
Feedback: MartinRinehart at gmail dot com
# # #