ProgressBar on a gfx shape

Shows how to create a tooltip around an arbitrarily defined rectangle in the page + a dijit widget placed over a shape

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<div id="surface">
</div>

<div id="tooltip">
    <div>
        <div id="closeBtn">X</div>
        <a href="http://www.google.com" target=_blank>Google</a>
    </div>           
</div>

CSS

#surface {
    background : lightgray;
    width : 400px;
    height : 300px;
    position : absolute;
    top : 20px;
    left : 130px;
}

#closeBtn {
    float:right;
    width : 12px;
    height : 12px;
    background : red;
    color : yellow;
    border : 1px solid darkgreen;
    cursor : pointer;
    margin-left : 12px;
    padding : 2px;
    text-align : center;
}
#tooltip {
    display : none;
    visibility : hidden;
    border : 12px;
    width : 200px;
}

JavaScript

dojo.require("dijit.Tooltip");
dojo.require("dojox.gfx");
dojo.require("dijit.ProgressBar");

dojo.ready(function(){

    var surfacePosition = dojo.position(dojo.byId("surface"), true);
    
    var surface = dojox.gfx.createSurface("surface", surfacePosition.w, surfacePosition.h);
    
    // Create a rectangle
surface.createRect({ x: 100, y: 50, width: 200, height: 100 })
.setFill("yellow")
.setStroke("blue"); 

 // Add a circle
var c = surface.createCircle({ cx: 100, cy: 300, r:50 })
.setFill("green")
.setStroke("pink");   
    
    // Now an ellipse
surface.createEllipse({ cx: 300, cy: 200, rx:50, r:25 })
.setFill("#fff")
.setStroke("#999");
 
// And a line
surface.createLine({ x1: 10, y1: 50, x2:400, y2:400 })
.setStroke("green");
 
// How about a polyline?
var p = surface.createPolyline([
{x: 250, y: 250},
{x: 300, y: 300},
{x: 250, y: 350},
{x: 200, y: 300},
{x: 110, y: 250}
]).setStroke("blue");

surface.remove(p);
 
// Add in an image
surface.createImage({
x:100, y:300, width: 123, height: 56, src: "../images/logo.png"
});

// With some text
surface.createText({ x:64, y:220, text:surface.children.length, align:"start"})
.setFont({ family:"Arial", size:"20pt", weight:"bold" }) //set font
.setFill("blue");
 
// And an advanced textpath
var textShape = surface.createTextPath({text: "TextPath!"})
.moveTo(125, 70)
.lineTo(285,20)
.setFont({family: "Verdana", size: "2em"})
.setFill("black");
 
// And a simple path
surface.createPath("m100 100 100 0 0 100c0 50-50 50-100 0s-50-100 0-100z")
.setStroke("black");
surface.childern.length;
surface.remove(c);
    
    
});