Plug-Ins - Expert Oracle Application Express - page 484

prefix pg , based on the PlugGen company name, was added to the widget name to help ensure
uniqueness and avoid conflicts with other widgets.
(function($){
$.widget("ui.pg password", {
Next, the options object is defined for the widget. The options object, unlike other objects belonging
to the widget, is unique to each instance of the widget. The options object is typically used to initialize
variables that affect how the widget works. In the case of this plug-in, that logic is maintained in the
PL/SQL code, so the options object serves more of a documentation role.
options: {
warningMsgIcon: null,
warningMsgText: null,
warningMsgWidth: null,
warningMsgAlignment: null,
passwordAlignment: null,
offset: null
},
The create function will be invoked automatically one time when the widget is first initialized. In
the beginning of the function, a local variable is declared to store a reference to this . In the context of a
widget method, this represents the widget object. This is done to allow access to the object later via
closure in JavaScript.
create: function() {
var uiw = this;
Here the element property of the widget object is used to set up some event handlers. The element
property is a jQuery object based on the element on which the widget was invoked—the password
element in this case. The main event handler works on keypress and implements the logic to detect
whether or not Caps Lock is enabled. Another handler works with the blur event of the element. Both
handlers make calls to other private methods of the widget to hide and show the warning message when
appropriate.
uiw.element
.keypress(function(jQevent) {
//Code based on Joe Liversedge's submission on http://stackoverflow.com
var character = String.fromCharCode(jQevent.which);
if (character.toUpperCase() === character.toLowerCase()) {
return;
}
// SHIFT doesn't usually give us a lowercase character. Check for this
// and for when we get a lowercase character when SHIFT is enabled.
if (
(jQevent.shiftKey && character.toLowerCase() === character) ||
(!jQevent.shiftKey && character.toUpperCase() === character)
) {