233323333373 > Building Web Applications Using the ArcGIS® API for JavaScript™Copyright © 2011 Es Al ights reserved (Course version 1.1, Version ease date January 2011, Pried inthe Une Stes of Amora “The intormason contained in Bis documents the exclusive property of Es. This work is protect under Und States copyright lw and ther intrnabonal copyright Weabes and conweitons, No pa oft work may be reproduced or anomitied i any fer or by ar means, ‘laconic or mecnancal,incksng photocopying and ecorcing, rbyanyiforton storage or retieval system, excep as exresty ‘permied in ring by Ext A request shouldbe sent o Aeon Corvacts and Legal Services Manaper, Eat 380 New Vork Steet, Redlands, CA 82373-6100 USA [EXPORT NOTICE: Use of these Matai subject to US, export conto laws and regulations including he U.S, Deparment of Commerce Export Admnisaon Requatons (EAR). Diversion ofthese Materia onary t US. law is prone. “Te nformaton contained in his documents subject to change witout natce. U.S. GOVERNMENT RESTRICTEDILIMITED RIGHTS ‘Any softwar, documentation, andor data delved hereundarssubect othe arms of he Liconse Agroamant. The commercial {Ronse nights inthe Ucense Agreement sty gover Leenseas use, eproducon, or dacosure ot he sofware, daa, and ‘documentation Inno event shal be U.S. Goverment acquregfeate’ han RESTRICTEDIUIMTED RIGHTS. Ata minimum, use, ‘upleaton.or aecoeure by the U.S. Goverment is subject festicton a el forth FAR §52227-14 Arates LM, andl (DEC 2007), FAR §£2 27-10(2) (DEC 2007) andr FAR §12 21112 212 (Commercial Techical Daa/Computer Software) and DFARS. §252.227-7015 (NOV 1868) (Technical Data) anor DFARS §227 7202 (Computer Sofware). a8 sppeae, CorvactorManutacturer IE E6r, 380 New York Steet Redands, CA 92573-8100, USA. (@ext.com, 30 Analyst, ACORN, Adsress Coser, ADF, AML, AcAtas, AreCAD, AreCataog, AveCOGO, AeDeta,AeDee, Arcs [NcEélor ACEupe, ArcExplrer, ArcExpess, AcGIS, AcGlbe, ACG, ArcIMS, ARCIINFO, Arcno, Aen ibrar, ArLesSon, ‘Location, ArcLogists, ArcMap, ArcNetwor, ArcNews, Objects, AOpen, Arad, ACPO, ArcPress, ArReader. AreScan ‘NeScene, AcSchool, ArcSrps, SOE, AcSd,AreSketeh, AcStom, AeSurvey, ACTIN, AcToolbox,ArcTodls, ACUSA,Arcser, ‘review, AcVoyagerArcach, Aree, AcWocs, ACKML, Alas GIS, Alas Ware, Avenue, BAO, Business Anahst, Business Analyst ‘nine, BusnestMMAP, Communtyino, Database Integrate, OBI KR, EDN, Ean, EsrTeam GIS, Ear—The GIS Company, Es\—The GIS People. Ext—The GIS Sotware Leader, FamEdt, GeoColece, Geograptic Design System, Geograpty Matis, Geography Network, GIS by Ess, GS Day, GIS for Everyone. GiSData Server, JTX, Malt Maplex, MapOtecs, Mapudio, Modeler. MOLE, MPS—Atas, PLTS, Renta-Tech, SDE, SM, Souroebook America, Spat Database Engine, Sreefap, Tapes, he ARCAINFO logo, the ACIS loo, {he ArcGIS Explorer logo, te ArcPad loge, the Es globe loge, te Es Press ogo the GIS Day logo, the Maptlogo, The Geographic ‘Advaniage, Th Geographic Appreach, The Works Leatng Desktop GIS, Water Wes, wn. esr con, wir gographynetwork com, ‘wan gecom, wow gtay.com. and Your Personal Geographic Intomaton Sytem ar rademarte, registered trademarks, or ence marks OF Een the Untod States, te European Communty, of carain other nsdictons. Cher companies and products mentioned herein may be raermarks or registered trademarks of ee respactve ademark owners JIIIFIIIIIVPIIIIIIIIIIIIIIIIIIIPIPIIIIIIIIIIIIIIFIFFIFFIFIFIIFIIIHIFIFIIIIIIIFIIII>D la — Contents = Introduction Introduction. COURSE GOAIS nn Using the course workbook Additional resources. Installing the course data Building JavaScript applications tt wo VD Lesson introduction ‘What wil | buildin this course? Getting started: Three approaches. Creating a JavaScript application Anatomy ofa JavaScript application (HTML fl). Aptana: Overview, Exercte 1: Add JavaScript components othe application. . (Open Aptana and create a new web page. Reference JavaScript and CSS libraries. Create page divisions ‘Add a text input box and button. Create additional page divisions ‘Apply a themed style sheet Lesson review ‘Answers to Lesson 1 questions Exercise solution . Getting started with the ArcGIS API for JavaScript Lesson introductior Why choose the ArcGIS API or JavaScript? Inside the AreGIS API for JavaScript Leveraging the API.... Build options. API Resources ... ArcGIS Server and ArcGIS API ‘Accessing service information ‘Adding a simple map to your application... ‘Map service overlay comparison chart. son 240 Exercise 2: Create a simple mapping applications. ou BAB Install the Code Assist plugin forthe APL 242— Contents — Reference ArcGIS API for JavaScript CSS and JavaScript libraries .....2-13 Add a map Set the default map extent, ‘Add an operational layer... Configure a basemap gallery widget inthe content pane Lesson review... Answers to Lesson 2 questions .. Exercise solution Performing data queries Lesson introduction Data queries Query task overview. Query results ‘Comparing query task types. Exercise 3A: Query data Set up a query task ‘Add a graphics layer. Query wit text sting ‘Query with WHERE clause... Compare QueryTask and FeatureLayer. Query with time slider: Overview. FeatureLayer display modes. Creating a time-enabled service so Exercise 38: Query tme-enabled features witha FeatureLayer. Explore and configure a feature layer Configure time slider. Set the FeatureLayer mode property... Lesson review ‘Answers to Lesson 3 questions Exercise solution: Exercise 3A... Exercise solution: Exercise 3B. Visualizing query results Lesson introduction Displaying feature and attribute data. 43 Infowindow. 48 Setting a definition expression 45 CECE CEE ELLE CeLEEeEeePErEeeeeeererrereeeeFIDFIFFFIOODDIO HDI SOHO DODD I HOIIIIFIFIIFIFIFIIIIIHIIIIIID — Contents - Using a DataGrid.. ‘Simple renderer... Unique value renderer. 48 Class breaks renderer... 49 Examine renderer types. 410 Exercise 4: Display query resuts... ant Replace operational layer with feature layer. aren Apply a definition query to a feature layer. 412 Display an InfoWindow nen sn 4A Display attributes in a DataGrid... oe AAT Apply a unique value renderer.. 4-22 Lesson review 4-28 ‘Answers to Lesson 4 questions 4-28 Exercise solution . se 4-30 Working with tasks Lesson introduction... Anatomy of a task, ‘Steps for implementing a task Locator task overview... cm Exercise 5A: (Optional) Geocode with a locator task. Examine properties of locator task. Create locator task. Configure user interface. Clear graphics and execute the task. Create and bind an event handler Explore a geoprocessing model Geoprocessor task overview. ParameterValue array .. = Exercise 5B: Configure a geoprocessing task.. Create user interface to hold task parameter values. ‘Add transit stop and city limit overtays.. Explore geoprocessing task parameters. Create task reference and configure execution .. Configure result hander Network analysis tasks... Closest facility task overview... Compare network analysis task scenarios. Lesson reviewmt Contents — ‘Answers to Lesson 5 questions. 5-36 Exercise solution: Exercise 5A.. Exercise solution: Exercise 5B.. Editing spatial data Lesson introduction et Web editing scenarios... 62 Using feature services to edit. 63 Using a proxy page 1m. 64 ‘Authoring editing resources. 65 Publishing feature services .. Using the Editor widget Using a geometry service... FeatureLayer display modes. Explore editing scenarios Exercise 6: Configure the Euitor widget Explore and test a feature service layer. Add feature layers. Explore feature layer modes... 612 e14 ‘Add an Editor widget and geometry service 6-15 Add editing toots 6-18 Lesson re¥i0W enn 621 How to: Configure a proxy page. 6-22 Answers to Lesson 6 questions 6-24 Exercise solution 6-28 Customizing applications Lesson introduction... Combining operations Querying a FeatureLayer Leveraging ArcGIS.com templates Deploying your application Exercise 7A: Chaining operations together. ‘Add schools as a Feature Layer. ‘Add an InfoTemplate, Set up to query the schools, Chain in the feature-selection operation Restore InfoWindow functionality... PIPIIIIIIIIPIIIPPDIIPI—DIPIIIP IP III PIIPIIIIIIIIIIF22>FFFIIIIIIIFIIIIINHdIIIIIIIIIFIII>IFIFIIIIIID —— Contents ~ ch Conte ites gw) Challenge: Add status messaging o 716 Challenge: Automatically resize the map... Challenge: Add a legend widget... Exercise 7B: Using and extending templates from ArcGIS.com 7-19 Create and download a web application template... ‘Add a basemap gallery widget. Modify the design. ‘Add an editing widget. Lesson review ... ‘Answers to Lesson 7 questions... Challenge solution: Add status messaging Challenge solution: Automatically resize the map Challenge solution: Add a legend widget. Exercise solution: Exercise 7A. Exercise solution: Exercise 7B.. Appendixes ‘Appendix A: Esri data license agreement AA ‘Appendix B: Data acknowledgments. see BelIntroduction Using the ArcGIS API for JavaScript, you can build high-performing, engaging web applications that incorporate GIS mapping, editing, and geoprocessing functionality. This, course teaches how to leverage the ArcGIS API for JavaScript and the Dojo framework to efficiently develop lightweight applications that meet the needs of their intended audience. You will leam about the resources available in the JavaScript API and how to incorporate basemaps and other resources from ArcGIS Onlline to enhance your web applications. Course goals By the end of this course, you will be able to: + Develop, test, and deploy an application using the ArcGIS API for JavaScript. * Incorporate ArcGIS Server services that allow end users to query, visualize, and edit GIS data, * Include time-aware data in an application. * Display map features with different symbols. * Display query results within a data grid. Apply best practices to ensure high performance and proper communication between the client application and the web server. Using the course workbook The course workbook is an integral part of your learning experience. During class, you will use the workbook to complete activities and exercises that reinforce specific tasks and skills. After class, the workbook is your personal reference to review concepts and activities or work through exercises again to reinforce what you have leaned. ‘Copyright © 2011 Esti a A s a A a x A A a A A A a a A A a A A a 4 A A A A a A A A ai a A a a A A a 4 a a 5 A A a A3333339333373 333333339933333333333239333339337d Additional resources Building Web Applications Using the ArcGIS API for JavaScript (BAAJ) Resource Center http:/ /trainingcloud. arcgis.com/baaj ‘This web page will serve as the gateway to the resources that you will use in this course. ArcGIS Resource Centers http://resources.arcgis.com This site provides unified access to web-based Help, online content, and technical support. ArcGIS API for JavaScript Resource Center http://links.esri.com/ javascript This site provides access to the ArcGIS JavaScript API Reference, which includes information about each object and its properties, methods, and events. This site also provides access to relevant documentation, samples, forums and the code gallery. ArcGIS.com Ihttp://www.arcgis.com A web site for finding and sharing geographic information system (GIS) content, organizing geographic information into groups, and building communities. Installing the course data This course does not have a data CD. Alll the data that is required for exercises will be accessed via the BAAJ Resource Center. [D1scLATMER: SOME COURSES USE SAMPLE SCRIPTS OR APPLICATIONS THAT ARE SUPPLIED EITHER OW ‘THE CD OR GN THE INTERNET. THESE SAMPLES ARE PROVIDED ‘AS 1S, WITHOUT WARRANTY OF ANY OND, ETHER DORESS OR IMPLI, CLUDING BUT HOT LIMITED TO, THEIMPLIED WARRANTIES OF \MERCHANTABLITY AND FITNESS FOR A PARTICULAR PURPOSE. ESRI SHALL NOT BELIABLEFOR ANY DAMAGES UNDER ANY THEDEY OF LAWBELATED TO THE LICENSEX'S USE OF THESE SAMPLES, EVEN IF ESRIIS ADVISED OF THEPOSSIBLITY OF SUCHDAMAGE. PERABSSION TO USE, COPY, AND DISTRIBUTE ‘THESE SAMPLE SCHDTSIS HIGRBY GRANTED, PROVIDED THERES HO CHARGE OR FEEFOR SUCH COPIES Copyright © 2011 EssDIFIIDPDPOIPISOID FS IHS HO SPP DSO O IPO > HOP POP IPIIIIDIDIIDIIIPIII?D Introduction In this lesson, you will create a JavaScript web application using the Aptana IDE. You will create a new project in Aptana and add basic JavaScript components, then save it as an HTML, file. Topics covered * Aptana IDE * Creating a new Aptana project and HTML application * JavaScript and Dojo components Learning objectives After completing this lesson, you will be able to: * Explain the basic structure of a JavaScript web application * Create a simple JavaScript application that leverages Dojo 1Building JavaScript applications What will | build in this course? \2 | Add a map, a basemap gallery widget, and a custom extent [3 Perform data queries; visualize time enabled data = 4 Visualize query results (using a data grid, info window, and custom rendering) 5 ‘Add functionality: Geocoding and géoprocessing 6 ‘Add functionality: Editing 7 ‘On your own: Customize pic com AteGIS.com templates); apply finishing touches functionality, leveraue 12 Copyright © 2011 Essi PIFPIDPIIIIIIIIIIIIIPIIIPIIIPIIIIIIPIIIIIIINIIIINIIIWI>FITFIFIFIFFHIFIHFIF}IFIFIIIIIIIM? > ‘a Get g started: Three approaches ‘There are several approaches you can use for developing your application. Use the approach (or combination of approaches) that best achieves your development goals and schedules. Write your Out-of-the-box viewer own code (no coding) Creating a JavaScript application JavaScript applications are stored in simple text files, usually as part of HTML documents. They are developed using a text editor such as Aptana. In order to create and deploy a JavaScript application, the minimum requirements are a text editor, a web server, and a web browser. 2 Copyright © 2011 Es 13Building JavaScript applications 4 Within an HTML document, you can provide reference to the following: * Cascading Style Sheets (CSS), which will describe the look and format of your document. * JavaScript code in a separate JS file + The Dojo JavaScript toolkit, which provides the basis for dijits (i.e., dojo widgets) and other JavaScript tools. (http://www dojotoolkit.org) Integrated Development Environment (IDE) Many development environments are freely available to use for writing applications with JavaScript. In this course, you will use Aptana, which includes Code Assist for Dojo (as well as the JavaScript API), but several others are free and available such as Visual Web Developer, Notepad, and Notepad ++. Web server | Microsoft Internet Information Server (IIS) or other | In order to deploy your application, you are essentially publishing | the application to your web server, making your application | available to the client. Once you have copied your application to the appropriate location on your web server, an end user may access it via a standard URL to your website where the application resides. Client (browser) Al major web browsers are supported (j.e., Firefox 3.5, Google Chrome 4, Intemet Explorer 7 and 8, Safari 3) Copyright ©2011 Es PIIIIIIIIIIFPIFDIIIIIIIIIPIIPAIIIIDIIIIIIIIIIIIIDFIFFIFIFFFFIFIFFFFIIIIIIDA>IOIIIIdD Anatomy of a JavaScript application (HTML file) ‘You can reference JavaScript code in your application in a variety of ways: * Directly within the HTML file * Pointing to an external file which contains the code (e.g., mycode.js) * Pointing to an external web address (e.g., dojo.xd,js) - <= _ ( ‘Opening tags CSS reference = <