Changeset 3671

Timestamp:

12/01/10 15:26:35 (3 years ago)

Author:

cmoullet

Message:

Add content for Introduction and Map Fish? part

Location:

sandbox/cmoullet/2010_mapfish_workshop_fhnw

Files:

• build/doctrees/environment.pickle (modified) (previous)
• build/doctrees/getting_started.doctree (added)
• build/doctrees/introduction.doctree (modified) (previous)
• build/doctrees/mapfish.doctree (modified) (previous)
• build/html/_downloads (added)
• build/html/_downloads/extjs_hello_world.html (added)
• build/html/_downloads/extjs_viewport.html (added)
• build/html/_downloads/geoext_action.html (added)
• build/html/_downloads/geoext_mappanel.html (added)
• build/html/_downloads/openlayers_editing_toolbar.html (added)
• build/html/_downloads/openlayers_map.html (added)
• build/html/_images (added)
• build/html/_images/mapfish_globe.png (added)
• build/html/_images/mapfish_swissrivers.png (added)
• build/html/_sources/getting_started.txt (added)
• build/html/_sources/introduction.txt (modified) (1 diff)
• build/html/_sources/mapfish.txt (modified) (1 diff)
• build/html/_static/extjs_hello_world.html (added)
• build/html/_static/extjs_viewport.html (added)
• build/html/_static/geoext_action.html (added)
• build/html/_static/geoext_mappanel.html (added)
• build/html/_static/mapfish_globe.png (added)
• build/html/_static/mapfish_swissrivers.png (added)
• build/html/_static/openlayers_editing_toolbar.html (added)
• build/html/_static/openlayers_map.html (added)
• build/html/getting_started.html (added)
• build/html/index.html (modified) (1 diff)
• build/html/introduction.html (modified) (5 diffs)
• build/html/mapfish.html (modified) (5 diffs)
• build/html/objects.inv (modified) (previous)
• build/html/searchindex.js (modified) (1 diff)
• source/_static/extjs_hello_world.html (added)
• source/_static/extjs_viewport.html (added)
• source/_static/geoext_action.html (added)
• source/_static/geoext_mappanel.html (added)
• source/_static/mapfish_globe.png (added)
• source/_static/mapfish_swissrivers.png (added)
• source/_static/openlayers_editing_toolbar.html (added)
• source/_static/openlayers_map.html (added)
• source/getting_started.rst (added)
• source/introduction.rst (modified) (2 diffs)
• source/mapfish.rst (modified) (1 diff)

sandbox/cmoullet/2010_mapfish_workshop_fhnw/build/html/_sources/introduction.txt

@@ -1 +1 @@
 Introduction
 ************
