This tutorial describes how to get started developing a new web application using Dojo and the services on this server.
The template you downloaded suggests a clean way of structuring your application both on-disk and in code. You should use it as the basis for any new applications you create.
The index file loads basic requirements like the Dojo Core JavaScript, Dijit theme stylesheet, and UOW JavaScript. This file also includes references to application.css and application.js which should contain your application specific styles and startup code respectively. Finally, the HTML in the body tag defines the initial layout and widgets in the application.
The application JS file imports the Dojo modules for the widgets used in the index.html markup and instantiated in the startup code for the application. The file then declares a main controller class that hooks up event handlers, loads additional content, etc. when the application loads. Finally, the file defines a function that creates an instance of the main class when the page finishes loading.
The css folder contains any cascading stylesheets specific to your application.
The application CSS file styles the application layout. Widget styles can also appear in here or can be imported from their own separate CSS files. All class names in your styles should start with some unique prefix to avoid conflicts (e.g., myappSomeStyle).
This folder contains resources for any custom widgets you write for your applications. The widgets can be reused in multiple places across your application and possibly across applications. All of your widgets should derive from the base class dijit._Widget and most derive from dijit._Templated. Some may also derive from dijit._Contained and dijit._Container.
In the root of this folder are JS files defining widget modules using dojo.provide and declaring the widget classes using dojo.declare. These JS files reference templates and language files in the following subfolders.
The templates folder contains an HTML file for each dijit._Templated widget you define in the folder above. The name of each file matches the name of the widget (e.g., templates/MyWidget.html goes with MyWidget.js). Each template file contains HTML markup inserted into your web application when its corresponding widget class is instantiated. The markup supports string interpolation plus additional attributes like dojoAttachPoint and dojoAttachEvent that make manipulating the widget DOM nodes easy from within the widget JS class.
The nls folder contains a JS bundle file for each widget you create that shows text to the user. The name of each file matches the name of the widget (e.g., nls/MyWidget.js goes with MyWidget.js). Each nls bundle contains a JavaScript object having keys of your choosing (e.g., widget_title, widget_username_help, etc.) mapped to English strings shown to the user (e.g., My Awesome Widget, Enter your username here, etc.)
As a developer, you are responsible for using the keys you define in your widget code and templates. Translators are responsible for creating language subfolders and bundles containing translations of your strings (e.g., nls/zh-cn/MyWidget.js). Dojo is responsible for loading the right bundle based on the user's local language.
Your application and widgets should define other folders as needed to organize collections of images, sounds, and other resources.