Arcgis for Java

5/23/2012

Copyright 2009 ESRI. All rights reserved. 1

Building Web Applications Using the ArcGIS API for JavaScript i-1 Copyright © 2011 Esri. All rights reserved.

Building Web Applications

Using the

ArcGIS API for JavaScript


Welcome to Esri Training

Logistics

Daily schedule

Cell phones/messages

Class environment

Introductions

Name

Organization

Course expectations

5/23/2012



ArcGIS Resource Center

resources.arcgis.com

Gateway to current:

Support

Communities and blogs

Web help and tutorials

Templates, samples, and data

Media and code galleries

Updated regularly with new content

ideas.arcgis.com

wiki.gis.com


The ArcGIS system

Cloud/Web

services

Enterprise

server

Local

Browser

Mobile

Desktop

Basic client

Rich client

Windows Mobile

Windows

iOS

• Visualize

• Create

• Collaborate

• Discover

• Manage

• Analyze

5/23/2012



ArcGIS Desktop

Use

Author

Serve

Desktop

Rich clients

ArcGIS Explorer

Mobile

Open standards

Enterprise integration


ArcGIS Server

Web

browsers ArcGIS Desktop

ArcGIS Explorer Mobile

Open

APIs iOS

Geodata Globe

services

Map

services

Analysis/

modeling

services

Image

services Geometry

GDB

Applications

Services

Data (geodatabase) File

Desktop

Workgroup

Enterprise

Multi-user (ArcSDE)

Personal

Single-user

5/23/2012



ArcGIS for developers

ArcGIS Desktop/ ArcGIS Engine

.NET, Java, C++

Web applications

Mobile

Windows Mobile, Windows, iOS

SharePoint


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


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.

5/23/2012



Course content

JavaScript framework and the IDE

Aptana IDE overview

Leveraging the Dojo libraries

Building applications with the ArcGIS API for JavaScript

API Reference

Map, graphics, and feature layers

Query and analysis tasks

Editing

Customizing applications

Chaining operations together

Using ArcGIS.com templates


Course materials

Using the course workbook

Activities

Exercises

Lesson reviews

Course data

5/23/2012

1

Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-1

Building JavaScript

applications


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

5/23/2012

2


What will I build in this course?

?

A


Design

Build

Test

Deploy

Plan

Getting started: Three approaches

Modify Copy Paste

<html>

<script>

function{

…

}

</script>

</html>

MyCode.html

Out-of-the-box viewer

(no coding)

Modify existing code

Write your

own code

A

5/23/2012

3


JavaScript

application

Creating a JavaScript application

Text editor

<html>

</html>

<script>

</script>

MyApp.html

…

.html

.css

.js

Deploy to

web server

D


Anatomy of a JavaScript application (HTML)

<html>

</html>

</head>

<body class="claro">

</body>

<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);

}

<head>

</script>

<div id="appContent" style="width:900px; height:600px; border:1px solid #000;"></div>

D A

<link href="http://.../js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >

Opening tags CSS reference

JavaScript reference

Function

Body element DIV element

Closing tags

5/23/2012

4


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


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?

A

1 Building JavaScript applications

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

1-2 Copyright © 2011 Esri

Building JavaScript applications

What will I build in this course?

Lesson Tasks

1 Create a JavaScript application using Aptana

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 geoprocessing

6 Add functionality: Editing

7 On your own: Customize an application (e.g., combine functionality, leverage

ArcGIS.com templates); apply finishing touches

Copyright © 2011 Esri -3

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.



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) All major web browsers are supported (i.e., Firefox 3.5, Google

Chrome 4, Internet Explorer 7 and 8, Safari 3)

http://www.dojotoolkit.org/


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)



Aptana: Overview


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.



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.

http://trainingcloud.arcgis.com/baaj

http://trainingcloud.arcgis.com/baaj

http://www.jslint.com/


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.



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 Value

src http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js

type 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 Value

rel stylesheet

type text/css

href 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 HTML—to give a consistent

appearance to all the elements that display on the page.

http://ajax.googleapis.com/ajax/libs/dojo/1.5/



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");



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 and Functions.

Below your HTML comment:

▪ 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 Value

id appContent

dojotype dijit.layout.BorderContainer

design headline

gutters true

style width:100%; height:90%; margin:0;

JavaScript is case-sensitive. Also, verify that each opening <div> tag gets a

closing </div> tag—Aptana may not always create one for you.


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 Template.

Within the appContent <div> element:

▪ Add a second <div> element using the following attribute values:

id rightPane


region right

Note: To save time and effort, copy and paste existing code fragments, then modify the

pasted code as needed.

http://www.dojotoolkit.org/



Within the appContent <div> element:

▪ Add a third <div> element with the following attribute values:

id map


region center

style 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 98%

padding 5px

The BorderContainer requires this information to draw correctly on the page.


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.



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 Features on the button.

Above your new <button> element:

▪ Add an <input> element with the following attribute values:

id findText

type text

size 15


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.

Click the Source tab to return to your code.

8. 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 parameter—the id of the HTML element that you want

to use.



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


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.


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.


Within the appContent <div> element, and below all the ContentPane <div> elements:

▪ Add one more <div> element with the following attribute values:

id footer


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.


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.

http://trainingcloud.arcgis.com/BAAJ/styles/css/BAAJ_Clean.css



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.


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?



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");


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.



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>

</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>




<style>

html, body { height:98%; width:98%; padding:5px; }

#rightPane { width:20%; }

</style>


http://ajax.googleapis.com/ajax/libs




Lesson 1






</script>

</head>


<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





dojo.require("dijit.form.Button");

function findFeatures() {

alert("You entered: " + dojo.byId("findText").value);

}

</script>

</head>




...


<input id="findText" type="text" size="15"></input>

<button dojotype="dijit.form.Button"

onClick="findFeatures();">Find Features</button>

</div>



Step: Create additional page divisions

...

<style>



#leftPane { width:20%; }

</style>

</head>


<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>


<input id="findText" type="text" size="15"></input>

<button dojotype="dijit.form.Button"

onClick="findFeatures();">Find Features</button>

</div>



</div>

<div id="footer" dojotype="dijit.layout.ContentPane" region="bottom">

<center>Created by J. Doe</center>

</div>

</div>

</body>


Lesson 1

Step: Apply a themed style sheet





href="http://trainingcloud.arcgis.com/BAAJ/styles/css/BAAJ_Clean.css">






http://trainingcloud.arcgis.com/BAAJ/styles/css/BAAJ_Clean.css

Documents

Arcgis for Java