[Commits] r619 - sandbox/docsrc/tutorials

[commits at geoext.org]

Author: dwins
Date: 2009-05-07 00:16:02 +0200 (Thu, 07 May 2009)
New Revision: 619

Modified:
   sandbox/docsrc/tutorials/index.rst
   sandbox/docsrc/tutorials/quickstart.rst
Log:
First stab at quickstart content.


Modified: sandbox/docsrc/tutorials/index.rst
===================================================================
--- sandbox/docsrc/tutorials/index.rst	2009-05-06 22:12:20 UTC (rev 618)
+++ sandbox/docsrc/tutorials/index.rst	2009-05-06 22:16:02 UTC (rev 619)
@@ -1,17 +1,13 @@
 ===========
  Tutorials
 ===========
+GeoExt tutorials show the library in action.  Basic tutorials help new developers get up and running quickly, while the advanced section includes how-to's on more sophisticated setups.
 
-[expository intro to tutorials]
- 
-
 QuickStart
 ==========
+From zero to rich mapping application in 5 minutes!
 
-Jump in the deepend with GeoExt
-
 .. toctree::
-    :hidden:
 
     quickstart
  
@@ -99,4 +95,4 @@
 -------------
 
 - appearance and interaction
-- Extending GeoExt: (working with the framework)
\ No newline at end of file
+- Extending GeoExt: (working with the framework)

Modified: sandbox/docsrc/tutorials/quickstart.rst
===================================================================
--- sandbox/docsrc/tutorials/quickstart.rst	2009-05-06 22:12:20 UTC (rev 618)
+++ sandbox/docsrc/tutorials/quickstart.rst	2009-05-06 22:16:02 UTC (rev 619)
@@ -2,5 +2,109 @@
  GeoExt QuickStart
 ===================
 
-all you need to know to start making a GeoExt application
+Welcome to GeoExt!  This document is intended to help you get started with 
+GeoExt.  With GeoExt, you can start from nothing and have a rich mapping application in seconds.
 
+Getting GeoExt
+==============
+
+GeoExt is built on top of the robust OpenLayers JavaScript mapping library and the rich graphical components of ExtJS.
+For licensing reasons, ExtJS cannot be included in the GeoExt download, so preparing GeoExt for use on your own web pages is a multi-step process:
+
+#. Download GeoExt from </download/index.html>.  For the purposes of this quickstart, the development version will be fine.
+#. Download ExtJS from <http://extjs.com/products/extjs/download.php>.
+#. Place both unpacked libraries in a directory that is published by your webserver.
+#. Now you're ready to use GeoExt in your application!
+
+.. note:: For production environments, the GeoExt team recommends that you use compressed and minified builds of GeoExt and ExtJS to optimize the download size of your page.  A generic minified build containing all of GeoExt is available from </download/index.html#minified>, but advanced users can build their own, further ``optimized_builds``.
+
+Using GeoExt
+============
+As a simple first mapping application, let's build a simple web page that just embeds a map with interactive navigation.
+
+#. Include the ExtJS libraries in your web page.
+
+.. code-block::
+   xml
+
+   <script src="ext/base.js" type="text/javascript"></script>
+   <script src="ext/ext.js"  type="text/javascript"></script>
+   <link rel="stylesheet" type="text/css" href="ext/ext.css"></link>
+   <script src="geoext/GeoExt.js" type="text/javascript"></script>
+   <link rel="stylesheet" type="text/css" href="openlayers/openlayers.css"></link>
+   <link rel="stylesheet" type="text/css" href="geoext/geoext.css"></link>
+
+#. Create a ``<div>`` element in your web page with its ``id`` attribute set to ``gxmap``.  We will use the ``id`` to attach a GeoExt component to the ``div``.
+
+#. Attach a ``MapPanel`` object to the ``div`` with some JavaScript code.
+
+.. code-block::
+   html 
+
+   <script type="text/javascript">
+       Ext.onReady(function() {
+           var map = new OpenLayers.Map();
+           var layer = new OpenLayers.Layer.WMS(
+               "Blue Marble",
+               "http://sigma.openplans.org/geoserver/wms?",
+               {layers: "bluemarble"}
+           );
+           map.addLayer(layer);
+
+           new GeoExt.MapPanel({
+               renderTo: 'gxmap',
+               height: 400,
+               width: 600,
+               map: map,
+               title: 'A Simple GeoExt Map'
+           });
+       });
+   </script>
+
+The entire source of your page should look something like:
+
+.. code-block::
+   html
+
+   <html>
+   <head>
+   <title> A Basic GeoExt Page </title>
+   <script src="ext/base.js" type="text/javascript"></script>
+   <script src="ext/ext.js"  type="text/javascript"></script>
+   <link rel="stylesheet" type="text/css" href="ext/ext.css"></link>
+   <script src="geoext/GeoExt.js" type="text/javascript"></script>
+   <link rel="stylesheet" type="text/css" href="openlayers/openlayers.css"></link>
+   <link rel="stylesheet" type="text/css" href="geoext/geoext.css"></link>
+
+   <script type="text/javascript">
+       Ext.onReady(function() {
+           var map = new OpenLayers.Map();
+           var layer = new OpenLayers.Layer.WMS(
+               "Blue Marble",
+               "http://sigma.openplans.org/geoserver/wms?",
+               {layers: "bluemarble"}
+           );
+           map.addLayer(layer);
+
+           new GeoExt.MapPanel({
+               renderTo: 'gxmap',
+               height: 400,
+               width: 600,
+               map: map,
+               title: 'A Simple GeoExt Map'
+           });
+       });
+   </script>
+   </head>
+   <body>
+   <div id="gxmap"></div>
+   </body>
+   </html>
+
+Making GeoExt Your Own
+======================
+
+From here, there are a wide variety of options available for making customized, highly interactive mapping applications with GeoExt.
+You can look at :ref:`tutorials`, :ref:`examples` and :ref:`api_docs` to learn more about GeoExt.
+We also recommend reading :ref:`ext_primer` and :ref:`ol_primer` to become acquainted with the libraries that form the foundation of GeoExt.
+