Arcgis For Java

5/23/2012
Building Web Applications Using the ArcGIS API for JavaScript
Copyright 2011 Esri. All rights reserved.
i-1
Welcome to Esri Training
Logistics
Daily Cell
schedule
phones/messages environment
Class
Introductions
Name Organization Course
expectations
i-2
Copyright 2009 ESRI. All rights reserved.
5/23/2012
ArcGIS Resource Center

resources.arcgis.com Gateway to current:

Support Communities Web
and blogs
help and tutorials samples, and data
Templates, Media
and code galleries
Updated regularly with new content
ideas.arcgis.com
wiki.gis.com
Building Web Applications Using the ArcGIS API for JavaScript i-4
The ArcGIS system

Browser
Cloud/Web services Visualize Create Collaborate Discover Manage Analyze
Basic client
Rich client
Mobile
Windows Mobile Windows iOS
Enterprise server
Desktop
Local
i-5
5/23/2012
ArcGIS Desktop
Rich clients ArcGIS Explorer Mobile Open standards
Desktop
Use
Enterprise integration
Serve
Author
i-6
ArcGIS Server
ArcGIS Desktop ArcGIS Explorer Web browsers Mobile iOS Open APIs
Applications
Services
Geodata
Globe services
Map services
Analysis/ modeling services
Image services
Geometry
GDB
Single-user
Data (geodatabase)
Desktop File Personal Workgroup
Multi-user (ArcSDE)
Enterprise
Copyright 2011 Esri. All rights reserved. Building Web Applications Using the ArcGIS API for JavaScript i-7
5/23/2012
ArcGIS for developers

ArcGIS Desktop/ ArcGIS Engine
.NET, Java, C++
Mobile
Windows Mobile, Windows, iOS
SharePoint
Web applications
i-8
ArcGIS Online
Online maps and applications Search and share with other users Link to ArcGIS.com
Esri Data and Maps

ArcGIS Desktop ArcGIS Server
User workspaces Free web APIs and resources

5/23/2012
Course introduction
i-10
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. ArcGIS Server services that allow end users to query, visualize, and edit GIS data. time-aware data in an application. map features with different symbols. query results within a data grid.
Incorporate
Include Display Display Apply
best practices to ensure high performance and proper communication between the client application and the web server.
i-11
5/23/2012
Course content
JavaScript framework and the IDE

Aptana
IDE overview the Dojo libraries
Leveraging
Building applications with the ArcGIS API for JavaScript

API
Reference graphics, and feature layers and analysis tasks
Map,
Query
Editing
Customizing applications
Chaining Using
operations together
ArcGIS.com templates
Course materials
Using the course workbook

Activities Exercises Lesson
reviews
Course data
i-13
5/23/2012
Building JavaScript applications
1-1
Learning objectives
After completing this lesson, you will be able to:

Explain Create
the basic structure of a JavaScript web application
a simple JavaScript application that leverages Dojo
1-2
5/23/2012
What will I build in this course?
1-3
Getting started: Three approaches

MyCode.html <html> <script> function{ } </script> </html>
Plan
Design
Write your own code

Copy Paste Modify
Deploy
Modify existing code
Build
Test
Out-of-the-box viewer (no coding)
A
Copyright 2011 Esri. All rights reserved. Building Web Applications Using the ArcGIS API for JavaScript 1-4
5/23/2012
Creating a JavaScript application
Text editor
MyApp.html <html> <script> </script> </html>

.html .css .js
Deploy to web server JavaScript application
1-5
Anatomy of a JavaScript application (HTML)

<html> <head> <link href="http://.../js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" > <script language="JavaScript" type="text/javascript" src="mycode.js"></script> <script src="http://.../dojo/1.5/dojo/dojo.xd.js" type="text/javascript"> function findFeatures () { alert("You entered: " + dojo.byId("findText").value); } </script> </head> <body class="claro"> <div id="appContent" style="width:900px; height:600px; border:1px solid #000;"></div> </body> </html> A
Copyright 2011 Esri. All rights reserved. Building Web Applications Using the ArcGIS API for JavaScript 1-6
Opening tags
CSS reference
JavaScript reference
Function
Body element
DIV element
Closing tags
5/23/2012
Exercise goals

