Arcgis for Java
description
Transcript of 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
Building Web Applications Using the ArcGIS API for JavaScript i-2 Copyright © 2011 Esri. All rights reserved.
Welcome to Esri Training
Logistics
Daily schedule
Cell phones/messages
Class environment
Introductions
Name
Organization
Course expectations
5/23/2012
Copyright 2009 ESRI. All rights reserved. 2
Building Web Applications Using the ArcGIS API for JavaScript i-4 Copyright © 2011 Esri. All rights reserved.
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
Building Web Applications Using the ArcGIS API for JavaScript i-5 Copyright © 2011 Esri. All rights reserved.
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
Copyright 2009 ESRI. All rights reserved. 3
Building Web Applications Using the ArcGIS API for JavaScript i-6 Copyright © 2011 Esri. All rights reserved.
ArcGIS Desktop
Use
Author
Serve
Desktop
Rich clients
ArcGIS Explorer
Mobile
Open standards
Enterprise integration
Building Web Applications Using the ArcGIS API for JavaScript i-7 Copyright © 2011 Esri. All rights reserved.
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
Copyright 2009 ESRI. All rights reserved. 4
Building Web Applications Using the ArcGIS API for JavaScript i-8 Copyright © 2011 Esri. All rights reserved.
ArcGIS for developers
ArcGIS Desktop/ ArcGIS Engine
.NET, Java, C++
Web applications
Mobile
Windows Mobile, Windows, iOS
SharePoint
Building Web Applications Using the ArcGIS API for JavaScript i-9 Copyright © 2011 Esri. All rights reserved.
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
Copyright 2009 ESRI. All rights reserved. 5
Building Web Applications Using the ArcGIS API for JavaScript i-10 Copyright © 2011 Esri. All rights reserved.
Course introduction
Building Web Applications Using the ArcGIS API for JavaScript i-11 Copyright © 2011 Esri. All rights reserved.
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
Copyright 2009 ESRI. All rights reserved. 6
Building Web Applications Using the ArcGIS API for JavaScript i-12 Copyright © 2011 Esri. All rights reserved.
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
Building Web Applications Using the ArcGIS API for JavaScript i-13 Copyright © 2011 Esri. All rights reserved.
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
Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-2
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
Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-3
What will I build in this course?
?
A
Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-4
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
Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-5
JavaScript
application
Creating a JavaScript application
Text editor
<html>
</html>
<script>
</script>
MyApp.html
…
.html
.css
.js
Deploy to
web server
D
Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-6
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
Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-7
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
Building Web Applications Using the ArcGIS API for JavaScript Copyright © 2011 Esri. All rights reserved. 1-8
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.
1-4 Copyright © 2011 Esri
Building JavaScript applications
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)
Copyright © 2011 Esri -5
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)
1-6 Copyright © 2011 Esri
Building JavaScript applications
Aptana: Overview
Copyright © 2011 Esri -7
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.
1-8 Copyright © 2011 Esri
Building JavaScript applications
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.
Copyright © 2011 Esri -9
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.
1-10 Copyright © 2011 Esri
Building JavaScript applications
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.
Copyright © 2011 Esri -11
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");
1-12 Copyright © 2011 Esri
Building JavaScript applications
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.
Copyright © 2011 Esri -13
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
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.
1-14 Copyright © 2011 Esri
Building JavaScript applications
Within the appContent <div> element:
▪ Add a third <div> element with the following attribute values:
id map
dojotype dijit.layout.ContentPane
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.
Copyright © 2011 Esri -15
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.
1-16 Copyright © 2011 Esri
Building JavaScript applications
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
Copyright © 2011 Esri -17
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.
1-18 Copyright © 2011 Esri
Building JavaScript applications
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.
Copyright © 2011 Esri -19
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.
1-20 Copyright © 2011 Esri
Building JavaScript applications
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.
Copyright © 2011 Esri -21
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?
1-22 Copyright © 2011 Esri
Building 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 <!-- and --> 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");
Copyright © 2011 Esri -23
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.
1-24 Copyright © 2011 Esri
Building JavaScript applications
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>
Copyright © 2011 Esri -25
Lesson 1
<!-- Requires and Functions -->
<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
<!-- Requires and Functions -->
<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>
1-26 Copyright © 2011 Esri
Building JavaScript applications
<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>
Copyright © 2011 Esri -27
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">
<!--<style>
html, body { height:98%; width:98%; padding:5px; }
#rightPane { width:20%; }
#leftPane { width:20%; }
</style>-->
<!-- Requires and Functions -->
<script type="text/javascript">