JSWindows (a JavaScript Inheritance Demo) Button Class

© 15 Feb., 2013, Martin Rinehart

Overview

The 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 Button Constructor

The arguments to the Button constructor are the same as the arguments to the Rect constructor, plus the hover_styles, label_func and click_func.

Arguments:

container,
name,
pos_size,
borders,
styles,
other,
hover_styles,
label_func,
click_func

The pos_size argument may be abbreviated to a two-value array (position: left,top). Omitting the size defaults to:

jsw.DEFAULTS.Button.width, jsw.DEFAULTS.Button.height

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.

The 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.

The click_func is called when the user clicks on the button.

The Button Class Methods

The Button.init() Method

The constructor passes its parameters to this method, led by a reference to the constructor's this, the new button being created.

Arguments:

new_button,
container,
name,
pos_size,
borders,
styles,
other,
hover_styles,
label_func,
click_func

The Button.click() Method

This provides a stub method that states, deliberately embarrassingly, that the click handler hasn't been coded. Override this method!

The Button.mouseover() Method

The default should often be adequate. Changes the button's border colors and the cursor.

The Button.mouseout() Method

Reverses the changes from mouseover().

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.

The Button Instance Methods

The Button prototype "inherits" from (is a shallow copy of) the Rectprototype. It adds these methods:

The disable() Method

This method calls the mouseout event handler to return display to normal, stops listening for mouseover events and sets button.enabled to false.

The enable() Method

This method resumes listening for mouseover, mouseout and click events. It sets (to true) the button.enabled flag.

The toString() Method

This is a deliberately quick. It announces that you have a Button and gives its name.

---

P. S. The Button originally extended the Wobj class, wrapping a DOM <button> element. This ended when I discovered that a <button> does not obey the sizes in styles you provide, and it does not disobey in a single way, common to all browsers. See this site, "Engineers" track, JavaScript -> XBrowser -> Not MSIE -> Button Size. It's bad.

---

Feedback: MartinRinehart at gmail dot com

# # #