Explore Aptana Create a new web page Implement Dojo style sheets and widgets Develop a web application template Examine web application code structure
1-7
Lesson review
What is Dojo? What is its purpose?
What elements compose an HTML/JavaScript application?
What three items are essential to building, hosting, and accessing JavaScript applications?
1-8
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-1
What will I build in this course?
Lesson
1 2 3 4 5 6 7
Tasks
Create a JavaScript application using Aptana Add a map, a basemap gallery widget, and a custom extent Perform data queries; visualize time-enabled data Visualize query results (using a data grid, info window, and custom rendering) Add functionality: Geocoding and geoprocessing Add functionality: Editing On your own: Customize an application (e.g., combine functionality, leverage ArcGIS.com templates); apply finishing touches
1-2
Copyright 2011 Esri
Lesson 1
Getting 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.
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.
Copyright 2011 Esri
-3
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) 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 ++.
Integrated Development Environment (IDE)
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)
All major web browsers are supported (i.e., Firefox 3.5, Google Chrome 4, Internet Explorer 7 and 8, Safari 3)
1-4
Copyright 2011 Esri
Lesson 1
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)
Copyright 2011 Esri
-5
Aptana: Overview
1-6
Copyright 2011 Esri
Lesson 1
Exercise 1: Add JavaScript components to the application

Estimated time: 35 minutes
In this exercise, you will create a new, simple web page (HTML file). Then, you will use JavaScript, cascading style sheets (CSS) and Dojo widgets to add style and functionality to your web page. The resulting file will serve as a template to which you will add components throughout the course. In this exercise, you will:
Explore Aptana Create a new web page Implement Dojo style sheets and widgets Develop a web application template Examine web application code structure
Step 1: Open Aptana and create a new web page

From the Windows Start menu, open Aptana Studio.
Aptana opens and the My Studio tab displays in the Editor pane.
Click Create new file.
Copyright 2011 Esri
-7
In the New dialog box, select Untitled HTML File, then click Finish.
The Editor pane displays the new HTML file, prepopulated with some starter HTML. From the File menu, choose Save As. In the Save As dialog box, navigate to the C:\Student\BAAJ folder. Change the file name to Ex1_MyTemplate.html, then click Save.
Before you begin writing code, you will download the exercise results files in case you need to verify your code syntax and placement while completing the exercises. Open a web browser. In the address bar, enter http://trainingcloud.arcgis.com/baaj .
The Building Web Applications Using the ArcGIS API for JavaScript (BAAJ) Resource Center is a web page that will serve as the gateway to the resources that you will use in this course. Bookmark this page. Under Samples/Downloads, click the Exercise Results (ZIP) link. When prompted, save the .zip file to your desktop. Extract the contents of the .zip file to C:\Student\BAAJ. (If you are unsure how to do this, ask your instructor for assistance.)
JavaScript applications can be tricky to debug. You can also use freely-available tools such as FireBug (getfirebug.com) and JSLint (www.jslint.com) to troubleshoot issues in your code. Return to Aptana.
1-8
Copyright 2011 Esri
Lesson 1
Step 2: Reference JavaScript and CSS libraries

Your template will use styles (CSS), functions, and widgets provided by the Dojo toolkit. In this step, you will add HTML to reference these resources.
Note: Exercise instructions will refer to both HTML elements and tags. Recall that:
HTML elements start with an opening tag and end with a closing tag. The element content refers to everything between the two tags. Some HTML elements have no content. These empty elements are closed in the opening tag.
1.
What HTML tag should you use to reference an external JavaScript file?
2.
Where should you position this tag in the HTML?
Add this tag to your code.
As you finish typing the opening <script> tag, Aptana automatically generates a closing </script> tag and positions the cursor between the two tags. This is Aptana's Code Assist feature, which is built-in for HTML.
Copyright 2011 Esri
-9
Now you will reference the Dojo libraries that are hosted by Google. You will also set the type attribute to let the browser know that the referenced script library contains JavaScript. Within the opening <script> tag, add the following attributes:
Attribute
src type
Value
http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js text/javascript
Note: Notice that Code Assist generates closing quotation marks and suggests common attribute values. You can use a suggested value by double-clicking it (or by using the arrow keys to highlight it), and then pressing Enter.
Next, you will add a reference to the Claro CSS theme that Dojo provides. This theme formats site features in an eye-pleasing style, and includes special style information that Dojo widgets use. 3. What HTML tag should you use to reference an external CSS file?
Write HTML to reference the CSS file using the following attributes:
Attribute
rel type href
Value
stylesheet text/css http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit /themes/claro/claro.css
Note: Verify your code using the results files that you saved to \Student\BAAJ\Results. Print solutions are also provided at the end of each lesson.
You will apply the Claro theme to the entire body of the HTMLto give a consistent appearance to all the elements that display on the page.
1-10
Copyright 2011 Esri
Lesson 1
Within the opening <body> tag, set the class attribute to claro. In Aptana's toolbar, click the Save button to save your changes.
Step 3: Create page divisions

