A stylesheet is required for Toasters to render properly

<link rel="stylesheet" type="text/css" href="/dojodev/dojo-trunk/dojox/widget/Toaster/Toaster.css" >

Javascript

<script type="text/javascript">
	   dojo.require("dojox.widget.Toaster");
	   dojo.require("dojo.parser");
      
	   function surpriseMe() {
		  dijit.byId('toast').setContent('Twinkies are now being served in the vending machine!','fatal');
	      dijit.byId('toast').show();
	   }

	   var toast = null;
	   function showTestMessage(){
	      console.log("surprise");
	   dojo.publish("testMessageTopic",
	          [ "This is a message! It's kind of long to show message wrapping."]
	    );
	            }
	            function showAnotherMessage(){
	                    dojo.publish("testMessageTopic",
	                            [{
	                                    message: "This is another message!",
	                                    type: "warning",
	                                    duration: 500
	                            }]
	                    );
	            }
	            function showYetAnotherMessage(){
	                    dojo.publish("testMessageTopic",
	                            [{ message: "This is yet another message!" }]
	                    );
	            }

	            dojo.addOnLoad(function(){
	                    toast = dijit.byId("toast");
	            });

	</script>

The html is very simple

	<input type="button" onclick="surpriseMe()" value="Click here"/>

	    <div dojoType="dojox.widget.Toaster" id="toast2"

	            separator="&lt;hr&gt;" positionDirection="bl-up"
	            messageTopic="testMessageTopic"></div>

	    <button type="submit"

	            onclick="showTestMessage();">Click to show message</button>
	    <button type="submit"
	            onclick="showAnotherMessage();">Click to show another message</button>
	    <button type="submit"

	            onclick="showYetAnotherMessage();">Click to show yet another message</button>
	
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
	
	

First we declare the CSS

<style type="text/css">
	@import "../resources/test.css";
	.fohooo { color: #15d32a; font-size: 16px; }
	</style>

The html snippet simply defines the markup of your code. Dojo will then parse the dom nodes and create the widgets programatically. Usually the lifecycle goes as follows

<div id="fohooo" class="fohooo">Click Me</div>
	<div id="fohooooooo" class="test">Don't click Me</div>
	<div dojoType="foohooo" class="test">Or Me</div>

This is the jscript code of your example. Simple past both HMTL and Jscript into the browser.

<script type="text/javascript">
	dojo.declare("foohooo", [dijit._Widget,dijit._Templated], {
	   templateString: '<div dojoAttachEvent="onclick: _foo">Example: <span dojoAttachPoint="containerNode"></span></div>',
	   _foo: function(){
	      alert("foo");
	   }
	});
	dojo.addOnLoad(function(){
	  var widget = new foohooo({id: "test_foohooo"}, dojo.byId("fohooo"));
	});
	</script>

Here is my rest syntax

This code example shows you how to create a widget programatically, awesome isn't it?

<script type="text/css">

	</script>
	<div id="fohoo">Click Me</div>
	<div dojoType="foohooo">Or Me</div>

Lets specify a simple BorderContainer with a left and center region

<script type="text/javascript">
	  dojo.require("dijit.layout.ContentPane");
	  dojo.require("dijit.layout.BorderContainer");
	</script>

The markup has to look as follows

<div style="position: relative; width: 100%; height: 400px; border: 1px #ccc solid;">
	  <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">

	    <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>
	    <div dojoType="dijit.layout.ContentPane" splitter="true" region="center" >Hi, I'm center</div>

	  </div>
	</div>
<style type="text/css">
	  #borderContainer {
	    width: 100%;
	    height: 100%;
	  }
	</style>
<style type="text/css">
	  @import "/moin_static163/js/dojo/trunk/release/dojo/dojox/widget/DocTester/DocTester.css";
	</style>
	<script type="text/javascript">
	  dojo.require("dojox.widget.DocTester");
	  dojo.require("dojo.date.locale");

	</script>
	<div dojoType="dojox.widget.DocTester">
	  >>> dojo.date.locale.format(new Date(2007,2,23,6,6,6), {datePattern: "yyyyMMdd", selector: "date"});
	  "20070323"
	  >>> dojo.date.locale.format(new Date(2007,2,23,6,6,6), {datePattern: "yyyy-MM-dd", selector: "date"});
	  "2007-03-23"

	  >>> dojo.date.locale.format(new Date(2007,2,23,6,6,6), {datePattern: "yyMMdd", selector: "date"});
	  "070323"
	  >>> dojo.date.locale.format(new Date(2007,2,23,6,6,6), {datePattern: "dd.MM.yy", selector: "date"});
	  "23.03.07"

	  >>> dojo.date.locale.format(new Date(2007,2,23,15,23,6), {timePattern: "HHmmss", selector: "time"});
	  "152306"
	  >>> dojo.date.locale.format(new Date(2007,2,23,15,23,6), {timePattern: "hmms", selector: "time"});
	  "3236"

	  >>> dojo.date.locale.format(new Date(2007,2,23,15,23,6), {timePattern: "HH:mm", selector: "time"});
	  "15:23"
	  >>> dojo.date.locale.format(new Date(2007,2,23,15,23,6), {timePattern: "HH.mm", selector: "time"});
	  "15.23"

	  >>> dojo.date.locale.format(new Date(2007,2,23,15,23,6), {datePattern: "yyyyMMdd", timePattern: "HHmmss"});
	  "20070323 152306"
	</div>