DojoX Widgets

Version
Version 0.2
Release Date
Release date: 7/27/2007
Project state:

expermental | beta

Credits

Peter Higgins Karl Tiedt

Project description

This is a collection of standalone widgets for use in your website. Each individual widget is independant of the others.

Dependencies:

Each widget has it's own requirements and dependencies. Most inherit from dijit base-classes such as dijit._Widget, dijit._Templated, etc ... So we will assume the availablility of dojo (core), and dijit packages.

Documentation

Please refer to the API-tool, or in-line documentation.

Installation instructions

These are standalone Widgets, so putting the [widget].js file in your dojox/widget folder, and copying any files in the /dojox/widget/[widget]/ folder as supplements/templates/etc should be all you need to do.

eg: FisheyeList: /dojox/widget/FisheyeList.js /dojox/widget/FisheyeList/blank.gif /dojox/widget/FisheyeList/FisheyeList.css

should be all you need to use the Fisheye widget.

Toaster

[inline:Toaster.png]

A toaster is an inobtrusive mechanism for displaying messages, and has become popular in recent years. Like toast, the message "pops up" in the window corner, temporarily overlaying any content there. The message stays up for a certain duration, or until the user clicks on it.

Toasters are preferrable to alert() boxes. Alert() must always be modal, meaning all action on the page stops until the user clicks "OK". Toasters are non-modal, so the user can continue working and finish their thought before responding.

You can either set the message programmatically, or use dojo's publish/subscribe event feature. Publish/subscribe allows you to have several toasters, or several controls besides toasters, respond to a particular event.

Examples

The first example uses setContent() and show() to vary the message and display it. 

<script type="text/javascript">
	dojo.require("dojox.widget.Toaster");
	dojo.require("dojo.parser");
</script>
...

<div dojoType="dojox.widget.Toaster" id="toast" positionDirection="br-left" duration="0" 
           style="display:hide"></div>

<script>
   function surpriseMe() {
     dijit.byId('toast').setContent('Twinkies are now being served in the vending machine!','fatal',500);
     dijit.byId('toast').show();
   }
</script>
<input type="button" onclick="surpriseMe()" value="Click here"/>

The next example does the same thing, but uses the publish/subscribe model.  The message coming over the topic must be of the form:

  • "message" : a single string with the message text
  • -OR- {message: "...", type: "...", duration: "..."}: where message is the message text, duration is as the attribute, and type is either:
    • fatal
    • error
    • warning
    • message
  • in decreasing order of severity. 
<div dojoType="dojox.widget.Toaster" id="toast" positionDirection="br-left" duration="0" 
           messageTopic = "testMessageTopic"
></div>

<script>
   function surpriseMe() {
      dojo.publish("testMessageTopic", 
	[
		{
		message: "Twinkies are now being served in the vending machine!", 
		type: "fatal", 
		duration: 500
	        }
	]
      );
   }
</script>
<input type="button" onclick="surpriseMe()" value="Click here"/>

Dijit Types, Attributes, Events and Methods

dojox.widget.Toaster
Message that slides in from the corner of the screen, used for notifications like "new email".
Attributes
duration integer 2000 Duration of the message, in ms. 0 means the user must acknowledge the message by clicking on it.
messageTopic String or object - Subscription topic to monitor. When a page publishes a message on this topic, the toaster will pop up.
positionDirection br-up br-left bl-up bl-right tr-down tr-left tl-down tl-right br-up Corner from which message slides into screen (e.g. br=bottom right) and direction of slide.
separator html <hr> If more than one unacknowledged message is present separate them with this.
Events
onSelect called when user clicks the message to acknowledge it
Methods
hide() Hide the toaster
setContent( String message, String type, int duration) Set the content of the message to message. type can be "message" ,"warning", "error", "fatal" and determines the color (hence the importance)of the message. Duration is in ms, like the duration attribute.
show() Display the toaster
CSS Classes I'm not quite sure how to represent these yet. In this case, you set styles on dojoProgressBarColorLayer and set the class of the outer div to dojoProgressBarColor.

Accessibility