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="<hr>" 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
- Programmatic code generation
- Dom manipulation
<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>
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>