Generic button control

[openlayers]

The OpenLayers source is collecting a useful bunch of controls, but most of them are designed to do something specific.

What I've found is a need for generic buttons - click on them, and they do something. But what they do is different, and specific to the particular application. I've been adding them to a Panel control, alongside Navigation, Zoombox, etc. But building a distinct class seemed like overkill, and taking advantage of Javascripts ability to extend an object at runtime struck me as a nightmare for future maintainers.

So I built a very simple little control: OpenLayers.Control.GenericButton

/**
 * @class
 *
 * @requires OpenLayers/Control.js
 */
OpenLayers.Control.GenericButton = OpenLayers.Class.create();
OpenLayers.Control.GenericButton.prototype =
  OpenLayers.Class.inherit( OpenLayers.Control, {

    /**
    * @type Function: function called when button is clicked
    */
    onClick: null,

    type: OpenLayers.Control.TYPE_BUTTON,

    trigger: function() {
      if (this.onClick)
        this.onClick();
    },

    /**
    * @param {Event} evt
    */
    /** @final @type String */
    CLASS_NAME: "OpenLayers.Class.GenericButton"
});

Usage is simple:

  var nav = new OpenLayers.Control.Navigation();
  var panel = new OpenLayers.Control.Panel({defaultControl: nav});
  panel.addControls([nav,
    new OpenLayers.Control.GenericButton(
      {'displayClass': 'MyGenericButton', 'onClick': myFunction});
  ]);

  openLayersMap.addControl(panel);

The 'displayClass' option is what is used in building the className, which you'd used in the css to set the background image, etc. In this case, it'd be MyGenericButtonItemInactive. (These buttons never become active, so there's no need for .MyGenericButtonItemActive.) The 'onClick' function is a javascript function that's called when the button is clicked.

It's pretty simple stuff.

[openlayers]

Cleaned up a bit, in response to advice from the list:

/* */

/**
 * @requires OpenLayers/Control.js
 *
 * Class: OpenLayers.Control.Button 
 * A very simple button controlfor use with <OpenLayers.Control.Panel>.
 * When clicked, the function trigger() is executed.
 * 
 * Inherits from:
 *  - <OpenLayers.Control>
 *
 * Use:
 *  panel.addControls([
 *   new OpenLayers.Control.GenericButton(
 *   {displayClass: 'MyButton', trigger: myFunction});
 *  ]);
 * will create a button with CSS class MyButtonItemInactive, that
 * will call the function MyFunction() when clicked.
 */
OpenLayers.Control.Button = OpenLayers.Class(OpenLayers.Control, {
    /**
     * Property: type
     * TYPE_BUTTON.
     */
    type: OpenLayers.Control.TYPE_BUTTON,
    
    /*
     * Method: trigger
     */
    trigger: function() {},

    CLASS_NAME: "OpenLayers.Control.Button"
});

[crschmidt]

Comments -> patch + tests

[tschaub]

button

[tschaub]

Ok. The second patch is a current diff - with some minor changes to the doc comments. We need to separate the @requires stuff from other docs with the new version of natty docs. Otherwise some minor typos (not called GenericButton any more). Tests pass in FF and IE6.

[crschmidt]

Thanks for the review, Tim.

[crschmidt]

(In [5870]) Add generic 'button' control. r=tschaub. (Closes #872)