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)
Demo: jquery tutorial and ArcGIS http://learn.jquery.com http://resources.arcgis.com
jquery/arcgis tips jquery UI widgets Test in target browsers and devices Test on Web server Use compact build of ArcGIS API if possible
Dijits & Modules James Tedrick
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 functionscoped 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
Tuesday Evening Reception Smithsonian American Art Museum and National Portrait Gallery 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
Wednesday Closing Session Closing and Hosted Lunch 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.
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