Home/ Questions/Q 8351317
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T08:35:43+00:00

Given this example jQuery UI widget, found on http://jqueryui.com/demos/widget/ : $(function() { // the

  • 0

Given this example jQuery UI widget, found on http://jqueryui.com/demos/widget/:

$(function() {
    // the widget definition, where "custom" is the namespace,
    // "colorize" the widget name
    $.widget( "custom.colorize", {
        // default options
        options: {
            red: 255,
            green: 0,
            blue: 0,

            // callbacks
            change: null,
            random: null
        },

        // the constructor
        _create: function() {
            this.element
                // add a class for theming
                .addClass( "custom-colorize" )
                // prevent double click to select text
                .disableSelection();

            this.changer = $( "<button>", {
                text: "change",
                "class": "custom-colorize-changer"
            })
            .appendTo( this.element )
            .button();

            // bind click events on the changer button to the random method
            // in 1.9 would use this._bind( this.changer, { click: "random" });
            var that = this;
            this.changer.bind("click.colorize", function() {
                // _bind would handle this check
                if (that.options.disabled) {
                    return;
                }
                that.random.apply(that, arguments);
            });
            this._refresh();
        },

        // called when created, and later when changing options
        _refresh: function() {
            this.element.css( "background-color", "rgb(" +
                this.options.red +"," +
                this.options.green + "," +
                this.options.blue + ")"
            );

            // trigger a callback/event
            this._trigger( "change" );
        },

        // a public method to change the color to a random value
        // can be called directly via .colorize( "random" )
        random: function( event ) {
            var colors = {
                red: Math.floor( Math.random() * 256 ),
                green: Math.floor( Math.random() * 256 ),
                blue: Math.floor( Math.random() * 256 )
            };

            // trigger an event, check if it's canceled
            if ( this._trigger( "random", event, colors ) !== false ) {
                this.option( colors );
            }
        },

        // events bound via _bind are removed automatically
        // revert other modifications here
        _destroy: function() {
            // remove generated elements
            this.changer.remove();

            this.element
                .removeClass( "custom-colorize" )
                .enableSelection()
                .css( "background-color", "transparent" );
        },

        // _setOptions is called with a hash of all options that are changing
        // always refresh when changing options
        _setOptions: function() {
            // in 1.9 would use _superApply
            $.Widget.prototype._setOptions.apply( this, arguments );
            this._refresh();
        },

        // _setOption is called for each individual option that is changing
        _setOption: function( key, value ) {
            // prevent invalid color values
            if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
                return;
            }
            // in 1.9 would use _super
            $.Widget.prototype._setOption.call( this, key, value );
        }
    });

    // initialize with default options
    $( "#my-widget1" ).colorize();

    // initialize with two customized options
    $( "#my-widget2" ).colorize({
        red: 60,
        blue: 60
    });

    // initialize with custom green value
    // and a random callback to allow only colors with enough green
    $( "#my-widget3" ).colorize( {
        green: 128,
        random: function( event, ui ) {
            return ui.green > 128;
        }
    });

    // click to toggle enabled/disabled
    $( "#disable" ).toggle(function() {
        // use the custom selector created for each widget to find all instances
        $( ":custom-colorize" ).colorize( "disable" );
    }, function() {
        $( ":custom-colorize" ).colorize( "enable" );
    });

    // click to set options after initalization
    $( "#black" ).click( function() {
        $( ":custom-colorize" ).colorize( "option", {
            red: 0,
            green: 0,
            blue: 0
        });
    });
});

compiling the code using the Google Closure Compiler in advanced mode like this:

edit: It should be externs_url instead of extern, but apparently you can’t have multiple externs_url definitions. With code_url instead of extern, the compiler throws 117 warnings.

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// @extern https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @extern https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js
// @formatting pretty_print
// ==/ClosureCompiler==