+
+.. raw:: html
+
+   <script language=javascript type='text/javascript'>
+
+   function hidediv(div, showDiv, hideDiv) {
+      document.getElementById(div).style.visibility = 'hidden';
+      document.getElementById(div).style.display = 'none';
+      document.getElementById(hideDiv).style.visibility = 'hidden';
+      document.getElementById(hideDiv).style.display = 'none';
+      document.getElementById(showDiv).style.visibility = 'visible';
+      document.getElementById(showDiv).style.display = 'block';
+   }
+
+   function showdiv(div, showDiv, hideDiv) {
+      document.getElementById(div).style.visibility = 'visible';
+      document.getElementById(div).style.display = 'block';
+      document.getElementById(showDiv).style.visibility = 'hidden';
+      document.getElementById(showDiv).style.display = 'none';
+      document.getElementById(hideDiv).style.visibility = 'visible';
+      document.getElementById(hideDiv).style.display = 'block';
+   }
+   </script>
+
+
+Computer Setup
+--------------
+
+Several pieces of software have been installed on your computer:
+
+ * PostGres / PostGIS
+ * Ultraedit
+ * `Python 2.5 <http://www.python.org/download/releases/2.5.4/>`_
+ * `Python for Windows extensions <http://sourceforge.net/projects/pywin32/>`_
+
+MapFish Framework
+-----------------
+
+What is a framework ?
+^^^^^^^^^^^^^^^^^^^^^
+
+MapFish is a flexible and complete framework for building rich web-mapping
+applications. It emphasizes high productivity, and high-quality development.
+But, what is a framework ? From `wikipedia <http://en.wikipedia.org/wiki/Framework>`_ :
+"A framework is a basic conceptual structure used to solve or address complex issues.".
+The framework aims to alleviate the overhead associated with common activities performed in Web mapping development.
+
+In that sense, MapFish Framework provides the technology for building web mapping applications.
+With client technologies, the developer can create user interfaces and with server technologies, it is possible to develop the necessary web services.
+
+On the client side, JavaScript libraries are mainly used, on the server side, several languages can be used.
+Originally, Python components were used, but with the time, Java, Ruby and PHP components have also been developped.
+This shows the flexibility and openness of the framework.
+
+.. note::
+
+   MapFish is cartographic server agnostic. It can be used with `MapServer <http://www.mapserver.org>`_, `GeoServer <http://www.geoserver.org>`_, `MapGuide <http://www.mapguide.org>`_
+   or whatever cartographic server that is able to communicate with open protocols like WMS or WFS.
+
+Components of MapFish framework
+:::::::::::::::::::::::::::::::
+
+Several Open Source technologies are used in MapFish Framework.
+
+Client side:
+
+ * `GeoExt <http://www.geoext.org>`_: GeoExt is a JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and ExtJS.
+ * `OpenLayers <http://www.openlayers.org>`_: OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source.
+ * `ExtJS <http://extjs.com/>`_: Ext JS is a cross-browser JavaScript library for building rich internet applications.
+
+Server side:
+
+ * `Shapely <http://pypi.python.org/pypi/Shapely>`_: Shapely is a Python package for manipulation and analysis of 2D geospatial geometries.
+ * `SqlAlchemy <http://www.sqlalchemy.org/>`_: SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.
+ * `GeoAlchemy <http://www.geoalchemy.org/>`_: GeoAlchemy is an extension of SQLAlchemy allowing the access to Oracle Spatial, PostGis and MySQL.
+ * `Pylons <http://pylonshq.com/>`_: Pylons is a lightweight web framework emphasizing flexibility and rapid development.
+
+MapFish Examples
+----------------
+
+MapFish JavaScript Toolbox
+^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+MapFish JavaScript Toolbox is composed of three JavaScript libraries: ExtJS, OpenLayers and GeoExt. The functionality of all these libraries will be highlighted with some example code.
+
+.. _mapfish_client_extjs:
+
+ExtJS
+^^^^^
+
+Ext JS is a cross-browser JavaScript library for building rich internet applications. It provides a `very large list of UI components <http://www.extjs.com/deploy/dev/examples/samples.html>`_.
+
+.. note::
+
+   In order to play with ExtJS, it is needed to reference the ExtJS library and the associated css. For simplicity, we have prepared an accessible build with `CacheFly <http://extjs.com/products/extjs/build/index.php>`_.
+
+   Then, simply add the following code in the html page:
+
+   <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+
+   <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+
+Ext "Hello World"
+:::::::::::::::::
+
+Create your own html page with the following code :download:`extjs_hello_world.html <_static/extjs_hello_world.html>`.
+If you open it in a browser, you should get a message "Hello World!  You have ExtJS configured correctly!"
+
+.. raw:: html
+
+    <a id="showRef2" href="javascript:showdiv('codeBlock2','showRef2','hideRef2')">Show code</a>
+    <a id="hideRef2" href="javascript:hidediv('codeBlock2','showRef2','hideRef2')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock2" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+  <html>
+     <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+        <title id='title'>ExtJS Hello World</title>
+
+        <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+
+        <script type="text/javascript">
+        Ext.onReady(function(){
+           alert("Hello World!  You have ExtJS configured correctly!");
+        }); //end onReady
+        </script>
+
+     </head>
+     <body>
+     </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+Ext.Viewport
+::::::::::::
+
+The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Let's have a look at the configuration of a `viewport <http://www.extjs.com/deploy/dev/docs/?class=Ext.Viewport>`_:
+
+To test: :download:`extjs_viewport.html <_static/extjs_viewport.html>`
+
+.. raw:: html
+
+    <a id="showRef3" href="javascript:showdiv('codeBlock3','showRef3','hideRef3')">Show code</a>
+    <a id="hideRef3" href="javascript:hidediv('codeBlock3','showRef3','hideRef3')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock3" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+  <html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
+    <title id='title'>ExtJS Viewport</title>
+
+    <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css"/>
+
+    <script type="text/javascript">
+        Ext.onReady(function() {
+            new Ext.Viewport({
+                layout: 'border',
+                items: [
+                    {
+                        region: 'north',
+                        html: '<h1 class="x-panel-header">Page Title</h1>',
+                        autoHeight: true,
+                        border: false,
+                        margins: '0 0 5 0'
+                    },
+                    {
+                        region: 'west',
+                        collapsible: true,
+                        title: 'Navigation',
+                        xtype: 'treepanel',
+                        width: 200,
+                        autoScroll: true,
+                        split: true,
+                        loader: new Ext.tree.TreeLoader(),
+                        root: new Ext.tree.AsyncTreeNode({
+                            expanded: true,
+                            children: [
+                                {
+                                    text: 'Menu Option 1',
+                                    leaf: true
+                                },
+                                {
+                                    text: 'Menu Option 2',
+                                    leaf: true
+                                },
+                                {
+                                    text: 'Menu Option 3',
+                                    leaf: true
+                                }
+                            ]
+                        }),
+                        rootVisible: false,
+                        listeners: {
+                            click: function(n) {
+                                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
+                            }
+                        }
+                    },
+                    {
+                        region: 'center',
+                        xtype: 'tabpanel',
+                        items: {
+                            title: 'Default Tab',
+                            html: 'The first tab\'s content. Others may be added dynamically'
+                        }
+                    },
+                    {
+                        region: 'south',
+                        title: 'Information',
+                        collapsible: true,
+                        html: 'Information goes here',
+                        split: true,
+                        height: 100,
+                        minHeight: 100
+                    }
+                ]
+            });
+        }); //end onReady
+    </script>
+
+  </head>
+  <body>
+  </body>
+  </html>
+
+.. raw:: html
+
+   </div>
+
+Ext.grid.GridPanel
+::::::::::::::::::
+
+`Globe application <http://map.globe.admin.ch>`_ uses a `grid panel <http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel>`_:
+
+ .. image:: _static/mapfish_globe.png
+
+.. _mapfish_client_openlayers:
+
+OpenLayers
+^^^^^^^^^^
+
+OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source.
+
+Have a look at the `OpenLayers examples <http://openlayers.org/dev/examples/>`_ to see the power of this library.
+
+.. note::
+
+   In order to play with OpenLayers, it is needed to reference the OpenLayers library.
+
+   Simply add the following code in the html page:
+
+   <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+
+Map
+:::
+
+Instances of `OpenLayers.Map <http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Map-js.html>`_ are interactive maps embedded in a web page.
+
+To test: :download:`openlayers_map.html <_static/openlayers_map.html>`
+
+.. raw:: html
+
+    <a id="showRef4" href="javascript:showdiv('codeBlock4','showRef4','hideRef4')">Show code</a>
+    <a id="hideRef4" href="javascript:hidediv('codeBlock4','showRef4','hideRef4')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock4" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html>
+   <head>
+      <title>OpenLayers Map</title>
+
+      <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+
+      <script type="text/javascript">
+         var map, layer;
+         function init() {
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                    );
+            map.addLayer(layer);
+            map.zoomToMaxExtent();
+         }
+      </script>
+   </head>
+
+   <body onload="init()">
+
+   <div id="map"></div>
+
+   </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+Editing Toolbar
+:::::::::::::::
+
+`Editing Toolbar <http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/_staticOpenLayers/Control/EditingToolbar-js.html>`_
+
+To test: :download:`openlayers_editing_toolbar.html <_static/openlayers_editing_toolbar.html>`
+
+.. raw:: html
+
+    <a id="showRef5" href="javascript:showdiv('codeBlock5','showRef5','hideRef5')">Show code</a>
+    <a id="hideRef5" href="javascript:hidediv('codeBlock5','showRef5','hideRef5')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock5" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+    <title>OpenLayers Editing Toolbar </title>
+
+    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+
+    <script type="text/javascript">
+        var lon = 5;
+        var lat = 40;
+        var zoom = 5;
+        var map, layer;
+
+        function init() {
+            layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                    );
+
+            vlayer = new OpenLayers.Layer.Vector("Editable");
+            map = new OpenLayers.Map('map', {
+                controls: [
+                    new OpenLayers.Control.PanZoom(),
+                    new OpenLayers.Control.EditingToolbar(vlayer)
+                ]
+            });
+            map.addLayers([layer, vlayer]);
+
+            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+        }
+    </script>
+   </head>
+   <body onload="init()">
+   <div id="map"></div>
+   </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+Popup
+:::::
+
+`Swissrivers.ch application <http://www.swissrivers.ch>`_ uses `OpenLayers popups <http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Popup-js.html>`_ to present hydrogramms.
+
+ .. image:: _static/mapfish_swissrivers.png
+
+.. _mapfish_client_geoext:
+
+GeoExt
+^^^^^^
+
+GeoExt is a JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and ExtJS.
+
+Have a look at the `GeoExt examples <http://dev.geoext.org/trunk/geoext/examples/>`_ to see the power of this library.
+
+.. note::
+
+   In order to play with GeoExt, it is needed to reference the OpenLayers, ExtJS and GeoExt library.
+
+   For GeoExt, simply add the following code in the html page:
+
+   <script src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+
+GeoExt.MapPanel
+:::::::::::::::
+
+A GeoExt MapPanel is an OpenLayers map integrated into an ExtJS Panel.
+
+To test: :download:`geoext_mappanel.html <_static/geoext_mappanel.html>`
+
+.. raw:: html
+
+    <a id="showRef6" href="javascript:showdiv('codeBlock6','showRef6','hideRef6')">Show code</a>
+    <a id="hideRef6" href="javascript:hidediv('codeBlock6','showRef6','hideRef6')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock6" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html>
+   <head>
+
+    <title>GeoExt Map Panel</title>
+    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
+    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
+    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css"/>
+
+    <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+
+
+    <script src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js" type="text/javascript"></script>
+
+    <script type="text/javascript">
+        Ext.onReady(function() {
+            var map = new OpenLayers.Map();
+            var layer = new OpenLayers.Layer.WMS(
+                "Global Imagery",
+                "http://maps.opengeo.org/geowebcache/service/wms",
+                {layers: "bluemarble"}
+            );
+            map.addLayer(layer);
+
+            new GeoExt.MapPanel({
+                renderTo: 'gxmap',
+                height: 400,
+                width: 600,
+                map: map,
+                title: 'GeoExt Map Panel'
+            });
+        });
+    </script>
+   </head>
+   <body>
+   <div id="gxmap"></div>
+   </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+GeoExt.Action
+:::::::::::::
+
+GeoExt provides the GeoExt.Action class for adaptating a control to an object that can be inserted in a toolbar or in a menu.
+
+To test: :download:`geoext_action.html <_static/geoext_action.html>`
+
+.. raw:: html
+
+    <a id="showRef7" href="javascript:showdiv('codeBlock7','showRef7','hideRef7')">Show code</a>
+    <a id="hideRef7" href="javascript:hidediv('codeBlock7','showRef7','hideRef7')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock7" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html>
+   <head>
+       <title>GeoExt Action</title>
+
+       <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
+       <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
+       <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
+       <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css"/>
+
+       <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+
+
+       <script type="text/javascript" src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+
+       <script type="text/javascript">
+           Ext.onReady(function() {
+               var map = new OpenLayers.Map();
+               var wms = new OpenLayers.Layer.WMS(
+                   "Global Imagery",
+                   "http://maps.opengeo.org/geowebcache/service/wms",
+                   {layers: "bluemarble"}
+               );
+               var vector = new OpenLayers.Layer.Vector("vector");
+               map.addLayers([wms, vector]);
+
+               var ctrl, toolbarItems = [], action, actions = {};
+
+               // ZoomToMaxExtent control, a "button" control
+               action = new GeoExt.Action({
+                   control: new OpenLayers.Control.ZoomToMaxExtent(),
+                   map: map,
+                   text: "max extent"
+               });
+               actions["max_extent"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("-");
+
+               // Navigation control and DrawFeature controls
+               // in the same toggle group
+               action = new GeoExt.Action({
+                   text: "nav",
+                   control: new OpenLayers.Control.Navigation(),
+                   map: map,
+                   // button options
+                   toggleGroup: "draw",
+                   allowDepress: false,
+                   pressed: true,
+                   // check item options
+                   group: "draw",
+                   checked: true
+               });
+               actions["nav"] = action;
+               toolbarItems.push(action);
+
+               action = new GeoExt.Action({
+                   text: "draw poly",
+                   control: new OpenLayers.Control.DrawFeature(
+                           vector, OpenLayers.Handler.Polygon
+                           ),
+                   map: map,
+                   // button options
+                   toggleGroup: "draw",
+                   allowDepress: false,
+                   // check item options
+                   group: "draw"
+               });
+               actions["draw_poly"] = action;
+               toolbarItems.push(action);
+
+               action = new GeoExt.Action({
+                   text: "draw line",
+                   control: new OpenLayers.Control.DrawFeature(
+                           vector, OpenLayers.Handler.Path
+                           ),
+                   map: map,
+                   // button options
+                   toggleGroup: "draw",
+                   allowDepress: false,
+                   // check item options
+                   group: "draw"
+               });
+               actions["draw_line"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("-");
+
+               // SelectFeature control, a "toggle" control
+               action = new GeoExt.Action({
+                   text: "select",
+                   control: new OpenLayers.Control.SelectFeature(vector, {
+                       type: OpenLayers.Control.TYPE_TOGGLE,
+                       hover: true
+                   }),
+                   map: map,
+                   // button options
+                   enableToggle: true
+               });
+               actions["select"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("-");
+
+               // Navigation history - two "button" controls
+               ctrl = new OpenLayers.Control.NavigationHistory();
+               map.addControl(ctrl);
+
+               action = new GeoExt.Action({
+                   text: "previous",
+                   control: ctrl.previous,
+                   disabled: true
+               });
+               actions["previous"] = action;
+               toolbarItems.push(action);
+
+               action = new GeoExt.Action({
+                   text: "next",
+                   control: ctrl.next,
+                   disabled: true
+               });
+               actions["next"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("->");
+
+               // Reuse the GeoExt.Action objects created above
+               // as menu items
+               toolbarItems.push({
+                   text: "menu",
+                   menu: new Ext.menu.Menu({
+                       items: [
+                           // ZoomToMaxExtent
+                           actions["max_extent"],
+                           // Nav
+                           new Ext.menu.CheckItem(actions["nav"]),
+                           // Draw poly
+                           new Ext.menu.CheckItem(actions["draw_poly"]),
+                           // Draw line
+                           new Ext.menu.CheckItem(actions["draw_line"]),
+                           // Select control
+                           new Ext.menu.CheckItem(actions["select"]),
+                           // Navigation history control
+                           actions["previous"],
+                           actions["next"]
+                       ]
+                   })
+               });
+
+               var mapPanel = new GeoExt.MapPanel({
+                   renderTo: "mappanel",
+                   height: 400,
+                   width: 600,
+                   map: map,
+                   center: new OpenLayers.LonLat(5, 45),
+                   zoom: 4,
+                   tbar: toolbarItems
+               });
+           });
+       </script>
+
+       <style type="text/css">
+               /* work around an Ext bug that makes the rendering
+                  of menu items not as one would expect */
+           .ext-ie .x-menu-item-icon {
+               left: -24px;
+           }
+
+           .ext-strict .x-menu-item-icon {
+               left: 3px;
+           }
+
+           .ext-ie6 .x-menu-item-icon {
+               left: -24px;
+           }
+
+           .ext-ie7 .x-menu-item-icon {
+               left: -24px;
+           }
+       </style>
+   </head>
+   <body>
+   <div id="mappanel"></div>
+   </body>
+
+   </html>
+   
+.. raw:: html
+
+    </div>

sandbox/cmoullet/2010_mapfish_workshop_fhnw/build/html/_sources/mapfish.txt

@@ -1 +1 @@
 MapFish
 *******
+
+This part of the workshop is adapted from the `workshop <http://dev.mapfish.org/sandbox/camptocamp/mapfish_workshop_fossgis2010/printing_src/_build/html/>`_ workshop provided by Eric Lemoine and François Van der Biest at Foss4G 2010 in Barcelona.
+
+Contents:
+
+.. toctree::
+   :maxdepth: 2
+
+   getting_started
+

sandbox/cmoullet/2010_mapfish_workshop_fhnw/build/html/index.html

@@ -51 +51 @@
 <ul>
 <li class="toctree-l1"><a class="reference internal" href="agenda.html">Agenda</a></li>
-<li class="toctree-l1"><a class="reference internal" href="introduction.html">Introduction</a></li>
-<li class="toctree-l1"><a class="reference internal" href="mapfish.html">MapFish</a></li>
+<li class="toctree-l1"><a class="reference internal" href="introduction.html">Introduction</a><ul>
+<li class="toctree-l2"><a class="reference internal" href="introduction.html#computer-setup">Computer Setup</a></li>
+<li class="toctree-l2"><a class="reference internal" href="introduction.html#mapfish-framework">MapFish Framework</a></li>
+<li class="toctree-l2"><a class="reference internal" href="introduction.html#mapfish-examples">MapFish Examples</a></li>
+</ul>
+</li>
+<li class="toctree-l1"><a class="reference internal" href="mapfish.html">MapFish</a><ul>
+<li class="toctree-l2"><a class="reference internal" href="getting_started.html">Module 1 - Getting Started</a></li>
+</ul>
+</li>
 <li class="toctree-l1"><a class="reference internal" href="geoext.html">GeoExt</a></li>
 <li class="toctree-l1"><a class="reference internal" href="api.html">GeoAdmin API</a></li>

sandbox/cmoullet/2010_mapfish_workshop_fhnw/build/html/introduction.html

@@ -24 +24 @@
     <script type="text/javascript" src="_static/doctools.js"></script>
     <link rel="top" title="2010 FHNW Training v1.0 documentation" href="index.html" />
-    <link rel="next" title="&lt;no title&gt;" href="mapfish.html" />
-    <link rel="prev" title="Training agenda" href="agenda.html" /> 
+    <link rel="next" title="MapFish" href="mapfish.html" />
+    <link rel="prev" title="Agenda" href="agenda.html" /> 
   </head>
   <body>
@@ -35 +35 @@
              accesskey="I">index</a></li>
         <li class="right" >
-          <a href="mapfish.html" title="&lt;no title&gt;"
+          <a href="mapfish.html" title="MapFish"
              accesskey="N">next</a> |</li>
         <li class="right" >
-          <a href="agenda.html" title="Training agenda"
+          <a href="agenda.html" title="Agenda"
              accesskey="P">previous</a> |</li>
         <li><a href="index.html">2010 FHNW Training v1.0 documentation</a> &raquo;</li> 
@@ -51 +51 @@
   <div class="section" id="introduction">
 <h1>Introduction<a class="headerlink" href="#introduction" title="Permalink to this headline">¶</a></h1>
+<script language=javascript type='text/javascript'>
+
+function hidediv(div, showDiv, hideDiv) {
+   document.getElementById(div).style.visibility = 'hidden';
+   document.getElementById(div).style.display = 'none';
+   document.getElementById(hideDiv).style.visibility = 'hidden';
+   document.getElementById(hideDiv).style.display = 'none';
+   document.getElementById(showDiv).style.visibility = 'visible';
+   document.getElementById(showDiv).style.display = 'block';
+}
+
+function showdiv(div, showDiv, hideDiv) {
+   document.getElementById(div).style.visibility = 'visible';
+   document.getElementById(div).style.display = 'block';
+   document.getElementById(showDiv).style.visibility = 'hidden';
+   document.getElementById(showDiv).style.display = 'none';
+   document.getElementById(hideDiv).style.visibility = 'visible';
+   document.getElementById(hideDiv).style.display = 'block';
+}
+</script><div class="section" id="computer-setup">
+<h2>Computer Setup<a class="headerlink" href="#computer-setup" title="Permalink to this headline">¶</a></h2>
+<p>Several pieces of software have been installed on your computer:</p>
+<blockquote>
+<ul class="simple">
+<li>PostGres / PostGIS</li>
+<li>Ultraedit</li>
+<li><a class="reference external" href="http://www.python.org/download/releases/2.5.4/">Python 2.5</a></li>
+<li><a class="reference external" href="http://sourceforge.net/projects/pywin32/">Python for Windows extensions</a></li>
+</ul>
+</blockquote>
+</div>
+<div class="section" id="mapfish-framework">
+<h2>MapFish Framework<a class="headerlink" href="#mapfish-framework" title="Permalink to this headline">¶</a></h2>
+<div class="section" id="what-is-a-framework">
+<h3>What is a framework ?<a class="headerlink" href="#what-is-a-framework" title="Permalink to this headline">¶</a></h3>
+<p>MapFish is a flexible and complete framework for building rich web-mapping
+applications. It emphasizes high productivity, and high-quality development.
+But, what is a framework ? From <a class="reference external" href="http://en.wikipedia.org/wiki/Framework">wikipedia</a> :
+&#8220;A framework is a basic conceptual structure used to solve or address complex issues.&#8221;.
+The framework aims to alleviate the overhead associated with common activities performed in Web mapping development.</p>
+<p>In that sense, MapFish Framework provides the technology for building web mapping applications.
+With client technologies, the developer can create user interfaces and with server technologies, it is possible to develop the necessary web services.</p>
+<p>On the client side, JavaScript libraries are mainly used, on the server side, several languages can be used.
+Originally, Python components were used, but with the time, Java, Ruby and PHP components have also been developped.
+This shows the flexibility and openness of the framework.</p>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p class="last">MapFish is cartographic server agnostic. It can be used with <a class="reference external" href="http://www.mapserver.org">MapServer</a>, <a class="reference external" href="http://www.geoserver.org">GeoServer</a>, <a class="reference external" href="http://www.mapguide.org">MapGuide</a>
+or whatever cartographic server that is able to communicate with open protocols like WMS or WFS.</p>
+</div>
+<div class="section" id="components-of-mapfish-framework">
+<h4>Components of MapFish framework<a class="headerlink" href="#components-of-mapfish-framework" title="Permalink to this headline">¶</a></h4>
+<p>Several Open Source technologies are used in MapFish Framework.</p>
+<p>Client side:</p>
+<blockquote>
+<ul class="simple">
+<li><a class="reference external" href="http://www.geoext.org">GeoExt</a>: GeoExt is a JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and ExtJS.</li>
+<li><a class="reference external" href="http://www.openlayers.org">OpenLayers</a>: OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source.</li>
+<li><a class="reference external" href="http://extjs.com/">ExtJS</a>: Ext JS is a cross-browser JavaScript library for building rich internet applications.</li>
+</ul>
+</blockquote>
+<p>Server side:</p>
+<blockquote>
+<ul class="simple">
+<li><a class="reference external" href="http://pypi.python.org/pypi/Shapely">Shapely</a>: Shapely is a Python package for manipulation and analysis of 2D geospatial geometries.</li>
+<li><a class="reference external" href="http://www.sqlalchemy.org/">SqlAlchemy</a>: SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.</li>
+<li><a class="reference external" href="http://www.geoalchemy.org/">GeoAlchemy</a>: GeoAlchemy is an extension of SQLAlchemy allowing the access to Oracle Spatial, PostGis and MySQL.</li>
+<li><a class="reference external" href="http://pylonshq.com/">Pylons</a>: Pylons is a lightweight web framework emphasizing flexibility and rapid development.</li>
+</ul>
+</blockquote>
+</div>
+</div>
+</div>
+<div class="section" id="mapfish-examples">
+<h2>MapFish Examples<a class="headerlink" href="#mapfish-examples" title="Permalink to this headline">¶</a></h2>
+<div class="section" id="mapfish-javascript-toolbox">
+<h3>MapFish JavaScript Toolbox<a class="headerlink" href="#mapfish-javascript-toolbox" title="Permalink to this headline">¶</a></h3>
+<p>MapFish JavaScript Toolbox is composed of three JavaScript libraries: ExtJS, OpenLayers and GeoExt. The functionality of all these libraries will be highlighted with some example code.</p>
+</div>
+<div class="section" id="mapfish-client-extjs">
+<span id="id1"></span><h3>ExtJS<a class="headerlink" href="#mapfish-client-extjs" title="Permalink to this headline">¶</a></h3>
+<p>Ext JS is a cross-browser JavaScript library for building rich internet applications. It provides a <a class="reference external" href="http://www.extjs.com/deploy/dev/examples/samples.html">very large list of UI components</a>.</p>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p>In order to play with ExtJS, it is needed to reference the ExtJS library and the associated css. For simplicity, we have prepared an accessible build with <a class="reference external" href="http://extjs.com/products/extjs/build/index.php">CacheFly</a>.</p>
+<p>Then, simply add the following code in the html page:</p>
+<p>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;<a class="reference external" href="http://extjs.cachefly.net/builds/ext-cdn-771.js">http://extjs.cachefly.net/builds/ext-cdn-771.js</a>&#8220;&gt;&lt;/script&gt;</p>
+<p class="last">&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;<a class="reference external" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css">http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css</a>&#8221; /&gt;</p>
+</div>
+<div class="section" id="ext-hello-world">
+<h4>Ext &#8220;Hello World&#8221;<a class="headerlink" href="#ext-hello-world" title="Permalink to this headline">¶</a></h4>
+<p>Create your own html page with the following code <a class="reference download internal" href="_downloads/extjs_hello_world.html"><tt class="xref download docutils literal"><span class="pre">extjs_hello_world.html</span></tt></a>.
+If you open it in a browser, you should get a message &#8220;Hello World!  You have ExtJS configured correctly!&#8221;</p>
+<a id="showRef2" href="javascript:showdiv('codeBlock2','showRef2','hideRef2')">Show code</a>
+<a id="hideRef2" href="javascript:hidediv('codeBlock2','showRef2','hideRef2')" style="display: none; visibility: hidden">Hide code</a>
+<div id="codeBlock2" style="display: none; visibility: hidden"><div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html&gt;</span>
+   <span class="nt">&lt;head&gt;</span>
+      <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;Content-Type&quot;</span> <span class="na">content=</span><span class="s">&quot;text/html; charset=iso-8859-1&quot;</span> <span class="nt">/&gt;</span>
+      <span class="nt">&lt;title</span> <span class="na">id=</span><span class="s">&#39;title&#39;</span><span class="nt">&gt;</span>ExtJS Hello World<span class="nt">&lt;/title&gt;</span>
+
+      <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://extjs.cachefly.net/builds/ext-cdn-771.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+      <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css&quot;</span> <span class="nt">/&gt;</span>
+
+      <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
+      <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="nx">alert</span><span class="p">(</span><span class="s2">&quot;Hello World!  You have ExtJS configured correctly!&quot;</span><span class="p">);</span>
+      <span class="p">});</span> <span class="c1">//end onReady</span>
+      <span class="nt">&lt;/script&gt;</span>
+
+   <span class="nt">&lt;/head&gt;</span>
+   <span class="nt">&lt;body&gt;</span>
+   <span class="nt">&lt;/body&gt;</span>
+ <span class="nt">&lt;/html&gt;</span>
+</pre></div>
+</div>
+</div></div>
+<div class="section" id="ext-viewport">
+<h4>Ext.Viewport<a class="headerlink" href="#ext-viewport" title="Permalink to this headline">¶</a></h4>
+<p>The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Let&#8217;s have a look at the configuration of a <a class="reference external" href="http://www.extjs.com/deploy/dev/docs/?class=Ext.Viewport">viewport</a>:</p>
+<p>To test: <a class="reference download internal" href="_downloads/extjs_viewport.html"><tt class="xref download docutils literal"><span class="pre">extjs_viewport.html</span></tt></a></p>
+<a id="showRef3" href="javascript:showdiv('codeBlock3','showRef3','hideRef3')">Show code</a>
+<a id="hideRef3" href="javascript:hidediv('codeBlock3','showRef3','hideRef3')" style="display: none; visibility: hidden">Hide code</a>
+<div id="codeBlock3" style="display: none; visibility: hidden"><div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+  <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;Content-Type&quot;</span> <span class="na">content=</span><span class="s">&quot;text/html; charset=iso-8859-1&quot;</span><span class="nt">/&gt;</span>
+  <span class="nt">&lt;title</span> <span class="na">id=</span><span class="s">&#39;title&#39;</span><span class="nt">&gt;</span>ExtJS Viewport<span class="nt">&lt;/title&gt;</span>
+
+  <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://extjs.cachefly.net/builds/ext-cdn-771.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css&quot;</span><span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
+      <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>
+          <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Viewport</span><span class="p">({</span>
+              <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;border&#39;</span><span class="p">,</span>
+              <span class="nx">items</span><span class="o">:</span> <span class="p">[</span>
+                  <span class="p">{</span>
+                      <span class="nx">region</span><span class="o">:</span> <span class="s1">&#39;north&#39;</span><span class="p">,</span>
+                      <span class="nx">html</span><span class="o">:</span> <span class="s1">&#39;&lt;h1 class=&quot;x-panel-header&quot;&gt;Page Title&lt;/h1&gt;&#39;</span><span class="p">,</span>
+                      <span class="nx">autoHeight</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                      <span class="nx">border</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+                      <span class="nx">margins</span><span class="o">:</span> <span class="s1">&#39;0 0 5 0&#39;</span>
+                  <span class="p">},</span>
+                  <span class="p">{</span>
+                      <span class="nx">region</span><span class="o">:</span> <span class="s1">&#39;west&#39;</span><span class="p">,</span>
+                      <span class="nx">collapsible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                      <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Navigation&#39;</span><span class="p">,</span>
+                      <span class="nx">xtype</span><span class="o">:</span> <span class="s1">&#39;treepanel&#39;</span><span class="p">,</span>
+                      <span class="nx">width</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span>
+                      <span class="nx">autoScroll</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                      <span class="nx">split</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                      <span class="nx">loader</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">tree</span><span class="p">.</span><span class="nx">TreeLoader</span><span class="p">(),</span>
+                      <span class="nx">root</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">tree</span><span class="p">.</span><span class="nx">AsyncTreeNode</span><span class="p">({</span>
+                          <span class="nx">expanded</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                          <span class="nx">children</span><span class="o">:</span> <span class="p">[</span>
+                              <span class="p">{</span>
+                                  <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Menu Option 1&#39;</span><span class="p">,</span>
+                                  <span class="nx">leaf</span><span class="o">:</span> <span class="kc">true</span>
+                              <span class="p">},</span>
+                              <span class="p">{</span>
+                                  <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Menu Option 2&#39;</span><span class="p">,</span>
+                                  <span class="nx">leaf</span><span class="o">:</span> <span class="kc">true</span>
+                              <span class="p">},</span>
+                              <span class="p">{</span>
+                                  <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Menu Option 3&#39;</span><span class="p">,</span>
+                                  <span class="nx">leaf</span><span class="o">:</span> <span class="kc">true</span>
+                              <span class="p">}</span>
+                          <span class="p">]</span>
+                      <span class="p">}),</span>
+                      <span class="nx">rootVisible</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+                      <span class="nx">listeners</span><span class="o">:</span> <span class="p">{</span>
+                          <span class="nx">click</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
+                              <span class="nx">Ext</span><span class="p">.</span><span class="nx">Msg</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;Navigation Tree Click&#39;</span><span class="p">,</span> <span class="s1">&#39;You clicked: &quot;&#39;</span> <span class="o">+</span> <span class="nx">n</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">text</span> <span class="o">+</span> <span class="s1">&#39;&quot;&#39;</span><span class="p">);</span>
+                          <span class="p">}</span>
+                      <span class="p">}</span>
+                  <span class="p">},</span>
+                  <span class="p">{</span>
+                      <span class="nx">region</span><span class="o">:</span> <span class="s1">&#39;center&#39;</span><span class="p">,</span>
+                      <span class="nx">xtype</span><span class="o">:</span> <span class="s1">&#39;tabpanel&#39;</span><span class="p">,</span>
+                      <span class="nx">items</span><span class="o">:</span> <span class="p">{</span>
+                          <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Default Tab&#39;</span><span class="p">,</span>
+                          <span class="nx">html</span><span class="o">:</span> <span class="s1">&#39;The first tab\&#39;s content. Others may be added dynamically&#39;</span>
+                      <span class="p">}</span>
+                  <span class="p">},</span>
+                  <span class="p">{</span>
+                      <span class="nx">region</span><span class="o">:</span> <span class="s1">&#39;south&#39;</span><span class="p">,</span>
+                      <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Information&#39;</span><span class="p">,</span>
+                      <span class="nx">collapsible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                      <span class="nx">html</span><span class="o">:</span> <span class="s1">&#39;Information goes here&#39;</span><span class="p">,</span>
+                      <span class="nx">split</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                      <span class="nx">height</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
+                      <span class="nx">minHeight</span><span class="o">:</span> <span class="mi">100</span>
+                  <span class="p">}</span>
+              <span class="p">]</span>
+          <span class="p">});</span>
+      <span class="p">});</span> <span class="c1">//end onReady</span>
+  <span class="nt">&lt;/script&gt;</span>
+
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</span>
+</pre></div>
+</div>
+</div></div>
+<div class="section" id="ext-grid-gridpanel">
+<h4>Ext.grid.GridPanel<a class="headerlink" href="#ext-grid-gridpanel" title="Permalink to this headline">¶</a></h4>
+<p><a class="reference external" href="http://map.globe.admin.ch">Globe application</a> uses a <a class="reference external" href="http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel">grid panel</a>:</p>
+<blockquote>
+<img alt="_images/mapfish_globe.png" src="_images/mapfish_globe.png" />
+</blockquote>
+</div>
+</div>
+<div class="section" id="mapfish-client-openlayers">
+<span id="id2"></span><h3>OpenLayers<a class="headerlink" href="#mapfish-client-openlayers" title="Permalink to this headline">¶</a></h3>
+<p>OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source.</p>
+<p>Have a look at the <a class="reference external" href="http://openlayers.org/dev/examples/">OpenLayers examples</a> to see the power of this library.</p>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p>In order to play with OpenLayers, it is needed to reference the OpenLayers library.</p>
+<p>Simply add the following code in the html page:</p>
+<p class="last">&lt;script src=&#8221;<a class="reference external" href="http://www.openlayers.org/api/OpenLayers.js">http://www.openlayers.org/api/OpenLayers.js</a>&#8220;&gt;&lt;/script&gt;</p>
+</div>
+<div class="section" id="map">
+<h4>Map<a class="headerlink" href="#map" title="Permalink to this headline">¶</a></h4>
+<p>Instances of <a class="reference external" href="http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Map-js.html">OpenLayers.Map</a> are interactive maps embedded in a web page.</p>
+<p>To test: <a class="reference download internal" href="_downloads/openlayers_map.html"><tt class="xref download docutils literal"><span class="pre">openlayers_map.html</span></tt></a></p>
+<a id="showRef4" href="javascript:showdiv('codeBlock4','showRef4','hideRef4')">Show code</a>
+<a id="hideRef4" href="javascript:hidediv('codeBlock4','showRef4','hideRef4')" style="display: none; visibility: hidden">Hide code</a>
+<div id="codeBlock4" style="display: none; visibility: hidden"><div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+   <span class="nt">&lt;title&gt;</span>OpenLayers Map<span class="nt">&lt;/title&gt;</span>
+
+   <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://www.openlayers.org/api/OpenLayers.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+
+   <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
+      <span class="kd">var</span> <span class="nx">map</span><span class="p">,</span> <span class="nx">layer</span><span class="p">;</span>
+      <span class="kd">function</span> <span class="nx">init</span><span class="p">()</span> <span class="p">{</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><span class="s1">&#39;map&#39;</span><span class="p">);</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><span class="s2">&quot;OpenLayers WMS&quot;</span><span class="p">,</span>
+                 <span class="s2">&quot;http://labs.metacarta.com/wms/vmap0&quot;</span><span class="p">,</span>
+                 <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s1">&#39;basic&#39;</span><span class="p">}</span>
+                 <span class="p">);</span>
+         <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>
+         <span class="nx">map</span><span class="p">.</span><span class="nx">zoomToMaxExtent</span><span class="p">();</span>
+      <span class="p">}</span>
+   <span class="nt">&lt;/script&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+
+<span class="nt">&lt;body</span> <span class="na">onload=</span><span class="s">&quot;init()&quot;</span><span class="nt">&gt;</span>
+
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;map&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
+
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</span>
+</pre></div>
+</div>
+</div></div>
+<div class="section" id="editing-toolbar">
+<h4>Editing Toolbar<a class="headerlink" href="#editing-toolbar" title="Permalink to this headline">¶</a></h4>
+<p><a class="reference external" href="http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/_staticOpenLayers/Control/EditingToolbar-js.html">Editing Toolbar</a></p>
+<p>To test: <a class="reference download internal" href="_downloads/openlayers_editing_toolbar.html"><tt class="xref download docutils literal"><span class="pre">openlayers_editing_toolbar.html</span></tt></a></p>
+<a id="showRef5" href="javascript:showdiv('codeBlock5','showRef5','hideRef5')">Show code</a>
+<a id="hideRef5" href="javascript:hidediv('codeBlock5','showRef5','hideRef5')" style="display: none; visibility: hidden">Hide code</a>
+<div id="codeBlock5" style="display: none; visibility: hidden"><div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html</span> <span class="na">xmlns=</span><span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="nt">&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+ <span class="nt">&lt;title&gt;</span>OpenLayers Editing Toolbar <span class="nt">&lt;/title&gt;</span>
+
+ <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://www.openlayers.org/api/OpenLayers.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+
+ <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
+     <span class="kd">var</span> <span class="nx">lon</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
+     <span class="kd">var</span> <span class="nx">lat</span> <span class="o">=</span> <span class="mi">40</span><span class="p">;</span>
+     <span class="kd">var</span> <span class="nx">zoom</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
+     <span class="kd">var</span> <span class="nx">map</span><span class="p">,</span> <span class="nx">layer</span><span class="p">;</span>
+
+     <span class="kd">function</span> <span class="nx">init</span><span class="p">()</span> <span class="p">{</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><span class="s2">&quot;OpenLayers WMS&quot;</span><span class="p">,</span>
+                 <span class="s2">&quot;http://labs.metacarta.com/wms/vmap0&quot;</span><span class="p">,</span>
+                 <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s1">&#39;basic&#39;</span><span class="p">}</span>
+                 <span class="p">);</span>
+
+         <span class="nx">vlayer</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">Vector</span><span class="p">(</span><span class="s2">&quot;Editable&quot;</span><span class="p">);</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><span class="s1">&#39;map&#39;</span><span class="p">,</span> <span class="p">{</span>
+             <span class="nx">controls</span><span class="o">:</span> <span class="p">[</span>
+                 <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">PanZoom</span><span class="p">(),</span>
+                 <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">EditingToolbar</span><span class="p">(</span><span class="nx">vlayer</span><span class="p">)</span>
+             <span class="p">]</span>
+         <span class="p">});</span>
+         <span class="nx">map</span><span class="p">.</span><span class="nx">addLayers</span><span class="p">([</span><span class="nx">layer</span><span class="p">,</span> <span class="nx">vlayer</span><span class="p">]);</span>
+
+         <span class="nx">map</span><span class="p">.</span><span class="nx">setCenter</span><span class="p">(</span><span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">LonLat</span><span class="p">(</span><span class="nx">lon</span><span class="p">,</span> <span class="nx">lat</span><span class="p">),</span> <span class="nx">zoom</span><span class="p">);</span>
+     <span class="p">}</span>
+ <span class="nt">&lt;/script&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body</span> <span class="na">onload=</span><span class="s">&quot;init()&quot;</span><span class="nt">&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;map&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</span>
+</pre></div>
+</div>
+</div></div>
+<div class="section" id="popup">
+<h4>Popup<a class="headerlink" href="#popup" title="Permalink to this headline">¶</a></h4>
+<p><a class="reference external" href="http://www.swissrivers.ch">Swissrivers.ch application</a> uses <a class="reference external" href="http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Popup-js.html">OpenLayers popups</a> to present hydrogramms.</p>
+<blockquote>
+<img alt="_images/mapfish_swissrivers.png" src="_images/mapfish_swissrivers.png" />
+</blockquote>
+</div>
+</div>
+<div class="section" id="mapfish-client-geoext">
+<span id="id4"></span><h3>GeoExt<a class="headerlink" href="#mapfish-client-geoext" title="Permalink to this headline">¶</a></h3>
+<p>GeoExt is a JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and ExtJS.</p>
+<p>Have a look at the <a class="reference external" href="http://dev.geoext.org/trunk/geoext/examples/">GeoExt examples</a> to see the power of this library.</p>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p>In order to play with GeoExt, it is needed to reference the OpenLayers, ExtJS and GeoExt library.</p>
+<p>For GeoExt, simply add the following code in the html page:</p>
+<p class="last">&lt;script src=&#8221;<a class="reference external" href="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js">http://dev.geoext.org/trunk/geoext/lib/GeoExt.js</a>&#8220;&gt;&lt;/script&gt;</p>
+</div>
+<div class="section" id="geoext-mappanel">
+<h4>GeoExt.MapPanel<a class="headerlink" href="#geoext-mappanel" title="Permalink to this headline">¶</a></h4>
+<p>A GeoExt MapPanel is an OpenLayers map integrated into an ExtJS Panel.</p>
+<p>To test: <a class="reference download internal" href="_downloads/geoext_mappanel.html"><tt class="xref download docutils literal"><span class="pre">geoext_mappanel.html</span></tt></a></p>
+<a id="showRef6" href="javascript:showdiv('codeBlock6','showRef6','hideRef6')">Show code</a>
+<a id="hideRef6" href="javascript:hidediv('codeBlock6','showRef6','hideRef6')" style="display: none; visibility: hidden">Hide code</a>
+<div id="codeBlock6" style="display: none; visibility: hidden"><div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+
+ <span class="nt">&lt;title&gt;</span>GeoExt Map Panel<span class="nt">&lt;/title&gt;</span>
+ <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+ <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/ext-all.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+ <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css&quot;</span><span class="nt">/&gt;</span>
+ <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css&quot;</span><span class="nt">/&gt;</span>
+
+ <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://www.openlayers.org/api/2.10/OpenLayers.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+
+
+ <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://dev.geoext.org/trunk/geoext/lib/GeoExt.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+
+ <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
+     <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>
+         <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>
+         <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>
+             <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
+             <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
+             <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
+         <span class="p">);</span>
+         <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>
+
+         <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
+             <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;gxmap&#39;</span><span class="p">,</span>
+             <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
+             <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
+             <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
+             <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;GeoExt Map Panel&#39;</span>
+         <span class="p">});</span>
+     <span class="p">});</span>
+ <span class="nt">&lt;/script&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;gxmap&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</span>
+</pre></div>
+</div>
+</div></div>
+<div class="section" id="geoext-action">
+<h4>GeoExt.Action<a class="headerlink" href="#geoext-action" title="Permalink to this headline">¶</a></h4>
+<p>GeoExt provides the GeoExt.Action class for adaptating a control to an object that can be inserted in a toolbar or in a menu.</p>
+<p>To test: <a class="reference download internal" href="_downloads/geoext_action.html"><tt class="xref download docutils literal"><span class="pre">geoext_action.html</span></tt></a></p>
+<a id="showRef7" href="javascript:showdiv('codeBlock7','showRef7','hideRef7')">Show code</a>
+<a id="hideRef7" href="javascript:hidediv('codeBlock7','showRef7','hideRef7')" style="display: none; visibility: hidden">Hide code</a>
+<div id="codeBlock7" style="display: none; visibility: hidden"><div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+    <span class="nt">&lt;title&gt;</span>GeoExt Action<span class="nt">&lt;/title&gt;</span>
+
+    <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+    <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/ext-all.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css&quot;</span><span class="nt">/&gt;</span>
+    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css&quot;</span><span class="nt">/&gt;</span>
+
+    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://www.openlayers.org/api/2.10/OpenLayers.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+
+
+    <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://dev.geoext.org/trunk/geoext/lib/GeoExt.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+
+    <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
+        <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>
+            <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>
+            <span class="kd">var</span> <span class="nx">wms</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>
+                <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
+                <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
+                <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
+            <span class="p">);</span>
+            <span class="kd">var</span> <span class="nx">vector</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">Vector</span><span class="p">(</span><span class="s2">&quot;vector&quot;</span><span class="p">);</span>
+            <span class="nx">map</span><span class="p">.</span><span class="nx">addLayers</span><span class="p">([</span><span class="nx">wms</span><span class="p">,</span> <span class="nx">vector</span><span class="p">]);</span>
+
+            <span class="kd">var</span> <span class="nx">ctrl</span><span class="p">,</span> <span class="nx">toolbarItems</span> <span class="o">=</span> <span class="p">[],</span> <span class="nx">action</span><span class="p">,</span> <span class="nx">actions</span> <span class="o">=</span> <span class="p">{};</span>
+
+            <span class="c1">// ZoomToMaxExtent control, a &quot;button&quot; control</span>
+            <span class="nx">action</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Action</span><span class="p">({</span>
+                <span class="nx">control</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">ZoomToMaxExtent</span><span class="p">(),</span>
+                <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;max extent&quot;</span>
+            <span class="p">});</span>
+            <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;max_extent&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">action</span><span class="p">;</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">action</span><span class="p">);</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;-&quot;</span><span class="p">);</span>
+
+            <span class="c1">// Navigation control and DrawFeature controls</span>
+            <span class="c1">// in the same toggle group</span>
+            <span class="nx">action</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Action</span><span class="p">({</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;nav&quot;</span><span class="p">,</span>
+                <span class="nx">control</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">(),</span>
+                <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
+                <span class="c1">// button options</span>
+                <span class="nx">toggleGroup</span><span class="o">:</span> <span class="s2">&quot;draw&quot;</span><span class="p">,</span>
+                <span class="nx">allowDepress</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+                <span class="nx">pressed</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+                <span class="c1">// check item options</span>
+                <span class="nx">group</span><span class="o">:</span> <span class="s2">&quot;draw&quot;</span><span class="p">,</span>
+                <span class="nx">checked</span><span class="o">:</span> <span class="kc">true</span>
+            <span class="p">});</span>
+            <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;nav&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">action</span><span class="p">;</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">action</span><span class="p">);</span>
+
+            <span class="nx">action</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Action</span><span class="p">({</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;draw poly&quot;</span><span class="p">,</span>
+                <span class="nx">control</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">DrawFeature</span><span class="p">(</span>
+                        <span class="nx">vector</span><span class="p">,</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Polygon</span>
+                        <span class="p">),</span>
+                <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
+                <span class="c1">// button options</span>
+                <span class="nx">toggleGroup</span><span class="o">:</span> <span class="s2">&quot;draw&quot;</span><span class="p">,</span>
+                <span class="nx">allowDepress</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+                <span class="c1">// check item options</span>
+                <span class="nx">group</span><span class="o">:</span> <span class="s2">&quot;draw&quot;</span>
+            <span class="p">});</span>
+            <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;draw_poly&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">action</span><span class="p">;</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">action</span><span class="p">);</span>
+
+            <span class="nx">action</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Action</span><span class="p">({</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;draw line&quot;</span><span class="p">,</span>
+                <span class="nx">control</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">DrawFeature</span><span class="p">(</span>
+                        <span class="nx">vector</span><span class="p">,</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Path</span>
+                        <span class="p">),</span>
+                <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
+                <span class="c1">// button options</span>
+                <span class="nx">toggleGroup</span><span class="o">:</span> <span class="s2">&quot;draw&quot;</span><span class="p">,</span>
+                <span class="nx">allowDepress</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+                <span class="c1">// check item options</span>
+                <span class="nx">group</span><span class="o">:</span> <span class="s2">&quot;draw&quot;</span>
+            <span class="p">});</span>
+            <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;draw_line&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">action</span><span class="p">;</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">action</span><span class="p">);</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;-&quot;</span><span class="p">);</span>
+
+            <span class="c1">// SelectFeature control, a &quot;toggle&quot; control</span>
+            <span class="nx">action</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Action</span><span class="p">({</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;select&quot;</span><span class="p">,</span>
+                <span class="nx">control</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">SelectFeature</span><span class="p">(</span><span class="nx">vector</span><span class="p">,</span> <span class="p">{</span>
+                    <span class="nx">type</span><span class="o">:</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">TYPE_TOGGLE</span><span class="p">,</span>
+                    <span class="nx">hover</span><span class="o">:</span> <span class="kc">true</span>
+                <span class="p">}),</span>
+                <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
+                <span class="c1">// button options</span>
+                <span class="nx">enableToggle</span><span class="o">:</span> <span class="kc">true</span>
+            <span class="p">});</span>
+            <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;select&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">action</span><span class="p">;</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">action</span><span class="p">);</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;-&quot;</span><span class="p">);</span>
+
+            <span class="c1">// Navigation history - two &quot;button&quot; controls</span>
+            <span class="nx">ctrl</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">NavigationHistory</span><span class="p">();</span>
+            <span class="nx">map</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="nx">ctrl</span><span class="p">);</span>
+
+            <span class="nx">action</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Action</span><span class="p">({</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;previous&quot;</span><span class="p">,</span>
+                <span class="nx">control</span><span class="o">:</span> <span class="nx">ctrl</span><span class="p">.</span><span class="nx">previous</span><span class="p">,</span>
+                <span class="nx">disabled</span><span class="o">:</span> <span class="kc">true</span>
+            <span class="p">});</span>
+            <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;previous&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">action</span><span class="p">;</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">action</span><span class="p">);</span>
+
+            <span class="nx">action</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Action</span><span class="p">({</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;next&quot;</span><span class="p">,</span>
+                <span class="nx">control</span><span class="o">:</span> <span class="nx">ctrl</span><span class="p">.</span><span class="nx">next</span><span class="p">,</span>
+                <span class="nx">disabled</span><span class="o">:</span> <span class="kc">true</span>
+            <span class="p">});</span>
+            <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;next&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">action</span><span class="p">;</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">action</span><span class="p">);</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;-&gt;&quot;</span><span class="p">);</span>
+
+            <span class="c1">// Reuse the GeoExt.Action objects created above</span>
+            <span class="c1">// as menu items</span>
+            <span class="nx">toolbarItems</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
+                <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;menu&quot;</span><span class="p">,</span>
+                <span class="nx">menu</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">Menu</span><span class="p">({</span>
+                    <span class="nx">items</span><span class="o">:</span> <span class="p">[</span>
+                        <span class="c1">// ZoomToMaxExtent</span>
+                        <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;max_extent&quot;</span><span class="p">],</span>
+                        <span class="c1">// Nav</span>
+                        <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">CheckItem</span><span class="p">(</span><span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;nav&quot;</span><span class="p">]),</span>
+                        <span class="c1">// Draw poly</span>
+                        <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">CheckItem</span><span class="p">(</span><span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;draw_poly&quot;</span><span class="p">]),</span>
+                        <span class="c1">// Draw line</span>
+                        <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">CheckItem</span><span class="p">(</span><span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;draw_line&quot;</span><span class="p">]),</span>
+                        <span class="c1">// Select control</span>
+                        <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">CheckItem</span><span class="p">(</span><span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;select&quot;</span><span class="p">]),</span>
+                        <span class="c1">// Navigation history control</span>
+                        <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;previous&quot;</span><span class="p">],</span>
+                        <span class="nx">actions</span><span class="p">[</span><span class="s2">&quot;next&quot;</span><span class="p">]</span>
+                    <span class="p">]</span>
+                <span class="p">})</span>
+            <span class="p">});</span>
+
+            <span class="kd">var</span> <span class="nx">mapPanel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
+                <span class="nx">renderTo</span><span class="o">:</span> <span class="s2">&quot;mappanel&quot;</span><span class="p">,</span>
+                <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
+                <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
+                <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
+                <span class="nx">center</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">LonLat</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">45</span><span class="p">),</span>
+                <span class="nx">zoom</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span>
+                <span class="nx">tbar</span><span class="o">:</span> <span class="nx">toolbarItems</span>
+            <span class="p">});</span>
+        <span class="p">});</span>
+    <span class="nt">&lt;/script&gt;</span>
+
+    <span class="nt">&lt;style </span><span class="na">type=</span><span class="s">&quot;text/css&quot;</span><span class="nt">&gt;</span>
+            <span class="c">/* work around an Ext bug that makes the rendering</span>
+<span class="c">               of menu items not as one would expect */</span>
+        <span class="nc">.ext-ie</span> <span class="nc">.x-menu-item-icon</span> <span class="p">{</span>
+            <span class="k">left</span><span class="o">:</span> <span class="m">-24px</span><span class="p">;</span>
+        <span class="p">}</span>
+
+        <span class="nc">.ext-strict</span> <span class="nc">.x-menu-item-icon</span> <span class="p">{</span>
+            <span class="k">left</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
+        <span class="p">}</span>
+
+        <span class="nc">.ext-ie6</span> <span class="nc">.x-menu-item-icon</span> <span class="p">{</span>
+            <span class="k">left</span><span class="o">:</span> <span class="m">-24px</span><span class="p">;</span>
+        <span class="p">}</span>
+
+        <span class="nc">.ext-ie7</span> <span class="nc">.x-menu-item-icon</span> <span class="p">{</span>
+            <span class="k">left</span><span class="o">:</span> <span class="m">-24px</span><span class="p">;</span>
+        <span class="p">}</span>
+    <span class="nt">&lt;/style&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;mappanel&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+
+<span class="nt">&lt;/html&gt;</span>
+</pre></div>
+</div>
+</div></div>
+</div>
+</div>
 </div>
 