In this step, you will divide your web page space into several named areas. This will make it easier to add content to your page in specific places. You will leverage some Dojo widgets (known as dijits) to help streamline your code and expedite your work. To make it easier to invoke the dijits, you will first enable Dojo's HTML parsing ability. The parser is invoked by setting the parseOnLoad parameter of the djConfig variable to true. You will do this using the JSON text format. 4. What is the syntax for assigning a JSON-formatted object to a variable?
In order for the parser to have an effect, it must be referenced before the Dojo library is referenced.
Above the <script> element that references the Dojo library:
Add a new <script> element with a type attribute value of text/javascript.

Within this <script> element:
Declare a variable named djConfig. Assign to it a JSON object that contains the name/value pair:
{ parseOnLoad: true }
With the parser invoked, now you can specify Dojo widgets directly in your HTML code by using the dojotype attribute. First, however, you must instantiate the dijits using the dojo.require function. Your page layout will use two dijits: BorderContainer and ContentPane. The syntax for the dojo.require function is:
dojo.require("dijit.path.Module");
Copyright 2011 Esri
-11
You will add another <script> element to contain most of the JavaScript code that you will write. A good practice is to add comments to your code to keep it organized and easy to understand. 5. What tags are used to add a comment to HTML?
At the end of the <head> element (below the existing <script> and <link> elements):
Add an HTML comment to indicate that it will contain Requires

Below your HTML comment:
and Functions.
Add a new <script> element with a type attribute value of text/javascript.

Within this <script> element, add the following statements to use the dojo.require function to load the BorderContainer and ContentPane dijits:
dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane");
You are now ready to leverage these pre-defined Dojo container widgets and set up several nested containers within your web page. Within the <body> element:
Add a <div> element with the following attribute values:

Attribute
id
Value
appContent
dojotype dijit.layout.BorderContainer design gutters style headline true width:100%; height:90%; margin:0;
JavaScript is case-sensitive. Also, verify that each opening <div> tag gets a closing </div> tagAptana may not always create one for you.
1-12
Copyright 2011 Esri
Lesson 1
The dojotype attribute specifies that this division will use Dojo's BorderContainer widget. BorderContainer is a pre-built container that is partitioned into five regions named top, left, right, bottom, and center.
Note: For more information, go to http://www.dojotoolkit.org and search for "BorderContainer."
Next, you will define three ContentPanes. Within your appContent <div> element:
Add another <div> element with the following attribute values:

id title
dojotype dijit.layout.ContentPane region top
Within this <div> element:
Add an <h1> element to display the title text, My

Within the appContent <div> element:
Template.
Add a second <div> element using the following attribute values:

id rightPane
dojotype dijit.layout.ContentPane region right
Note: To save time and effort, copy and paste existing code fragments, then modify the pasted code as needed.
Copyright 2011 Esri
-13
Within the appContent <div> element:
Add a third <div> element with the following attribute values:

id map
dojotype dijit.layout.ContentPane region style center overflow:hidden;
As the id attribute suggests, this ContentPane is where the map will appear. Now, you will use a few <style> attributes to specify the relative sizes of the BorderContainer and ContentPane dijits on the page. 6. What is the syntax for specifying style properties in the <head> section of a page?
Within the <head> element, and below the <link> element, add a <style> element. Within your <style> element:
Add CSS content to set the following property values for the html and body elements:
Property Value height
98% width padding 98% 5px
The BorderContainer requires this information to draw correctly on the page.
1-14
Copyright 2011 Esri
Lesson 1
7.
What is the syntax to apply CSS to HTML elements that have a specific id attribute value?
Within the <style> element:
For elements with an id of rightPane, use CSS to set a width property value of 20%.
Now you can preview your page and see the container and three panes that you set up. At the bottom of Aptana's Editor pane, click the IE tab. When prompted to enable auto-save before previewing, click Yes.
If the three panes do not display as expected, verify the following:
Confirm the syntax used when setting the djConfig variable. Check the capitalization used in the dojotype attribute values. Confirm the syntax used for the dojo.require function calls. Make sure the opening <body> tag's class attribute is set to claro. If panes are missing, verify that each <div> element has a closing </div> tag.
Copyright 2011 Esri
-15
Click the Source tab (next to the IE tab) to return to your code.
Step 4: Add a text input box and button

In this step, you will add a text input field and a button. You will also write a simple JavaScript function so that when the button is clicked, text entered in the input field will display in a JavaScript alert. (You will update this button later to find features that contain the input text.) In order to take advantage of Dojo's stylesheet, you will use Dojo's Button dijit. Before you can use the Button dijit, its module must be loaded using dojo.require. In the Requires and Functions section of your code, and within the <script> element:
Add a third dojo.require function call to load the dijit.form.Button module.

