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

Rev	Line
[76]	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: