UI Widgets

Various reusable widgets and utilities are available for use in your projects.

API

uow.ui.checkBrowser() → dojo.Deferred

This function checks if the user's browser supports the modern HTML5 features required by the UOW framework. If not, the method shows a dialog suggesting the user download Chrome or Firefox.

The return value is a dojo.Deferred. You should invoke then on the deferred to register a callback function that will receive a boolean response, true if the browser is acceptable and false if not.

Note: For the dialog to display properly, you should include the /libs/uow/ui/css/uow.css stylesheet in your index.html or, if only using this widget, the /libs/uow/ui/css/BrowserDialog.css stylesheet.

uow.ui.connectKeys() → undefined

This function starts a global keyboard event listener on the current window. Subscribing to these events is preferred over using dojo.connect on DOM nodes to avoid the problem of losing keyboard input focus.

Subscriptions are made done using dojo.subscribe like so:

dojo.subscribe('/uow/key/down', keyCallback) → token

dojo.subscribe('/uow/key/up', keyCallback) → token

dojo.subscribe('/uow/key/press', keyCallback) → token

dojo.subscribe('/uow/key/down/initial', keyCallback) → token

These invocations register callback functions that fire on the standard onkeydown, onkeyup, and onkeypress DOM events. The /uow/key/down/initial event fires only once per key depression instead of repeating as /uow/key/down does. Your callback function must have the following signature:

function keyCallback(event) → undefined

where the event parameter is a DOM key event.

uow.ui.disconnectKeys() → undefined

This function stops the global monitoring of key events previously started by uow.ui.connectKeys.

uow.ui.hideBusy(args) → dojo.Deferred

This function overlays a DOM node with a spinner and optional message indicating the underlying portion of the application is busy.

The args parameter must have the following attributes configuring the overlay:

overlay (uow.ui.BusyOverlay)
The overlay returned by uow.ui.showBusy to hide.

The return value is a dojo.Deferred. You should invoke then on the deferred to register a callback function that will fire after the overlay hides.

uow.ui.showBusy(args) → dojo.Deferred

This function overlays a DOM node with a spinner and optional message indicating the underlying portion of the application is busy.

The args parameter must have the following attributes configuring the overlay:

busyNode (DOM node)
The node to use to compute the position and dimensions of the overlay.
parentNode (DOM node)
The node that will contain the overlay. If left undefined, defaults to document.body.
message (string)
The optional text message include in the overlay.
animate (bool)
True to show an animated spinner in the overlay or false to just show the overlay and optional message. If undefined, defaults to true.
takeFocus (bool)
True to force keyboard focus to the overlay when it appears or false to leave it where it is. If undefined, defaults to true.
delayShow (int)
Delays the appearance of the busy overlay by this many milliseconds. Useful to prevent flashing the overlay when the application is busy for only a short while. If undefined, defaults to 250 ms.
zIndex (int)
Sets the z-index CSS property on the overlay to this value. If left undefined, tries to automatically compute the z-index to use based on the values set by the busyNode and its DOM ancestors.

The return value is a dojo.Deferred. You should invoke then on the deferred to register a callback function that will receive the uow.ui.BusyOverlay instance now showing.

Note: For the dialog to display properly, you should include the /libs/uow/ui/css/uow.css stylesheet in your index.html or, if only using this widget, the /libs/uow/ui/css/BusyOverlay.css stylesheet.

Examples

Check the user's browser for compatibility with UOW

uow.ui.checkBrowser().then(function(compat) {
  if(compat) { alert('browser is OK'); }
});

Show a busy overlay over the form below







// get the DOM node of the form
var node = dojo.byId('ui_ex2form');
var args = {
  // overlay the form node
  busyNode : node, 
  // want the overlay to go inside this scrolling pane so it scrolls too
  parentNode : node.parentNode, 
  // tell users we're submitting
  message : 'Submitting ...', 
  // don't delay showing the overlay if we know the submit will take a while
  delayShow: 0
};
uow.ui.showBusy(args).then(function(o) {
  // simulate a wait before hiding the overlay
  setTimeout(function() {
    uow.ui.hideBusy({overlay : o});
  }, 3000);
});