You can now use the Button dijit to create a stylized button on your layout. Within the rightPane <div> element:
Add a <button> element with the following attribute values:

dojotype dijit.form.Button onClick findFeatures();
Within your <button> element:
Add content to display the text Find

Above your new <button> element:
Features on the button.
Add an <input> element with the following attribute values:

id findText
type text size 15
1-16
Copyright 2011 Esri
Lesson 1
At the bottom of Aptana's Editor pane, click the IE tab to preview your changes.
Next, you will write code to test the Find Features button and text input box. 8. Click the Source tab to return to your code. What is the syntax for creating an empty JavaScript function?
Below your dojo.require statements, and within the <script> element:
Define a new JavaScript function named findFeatures. This function will take no
parameters. Later in the course, you will code the findFeatures() function to select map features. For now, you will have the function display a JavaScript alert so you can confirm that clicking the button successfully calls the function. 9. What is the JavaScript function to display an alert?
Within your findFeatures() function:
Add code to the to display an alert with the following message:

"You entered: " + dojo.byId("findText").value
Note: The dojo.byId() method is a simple alias to
document.getElementById(). It is shorter to write and works in all browsers. It requires one parameterthe id of the HTML element that you want
to use.
Copyright 2011 Esri
-17
Preview your application (i.e., click the IE tab). Enter some text in the input text box, then click Find Features to test your code.
Click OK to dismiss the message box. Return to the Source tab.
Step 5: Create additional page divisions

In this step, you will add two more ContentPanes to your template application. These ContentPanes will be used to contain various tools and functional interfaces in later exercises. Within the appContent <div> element, and above the rightPane <div> element:
Add another <div> element with the following attribute values:

id leftPane
dojotype dijit.layout.ContentPane region left
Like the rightPane, this leftPane <div> element requires CSS to tell the browser how wide it should appear. Within the <head> element, locate the <style> element.
1-18
Copyright 2011 Esri
Lesson 1
Within the <style> element:
For elements with an id of leftPane, use CSS to set a width property value of 20%.
Preview your application on the IE tab to verify that the new left pane displays. Return to the Source tab. Within the appContent <div> element, and below all the ContentPane <div> elements:
Add one more <div> element with the following attribute values:
id footer
dojotype dijit.layout.ContentPane region bottom
Within this <div> element:
Add a <center> element to display the text, Created

by [Your Name].
Preview your application to verify that the new footer pane displays. Return to the Source tab.
Step 6: Apply a themed style sheet

In this step, you will enhance your basic layout to give it a sense of style. You have already used some CSS to specify a few style attributes for the html, body, leftPane and rightPane elements. Now you will incorporate one of three themed CSS files that are available on the BAAJ Resource Center to give your template a more unique appearance. Below the existing <link> element:
Add a second <link> element with the following attribute values:

rel stylesheet
type text/css href http://trainingcloud.arcgis.com/BAAJ/styles/css/BAAJ_Clean.css
Note: Alternatively, you can reference BAAJ_Elegant.css or BAAJ_Nature.css in place of BAAJ_Clean.css.
Copyright 2011 Esri
-19
These CSS files include custom styles for all page elements including html, body, #rightPane and #leftPane. You will now remove style information from your code so that the CSS file can control the style for these elements. Within the <head> element:
Comment out the entire <style> element (include both the opening and closing tags).
Preview your template to see the applied theme. Close your file, save if prompted, then close Aptana.
1-20
Copyright 2011 Esri
Lesson 1
Lesson review
1. What is Dojo? What is its purpose?
2.
What elements compose an HTML/JavaScript application?
3.
What three items are essential to building, hosting, and accessing JavaScript applications?
Copyright 2011 Esri
-21
Answers to Lesson 1 questions

Exercise 1: Add JavaScript components to the application
1. What HTML tag should you use to reference an external JavaScript file? The <script> tag. 2. Where should you position this tag in the HTML? Within the <head> section. 3. What HTML tag should you use to reference an external CSS file? The <link> tag. 4. What is the syntax for assigning a JSON-formatted object to a variable?
myVariable = { name: value }
Use commas to separate multiple name/value pairs. 5. What tags are used to add a comment to HTML? HTML comments are created using the  tags. 6. What is the syntax for specifying style properties in the <head> section of a page? Use a <style> element with the following content, where selector is typically an HTML element (use a comma to separate multiple selectors):
selector { property1:value1; property2:value2; }
7.
What is the syntax to apply CSS to HTML elements that have a specific id attribute value?
#selector { property1:value1; property2:value2; }
Where selector is the id value. 8. What is the syntax for creating an empty JavaScript function?
function myFunction(myParameters) { myCode; }
9.
What is the JavaScript function to display an alert?