@@ -59 +617 @@
       <div class="sphinxsidebar">
         <div class="sphinxsidebarwrapper">
+  <h3><a href="index.html">Table Of Contents</a></h3>
+  <ul>
+<li><a class="reference internal" href="#">Introduction</a><ul>
+<li><a class="reference internal" href="#computer-setup">Computer Setup</a></li>
+<li><a class="reference internal" href="#mapfish-framework">MapFish Framework</a><ul>
+<li><a class="reference internal" href="#what-is-a-framework">What is a framework ?</a><ul>
+<li><a class="reference internal" href="#components-of-mapfish-framework">Components of MapFish framework</a></li>
+</ul>
+</li>
+</ul>
+</li>
+<li><a class="reference internal" href="#mapfish-examples">MapFish Examples</a><ul>
+<li><a class="reference internal" href="#mapfish-javascript-toolbox">MapFish JavaScript Toolbox</a></li>
+<li><a class="reference internal" href="#mapfish-client-extjs">ExtJS</a><ul>
+<li><a class="reference internal" href="#ext-hello-world">Ext &#8220;Hello World&#8221;</a></li>
+<li><a class="reference internal" href="#ext-viewport">Ext.Viewport</a></li>
+<li><a class="reference internal" href="#ext-grid-gridpanel">Ext.grid.GridPanel</a></li>
+</ul>
+</li>
+<li><a class="reference internal" href="#mapfish-client-openlayers">OpenLayers</a><ul>
+<li><a class="reference internal" href="#map">Map</a></li>
+<li><a class="reference internal" href="#editing-toolbar">Editing Toolbar</a></li>
+<li><a class="reference internal" href="#popup">Popup</a></li>
+</ul>
+</li>
+<li><a class="reference internal" href="#mapfish-client-geoext">GeoExt</a><ul>
+<li><a class="reference internal" href="#geoext-mappanel">GeoExt.MapPanel</a></li>
+<li><a class="reference internal" href="#geoext-action">GeoExt.Action</a></li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+
   <h4>Previous topic</h4>
   <p class="topless"><a href="agenda.html"
