advanced javascript · application cache • specify the files needed to use the web page offline;...
TRANSCRIPT
Advanced JavaScript Gary Sheppard & James Tedrick
• HTML 5 • Working with jQuery • Modules, Dijits & AMD • Cross-Domain
• Video Playback • Canvas (2D graphics) • Geolocation API • Web Storage • Drag & Drop • Web Workers • ApplicationCache (offline use) • CSS 3 & more!
What works?
• Features in various stages of development • Browser support differs • http://caniuse.com
Geolocation
• Work with device’s geolocation capability - GPS - WiFi/cell tower triangulation - IP address lookup
• Geolocation dependent on user permission
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(callback)
}
Web Storage
• Key/Value local storage in browser • localstorage – persistent • sessionStorage – per browser window • Not enormous: 2.5 MB – 10 MB per origin, depending on browser (Chrome 2.5MB, IE 10MB)
• Values must be strings (serialize arrays/objects)
localstorage.setItem(<key>, <value>) localstorage.getItem(<key>)
Web Workers
• Multiprocessing in the browser • Separate script that runs in a new thread • Does not have direct access to DOM – pass messages to/from browser
var worker = new Worker(<script.js>);
worker.postMessage(“Message”);
worker.onmessage = <callback f() to process message>
worker.terminate()
Drag & Drop
• Move objects within a web page • Move documents into a web page • ondrag, ondrop, associated events • File upload: event.dataTransfer.getData(“text”) • Will normally need to call event.preventDefault() in ondrop event handlers to prevent browsers from doing normal behavior
Application Cache
• Specify the files needed to use the web page offline; files get persistently cached by browser
• manifest tag in html element <html manifest=“my.appcache”>
• Some issues - Must modify the application cache file when
updating any resource to recache it. Use a comment line (#) with date to update
- Some browsers limit total size (5MB)
Application Cache file
CACHE MANIFEST
/app.js
<Other files to cache>
NETWORK
serversideProcess.php
<Resources never cached/ use * for wildcard>
FALLBACK:
/tiles/ noTile.jpg
<Resources matching this path get this resource>
CSS 3
• Better application design - Screen size based design (responsive design) - Rounded Corners (border-radius) - Drop Shadows (box-shadow & text-shadow) - Web fonts (@font-face definition) - Multi-column text layout (column-count)
• Animation & transitions with events • Filters- alter the image of a layer (filter) http://odoe.net/blog/?p=322
CSS3 caveats
• Browsers are continually adding features and proposing them for CSS
• Mixed implementations across browsers • Often need to use browser-specific CSS properties (column-count example): - IE: not supported - Firefox: -moz-columncount - Chrome/Safari: -webkit-columncount - Opera: column-count
Mobile Web App
JavaScript challenges
• Not compiled • Limited support in non-JS IDEs • Large projects become unwieldy
JavaScript challenges
Working with JavaScript/HTML ≈
Dressing an octopus
Source: http://en.wikipedia.org/wiki/File:Octopus2.jpg
JavaScript challenges
One solution:
JavaScript frameworks (Dojo, jQuery, others)
jQuery
Percentage of popular sites using jQuery Source: BuiltWith
Why jQuery?
jQuery helps you do all of this… • Handling events • Making Ajax calls • Creating great UI elements • Traversing and manipulating the HTML DOM
- (When I was your age, we called this DHTML) …all at the same time …without a big JavaScript mess
jQuery visual elements
Two different UI libraries: • jQuery UI • jQuery Mobile (based on jQuery UI) Both are compatible with ArcGIS Tip: on any given page, use one or the other.
Learning jQuery
• http://learn.jquery.com/ (tutorials) • http://www.w3schools.com/jquery (tutorials) • http://www.learningjquery.com/ (tips blog)
http://learn.jquery.com
http://resources.arcgis.com
Demo: jQuery tutorial and ArcGIS
jQuery/ArcGIS tips
• jQuery UI widgets • Test in target browsers and devices • Test on Web server • Use compact build of ArcGIS API if possible
James Tedrick
Dijits & Modules
Modules
• Containerize code for reusability, management • Limits global variables, potential namespace collision var app = { settings: { mapDOMnode: ‘mapdiv’, }, init: function() { app.map = new esri.Map(app.settings.mapDOMnode); … } }; app.init();
Modules
Dojo (& the Esri JS API) makes extensive use of modules dojo.require(dijit.layout.BorderContainer);
dojo.require(dijit.layout.ContentPane);
dojo.require(esri.map);
dojo.require(esri.tasks.query);
Dijits- UI Modules
• User Interface Elements - Layout - Form Items - Dialogs/Popup Menus
• Some graphical elements are also in developmental dojox namespace - Charts/Gauges - Mobile user interface
Dijit lifecycle
1. constructor 2. postMixInProperties 3. buildRendering 4. postCreate
5. startup 6. destroy
normally called by program creating widget
Templated Dijits
• Template html fragment contains layout • Code in js file • Accompanying assets (images, css) • Uses dijit._TemplatedMixin module to load HTML template
Dijit
Asynchronous Module Definition (AMD)
• Reduce load time of page by loading scripts only when needed
• Clarifies module names by allowing the programmer to assign modules to function-scoped variables
Require – Import modules
require(
[“dijit/layout/BorderContainer”,
“esri.Map”,
“dojo/domReady!”],
function(BorderContainer, Map){
var bc = new BorderContainer(…)
var map = new esri.Map(…);
});
Special ‘Modules’
• Dojo/domReady! – special module that waits until the DOM is ready to resolve (replaces dojo.ready)
• Dojo/has – browser functionality testing require([dojo/has!<feature>?<YesModule>:<NoModule>], …)
• Dojo/text – Load text from file (HTML templates) require([dojo/text!<path to template>], …)
Defining Modules
• Define (Module Name, [dependencies], function) • Module Name – optional; encourages to leave anonymous to allow for loading applications to name
• Dependencies – same as in require • Function – returns module code as an object
Define – create modules
define(“myApp”, [“dojo/_base/declare”, “dijit/Layout/BorderContainer”, “esri/Map], function(declare, BorderContainer, Map) { return declare([BorderContainer, Map], {
<module code here>
<Reminder: constructor property inits>
});
});
Esri JS API & AMD
• Currently, some Esri modules are AMD compatible
• Working to migrate all modules to AMD over the next few versions
• Will continue to support dojo.require loading method
AMD Loading
The problem with cross-domain access Facebook cookie: 0x4598324759deadbeef7199…
The problem with cross-domain access Facebook cookie: 0x4598324759deadbeef7199…
Same origin policy
• Policy: XmlHttpRequest only to same domain as page
• Enforcement: browser • Exception: server can allow other domains
Dealing with the same origin policy
• Server-side proxy • Cross-origin resource sharing (CORS)
Server-side proxy
• Your page can’t make the request to their server • So your page makes the request to your server • And your server makes the request to their server
• Safe: your server doesn’t have their server’s cookies
Cross-origin resource sharing (CORS)
• Their server includes a header: Access-Control-Allow-Origin: * Access-Control-Allow-Origin: bobsclarinets.com timsenglishhorns.com katestubas.com
• Same concept: - crossdomain.xml for Flash - clientaccesspolicy.xml for Silverlight
CORS and ArcGIS
• JavaScript API uses Dojo xhrGet/xhrPost - Subject to same origin policy
• ArcGIS for Server enables CORS for all domains by default
Demo: Controlling CORS in ArcGIS for Server
Getting help: ArcGIS Resource Center
http://resources.arcgis.com
ArcGIS API for JavaScript
http://esriurl.com/js
6:30 PM–9:30 PM • Walking distance from convention center
• Conference Badge needed for reception
• Coat check available in courtyard
• Serving hot hors d’oeuvres and beverages
Smithsonian American Art Museum and National Portrait Gallery
Tuesday Evening Reception
11:30 AM–1:30 PM • Ballrooms A–C, Third Level
• Join conference attendees for lunch and closing session
• Closing Speaker Todd Park, U.S. CTO
• Wrap-up and request for feedback with Jack Dangermond.
Closing and Hosted Lunch
Wednesday Closing Session
Upcoming Events esri.com/events
Date Event Location
March 21, 2013 MeetUp – ArcGIS Platform Washington, DC
April 18, 2013 MeetUp – Location Analytics Washington, DC
March 23–26, 2013 Esri Partner Conference Palm Springs, CA
March 25–28, 2013 Esri Developer Summit Palm Springs, CA
July 6–9, 2013 Esri National Security Summit San Diego, CA
July 8–12, 2013 Esri International User Conference San Diego, CA
Thank You Please complete a session evaluation form.
#FedGIS