alert("My message");
1-22
Copyright 2011 Esri
Lesson 1
Lesson review
1. What is Dojo? What is its purpose? Dojo is a JavaScript library. Its purpose is to simplify web development. 2. What elements compose an HTML/JavaScript application? Header, body, DIV tags, script references, style sheet references, JavaScript functions, etc. 3. What three items are essential to building, hosting, and accessing JavaScript applications? A text editor, a web server, and a web browser.
Copyright 2011 Esri
-23
Exercise solution
Note: For printing purposes, some lines of code in this solution may wrap.
Step: Reference JavaScript and CSS libraries

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"> </script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs /dojo/1.5/dijit/themes/claro/claro.css"> </head> <body class="claro"> </body> </html>
Step: Create page divisions

<title>Untitled Document</title> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"> </script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs /dojo/1.5/dijit/themes/claro/claro.css"> <style> html, body { height:98%; width:98%; padding:5px; } #rightPane { width:20%; } </style>
1-24
Copyright 2011 Esri
Lesson 1
 <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); </script> </head> <body class="claro"> <div id="appContent" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width:100%; height:90%; margin:0;"> <div id="title" dojotype="dijit.layout.ContentPane" region="top"> <h1>My Template</h1> </div> <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right"> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> </div> </div> </body>
Step: Add a text input box and button

 <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.Button"); function findFeatures() { alert("You entered: " + dojo.byId("findText").value); } </script> </head>
Copyright 2011 Esri
-25
<body class="claro"> ... <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right"> <input id="findText" type="text" size="15"></input> <button dojotype="dijit.form.Button" onClick="findFeatures();">Find Features</button> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
Step: Create additional page divisions

<style> html, body { height:98%; width:98%; padding:5px; } #rightPane { width:20%; } #leftPane { width:20%; } </style> ... </head> <body class="claro"> <div id="appContent" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width:100%; height:90%; margin:0;"> <div id="title" dojotype="dijit.layout.ContentPane" region="top"> <h1>My Template</h1> </div> <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left"> </div> <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right"> <input id="findText" type="text" size="15"></input> <button dojotype="dijit.form.Button" onClick="findFeatures();">Find Features</button> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> </div> <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom"> <center>Created by J. Doe</center> </div> </div> </body>
1-26
Copyright 2011 Esri
Lesson 1
Step: Apply a themed style sheet

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs /dojo/1.5/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://trainingcloud.arcgis.com/BAAJ/styles/css/BAAJ_Clean.css">   <script type="text/javascript">
Copyright 2011 Esri
-27

Arcgis For Java

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Arcgis For Java

Uploaded by

Copyright:

Available Formats

5/23/2012

Building Web Applications Using the ArcGIS API for JavaScript

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Welcome to Esri Training

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Copyright 2009 ESRI. All rights reserved.

ArcGIS Resource Center

resources.arcgis.com Gateway to current:

help and tutorials samples, and data

and code galleries

Updated regularly with new content

Copyright 2011 Esri. All rights reserved.

The ArcGIS system

Windows Mobile Windows iOS

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Copyright 2009 ESRI. All rights reserved.

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Analysis/ modeling services

Desktop File Personal Workgroup

Copyright 2009 ESRI. All rights reserved.

ArcGIS for developers

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Esri Data and Maps

ArcGIS Desktop ArcGIS Server

User workspaces Free web APIs and resources

Copyright 2011 Esri. All rights reserved.

Copyright 2009 ESRI. All rights reserved.

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

By the end of this course, you will be able to:

Include Display Display Apply

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Copyright 2009 ESRI. All rights reserved.

JavaScript framework and the IDE

IDE overview the Dojo libraries

Building applications with the ArcGIS API for JavaScript

Reference graphics, and feature layers and analysis tasks

Copyright 2011 Esri. All rights reserved.

Using the course workbook

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Copyright 2009 ESRI. All rights reserved.

Building JavaScript applications

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

After completing this lesson, you will be able to:

the basic structure of a JavaScript web application

a simple JavaScript application that leverages Dojo

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

What will I build in this course?

Copyright 2011 Esri. All rights reserved.

Building Web Applications Using the ArcGIS API for JavaScript

Getting started: Three approaches

Write your own code

Modify existing code

Creating a JavaScript application