Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.ready

From PMISwiki
< Dojo Dijit and HTML5 in Real world applications‎ | Dojo
Revision as of 14:20, 23 March 2012 by WikiSysop (talk | contribs) (moved Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.addOnLoad to Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.ready: dojo.addOnLoad has been deprecated in favor of the (equivalent) dojo.ready)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

dojo.addOnLoad

dojo.addOnLoad() and dojo.ready() are synonyms for the same function: The function fires when dojo is ready. Function calls that require the dojo framework should not be called until dojo is ready. These functions may be placed in the dojo.addOnLoad() function.

How to use

   dojo.addOnLoad( function() {/*functions or statements to execute when dojo is ready*/} );

Tips and tricks

Avoid flashy load of dijit widget elements

Most HTML5 implementations might need a "soft loader": The soft loader hides the html rendering until dojo has been loaded and all dijit widget elements have been rendered correctly. Below you will find the 3 elements necessary for the implementation of a soft loader:

  • The JavaScript
  • CSS
  • HTML
<script type="text/javascript">
/*  SoftLoader
     *  This function has the following functions:
     *   * Hide the loading to avoid flashes while elements are loading.
     *   * Complete a nice fade in and hide the 'loader' message.
     */  
    dojo.addOnLoad(function() {
   
  			dojo.byId('loaderInner').innerHTML += " OK!";
  			setTimeout(function hideLoader(){
  				dojo.fadeOut({ 
  					node: 'loader', 
  					duration:1000,
  					onEnd: function(n){
  						n.style.display = "none";
  					}
  				}).play();
  			}, 250);
    });	
</script>

When dojo is ready "OK!" will be added to the <div id="loaderInner"> node. The fadeOut will spend 1000/1000 seconds to hide the <div id="loader"> node.

CSS:

/* Soft Loader prevent unsightly flash of un-styled dijit content */
#loader {
			padding:0;
			margin:0;
			position:absolute;
			top:0; left:0;
			width:100%; height:100%;
			background:#ededed;
			z-index:999;
			vertical-align:middle;
}

#loaderInner {
			padding:5px;
			position:relative;
			left:0;
			top:0;
			width:450px;
			background:#224388;
			color:#fff;
}

And finally the HTML:

<body class="claro">
	<!-- basic preloader: Soft Loader -->
	<div id="loader"><div id="loaderInner">Loading: Dojo Dijit and HTML5 in Real world applications... </div></div>
        ....
</body>

Verified in

IE 8, Firefox 3.6.22, Dojo 1.6.1

References

See demo here: Real world applications: dijit.Dialog