[Commits] r680 - in sandbox/docsrc: . tutorials
commits at geoext.org
commits at geoext.org
Tue May 12 00:29:32 CEST 2009
Author: dwins
Date: 2009-05-12 00:29:32 +0200 (Tue, 12 May 2009)
New Revision: 680
Added:
sandbox/docsrc/tutorials/control-button-tutorial.rst
sandbox/docsrc/tutorials/layertree-tutorial.rst
Modified:
sandbox/docsrc/downloads.rst
sandbox/docsrc/tutorials/index.rst
sandbox/docsrc/tutorials/mappanel-tutorial.rst
sandbox/docsrc/tutorials/quickstart.rst
Log:
link cleanup, started layertree and control button tutorials.
Modified: sandbox/docsrc/downloads.rst
===================================================================
--- sandbox/docsrc/downloads.rst 2009-05-11 14:39:51 UTC (rev 679)
+++ sandbox/docsrc/downloads.rst 2009-05-11 22:29:32 UTC (rev 680)
@@ -2,4 +2,7 @@
Download GeoExt
=================
+Since GeoExt is still in a pre-release state, no minified build is available. You can still get the development version using svn::
+ svn export http://svn.geoext.org/core/trunk/geoext/lib/ GeoExt/
+
Added: sandbox/docsrc/tutorials/control-button-tutorial.rst
===================================================================
--- sandbox/docsrc/tutorials/control-button-tutorial.rst (rev 0)
+++ sandbox/docsrc/tutorials/control-button-tutorial.rst 2009-05-11 22:29:32 UTC (rev 680)
@@ -0,0 +1,100 @@
+.. highlight:: javascript
+
+============================
+Map Tool Tutorial
+============================
+
+Okay, so now you know how to add a map to a web page and load some data into it. Your users can drag and zoom to their hearts' content. You even followed the :doc:`layertree-tutorial` so they could switch between different datasets. (You did follow that tutorial, right?) But now you want to do more than just view some pretty pictures. You want to let your users analyze data, or get more info about particular features on your map, or just draw things. Basically, you want to give them some **tools**\ .
+
+.. note:: This tutorial makes heavy use of the OpenLayers mapping library. If you're not familiar with it, you might want to take a look at the :doc:`openlayers-primer` before moving forward.
+
+OpenLayers Controls
+===================
+
+In `OpenLayers <http://openlayers.org/>`_\ , these tools for interacting with a map are called ``Controls``\ . For the purposes of this tutorial, we'll just stick to the ``Measure`` control, a handy little tool that lets you draw a line on the map and tells you its length in real-world units.
+
+.. seealso:: The OpenLayer API documentation for a comprehensive listing of standard controls.
+
+ExtJS Buttons
+=============
+
+While OpenLayers ``Control``\ s provide a number of excellent ways of interacting with maps, they have only limited support for actually manipulating the controls; ie, choosing which tool to use and providing user feedback about which tool is active. ExtJS provides a richer array of options for managing tools. Here is the idiomatic way to create an ``Ext.Button`` which activates and deactivates an OpenLayers ``Control``\ , and stays depressed while the control is active::
+
+ var control = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
+ eventListeners: {
+ measure: function(evt) {
+ alert("The measurement was " + evt.measure + evt.units);
+ }
+ }
+ });
+
+ mapPanel.map.addControl(control);
+ var button = new Ext.Button({
+ text: 'Measure Things',
+ enableToggle: true,
+ handler: function(toggled){
+ if (toggled) {
+ control.activate();
+ } else {
+ control.deactivate();
+ }
+ }
+ });
+
+The ``Button`` can be added to an ExtJS toolbar or to a panel, in whatever layout we choose. For example, you could add the button to a ``MapPanel``\ 's top toolbar::
+
+ mapPanel.getTopToolbar().addButton(button);
+
+
+There Can Be Only One
+=====================
+
+In general, when you have multiple tools associated with a map, you want to avoid having more than one tool active at the same time. It would be somewhat confusing if the user starts deleting data while he or she is trying to find the distance from one end of town to the other! Fortunately, ExtJS makes it very simple to ensure that only one toggle button from a group is toggled at a time, through the ``toggleGroup`` property of the ``Button`` object. This is a string identifying a group of buttons, only one of which can be pressed at a time. Let's extend our example from before, this time adding the option to measure area instead of length::
+
+ var length = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
+ eventListeners: {
+ measure: function(evt) {
+ alert("The length was " + evt.measure + evt.units);
+ }
+ }
+ });
+
+ var area = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
+ eventListeners: {
+ measure: function(evt) {
+ alert("The area was " + evt.measure + evt.units);
+ }
+ }
+ });
+
+ mapPanel.map.addControl(length);
+ mapPanel.map.addControl(area);
+
+ var toggleGroup = "measure controls";
+
+ var lengthButton = new Ext.Button({
+ text: 'Measure Length',
+ enableToggle: true,
+ toggleGroup: toggleGroup,
+ handler: function(toggled){
+ if (toggled) {
+ length.activate();
+ } else {
+ length.deactivate();
+ }
+ }
+ });
+
+ var area = new Ext.Button({
+ text: 'Measure Area',
+ enableToggle: true,
+ toggleGroup: toggleGroup,
+ handler: function(toggled){
+ if (toggled) {
+ area.activate();
+ } else {
+ area.deactivate();
+ }
+ }
+ });
+
Modified: sandbox/docsrc/tutorials/index.rst
===================================================================
--- sandbox/docsrc/tutorials/index.rst 2009-05-11 14:39:51 UTC (rev 679)
+++ sandbox/docsrc/tutorials/index.rst 2009-05-11 22:29:32 UTC (rev 680)
@@ -60,14 +60,23 @@
Working with OpenLayers layers and the Ext TreePanel
+.. toctree::
+ :maxdepth: 2
+ layertree-tutorial
+
+
Configuring map tools
---------------------
Working with OpenLayers Controls and Ext Button to create elements for
user interaction.
+.. toctree::
+ :maxdepth: 2
+ control-button-tutorial
+
Remote features
---------------
Added: sandbox/docsrc/tutorials/layertree-tutorial.rst
===================================================================
--- sandbox/docsrc/tutorials/layertree-tutorial.rst (rev 0)
+++ sandbox/docsrc/tutorials/layertree-tutorial.rst 2009-05-11 22:29:32 UTC (rev 680)
@@ -0,0 +1,41 @@
+============================
+Layer Tree Tutorial
+============================
+
+Often when presenting users with an interactive map, it is useful to allow them to control the visible layers. In this tutorial, we examine the use of :class:`GeoExt.tree.LayerContainer` with the stock ``Ext.tree.TreePanel`` class to accommodate toggling visibility of layers and rearranging their drawing order.
+
+.. note:: Before starting this tutorial, you should have a working :class:`GeoExt.MapPanel` in your page. The :doc:`mappanel-tutorial` will help you set one up if you don't already have one.
+
+Start With a Map
+================
+
+Let's assume you already have a :class:`GeoExt.MapPanel` on your page with some layers. In the :doc:`mappanel-tutorial`\ , we discussed how you can use the ``layers`` property of the ``MapPanel`` to add, remove, and modify the layers of the map as well as monitor the layer list for changes. This is more than sufficient to display a 'live' list of layers in an ``Ext.grid.GridPanel``\ . The :class:`GeoExt.tree.LayerContainer` is another component that can listen to changes to the map's layer list. However, rather than an independent panel, the ``LayerContainer`` is a node that must be contained in an ``Ext.tree.TreePanel`` to be displayed. Here's an example rendering a layer tree to a ``div``:
+
+ .. code-block::
+ javascript
+ :linenos:
+
+ var mapPanel = new GeoExt.MapPanel({
+ /* Your configuration here */
+ });
+
+ var layerList = new GeoExt.tree.LayerContainer({
+ text: 'All Layers',
+ layerStore: mapPanel.layers,
+ leaf: false,
+ expanded: true
+ });
+
+ var layerTree = new Ext.tree.TreePanel({
+ title: 'Map Layers',
+ renderTo: 'layerTree',
+ root: layerList
+ });
+
+``LayerContainer``\ s automatically add checkboxes that can be used to toggle the visibility of layers. You can also enable drag-n-drop layer reordering by simply setting the ``enableDD`` property of the ``TreePanel``.
+
+Filtering
+=========
+Currently, the ``LayerContainer`` automatically pulls in all layers from the store and displays those with the ``displayInLayerSwitcher`` property set to true. In the future (but before the robots take over) you will be able to filter out some layers by providing a filter function. By adding multiple named and filtered ``LayerContainer``\ s to a ``TreePanel`` you will be able to provide logical organization to your layer trees. In the meantime, you can directly instantiate :class:`GeoExt.LayerNode` to create tree nodes that can be added anywhere in a tree. Keep in mind, however, that this approach does not allow for automatic drag-n-drop support.
+
+.. seealso:: The ExtJS TreePanel `documentation <http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel>`_ and `examples <http://extjs.com/deploy/dev/examples/samples.html#sample-4>`_ for more information about customizing tree panels.
Modified: sandbox/docsrc/tutorials/mappanel-tutorial.rst
===================================================================
--- sandbox/docsrc/tutorials/mappanel-tutorial.rst 2009-05-11 14:39:51 UTC (rev 679)
+++ sandbox/docsrc/tutorials/mappanel-tutorial.rst 2009-05-11 22:29:32 UTC (rev 680)
@@ -1,5 +1,5 @@
============================
-``GeoExt.MapPanel`` Tutorial
+``MapPanel`` Tutorial
============================
The :class:`GeoExt.MapPanel` is the heart of most GeoExt applications, displaying rendered data. Leveraging the OpenLayers JavaScript mapping library, it can display rendered tiles from OWS services, perform client-side rendering in the browser, and use tiles from popular mapping services such as Google Maps or Virtual Earth. In this tutorial, we explore ways that developers can customize the MapPanel.
Modified: sandbox/docsrc/tutorials/quickstart.rst
===================================================================
--- sandbox/docsrc/tutorials/quickstart.rst 2009-05-11 14:39:51 UTC (rev 679)
+++ sandbox/docsrc/tutorials/quickstart.rst 2009-05-11 22:29:32 UTC (rev 680)
@@ -18,10 +18,14 @@
#. Download GeoExt from :doc:`/downloads`. For the purposes of this
quickstart, the development version will be fine.
-#. Download ExtJS from `the ExtJS website <http://extjs.com/products/extjs/download.php>`_.
+#. Download OpenLayers from http://openlayers.org/.
-#. Place both unpacked libraries in a directory that is published by your web server.
+ .. note:: OpenLayers has not been released yet. Just use the unstable development version (link directly to http://openlayers.org/dev/OpenLayers.js)
+#. Download ExtJS 2.2 from `the ExtJS website <http://extjs.com/products/extjs/download.php>`_.
+
+#. Place both unpacked libraries in a directory that is published by your web server. For this tutorial, I will assume that this is the root of your web server, so that GeoExt.js is at http://localhost/GeoExt/lib/GeoExt.js and ext-all.js is at http://localhost/ext-2.2/ext-all.js
+
#. Now you're ready to use GeoExt in your application!
.. note:: For production environments, the GeoExt team recommends that
@@ -44,12 +48,12 @@
.. 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>
+ <script src="ext-2.2/adapter/ext/ext-base.js" type="text/javascript"></script>
+ <script src="ext-2.2/ext-all.js" type="text/javascript"></script>
+ <link rel="stylesheet" type="text/css" href="ext-2.2/resources/ext-all.css"></link>
+ <script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
+ <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
+ <link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.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
@@ -87,13 +91,14 @@
<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 src="ext-2.2/adapter/ext/ext-base.js" type="text/javascript"></script>
+ <script src="ext-2.2/ext-all.js" type="text/javascript"></script>
+ <link rel="stylesheet" type="text/css" href="ext-2.2/resources/ext-all.css"></link>
+ <script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
+ <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
+ <link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link>
<script type="text/javascript">
Ext.onReady(function() {
More information about the Commits
mailing list