Widget overrides for all uses

Some examples where instead of extending a widget to create a different widget that is referenced by styles or themes, you can override the default by modifying it for all uses.

This method for overriding a widget involves doing the following:

finding the widget .js source file in the gbc-project-dir/src directory
copying that .js file to your customization-project-dir/js directory
making the appropriate modification to that file.

This method allows you to customize the behavior of a widget.

Important: Patch with latest GBC release

Be aware that each time a new GBC version is released, you must check your customized widget against the new released version, to not miss changes introduced in releases.

Example customizing the ButtonWidget

This customization involves the ButtonWidget and the setting for the tool-tip text that is available when hovering over a button.

This customization will be useful when an ON ACTION statement includes text and a comment to create a button. It ensures that the full text and comment will be visible as a tooltip when the user hovers their mouse over the button. (Line breaks have been added to improve readability.)

ON ACTION name ATTRIBUTES(TEXT="full text name that will display with dots", 
 COMMENT="comment")

Copy the gbc-project-dir/src/js/base/widget/widgets/formfields/ButtonWidget.js to your customization-project-dir/js directory

Make the following changes to functions of

modulum('ButtonWidget', ['TextWidgetBase',
'WidgetFactory']

at the line numbers indicated. As this is a system output, the line numbers outputted may vary from system to system:

 @@ -61,6 +61,9 @@ modulum('ButtonWidget', ['TextWidgetBase', 'WidgetFactory'],
    _afterLayoutHandler: null,
+        /** @type {String} */
+        _text: "",
+
         /**
          * @inheritDoc
          */
@@ -143,6 +146,8 @@ modulum('ButtonWidget', ['TextWidgetBase', 'WidgetFactory'],
          * @publicdoc
          */
         setText: function(text) {
+          this._text = text;
+
           this.domAttributesMutator(function() {
             this.getElement().toggleClass('hasText', text.length !== 0);
             this._textElement.textContent = text;
@@ -354,6 +359,10 @@ modulum('ButtonWidget', ['TextWidgetBase', 'WidgetFactory'],
          * @inheritDoc
          */
         setTitle: function(title) {
+           switch( true ) {
+            case this._text.length>0 && title.length==0:
+              title = this._text;
+              break;
+            case this._text.length==0 && title.length>0:
+              title = title;
+              break;
+            default:
+              title = this._text + " (" + title + ")";
+           }
+
           $super.setTitle.call(this, title);
           if (this._image) {
             this._image.setTitle(title);

All new instances of the ButtonWidget will use the customized widget. The effect of this customization is shown in Figure 1.

Save your changes and rebuild your customization using gbc build:
```
$ gbc build --customization customization-project-dir
```