-                        title="previous chapter">Training agenda</a></p>
+                        title="previous chapter">Agenda</a></p>
   <h4>Next topic</h4>
   <p class="topless"><a href="mapfish.html"
-                        title="next chapter">&lt;no title&gt;</a></p>
+                        title="next chapter">MapFish</a></p>
   <h3>This Page</h3>
   <ul class="this-page-menu">
@@ -94 +688 @@
              >index</a></li>
         <li class="right" >
-          <a href="mapfish.html" title="&lt;no title&gt;"
+          <a href="mapfish.html" title="MapFish"
              >next</a> |</li>
         <li class="right" >
-          <a href="agenda.html" title="Training agenda"
+          <a href="agenda.html" title="Agenda"
              >previous</a> |</li>
         <li><a href="index.html">2010 FHNW Training v1.0 documentation</a> &raquo;</li> 

sandbox/cmoullet/2010_mapfish_workshop_fhnw/build/html/mapfish.html

@@ -24 +24 @@
     <script type="text/javascript" src="_static/doctools.js"></script>
     <link rel="top" title="2010 FHNW Training v1.0 documentation" href="index.html" />
-    <link rel="next" title="GeoExt" href="geoext.html" />
+    <link rel="next" title="Module 1 - Getting Started" href="getting_started.html" />
     <link rel="prev" title="Introduction" href="introduction.html" /> 
   </head>
