Install Node

Download and Install Node http://nodejs.org/download

$node -v
v0.10.18
		        

Install NPM

Super Easy Install: npm comes with node now.

$npm -v
v1.3.8
		        

For other alternatives: @isaacs/npm

Install Bower

Install bower using npm

$npm install -g bower
$bower -v
1.2.6
		        

Install GruntJS

Install grunt-cli* using npm

$npm install -g grunt-cli
$grunt
grunt-cli: The grunt command line interface. (v0.1.9)

Fatal error: Unable to find local grunt.
		        

Install Cordova

Install cordova using npm

$npm install -g cordova
$cordova -v
3.0.9
		        

Upgrading Software

Upgrading is as easy as installing using npm

$npm update -g bower
$npm update -g grunt-cli
$npm update -g cordova
		        

Lets Get Started with Web App

Download the Dojox/App Boilerplate

$curl -L -o dapp-boilerplate.tar.gz \
https://api.github.com/repos/csantanapr/dapp-boilerplate/tarball
$curl -L -o dapp-boilerplate.zip \
https://api.github.com/repos/csantanapr/dapp-boilerplate/zipball
			        

Done download dapp-boilerplate

Let's check what we downloaded

	$tree dapp-boilerplate
			        

├── Gruntfile.js
├── .bowerrc
├── bower.json
├── package.json
├── profiles
│   └── app.profile.js
└── src
    ├── app/
    └── index.html
		        

Download front-end dependencies

Let's use Bower

$bower install
			        

$cat bower.json
{
  "name": "dapp-boilerplate",
  "dependencies": {
    "dojox": "dojo/dojox#1.9.1",
    "dojo" : "dojo/dojo#1.9.1",
    "dijit": "dojo/dijit#1.9.1",
    "util" : "dojo/util#1.9.1",
    "dojox_application": "dmachi/dojox_application#dojo191"
  }
}
$cat .bowerrc
{
    "directory": "components"
}
$bower install
			        

Done downloading front-end packages

Let's check what we downloaded

$tree -L 1 components/
			      

components/
├── dijit
├── dojo
├── dojox
├── dojox_application
└── util
		        

Download local CLI dependencies

Let's use NPM (package.json)

$npm install
			        

{"devDependencies": {
    "uglify-js": "~1.3.5",
    "grunt": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-csslint": "~0.1.2",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-connect": "~0.3.0",
    "grunt-contrib-watch": "~0.5.2",
    "grunt-jslint": "~1.0.0",
    "grunt-htmlhint": "~0.4.0",
    "connect-livereload": "~0.2.0",
    "grunt-dojo": "~0.2.4",
    "grunt-open": "~0.2.2",
    "grunt-cordovacli": "~0.1.5",
    "time-grunt": "~0.1.1",
    "load-grunt-tasks": "~0.1.0"
}}
			        

Done downloading node modules

Let's check what we downloaded

$tree -L 1 node_modules/
			      

node_modules/
├── connect-livereload
├── grunt
├── grunt-contrib-clean
├── grunt-contrib-connect
├── grunt-contrib-copy
├── grunt-contrib-csslint
├── grunt-contrib-jshint
├── grunt-contrib-watch
├── grunt-cordovacli
├── grunt-dojo
├── grunt-htmlhint
├── grunt-jslint
├── grunt-open
├── load-grunt-tasks
├── time-grunt
├── uglify-js
		        

Dojox/App (dapp) Framework

Modify Boilerplate Sample App (dApp)

• Add View html template (view.html)
• Add View js module (view.js)
• Update App Configuration (config.json)

dApp: View Template

$cat src/app/views/demo/view.html
	        

  Demo


  

  JavaScript rocks !
  


	        

dApp: View JS Module

$cat src/app/views/demo/view.js
	        

define([
    'dojo/text!app/views/demo/view.html',
    'dojox/mobile/Heading',
    'dojox/mobile/EdgeToEdgeList',
    'dojox/mobile/ListItem'
], function () {
    'use strict';
    return {
        init: function () {
        },
        beforeActivate: function (previousView, data) {
        },
        afterActivate: function (previousView, data) {
        },
        beforeDeactivate: function (nextView, data) {
        },
        afterDeactivate: function (nextView, data) {
        }
    };
});
	        

dApp: Configuration

$cat src/app/config.json
	        

{"views": {
	"demo":{
	  "template": "app/views/demo/view.html",
	  "controller" : "app/views/demo/view.js",
	  "dependencies":	[
	    "dojox/mobile/Heading",
	    "dojox/mobile/EdgeToEdgeList",
	    "dojox/mobile/ListItem"
		]
	}
}}