$(function() {
// the widget definition, where "custom" is the namespace,
// "colorize" the widget name
$.widget( "custom.colorize", {
// default options
options: {
red: 255,
green: 0,
blue: 0,

// callbacks
change: null,
random: null
},

// the constructor
_create: function() {
this.element
// add a class for theming
.addClass( "custom-colorize" )
// prevent double click to select text
.disableSelection();

this.changer = $( "<button>", {
text: "change",
"class": "custom-colorize-changer"
})
.appendTo( this.element )
.button();

// bind click events on the changer button to the random method
// in 1.9 would use this._bind( this.changer, { click: "random" });
var that = this;
this.changer.bind("click.colorize", function() {
// _bind would handle this check
if (that.options.disabled) {
return;
}
that.random.apply(that, arguments);
});
this._refresh();
},

// called when created, and later when changing options
_refresh: function() {
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
this.options.green + "," +
this.options.blue + ")"
);

// trigger a callback/event
this._trigger( "change" );
},

// a public method to change the color to a random value
// can be called directly via .colorize( "random" )
random: function( event ) {
var colors = {
red: Math.floor( Math.random() * 256 ),
green: Math.floor( Math.random() * 256 ),
blue: Math.floor( Math.random() * 256 )
};

// trigger an event, check if it's canceled
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},

// events bound via _bind are removed automatically
// revert other modifications here
_destroy: function() {
// remove generated elements
this.changer.remove();

this.element
.removeClass( "custom-colorize" )
.enableSelection()
.css( "background-color", "transparent" );
},

// _setOptions is called with a hash of all options that are changing
// always refresh when changing options
_setOptions: function() {
// in 1.9 would use _superApply
$.Widget.prototype._setOptions.apply( this, arguments );
this._refresh();
},

// _setOption is called for each individual option that is changing
_setOption: function( key, value ) {
// prevent invalid color values
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
return;
}
// in 1.9 would use _super
$.Widget.prototype._setOption.call( this, key, value );
}
});

// initialize with default options
$( "#my-widget1" ).colorize();

// initialize with two customized options
$( "#my-widget2" ).colorize({
red: 60,
blue: 60
});

// initialize with custom green value
// and a random callback to allow only colors with enough green
$( "#my-widget3" ).colorize( {
green: 128,
random: function( event, ui ) {
return ui.green > 128;
}
});

// click to toggle enabled/disabled
$( "#disable" ).toggle(function() {
// use the custom selector created for each widget to find all instances
$( ":custom-colorize" ).colorize( "disable" );
}, function() {
$( ":custom-colorize" ).colorize( "enable" );
});

// click to set options after initalization
$( "#black" ).click( function() {
$( ":custom-colorize" ).colorize( "option", {
red: 0,
green: 0,
blue: 0
});
});
});

the compiler returns 19 warnings:

Number of warnings: 19

JSC_INEXISTENT_PROPERTY: Property widget never defined on $ at line 4 character 0
$.widget( "custom.colorize", {
^
JSC_INEXISTENT_PROPERTY: Property addClass never defined on this.element at line 18 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property disableSelection never defined on ? at line 18 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property appendTo never defined on ? at line 24 character 15
this.changer = $( "<button>", {
               ^
JSC_INEXISTENT_PROPERTY: Property css never defined on this.element at line 46 character 0
this.element.css( "background-color", "rgb(" +
^
JSC_INEXISTENT_PROPERTY: Property _trigger never defined on this at line 53 character 0
this._trigger( "change" );
^
JSC_INEXISTENT_PROPERTY: Property _trigger never defined on this at line 66 character 5
if ( this._trigger( "random", event, colors ) !== false ) {
     ^
JSC_INEXISTENT_PROPERTY: Property option never defined on this at line 67 character 0
this.option( colors );
^
JSC_INEXISTENT_PROPERTY: Property css never defined on ? at line 77 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property enableSelection never defined on ? at line 77 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property removeClass never defined on this.element at line 77 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property Widget never defined on $ at line 87 character 0
$.Widget.prototype._setOptions.apply( this, arguments );
^
JSC_INEXISTENT_PROPERTY: Property Widget never defined on $ at line 98 character 0
$.Widget.prototype._setOption.call( this, key, value );
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 103 character 0
$( "#my-widget1" ).colorize();
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 106 character 0
$( "#my-widget2" ).colorize({
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 113 character 0
$( "#my-widget3" ).colorize( {
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 123 character 0
$( ":custom-colorize" ).colorize( "disable" );
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 125 character 0
$( ":custom-colorize" ).colorize( "enable" );
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 130 character 0
$( ":custom-colorize" ).colorize( "option", {
^

How to compile a jQuery UI widget (based on the jQuery UI widget factory) with Google Closure Compiler in advanced compilation mode? How to resolve the warnings thrown by the compiler?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In addition to the jQuery core externs file, you would also need a jQuery UI externs file. This is required to define the symbols and type information provided by jQuery UI to the compiler.

    Unfortunately, there is currently no known extern file for jQuery UI. Your options are to create enough of one for your use or to use SIMPLE_OPTIMIZATIONS.

    • 0