@@ -35 +35 @@
              accesskey="I">index</a></li>
         <li class="right" >
-          <a href="geoext.html" title="GeoExt"
+          <a href="getting_started.html" title="Module 1 - Getting Started"
              accesskey="N">next</a> |</li>
         <li class="right" >
@@ -51 +51 @@
   <div class="section" id="mapfish">
 <h1>MapFish<a class="headerlink" href="#mapfish" title="Permalink to this headline">¶</a></h1>
+<p>This part of the workshop is adapted from the <a class="reference external" href="http://dev.mapfish.org/sandbox/camptocamp/mapfish_workshop_fossgis2010/printing_src/_build/html/">workshop</a> workshop provided by Eric Lemoine and François Van der Biest at Foss4G 2010 in Barcelona.</p>
+<p>Contents:</p>
+<div class="toctree-wrapper compound">
+<ul>
+<li class="toctree-l1"><a class="reference internal" href="getting_started.html">Module 1 - Getting Started</a><ul>
+<li class="toctree-l2"><a class="reference internal" href="getting_started.html#getting-workshop-material">Getting workshop material</a></li>
+<li class="toctree-l2"><a class="reference internal" href="getting_started.html#installing-mapfish">Installing MapFish</a></li>
+<li class="toctree-l2"><a class="reference internal" href="getting_started.html#installing-firefox-extensions">Installing FireFox extensions</a></li>
+</ul>
+</li>
+</ul>
+</div>
 </div>
 
@@ -63 +75 @@
                         title="previous chapter">Introduction</a></p>
   <h4>Next topic</h4>
-  <p class="topless"><a href="geoext.html"
-                        title="next chapter">GeoExt</a></p>
+  <p class="topless"><a href="getting_started.html"
+                        title="next chapter">Module 1 - Getting Started</a></p>
   <h3>This Page</h3>
   <ul class="this-page-menu">
@@ -94 +106 @@
              >index</a></li>
         <li class="right" >
-          <a href="geoext.html" title="GeoExt"
+          <a href="getting_started.html" title="Module 1 - Getting Started"
              >next</a> |</li>
         <li class="right" >

sandbox/cmoullet/2010_mapfish_workshop_fhnw/build/html/searchindex.js

@@ -1 @@
-Search.setIndex({objects:{},terms:{geoext:[0,1,4],"12h00":4,modul:0,tabl:0,"13h00":4,indic:0,"15h00":4,api:[0,3,4],mapfish:[0,4,5],geoadmin:[0,3,4],index:0,welcom:0,titl:[],"09h30":4,content:0,document:0,train:0,"16h00":4,introduct:[2,0,4],search:0,"09h00":4,fhnw:0,agenda:[0,4],page:0},objtypes:{},titles:["Welcome to 2010 FHNW Training’s documentation!","GeoExt","Introduction","GeoAdmin API","Agenda","MapFish"],objnames:{},filenames:["index","geoext","introduction","api","agenda","mapfish"]})
+Search.setIndex({objects:{},terms:{all:2,code:2,groundwork:2,global:2,follow:[2,6],children:2,depend:6,setcent:2,init:2,sens:2,addon:6,sourc:2,cmoullet:6,fals:2,veri:2,look:[2,6],button:2,list:[2,6],geograph:[],item:2,vector:2,div:2,setup:[2,0],geoext_act:2,past:6,download:6,click:2,blue:[],index:0,what:2,editingtoolbar:2,hide:2,abl:2,access:[2,6],version:6,"new":2,net:2,can:[2,6],full:2,vmap0:2,here:2,bodi:2,let:2,address:[2,6],layout:2,toolbar:2,search:0,technolog:2,"09h00":4,action:2,basic_packag:6,macintosh:6,firefox:[6,5],activ:[2,6],modul:[0,6,5],apt:[],postgi:2,href:2,tabpanel:2,visibl:2,marker:2,instal:[2,6,5],select:2,from:[2,5],would:2,commun:2,two:2,next:2,stylesheet:2,handler:2,overhead:2,python25:6,recommend:6,msg:2,renderto:2,type:2,toggl:2,relat:2,site:6,fhnw:0,templat:6,paste_deploi:6,toolbaritem:2,none:2,der:5,work:[2,6],dev:[2,6],histori:2,conceptu:2,vlayer:2,whatev:2,root:2,control:2,prompt:6,give:2,sudo:[],share:2,indic:0,high:2,selectfeatur:2,tab:2,enabletoggl:2,openplan:[],end:2,tbar:2,charset:2,minheight:2,geojson:[],env:6,tile:2,xhtml:2,css:2,collaps:2,map:2,product:2,resourc:2,fran:[],lab:2,mai:2,associ:2,printing_src:[],issu:2,inform:2,sandbox:6,imageri:2,environ:6,agenda:[0,4],enter:6,order:2,"15h00":4,through:6,addcontrol:2,cachefli:2,flexibl:2,mainli:2,dynam:2,equiv:2,style:2,group:2,window:[2,6],html:[2,6],hidden:2,python:[2,6],framework:[2,0,6],getelementbyid:2,now:6,introduct:[2,0,4],name:6,edit:2,debug:6,extj:2,draw_lin:2,globe:2,meta:2,expect:2,out:[],goe:2,content:[2,0,5],adapt:[2,5],rel:2,internet:2,integr:2,postgr:2,navig:2,manipul:2,togglegroup:2,base:2,put:2,org:[2,6],recom:6,iso:2,geometri:2,south:2,first:2,origin:2,softwar:2,render:2,qualiti:2,lat:2,mapfish_workshop_fossgis2010:[],done:6,open:2,size:2,autoheight:2,treeload:2,script:[2,6],data:[],interact:2,"09h30":4,messag:2,showref6:2,showref7:2,showref4:2,showref5:2,showref2:2,showref3:2,termin:[],store:6,listen:2,xmln:2,option:2,copi:[],setuptool:6,part:5,provid:[2,5],tree:2,structur:2,reus:2,were:2,browser:[2,6],analysi:2,comput:[2,0,6],ani:[2,6],marbl:[],packag:[2,6],pylon:[2,6],have:2,tabl:0,need:2,treepanel:2,border:2,lib:2,note:2,also:[2,6],exampl:[2,0],lonlat:2,build:[2,6],prepar:2,allow:[2,6],previou:2,oracl:2,plai:2,deploi:6,"class":2,icon:2,simplic:2,allevi:2,ext:2,sigma:[],width:2,camptocamp:[],show:2,text:2,cdn:2,lemoin:5,line:[2,6],onli:2,locat:6,menu:2,configur:2,apach:[],should:[2,6],jsonview:6,rich:2,folder:6,get:[2,0,6,5],cannot:6,toolbox:2,requir:6,mapper:2,bat:6,enabl:6,ie7:2,ie6:2,common:2,attribut:2,view:6,xtype:2,"12h00":4,navigationhistori:2,"13h00":4,mapfish_cli:6,see:2,getfirebug:6,respons:6,hidediv:2,correctli:[2,6],user:2,wikipedia:2,cartograph:2,paster:6,popup:2,web:[2,6],javascript:[2,6],extens:[2,6,5],hydrogramm:2,extent:2,solv:2,openlayers_editing_toolbar:2,plugin:6,region:2,instanc:2,mappanel:2,com:[2,6],bluemarbl:2,load:2,simpli:2,trunk:2,loader:2,header:2,linux:6,assum:6,poli:2,java:2,west:2,three:2,been:2,compon:2,json:6,workshop:[6,5],basic:[2,6],autoscrol:2,emphas:2,rubi:2,mapguid:2,present:2,gridpanel:2,mapserv:2,servic:2,icewasel:[],aim:2,abov:2,margin:2,"3px":2,layer:2,checkitem:2,geoalchemi:2,ctrl:2,asynctreenod:2,toolkit:2,itself:2,lightweight:2,sever:2,"fran\u00e7oi":5,develop:2,welcom:0,minim:6,perform:2,make:2,addlay:2,cross:2,same:[2,6],check:[2,6],complex:2,split:2,extjs_hello_world:2,document:[2,0],complet:2,http:[2,6],swissriv:2,alert:2,tempmapfish:[],php:2,expand:2,iceweasel:[],center:2,client:[2,6],command:6,thi:[2,6,5],geoext_mappanel:2,left:2,protocol:2,rest:6,shape:2,mysql:2,languag:2,onload:2,rapid:2,easi:2,add:[2,6],ultraedit:2,bin:[],applic:[2,6],hover:2,around:2,format:[],agnost:2,varieti:[],piec:2,panzoom:2,grid:2,press:2,world:2,height:2,codeblock2:2,python2:[],hideref5:2,insert:2,hideref7:2,hideref6:2,like:[2,6],hideref3:2,hideref2:2,zoom:2,server:2,api:[2,0,3,4],necessari:2,mapfish_serv:[],output:6,resiz:2,page:[2,0,6],geoext:[2,0,1,4],allowdepress:2,some:2,"export":[],mapfish:[2,0,6,4,5],drawfeatur:2,geoadmin:[0,3,4],librari:2,leaf:2,openlayers_map:2,biest:5,larg:2,localhost:[],refer:2,object:2,zoomtomaxext:2,power:2,geowebcach:2,geoserv:2,step:6,panel:2,src:2,postgresql:[],materi:[6,5],side:2,disabl:2,block:2,own:2,encod:[],www:[2,6],automat:2,compos:2,opengeo:2,draw_poli:2,onreadi:2,openlay:2,type_toggl:2,your:[2,6],libgeo:[],manag:2,van:5,lon:2,avail:6,start:[0,6,5],interfac:2,"var":2,"_build":[],strict:2,"function":2,head:2,north:2,"2010_mapfish_workshop_fhnw":6,sqlalchemi:2,link:2,metacarta:2,foss4g:5,"true":2,bug:2,viewport:2,temp:6,possibl:2,"default":2,geospati:2,displai:2,rc2:[],"24px":2,highlight:2,embed:2,showdiv:2,creat:[2,6],firebug:6,home:[],curl:[],path:2,eric:5,polygon:2,titl:2,pylons_minim:6,rootvis:2,virtual:6,other:[2,6],nav:2,spatial:2,test:2,you:[2,6],codeblock3:2,codeblock4:2,codeblock5:2,codeblock6:2,codeblock7:2,hideref4:2,draw:2,mozilla:6,gxmap:2,sql:2,"16h00":4,debian:[],svn:[],max:2,directori:[],htdoc:[],max_ext:2,barcelona:5,train:0,time:2,push:2,hello:2,extjs_viewport:2},objtypes:{},titles:["Welcome to 2010 FHNW Training’s documentation!","GeoExt","Introduction","GeoAdmin API","Agenda","MapFish","Module 1 - Getting Started"],objnames:{},filenames:["index","geoext","introduction","api","agenda","mapfish","getting_started"]})

sandbox/cmoullet/2010_mapfish_workshop_fhnw/source/introduction.rst

@@ -2 +2 @@
 ************
 
-Computer setup
+.. raw:: html
+
+   <script language=javascript type='text/javascript'>
+
+   function hidediv(div, showDiv, hideDiv) {
+      document.getElementById(div).style.visibility = 'hidden';
+      document.getElementById(div).style.display = 'none';
+      document.getElementById(hideDiv).style.visibility = 'hidden';
+      document.getElementById(hideDiv).style.display = 'none';
+      document.getElementById(showDiv).style.visibility = 'visible';
+      document.getElementById(showDiv).style.display = 'block';
+   }
+
+   function showdiv(div, showDiv, hideDiv) {
+      document.getElementById(div).style.visibility = 'visible';
+      document.getElementById(div).style.display = 'block';
+      document.getElementById(showDiv).style.visibility = 'hidden';
+      document.getElementById(showDiv).style.display = 'none';
+      document.getElementById(hideDiv).style.visibility = 'visible';
+      document.getElementById(hideDiv).style.display = 'block';
+   }
+   </script>
+
+
+Computer Setup
 --------------
 
 Several pieces of software have been installed on your computer:
+
  * PostGres / PostGIS
  * Ultraedit
@@ -11 +36 @@
  * `Python for Windows extensions <http://sourceforge.net/projects/pywin32/>`_
 
-MapFish general overview
-------------------------
+MapFish Framework
+-----------------
+
+What is a framework ?
+^^^^^^^^^^^^^^^^^^^^^
+
+MapFish is a flexible and complete framework for building rich web-mapping
+applications. It emphasizes high productivity, and high-quality development.
+But, what is a framework ? From `wikipedia <http://en.wikipedia.org/wiki/Framework>`_ :
+"A framework is a basic conceptual structure used to solve or address complex issues.".
+The framework aims to alleviate the overhead associated with common activities performed in Web mapping development.
+
+In that sense, MapFish Framework provides the technology for building web mapping applications.
+With client technologies, the developer can create user interfaces and with server technologies, it is possible to develop the necessary web services.
+
+On the client side, JavaScript libraries are mainly used, on the server side, several languages can be used.
+Originally, Python components were used, but with the time, Java, Ruby and PHP components have also been developped.
+This shows the flexibility and openness of the framework.
+
+.. note::
+
+   MapFish is cartographic server agnostic. It can be used with `MapServer <http://www.mapserver.org>`_, `GeoServer <http://www.geoserver.org>`_, `MapGuide <http://www.mapguide.org>`_
+   or whatever cartographic server that is able to communicate with open protocols like WMS or WFS.
+
+Components of MapFish framework
+:::::::::::::::::::::::::::::::
+
+Several Open Source technologies are used in MapFish Framework.
+
+Client side:
+
+ * `GeoExt <http://www.geoext.org>`_: GeoExt is a JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and ExtJS.
+ * `OpenLayers <http://www.openlayers.org>`_: OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source.
+ * `ExtJS <http://extjs.com/>`_: Ext JS is a cross-browser JavaScript library for building rich internet applications.
+
+Server side:
+
+ * `Shapely <http://pypi.python.org/pypi/Shapely>`_: Shapely is a Python package for manipulation and analysis of 2D geospatial geometries.
+ * `SqlAlchemy <http://www.sqlalchemy.org/>`_: SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.
+ * `GeoAlchemy <http://www.geoalchemy.org/>`_: GeoAlchemy is an extension of SQLAlchemy allowing the access to Oracle Spatial, PostGis and MySQL.
+ * `Pylons <http://pylonshq.com/>`_: Pylons is a lightweight web framework emphasizing flexibility and rapid development.
+
+MapFish Examples
+----------------
+
+MapFish JavaScript Toolbox
+^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+MapFish JavaScript Toolbox is composed of three JavaScript libraries: ExtJS, OpenLayers and GeoExt. The functionality of all these libraries will be highlighted with some example code.
+
+.. _mapfish_client_extjs:
+
+ExtJS
+^^^^^
+
+Ext JS is a cross-browser JavaScript library for building rich internet applications. It provides a `very large list of UI components <http://www.extjs.com/deploy/dev/examples/samples.html>`_.
+
+.. note::
+
+   In order to play with ExtJS, it is needed to reference the ExtJS library and the associated css. For simplicity, we have prepared an accessible build with `CacheFly <http://extjs.com/products/extjs/build/index.php>`_.
+
+   Then, simply add the following code in the html page:
+
+   <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+
+   <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+
+Ext "Hello World"
+:::::::::::::::::
+
+Create your own html page with the following code :download:`extjs_hello_world.html <_static/extjs_hello_world.html>`.
+If you open it in a browser, you should get a message "Hello World!  You have ExtJS configured correctly!"
+
+.. raw:: html
+
+    <a id="showRef2" href="javascript:showdiv('codeBlock2','showRef2','hideRef2')">Show code</a>
+    <a id="hideRef2" href="javascript:hidediv('codeBlock2','showRef2','hideRef2')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock2" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+  <html>
+     <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+        <title id='title'>ExtJS Hello World</title>
+
+        <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+
+        <script type="text/javascript">
+        Ext.onReady(function(){
+           alert("Hello World!  You have ExtJS configured correctly!");
+        }); //end onReady
+        </script>
+
+     </head>
+     <body>
+     </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+Ext.Viewport
+::::::::::::
+
+The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Let's have a look at the configuration of a `viewport <http://www.extjs.com/deploy/dev/docs/?class=Ext.Viewport>`_:
+
+To test: :download:`extjs_viewport.html <_static/extjs_viewport.html>`
+
+.. raw:: html
+
+    <a id="showRef3" href="javascript:showdiv('codeBlock3','showRef3','hideRef3')">Show code</a>
+    <a id="hideRef3" href="javascript:hidediv('codeBlock3','showRef3','hideRef3')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock3" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+  <html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
+    <title id='title'>ExtJS Viewport</title>
+
+    <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css"/>
+
+    <script type="text/javascript">
+        Ext.onReady(function() {
+            new Ext.Viewport({
+                layout: 'border',
+                items: [
+                    {
+                        region: 'north',
+                        html: '<h1 class="x-panel-header">Page Title</h1>',
+                        autoHeight: true,
+                        border: false,
+                        margins: '0 0 5 0'
+                    },
+                    {
+                        region: 'west',
+                        collapsible: true,
+                        title: 'Navigation',
+                        xtype: 'treepanel',
+                        width: 200,
+                        autoScroll: true,
+                        split: true,
+                        loader: new Ext.tree.TreeLoader(),
+                        root: new Ext.tree.AsyncTreeNode({
+                            expanded: true,
+                            children: [
+                                {
+                                    text: 'Menu Option 1',
+                                    leaf: true
+                                },
+                                {
+                                    text: 'Menu Option 2',
+                                    leaf: true
+                                },
+                                {
+                                    text: 'Menu Option 3',
+                                    leaf: true
+                                }
+                            ]
+                        }),
+                        rootVisible: false,
+                        listeners: {
+                            click: function(n) {
+                                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
+                            }
+                        }
+                    },
+                    {
+                        region: 'center',
+                        xtype: 'tabpanel',
+                        items: {
+                            title: 'Default Tab',
+                            html: 'The first tab\'s content. Others may be added dynamically'
+                        }
+                    },
+                    {
+                        region: 'south',
+                        title: 'Information',
+                        collapsible: true,
+                        html: 'Information goes here',
+                        split: true,
+                        height: 100,
+                        minHeight: 100
+                    }
+                ]
+            });
+        }); //end onReady
+    </script>
+
+  </head>
+  <body>
+  </body>
+  </html>
+
+.. raw:: html
+
+   </div>
+
+Ext.grid.GridPanel
+::::::::::::::::::
+
+`Globe application <http://map.globe.admin.ch>`_ uses a `grid panel <http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel>`_:
+
+ .. image:: _static/mapfish_globe.png
+
+.. _mapfish_client_openlayers:
+
+OpenLayers
+^^^^^^^^^^
+
+OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source.
+
+Have a look at the `OpenLayers examples <http://openlayers.org/dev/examples/>`_ to see the power of this library.
+
+.. note::
+
+   In order to play with OpenLayers, it is needed to reference the OpenLayers library.
+
+   Simply add the following code in the html page:
+
+   <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+
+Map
+:::
+
+Instances of `OpenLayers.Map <http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Map-js.html>`_ are interactive maps embedded in a web page.
+
+To test: :download:`openlayers_map.html <_static/openlayers_map.html>`
+
+.. raw:: html
+
+    <a id="showRef4" href="javascript:showdiv('codeBlock4','showRef4','hideRef4')">Show code</a>
+    <a id="hideRef4" href="javascript:hidediv('codeBlock4','showRef4','hideRef4')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock4" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html>
+   <head>
+      <title>OpenLayers Map</title>
+
+      <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+
+      <script type="text/javascript">
+         var map, layer;
+         function init() {
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                    );
+            map.addLayer(layer);
+            map.zoomToMaxExtent();
+         }
+      </script>
+   </head>
+
+   <body onload="init()">
+
+   <div id="map"></div>
+
+   </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+Editing Toolbar
+:::::::::::::::
+
+`Editing Toolbar <http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/_staticOpenLayers/Control/EditingToolbar-js.html>`_
+
+To test: :download:`openlayers_editing_toolbar.html <_static/openlayers_editing_toolbar.html>`
+
+.. raw:: html
+
+    <a id="showRef5" href="javascript:showdiv('codeBlock5','showRef5','hideRef5')">Show code</a>
+    <a id="hideRef5" href="javascript:hidediv('codeBlock5','showRef5','hideRef5')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock5" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+    <title>OpenLayers Editing Toolbar </title>
+
+    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+
+    <script type="text/javascript">
+        var lon = 5;
+        var lat = 40;
+        var zoom = 5;
+        var map, layer;
+
+        function init() {
+            layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                    );
+
+            vlayer = new OpenLayers.Layer.Vector("Editable");
+            map = new OpenLayers.Map('map', {
+                controls: [
+                    new OpenLayers.Control.PanZoom(),
+                    new OpenLayers.Control.EditingToolbar(vlayer)
+                ]
+            });
+            map.addLayers([layer, vlayer]);
+
+            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+        }
+    </script>
+   </head>
+   <body onload="init()">
+   <div id="map"></div>
+   </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+Popup
+:::::
+
+`Swissrivers.ch application <http://www.swissrivers.ch>`_ uses `OpenLayers popups <http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Popup-js.html>`_ to present hydrogramms.
+
+ .. image:: _static/mapfish_swissrivers.png
+
+.. _mapfish_client_geoext:
+
+GeoExt
+^^^^^^
+
+GeoExt is a JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and ExtJS.
+
+Have a look at the `GeoExt examples <http://dev.geoext.org/trunk/geoext/examples/>`_ to see the power of this library.
+
+.. note::
+
+   In order to play with GeoExt, it is needed to reference the OpenLayers, ExtJS and GeoExt library.
+
+   For GeoExt, simply add the following code in the html page:
+
+   <script src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+
+GeoExt.MapPanel
+:::::::::::::::
+
+A GeoExt MapPanel is an OpenLayers map integrated into an ExtJS Panel.
+
+To test: :download:`geoext_mappanel.html <_static/geoext_mappanel.html>`
+
+.. raw:: html
+
+    <a id="showRef6" href="javascript:showdiv('codeBlock6','showRef6','hideRef6')">Show code</a>
+    <a id="hideRef6" href="javascript:hidediv('codeBlock6','showRef6','hideRef6')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock6" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html>
+   <head>
+
+    <title>GeoExt Map Panel</title>
+    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
+    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
+    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css"/>
+
+    <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+
+
+    <script src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js" type="text/javascript"></script>
+
+    <script type="text/javascript">
+        Ext.onReady(function() {
+            var map = new OpenLayers.Map();
+            var layer = new OpenLayers.Layer.WMS(
+                "Global Imagery",
+                "http://maps.opengeo.org/geowebcache/service/wms",
+                {layers: "bluemarble"}
+            );
+            map.addLayer(layer);
+
+            new GeoExt.MapPanel({
+                renderTo: 'gxmap',
+                height: 400,
+                width: 600,
+                map: map,
+                title: 'GeoExt Map Panel'
+            });
+        });
+    </script>
+   </head>
+   <body>
+   <div id="gxmap"></div>
+   </body>
+   </html>
+
+.. raw:: html
+
+    </div>
+
+GeoExt.Action
+:::::::::::::
+
+GeoExt provides the GeoExt.Action class for adaptating a control to an object that can be inserted in a toolbar or in a menu.
+
+To test: :download:`geoext_action.html <_static/geoext_action.html>`
+
+.. raw:: html
+
+    <a id="showRef7" href="javascript:showdiv('codeBlock7','showRef7','hideRef7')">Show code</a>
+    <a id="hideRef7" href="javascript:hidediv('codeBlock7','showRef7','hideRef7')" style="display: none; visibility: hidden">Hide code</a>
+    <div id="codeBlock7" style="display: none; visibility: hidden">
+
+.. code-block:: html
+
+   <html>
+   <head>
+       <title>GeoExt Action</title>
+
+       <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
+       <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
+       <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
+       <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css"/>
+
+       <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+
+
+       <script type="text/javascript" src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+
+       <script type="text/javascript">
+           Ext.onReady(function() {
+               var map = new OpenLayers.Map();
+               var wms = new OpenLayers.Layer.WMS(
+                   "Global Imagery",
+                   "http://maps.opengeo.org/geowebcache/service/wms",
+                   {layers: "bluemarble"}
+               );
+               var vector = new OpenLayers.Layer.Vector("vector");
+               map.addLayers([wms, vector]);
+
+               var ctrl, toolbarItems = [], action, actions = {};
+
+               // ZoomToMaxExtent control, a "button" control
+               action = new GeoExt.Action({
+                   control: new OpenLayers.Control.ZoomToMaxExtent(),
+                   map: map,
+                   text: "max extent"
+               });
+               actions["max_extent"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("-");
+
+               // Navigation control and DrawFeature controls
+               // in the same toggle group
+               action = new GeoExt.Action({
+                   text: "nav",
+                   control: new OpenLayers.Control.Navigation(),
+                   map: map,
+                   // button options
+                   toggleGroup: "draw",
+                   allowDepress: false,
+                   pressed: true,
+                   // check item options
+                   group: "draw",
+                   checked: true
+               });
+               actions["nav"] = action;
+               toolbarItems.push(action);
+
+               action = new GeoExt.Action({
+                   text: "draw poly",
+                   control: new OpenLayers.Control.DrawFeature(
+                           vector, OpenLayers.Handler.Polygon
+                           ),
+                   map: map,
+                   // button options
+                   toggleGroup: "draw",
+                   allowDepress: false,
+                   // check item options
+                   group: "draw"
+               });
+               actions["draw_poly"] = action;
+               toolbarItems.push(action);
+
+               action = new GeoExt.Action({
+                   text: "draw line",
+                   control: new OpenLayers.Control.DrawFeature(
+                           vector, OpenLayers.Handler.Path
+                           ),
+                   map: map,
+                   // button options
+                   toggleGroup: "draw",
+                   allowDepress: false,
+                   // check item options
+                   group: "draw"
+               });
+               actions["draw_line"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("-");
+
+               // SelectFeature control, a "toggle" control
+               action = new GeoExt.Action({
+                   text: "select",
+                   control: new OpenLayers.Control.SelectFeature(vector, {
+                       type: OpenLayers.Control.TYPE_TOGGLE,
+                       hover: true
+                   }),
+                   map: map,
+                   // button options
+                   enableToggle: true
+               });
+               actions["select"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("-");
+
+               // Navigation history - two "button" controls
+               ctrl = new OpenLayers.Control.NavigationHistory();
+               map.addControl(ctrl);
+
+               action = new GeoExt.Action({
+                   text: "previous",
+                   control: ctrl.previous,
+                   disabled: true
+               });
+               actions["previous"] = action;
+               toolbarItems.push(action);
+
+               action = new GeoExt.Action({
+                   text: "next",
+                   control: ctrl.next,
+                   disabled: true
+               });
+               actions["next"] = action;
+               toolbarItems.push(action);
+               toolbarItems.push("->");
+
+               // Reuse the GeoExt.Action objects created above
+               // as menu items
+               toolbarItems.push({
+                   text: "menu",
+                   menu: new Ext.menu.Menu({
+                       items: [
+                           // ZoomToMaxExtent
+                           actions["max_extent"],
+                           // Nav
+                           new Ext.menu.CheckItem(actions["nav"]),
+                           // Draw poly
+                           new Ext.menu.CheckItem(actions["draw_poly"]),
+                           // Draw line
+                           new Ext.menu.CheckItem(actions["draw_line"]),
+                           // Select control
+                           new Ext.menu.CheckItem(actions["select"]),
+                           // Navigation history control
+                           actions["previous"],
+                           actions["next"]
+                       ]
+                   })
+               });
+
+               var mapPanel = new GeoExt.MapPanel({
+                   renderTo: "mappanel",
+                   height: 400,
+                   width: 600,
+                   map: map,
+                   center: new OpenLayers.LonLat(5, 45),
+                   zoom: 4,
+                   tbar: toolbarItems
+               });
+           });
+       </script>
+
+       <style type="text/css">
+               /* work around an Ext bug that makes the rendering
+                  of menu items not as one would expect */
+           .ext-ie .x-menu-item-icon {
+               left: -24px;
+           }
+
+           .ext-strict .x-menu-item-icon {
+               left: 3px;
+           }
+
+           .ext-ie6 .x-menu-item-icon {
+               left: -24px;
+           }
+
+           .ext-ie7 .x-menu-item-icon {
+               left: -24px;
+           }
+       </style>
+   </head>
+   <body>
+   <div id="mappanel"></div>
+   </body>
+
+   </html>
+   
+.. raw:: html
+
+    </div>

sandbox/cmoullet/2010_mapfish_workshop_fhnw/source/mapfish.rst

@@ -2 +2 @@
 *******
 
- * Install MapFish
+This part of the workshop is adapted from the `workshop <http://dev.mapfish.org/sandbox/camptocamp/mapfish_workshop_fossgis2010/printing_src/_build/html/>`_ workshop provided by Eric Lemoine and François Van der Biest at Foss4G 2010 in Barcelona.
+
+Contents:
+
+.. toctree::
+   :maxdepth: 2
+
+   getting_started
+