Developing widgets with Dojo 1.x

dojo.declare(
   "ajaxcommon.widgets.picker.PickerInputBox",
     [ajaxcommon.widgets.Widget, dijit._Templated, ajaxcommon.widgets._Buttonizer],
     {
      /** the default input size */
      size: "24",
      /** required (String) */
      required: "false",
      /** the picker class */
      pickerClass: "",
      /** the picker icon */
      pickerIcon: "",
      /** the picker disabled icon */
      pickerDisabledIcon: "",
      /** the picker icon title */
      pickerIconTitle: ajaxcommon.resources.Labels.get()["DEFAULT_PICKER_TITLE"],
      /** the parameters to be used for picker creation */
      pickerParameters: null,
      /** if true the input text box must be read-only */
      textReadOnly: false,
      /** the minlen */
      textMinLength: "",
      /** the maxlen */
      textMaxLength: "",
      /** regular expression for validation on the text value */
      textRegExp: "",
      /** same as textRegExp, bur expressed through a global variable */
      textRegExpReference: "",
      /** the message to show if the regular expression is not matched */
      textRegExpMessage: "",      
      /** the tab index */
      tabindex: "0",
      /** picker minimum width */
      minWidth: 155,

      /** the widget contains other widget */      
      widgetsInTemplate: true,
      /** the widget template path */
      templatePath: dojo.moduleUrl("ajaxcommon.widgets.picker", 
         "templates/PickerInputBox.html"),

      /** the text node */
      _textNode: null,
      /** the text box widget to use */
      _textBoxWidget: "ajaxcommon.widgets.TextInputBox",
      /** the picker button container node */
      _pickerButtonContainer: null,
      /** the picker button node */
      _pickerButtonNode: null,
      /** the picker widget */
      _picker: null,
      /** true if the picker is opened */
      _pickerOpened: false,
      /** true if the picker button must not open the picker  */
      _pickerIconDisabled: false,
      
      /**
       * Post-mixin properties.  
       */      
      postMixInProperties: function()
      {
         // call the superclass's method
         this.inherited("postMixInProperties", arguments);
         
         // set the read-only text-box if required
         if ( this.textReadOnly === true ) {
            this._textBoxWidget = "ajaxcommon.widgets.TextBox";   
         }
      },
            
      /**
       * Sets-up the widget.  
       */
      startup: function() 
      {
         // call the superclass's method
         this.inherited("startup", arguments);
         // attach the text "on value changed" event
     D     this._textNode.onValueChanged = dojo.hitch(this, this.onTextValueChanged);
         // change the tooltip node
         this._textNode.setTooltipNode(this.domNode);
         // assign the button L&F to the images
         this.buttonizeImages(this._pickerButtonContainer);
      },
      /**
       * Destroys the widget.
       */
      destroy: function()
      {
         // destroy the picker if any
         if ( this._picker ) {
            this._picker.destroy();
         }         
         // call the superclass's method
         this.inherited("destroy", arguments);
      },
            
      /**
       * Sets the picker widget.
       * 
       *     @param picker
       *        The picker widget.
       */
      setPicker: function(picker)
      {
         // destroy the previous picker if any
         if ( this._picker ) {
            this._picker.destroy();
         }
         
         // set-up the picker
         this._picker = picker;
         
         if ( this._picker ) {
            // hitch the "onValueSelected" callback
            this._picker.onValueSelected = dojo.hitch(this, this._onPickerValueSelected);
            // set the picker value               
            this._picker.setValue(this.getPickerStartValue());
         }         
      },
      
      /**
       * Returns the picker widget.
       * 
       *     @return The picker widget.
       */
      getPicker: function()
      {
         if ( ! this._picker ) {
            // get the picker protoype
            var PickerClass = dojo.getObject(this.pickerClass, false);
            // prepare parameters
            var params = {parent: this._textNode};
            if ( this.pickerParameters ) {
               params = dojo.mixin(params, this.pickerParameters);
            }
            // create the picker
            var picker = new PickerClass(params);
            picker.startup();
            // set the picker
            this.setPicker( picker );
            // notify about the picker creation
            this.onPickerCreated();
         }
         
         return this._picker;         
      },
      
      /**
       * Disables/enables the picker button.
       * 
       *  @param disable: (Boolean) if true the picker button is disabled.
       */
      disablePickerIcon: function(disabled)
      {
         if ( disabled ) {
            this._pickerButtonNode.src = this.pickerDisabledIcon || this.pickerIcon;
            this._pickerButtonNode.setAttribute(this.BUTTON_DISABLED, "true");   
         }
         else {
            this._pickerButtonNode.src = this.pickerIcon;
            this._pickerButtonNode.setAttribute(this.BUTTON_DISABLED, "false");
         }
          
         this._pickerIconDisabled = disabled;
      },
      
      /**      
       * Returns an object which represent the widget value.
       */
      getValue: function()
      {
         // return the value from the text box
         return this._textNode.getValue();
      },
      
      /**      
       * Sets the widget value.
       */
      setValue: function(value)
      {
         // update the text box value
         this._textNode.setValue(value);
      },
      
      /**
       * Enables the widget for editing. 
       */
      setDisabled: function(isDisabled)
      {
         if ( isDisabled != this.isDisabled() ) {
            // update the enablement status
            this.inherited("setDisabled", arguments);
            // update the widget
            this._textNode.setDisabled(isDisabled);
            this.disablePickerIcon(isDisabled);
         }
      },
            
      /**
       * Returns true if the widget's value is wrong.
       */
      isInError: function()
      {
         return this._textNode.isInError();
      },
      
      /**
       * Sets the widget required constraint.
       * 
       *  @param required:
       *     true if the value is required, false otherwise.
       */      
      setRequired: function(required)
      {
           this._textNode.setRequired(required);
      },
      
      /**
       * Returns if the the widget required constraint is required, false otherwise.
       */      
      isRequired: function(required)
      {
           return this._textNode.isRequired();
      },

      /**
       * Returns the picker start value.
       */
      getPickerStartValue: function()
      {
         return this.getValue();  
      },

      /**
       * Returns the picker text value.
       */
      getPickerTextValue: function(value)
      {
         return value.toString();  
      },
      
      /**
       * Gives the focus to the widget.
       */
      setFocus: function()
      {
         this._textNode.setFocus();
      },
      
      /**
       * Handles a change called if the text value has changed.
       * 
       *     @param value (String)
       *        the text value.
       */      
      onTextValueChanged: function(value)
      {
      },   
       
      /**
       * Handles a change called if a value has been selected via picker.
       * 
       *     @param value (Object)
       *        the value returned by the picker
       *     @param selection (Object[]):
       *        The original item selected in the results.
       */      
      onPickerValueChanged: function(value, selection)
      {
      },   
             
      /**
       * Called when the picker has been created.
       */      
      onPickerCreated: function()
      {
      },
      
      /**
       * Opens the picker if closed, closes the picker if opened.
       */
      _onKeyUp: function(e)
      {
         if ( e.target === this._pickerButtonNode && e.keyCode === 32 ) {
            // manage like an onclick event
            this._onClick();
         }
      },
            
      /**
       * Opens the picker if closed, closes the picker if opened.
       */
      _onClick: function()
      {
         this.getPicker();
         // if disabled, skip
         if ( this._pickerIconDisabled || this.isDisabled() ) {
            return;
         }
         // if the picker ig going to be opened, set its start value
         if ( ! this._picker.isOpen() ) {
            var value = this.getValue();
            if ( value ) {
                  this._picker.setValue(this.getValue());
            }
         }
         // toggle the picker
         this._picker.toggle();
      },
         
      /**
       * Handles the "picker value selected" event.
       * 
       *     @param value (Object[]):
       *        The value provided by the specific picker implementation.
       *        Its text form is asked to the picker implementation.
       *     @param selection (Object[]):
       *        The original item selected in the results.
       */         
      _onPickerValueSelected: function(value, selection)
      {
         // close the picker
         this._picker.close();
         
         // set the text value
         this._textNode.setValue(this.getPickerTextValue(value));
         // notify about the change
         this.onPickerValueChanged(value, selection);
      },

      /**
       * Handles onblur event.
       */
      _onBlur: function()
      {
         if (this._picker){
            this._picker.close();
         }
      }
   }      
);