# Welcome to the Auto-Require Demonstration Application

This application is here to represent the ability to "grow" an application declaratively, utilising the proposed feature of the Dojo Parser to auto-magically `require()` in the necessary modules as parts of the application start to load upon demand.

The application has only the minimal amount of `require()`s in order to "bootstrap" the application:

    require(["dojo/_base/fx", "dojo/_base/lang", "dojo/dom-style", "dojo/parser", "dojo/ready",
    		"dijit/registry", "dijit/layout/ContentPane"],
    function(baseFx, lang, domStyle, parser, ready, registry, ContentPane){

    	/* Some shared functions */

    	ready(function(){
    		parser.parse().then(function(objects){
    			baseFx.fadeOut({  //Get rid of the loader once parsing is done
    				node: "preloader",
    				onEnd: function() {
    					domStyle.set("preloader","display","none");
    				}
    			}).play();
    		});
    	});
    });

The rest of the modules will be auto-required when the declarative markup is parsed, which in most cases is when the containing widget is loaded. Most of the widgets are using the `href` property to load their content and have it parsed by the parser.

This application also uses another feature of the parser, declarative require. this allows for modules to be loaded and mapped to globally scoped variable which can then be accessed by the application. For example this is in the markup:

    <script type="dojo/require">
    	"demo.dom": "dojo/dom",
    	"demo.registry": "dijit/registry"
    </script>

This allows for the `dojo/dom` and `dijit/registry` to be loaded and mapped without the need for direct coding within JavaScript.

In addition, only the minimal amount of scripting is included, with most of the behaviour being driven through declarative scripting, like the following:

    <button type="button" data-dojo-type="dijit/form/Button" class="commandButton">
    	<span>Login Form</span>
    	<script type="dojo/on" data-dojo-event="click">
    		demo.registry.byId("dialog1").show();
    	</script>
    </button>