Welcome, guest ( Login )

WikiHome » WidgetExamples

WidgetExamples

Version 30, changed by StevenGrimm 08/21/2006.   Show version history

Overview

Sometimes working with dojo widgets for the first time and connecting them altogether in your application can be frustrating if you haven't done it before. This page has some example uses of widgets.


Usage (if you want to make your own widgets)

Apparently there is a new way at defineWidget
Also see: http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book59 

    // a class that inherits from Widget
    dojo.widget.FooWidget = function(){
        // the constructor only preforms mixin-based inheritance
        dojo.widget.Widget.call(this);
    }

    // over-ride base widget properties
    dojo.lang.extend(FooWidget, {
        widgetType: "FooWidget",
        show:       function(){
            // widget-specific code here
        }
        // ...
    });

Usage (if you want to programatically use existing widgets)

There is a function that does the hard work for you. Simply call
dojo.widget.createWidget() and it will make the widget, and return it for you.

createWidget takes these parameters:

name The name of the widget to create (string)
props Key-Value pairs of properties of the widget
refNode If the last argument is specified this node is used as a reference for inserting this node into a DOM tree else it beomces the domNode
position The position to insert this widget's node relative to the refNode argument

example: 

var MyWidget = dojo.widget.createWidget("ContentPane", {id:'MyPane'});
MyWidget.setContent('this is my content');

Usage (if you want it parsed or you want to do it in html source)

You just add it as part of a div tag.

dojoType The NAME of the widget to create (string)
layoutChildPriority Priority of how to layout. One of: top-bottom or left-right
layoutAlign top/right/left/bottom/client
templatePath to alter CSS/HTML for a particular widget, to use your files.

Special Accordion attributes

labelNodeClass class name for the label(for Accordion Widgets)
containerNodeClass class name for container nodes (Accordion Widgets)
label Label name (Accordion Widgets
open True or False (Accordion Widgets)

TabContainer? attributes

labelPosition Top/bottom/left/right
closeButton default: none, "tab" put red close buttons on each tab.
doLayout True/False if false, TabContainers? size changes according to size of currently selected tab
selectedTab name of widgetID (from id= in your html tag)

ContentPane? attributes:

refreshOnShow False/True
href Where to get external Content(if any)
onClose for tabs, JS function to call on close called as function(pane,tab)

example: 

<div dojoType="ContentPane" >

Attachment (1)

  File By Size Attached Ver.
treenode_node.gif guest 957B 01/28/2006 1 Delete attachment