quickstart.html @ 81

Revision 76, 17.2 KB checked in by djay, 13 years ago (diff)
Ajout du répertoire web
Property svn:executable set to ``*

Line
1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4	<html xmlns="http://www.w3.org/1999/xhtml">
5	<head>
6	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
8	<title>GeoExt QuickStart — GeoExt v1.0</title>
9	<link rel="stylesheet" href="../_static/geoext.css" type="text/css" />
10	<link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
11	<script type="text/javascript">
12	var DOCUMENTATION_OPTIONS = {
13	URL_ROOT: '../',
14	VERSION: '1.0',
15	COLLAPSE_MODINDEX: false,
16	FILE_SUFFIX: '.html',
17	HAS_SOURCE: true
18	};
19	</script>
20	<script type="text/javascript" src="../_static/jquery.js"></script>
21	<script type="text/javascript" src="../_static/doctools.js"></script>
22	<link rel="shortcut icon" href="../_static/favicon.ico"/>
23	<link rel="top" title="GeoExt v1.0" href="../index.html" />
24	<link rel="up" title="Tutorials" href="index.html" />
25	<link rel="next" title="MapPanel Tutorial" href="mappanel-tutorial.html" />
26	<link rel="prev" title="Tutorials" href="index.html" />
27
28
29
30
31
32
33	</head>
34	<body>
35	<div class="header">
36	<div class="wrap">
37	<h1 id="logo"><a href="../index.html">GeoExt</a></h1>
38	<ul id="top-nav">
39	<li class="first"><a href="../docs.html">Documentation</a></li>
40	<li><a href="../examples.html">Examples</a></li>
41	<li><a href="../downloads.html">Download</a></li>
42	<li><a href="http://trac.geoext.org/">Development</a></li>
43	</ul>
44	<div id="searchbox">
45	<form class="search" action="../search.html" method="get">
46	<input id="searchbox-query" type="text" name="q" size="25" value="Search …" tabindex="3" onblur="if(this.value=='') this.value='Search …';" onfocus="if(this.value=='Search …') this.value='';" />
47	<input id="searchbox-submit" type="image" value="Search" src="../_static/img/search_icon_green.png" />
48	<input type="hidden" name="check_keywords" value="yes" />
49	<input type="hidden" name="area" value="default" />
50	</form>
51	</div>
52	</div>
53	</div>
54
55	<div class="related">
56	<h3>Navigation</h3>
57	<ul>
58	<li><a href="../index.html">GeoExt</a> »</li>
59	<li><a href="index.html" accesskey="U">Tutorials</a> »</li>
60	<li><a href="#">GeoExt QuickStart</a></li>
61	</ul>
62	</div>
63
64	<div class="sphinxsidebar">
65	<div class="sphinxsidebarwrapper">
66	<h3><a href="../index.html">Table Of Contents</a></h3>
67	<ul>
68	<li><a class="reference external" href="#">GeoExt QuickStart</a><ul>
69	<li><a class="reference external" href="#getting-geoext">Getting GeoExt</a></li>
70	<li><a class="reference external" href="#basic-example">Basic Example</a></li>
71	<li><a class="reference external" href="#going-further">Going Further</a></li>
72	</ul>
73	</li>
74	</ul>
75
76	<h4>Previous topic</h4>
77	<p class="topless"><a href="index.html"
78	title="previous chapter">Tutorials</a></p>
79	<h4>Next topic</h4>
80	<p class="topless"><a href="mappanel-tutorial.html"
81	title="next chapter"><tt class="docutils literal docutils literal docutils literal"><span class="pre">MapPanel</span></tt> Tutorial</a></p>
82	</div>
83	</div>
84
85
86	<div class="document">
87	<div class="documentwrapper">
88	<div class="bodywrapper">
89	<div class="body">
90
91	<div class="section" id="geoext-quickstart">
92	<h1>GeoExt QuickStart<a class="headerlink" href="#geoext-quickstart" title="Permalink to this headline">Â¶</a></h1>
93	<p>Welcome to GeoExt! This document is intended to help you get started
94	with GeoExt. With GeoExt, you can start from nothing and have a rich
95	mapping application in seconds.</p>
96	<div class="section" id="getting-geoext">
97	<h2>Getting GeoExt<a class="headerlink" href="#getting-geoext" title="Permalink to this headline">Â¶</a></h2>
98	<p>GeoExt is built on top of the robust OpenLayers JavaScript mapping
99	library and the rich graphical components of ExtJS. For licensing
100	reasons, ExtJS cannot be included in the GeoExt download, so preparing
101	GeoExt for use on your own web pages is a multi-step process:</p>
102	<ol class="arabic simple">
103	<li>Download GeoExt from the <a class="reference external" href="../downloads.html"><em>downloads page</em></a>. For the purposes
104	of this quickstart, the development version will be fine.</li>
105	<li>Download OpenLayers 2.10 or later from <a class="reference external" href="http://openlayers.org/">http://openlayers.org/</a>.</li>
106	<li>Download ExtJS 3.2 from <a class="reference external" href="http://www.sencha.com/products/js/download.php">the ExtJS website</a>.</li>
107	<li>Place both unpacked libraries in a directory that is published by your web
108	server. For this tutorial, I will assume that this is the root of your web
109	server, so that GeoExt.js is at <a class="reference external" href="http://localhost/GeoExt/lib/GeoExt.js">http://localhost/GeoExt/lib/GeoExt.js</a> and
110	ext-all.js is at <a class="reference external" href="http://localhost/ext-3.2.1/ext-all.js">http://localhost/ext-3.2.1/ext-all.js</a></li>
111	<li>Now you’re ready to use GeoExt in your application!</li>
112	</ol>
113	<div class="admonition note">
114	<p class="first admonition-title">Note</p>
115	<p class="last">For production environments, the GeoExt team recommends that
116	you use compressed and minified builds of GeoExt and ExtJS to
117	optimize the download size of your page. A generic minified build
118	containing all of GeoExt is available from the
119	<a class="reference external" href="../downloads.html"><em>downloads page</em></a>, but advanced users can build their
120	own.</p>
121	</div>
122	</div>
123	<div class="section" id="basic-example">
124	<h2>Basic Example<a class="headerlink" href="#basic-example" title="Permalink to this headline">Â¶</a></h2>
125	<p>Let’s build a simple web page that just embeds a map with interactive
126	navigation.</p>
127	<ol class="arabic">
128	<li><p class="first">Include the ExtJS libraries in your web page.</p>
129	<div class="highlight-html"><div class="highlight"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"ext-3.2.1/adapter/ext/ext-base.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
130	<span class="nt"><script </span><span class="na">src=</span><span class="s">"ext-3.2.1/ext-all.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
131	<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"ext-3.2.1/resources/ext-all.css"</span><span class="nt">></link></span>
132	<span class="nt"><script </span><span class="na">src=</span><span class="s">"OpenLayers/OpenLayers.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
133	<span class="nt"><script </span><span class="na">src=</span><span class="s">"GeoExt/lib/GeoExt.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
134	<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"GeoExt/resources/geoext-all-debug.css"</span><span class="nt">></link></span>
135	</pre></div>
136	</div>
137	</li>
138	<li><p class="first">Create a <tt class="docutils literal"><span class="pre"><div></span></tt> element in your web page with its <tt class="docutils literal"><span class="pre">id</span></tt>
139	attribute set to <tt class="docutils literal"><span class="pre">gxmap</span></tt>. We will use the <tt class="docutils literal"><span class="pre">id</span></tt> to attach a
140	GeoExt component to the <tt class="docutils literal"><span class="pre">div</span></tt>.</p>
141	</li>
142	<li><p class="first">Attach a <tt class="docutils literal"><span class="pre">MapPanel</span></tt> object to the <tt class="docutils literal"><span class="pre">div</span></tt> with some JavaScript code:</p>
143	<div class="highlight-html"><div class="highlight"><pre><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
144	<span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
145	<span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Map</span><span class="p">();</span>
146	<span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Layer</span><span class="p">.</span><span class="nx">WMS</span><span class="p">(</span>
147	<span class="s2">"Global Imagery"</span><span class="p">,</span>
148	<span class="s2">"http://maps.opengeo.org/geowebcache/service/wms"</span><span class="p">,</span>
149	<span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">"bluemarble"</span><span class="p">}</span>
150	<span class="p">);</span>
151	<span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">layer</span><span class="p">);</span>
152
153	<span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
154	<span class="nx">renderTo</span><span class="o">:</span> <span class="s1">'gxmap'</span><span class="p">,</span>
155	<span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
156	<span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
157	<span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
158	<span class="nx">title</span><span class="o">:</span> <span class="s1">'A Simple GeoExt Map'</span>
159	<span class="p">});</span>
160	<span class="p">});</span>
161	<span class="nt"></script></span>
162	</pre></div>
163	</div>
164	</li>
165	</ol>
166	<p>The entire source of your page should look something like:</p>
167	<div class="highlight-html"><div class="highlight"><pre><span class="nt"><html></span>
168	<span class="nt"><head></span>
169
170	<span class="nt"><title></span> A Basic GeoExt Page <span class="nt"></title></span>
171	<span class="nt"><script </span><span class="na">src=</span><span class="s">"ext-3.2.1/adapter/ext/ext-base.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
172	<span class="nt"><script </span><span class="na">src=</span><span class="s">"ext-3.2.1/ext-all.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
173	<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"ext-3.2.1/resources/ext-all.css"</span><span class="nt">></link></span>
174	<span class="nt"><script </span><span class="na">src=</span><span class="s">"OpenLayers/OpenLayers.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
175	<span class="nt"><script </span><span class="na">src=</span><span class="s">"GeoExt/lib/GeoExt.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
176	<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"GeoExt/resources/geoext-all-debug.css"</span><span class="nt">></link></span>
177
178	<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
179	<span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
180	<span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Map</span><span class="p">();</span>
181	<span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Layer</span><span class="p">.</span><span class="nx">WMS</span><span class="p">(</span>
182	<span class="s2">"Global Imagery"</span><span class="p">,</span>
183	<span class="s2">"http://maps.opengeo.org/geowebcache/service/wms"</span><span class="p">,</span>
184	<span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">"bluemarble"</span><span class="p">}</span>
185	<span class="p">);</span>
186	<span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">layer</span><span class="p">);</span>
187
188	<span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
189	<span class="nx">renderTo</span><span class="o">:</span> <span class="s1">'gxmap'</span><span class="p">,</span>
190	<span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
191	<span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
192	<span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
193	<span class="nx">title</span><span class="o">:</span> <span class="s1">'A Simple GeoExt Map'</span>
194	<span class="p">});</span>
195	<span class="p">});</span>
196	<span class="nt"></script></span>
197	<span class="nt"></head></span>
198	<span class="nt"><body></span>
199	<span class="nt"><div</span> <span class="na">id=</span><span class="s">"gxmap"</span><span class="nt">></div></span>
200	<span class="nt"></body></span>
201	<span class="nt"></html></span>
202	</pre></div>
203	</div>
204	<p>And that’s it! You now have all of GeoExt, ready to bring your geospatial data
205	to life. Go forth and prosper!</p>
206	</div>
207	<div class="section" id="going-further">
208	<h2>Going Further<a class="headerlink" href="#going-further" title="Permalink to this headline">Â¶</a></h2>
209	<p>From here, there are a wide variety of options available for making
210	customized, highly interactive mapping applications with GeoExt. To
211	learn more take a look at <a class="reference external" href="index.html"><em>Tutorials</em></a>, <a class="reference external" href="../examples.html#examples"><em>examples</em></a> and
212	<a class="reference external" href="../lib/index.html"><em>API Reference</em></a>.</p>
213	<p>We also recommend reading <a class="reference external" href="../primers/ext-primer.html"><em>Primer: Ext</em></a> and
214	<a class="reference external" href="../primers/openlayers-primer.html"><em>Primer: OpenLayers</em></a> to become acquainted with the libraries that
215	form the foundation of GeoExt.</p>
216	</div>
217	</div>
218
219
220	</div>
221	</div>
222	</div>
223	<div class="clearer"></div>
224	</div>
225	<div class="related">
226	<h3>Navigation</h3>
227	<ul>
228	<li class="right" style="margin-right: 10px">
229	<a href="../genindex.html" title="General Index"
230	accesskey="I">index</a></li>
231	<li class="right" >
232	<a href="../modindex.html" title="Global Module Index"
233	accesskey="M">modules</a> \|</li>
234	<li class="right" >
235	<a href="mappanel-tutorial.html" title="MapPanel Tutorial"
236	accesskey="N">next</a> \|</li>
237	<li class="right" >
238	<a href="index.html" title="Tutorials"
239	accesskey="P">previous</a> \|</li>
240	<li><a href="../index.html">GeoExt</a> »</li>
241	<li><a href="index.html" >Tutorials</a> »</li>
242	<li><a href="#">GeoExt QuickStart</a></li>
243	</ul>
244	</div>
245
246	<div class="footer">
247	© Copyright 2009-2010, GeoExt Community.
248	</div>
249	</body>
250	</html>

Note: See TracBrowser for help on using the repository browser.

PostGIS.fr

Bienvenue sur PostGIS.fr

source: trunk/workshop-routing-foss4g/web/GeoExt/docs/tutorials/quickstart.html @ 81

Download in other formats: