Presented by Jayson Ward and Frank Garofalo as a Demo Theater at the Esri DevSummit 2013. Presenting Virtual Port, a web-based application for the Port of Long Beach, built using ArcGIS API for Javascript. Selected code snippets: https://github.com/fgarofalo10/jquery-dojo-sandbox

1. UX Design for Developers
Frank Garofalo & Jayson Ward
@fgarofalo @defiantgoat
#devsummit #esriux #virtualport

2. Today’s menu
• UX Design
• Virtual Port – demo
• Code
- JavaScript Architecture
- Sample Code
#devsummit #esriux #virtualport

3. User Interface / User Experience Design
#devsummit #esriux #virtualport

4. Agile Development & UX
• HTML proof-of-concepts
• Rapid prototyping
1. Build client-side (front-end)
elements
2. Validate with client
3. Then wire-up the server-side
(back-end) components
#devsummit #esriux #virtualport

5. #devsummit #esriux #virtualport

6. DEMO
#devsummit #esriux #virtualport

7. #devsummit #esriux #virtualport

8. Design consistency
#devsummit #esriux #virtualport

9. code
ArcGIS API for JavaScript
Dojo & jQuery
#devsummit #esriux #virtualport

10. JavaScript Architecture
Default.aspx
ArcGIS API for JavaScript
main.js dojo.js
module_advanced.js module_news.js module_reports.js
module_infofeeds.js module_notifications.js module_vessels.js
module_mjob.js module_resources.js module_videos.js
#devsummit #esriux #virtualport

11. Playing together in the sandbox Default.aspx
<!-- jQuery & jQueryUI -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js“ type="text/javascript">
</script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.1/jquery-ui.min.js“ type="text/javascript"
> </script>
<!-- ArcGIS JavaScript API -->
<script type="text/javascript">var djConfig = { parseOnLoad: true };</script>
<script src="//serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3" type="text/javascript" >
</script>
<script src="scripts/dojo.js" type="text/javascript" ></script>
<script src="scripts/main.js" type="text/javascript" ></script>
#devsummit #esriux #virtualport

12. Playing together in the sandbox main.js
$(document).ready( function () {
// Once jQuery and Dojo are ready. Start code.
// Initialize DoJo Functions
dojo.addOnLoad(initDojo);
// Initialize jQuery Functions
initJQuery_mainfunctions();
function initJQuery_mainfunctions() {
//dostuff
}
});
#devsummit #esriux #virtualport

13. Playing together in the sandbox dojo.js
dojo.require("esri.map");
dojo.require("dijit.dijit");
dojo.require("esri.arcgis.utils");
var mapObj;
function initDojo() {
mapObj = new esri.Map("mapDiv", {
basemap: "gray",
center: geoCenter,
displayGraphicsOnPan: false,
fadeOnZoom: true
});
}
#devsummit #esriux #virtualport

14. Playing together in the sandbox
// Create a custom object under the jQuery namespace
jQuery.virtualport = {}; // declared within main.js
// namespace global variables
jQuery.virtualport.mapObj = mapObj;
// namespace functions
function setRightPanelSwitch (in_element, in_direction) {
// do stuff
}
jQuery.virtualport.setRightPanelSwitch = function (in_element, in_direction) {
setRightPanelSwitch (in_element, in_direction); // calls local function
}
#devsummit #esriux #virtualport

15. …that’s a wrap
• UX Design
• Virtual Port – demo
• Code
- JavaScript Architecture
- Sample Code
#devsummit #esriux #virtualport

16. Special Thanks to…
• Port of Long Beach
• Project Team
- Mourad Larif - Jayson Ward
- Eric Apple - Frank Garofalo
- Ed Carubis - Xiaomeng Zheng
- Brenda Ibold - Mike Nelson
- Selim Dissem
- Ross Wakefield
- Tanuka Bhowmick
#devsummit #esriux #virtualport

17. UX Design for
Developers
Frank Garofalo @fgarofalo
Jayson Ward @defiantgoat
#esriux #devsummit #virtualport
Offering ID # 383
Find us at the SpeedGeeking event!
#devsummit #esriux #virtualport

18. #devsummit #esriux #virtualport

19. Playing together in the sandbox
function setRightPanelTabs() {
// Changed to "on" event listener
jQuery(".container_right_panel").on({
click: function (e) {
var elem_tab_header = jQuery(this);
var elem_tab_container = elem_tab_header.parent().parent().attr("id");
var elem_tab_header_id = elem_tab_header.attr("id");
setRightPanelTabActive(elem_tab_container, elem_tab_header_id); // local function
e.preventDefault();
}
}, ".tab.tab_header");
}
#devsummit #esriux #virtualport

20. Playing together in the sandbox
// setRightPanelTabActive [Local]
function setRightPanelTabActive (parent_container, element) {
var elems_tab_headers = jQuery("#" + parent_container + " .tab.tab_header");
var elems_tab_contents = jQuery("#" + parent_container + " .tab.tab_content");
var elem_tab_content = jQuery("#" + parent_container + " .tab.tab_content." +
element);
// Tab Headers
elems_tab_headers.removeClass("active");
jQuery("#" + element).addClass("active");
// Tab Contents
elems_tab_contents.removeClass("active");
elem_tab_content.addClass("active");
}
#devsummit #esriux #virtualport

21. Virtual Port: App Structure
#devsummit #esriux #virtualport

22. Virtual Port: App Structure
#devsummit #esriux #virtualport