Getting to Know Dojo – Dojo, Digit, Dojox, DoWhatNow? – TIMEOUT: Important Concepts

View Github Repository Open presentation in a new window

oregonGEO

See all presentation from oregonGEO

Getting to Know Dojo – Dojo, Digit, Dojox, DoWhatNow? – TIMEOUT: Important Concepts

0 0

DojoIntro

Introduction to dojo and Esri Web AppBuilder

On Github oregonGEO / DojoIntro

Getting to Know Dojo

Dojo, Dijit, Dojox, DoWhatNow?

Beginning Developing with Esri Web AppBuilder

Created by OregonGEO

What is Dojo?

A JavaScript toolkit for building web apps.

It's just JavaScript!

Dojo Toolkit Components

  • Dojo - core utilties (ajax, dom manipulation, class-type programming, events, promises, etc.)
  • Dijit - user interface widgets (forms, menus, modals, etc)
  • Dojox - additional stuff at varying levels of maturity (mvc, fx, mobile, etc)
  • Util - other stuff (testing, documentation, etc)

Documentation

dojo/_base/array

// iterate through array with dojo
require(["dojo/_base/array"], function (array) {
	var weather = ["rain", "sunshine", "fog", "hail", "thunderstorm"];
	array.forEach(weather, function (item) {
	  console.log(item)
	}, /* this */);
});

Example

Arrays with jQuery

// iterate through array with jQuery
var weather = ["rain", "sunshine", "fog", "hail", "thunderstorm"];
$.each(weather, function (index, item) {
  console.log(item);
});

Plain Ole' JavaScript

// iterate through array with just JavaScript
var weather = ["rain", "sunshine", "fog", "hail", "thunderstorm"];
for(var i = 0; i < weather.length; i++) {
  console.log(weather[i]);
}
// or modern support (ie >= 9.0)
weather.forEach(function (element, index, array) {
  console.log(element);
});

Array.prototype.forEach

Why Use Dojo (or jQuery)?

Browser Compatability Extends JavaScript Write Less Code (dojo) Modularize Your Code

TIMEOUT: Important Concepts

  • Callbacks
  • Scope
  • Asynchronous

Callbacks

function getWeather(city, cb) {
  var cities = {
    Salem : "62"
  };
  if(cities[city]) {
      return cb(null, cities[city]);
  } else {
      return cb('no city by that name');
  }
}
var weather = getWeather('Salem', function (err, temp) {
  document.getElementById('output').innerHTML += 'Salem Temp: ' + ((err) ? err : temp);
});
var weather = getWeather('Portland', function  (err, temp) {
	if(err) {
  	// handle error
  }
  document.getElementById('output').innerHTML += '<br>Portland Temp: ' + ((err) ? err : temp);
});

jsFiddle

Scope

The current context of you code (ie. what you have access to at any location in your code)

Can be local or global

scope example 1

var city = "Salem";
var changeCity = function(name) {
	var city = name;
	console.log(city);
};
console.log(city);
changeCity('Portland');
console.log(city);

scope topic 2 - this

'this' refers to current scope. By default, this refers to outer most global object 'window'.

console.log(this === window); // true
var Weather = function () {
  var unit = 'metric';
  this.city = 'Salem';
  this.getCity = function () {
    console.log(this.city);
  };
};
var report = new Weather();
console.log(report.city);
report.getCity();
report.getCity.call({city : 'Portland'});
jsFiddle

Asynchronous

Async operations are non blocking, meaning your code will not wait for it to finish.

// jQuery AJAX Example
$.ajax({
  url : 'someUrl',
  method : 'GET',
  dataType : 'JSON',
  success : function (response) {
	  console.log('Here is your data');
  }
});
console.log('Done getting data');

Configuring Dojo with dojoConfig

weather/siri.js
define(function () {
  var sayWeather = function () {
    alert('Here is your weather report');
  };

  return {
    sayWeather : sayWeather
  }
});
See Example

AMD - Asynchronous Module Definition

Group like code and functionality into modules

  • define()
  • require()

define()

// app/counter.js
define(function(){
    var privateValue = 0;
    return {
      increment: function(){
        privateValue++;
      },

      decrement: function(){
        privateValue--;
      },

      getValue: function(){
        return privateValue;
      }
    };
});
require(['app/counter'], function (counter) {
  counter.increment();
  counter.increment();
  counter.getValue(); // returns 2
});

Modules loading modules

define([
    "dojo/_base/declare",
    "dojo/dom",
    "app/dateFormatter"
], function(declare, dom, dateFormatter){
    return declare(null, {
        showDate: function(id, date){
            dom.byId(id).innerHTML = dateFormatter.format(date);
        }
    });
});

Creating Classes

Classes in Dojo with dojo/_base/declare

Widgets in Esri Web AppBuilder follow this design pattern

Build Custom Widget
Getting to Know Dojo Dojo, Dijit, Dojox, DoWhatNow? Beginning Developing with Esri Web AppBuilder Created by OregonGEO