[Commits] r2281 - in sandbox/foss4g2010/src/doc: . basics layout
commits at geoext.org
commits at geoext.org
Tue Aug 24 17:57:34 CEST 2010
Author: pgiraud
Date: 2010-08-24 17:57:34 +0200 (Tue, 24 Aug 2010)
New Revision: 2281
Modified:
sandbox/foss4g2010/src/doc/basics/dissect.rst
sandbox/foss4g2010/src/doc/index.rst
sandbox/foss4g2010/src/doc/layout/index.rst
sandbox/foss4g2010/src/doc/layout/layout.rst
sandbox/foss4g2010/src/doc/layout/legend.rst
sandbox/foss4g2010/src/doc/layout/tree.rst
Log:
several updates
Modified: sandbox/foss4g2010/src/doc/basics/dissect.rst
===================================================================
--- sandbox/foss4g2010/src/doc/basics/dissect.rst 2010-08-24 13:50:56 UTC (rev 2280)
+++ sandbox/foss4g2010/src/doc/basics/dissect.rst 2010-08-24 15:57:34 UTC (rev 2281)
@@ -122,7 +122,7 @@
143.83482400000003, -43.648056,
148.47914100000003, -39.573891
)
- }
+ }]
}
We set some properties, like the ``title``, ``height`` and ``width`` of our window.
Modified: sandbox/foss4g2010/src/doc/index.rst
===================================================================
--- sandbox/foss4g2010/src/doc/index.rst 2010-08-24 13:50:56 UTC (rev 2280)
+++ sandbox/foss4g2010/src/doc/index.rst 2010-08-24 15:57:34 UTC (rev 2281)
@@ -1,7 +1,8 @@
FOSS4G 2010 Tutorial "Building web based GIS applications with GeoExt"
======================================================================
-Welcome to the **FOSS4G 2010 Tutorial "Building web based GIS applications with GeoExt"**
+Welcome to the **FOSS4G 2010 Tutorial "Building web based GIS applications with GeoExt"**.
+
This tutorial is designed to introduce GeoExt as a web mapping frontend.
Topics Covered
Modified: sandbox/foss4g2010/src/doc/layout/index.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/index.rst 2010-08-24 13:50:56 UTC (rev 2280)
+++ sandbox/foss4g2010/src/doc/layout/index.rst 2010-08-24 15:57:34 UTC (rev 2281)
@@ -7,7 +7,11 @@
Widgets And Layout
==================
+In the previous part, you saw how to start with the creation of a simple GeoExt application. You learned how to load the required javascript libraries and css files.
+You also created your first map in a ``GeoExt.MapPanel`` displayed in an ``Ext.Window``.
+Let's go further by adding some other great GeoExt widgets and arrange them in a more complex layout.
+
What this module covers
-----------------------
Modified: sandbox/foss4g2010/src/doc/layout/layout.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/layout.rst 2010-08-24 13:50:56 UTC (rev 2280)
+++ sandbox/foss4g2010/src/doc/layout/layout.rst 2010-08-24 15:57:34 UTC (rev 2281)
@@ -3,12 +3,25 @@
Organize the Application Interface Using a ViewPort
===================================================
-A viewport is a container inside the viewable application area, i.e. the browser viewport and sizes itself to the size available.
+Viewport
+--------
-A viewport is split in several part called center, east, west, north and south.
+A viewport is a specialized container representing the viewable application area (the browser viewport).
-Now we have built our 3 panels (legend, tree and map) we need to join all together to get a nice interface! This is what layout are used for.
+The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing.
+Border Layout
+-------------
+
+This viewport can be split in several part called center, east, west, north and south using a ``Ext.layout.BorderLayout`` which will tell how nested panels will arrange (position themselves) against each other.
+
+.. note::
+ ViewPort and BorderLayout are two different concepts though a border layout is often used as the layout for a viewport container.
+
+Let's assemble our 3 available panels into a nice layout.
+
+Each item (panel) of a container which layout is of `border`'s type needs a `region` config parameter to be properly positionned. Also, at least one region is required: 'center'. Let's use this region for the `MapPanel`.
+
.. code-block:: javascript
Ext.onReady(function() {
@@ -96,10 +109,10 @@
});
});
-The `MapPanel` is now an instance like `LegendPanel` and `TreePanel`, we added a `region` property to setup the location in the viewport.
+What about using tabs for the left side (west) of the layout?
-You can add panel in the viewport instance. Add this tab panel in the viewport:
-
+The following code is to be added as an item to the viewport:
+
.. code-block:: javascript
{
@@ -108,23 +121,15 @@
width: 250
}
-In this tab panel we add tabs. The first one will be used for the tree Panel. Add the config object below in the `items` property of the tab panel:
+Since an ``Ext.TabPanel`` is a `Container`, it can be given items:
.. code-block:: javascript
activeTab: 0,
- items: [tree]
+ items: [tree, legendPanel]
.. warning::
Don't forget to add a title to the tree panel otherwise you will get ugly empty tab. Also no need to render the panel, the rendering will be done by Ext while doing the layout.
-Repeat the same operation for legendPanel. You should now have a column on the left with two tabs.
-
-.. code-block:: javascript
-
- {
- activeTab: 1,
- title: "Legend",
- items: [legendPanel]
- }
+Reload your application. You should now see a column on the left with two tabs.
Modified: sandbox/foss4g2010/src/doc/layout/legend.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/legend.rst 2010-08-24 13:50:56 UTC (rev 2280)
+++ sandbox/foss4g2010/src/doc/layout/legend.rst 2010-08-24 15:57:34 UTC (rev 2281)
@@ -16,6 +16,6 @@
});
legendPanel.render(document.body);
-The LegendPanel instance will change any time you load or unload layers.
+The legend panel will change any time you load or unload layers.
-As for the `treePanel` instance the last line render the legend panel inside the body tag of the page. You can use the `render` property as well. The three properties in the LegendPanel instance allow you to setup style via CSS in three different ways: class reference for labelCls or css code for the others.
\ No newline at end of file
+As for the `treePanel`, the last line renders the legend panel inside the body tag of the page. You can use the `renderTo` property as well.
Modified: sandbox/foss4g2010/src/doc/layout/tree.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/tree.rst 2010-08-24 13:50:56 UTC (rev 2280)
+++ sandbox/foss4g2010/src/doc/layout/tree.rst 2010-08-24 15:57:34 UTC (rev 2281)
@@ -3,8 +3,16 @@
Add a Tree to Manage the Map Layers
===================================
-We want several layers: base and overlay layers. Add a ``layers`` array to match the following. Note that it is pure OpenLayers code.
+In modern geo-web applications, layers visibility are often managed by using a tree. Unsurprisingly GeoExt provides all
+the required advanced features to build a layers tree.
+Add layers
+----------
+
+We currently have only one layer loaded in our map. Let's add some layers.
+
+Add a ``layers`` array to match the following. Note that it is pure OpenLayers code.
+
.. code-block:: javascript
var layers = [
@@ -84,22 +92,93 @@
map: new OpenLayers.Map({allOverlays: false})
-The code below create the `treePanel` following a `treeConfig` object.
+Node Types
+----------
+In GeoExt, the way to display the list of layers in a tree is as simple as
+using a ``Ext.tree.TreePanel`` populated with nodes with a specific type. Several
+layer-aware node types are available.
+
.. code-block:: javascript
- var treeConfig = [{
- nodeType: "gx_baselayercontainer"
+ var tree = new Ext.tree.TreePanel({
+ root: {},
+ rootVisible: false
+ });
+ tree.render(document.body);
+
+The simplest one is the ``GeoExt.tree.LayerNode``. It can be added anywhere in
+a tree, and it creates a tree node for a given layer.
+
+
+.. code-block:: javascript
+
+ var node = new GeoExt.tree.LayerNode({
+ layer: "Tasmania (Group Layer)"
+ });
+ tree.appendChild(node);
+
+For layers that have a params property (like ``OpenLayers.Layer.WMS``), if a `loader` config is given with a `param` property, then subnodes will be created using the given param.
+In the example below, sub-nodes are created using the `LAYERS` parameter. Another example of usage could be `CQL_FILTER`.
+
+You can try it with the "Tasmania" layer:
+
+.. code-block:: javascript
+
+ var node = new GeoExt.tree.LayerNode({
+ layer: "Tasmania (Group Layer)",
+ loader: {
+ param: "LAYERS"
+ }
+ });
+
+One can also use containers to easily render layers as groups.
+``GeoExt.tree.LayerContainer`` automatically pulls in all the layers from the
+map.
+
+.. code-block:: javascript
+
+ var node = new GeoExt.tree.LayerContainer({
+ text: "All layers"
+ });
+ tree.root.appendChild(node);
+
+.. note::
+
+ You may have noticed that the "Tasmania" layer does not appear in the container. This is because displayInLayerSwitcher is set to false in the layer's options.
+
+Other containers with a preconfigured filter are also available:
+
+- ``GeoExt.tree.BaseLayerContainer`` will be populated only with layers that have isBaseLayer set to true,
+- ``GeoExt.tree.OverlayLayerContainer`` will be populated only with layers that have isBaseLayer set to false.
+
+Remplace the code above by the following:
+
+.. code-block:: javascript
+
+ var node = new GeoExt.tree.BaseLayerContainer({
+ text: "Base Layers"
+ });
+ tree.root.appendChild(node);
+ var node = new GeoExt.tree.OverlayLayerContainer({
+ text: "Overlay Layers"
+ });
+ tree.root.appendChild(node);
+
+In the same manner as `xtype` for components, one is invited to use shortcuts for node types. Respectively ``gx_layer``, ``gx_baselayercontainer`` and ``gx_overlaylayercontainer``.
+
+.. code-block:: javascript
+
+ var layerList = [{
+ nodeType: "gx_baselayercontainer",
+ text: "Base Layers"
}, {
nodeType: "gx_overlaylayercontainer",
+ text: "Overlay Layers",
expanded: true
}, {
nodeType: "gx_layer",
layer: "Tasmania (Group Layer)",
- isLeaf: false,
- // create subnodes for the layers in the LAYERS param. If we assign
- // a loader to a LayerNode and do not provide a loader class, a
- // LayerParamLoader will be assumed.
loader: {
param: "LAYERS"
}
@@ -110,30 +189,16 @@
applyLoader: false
}),
root: {
- nodeType: "async",
- children: treeConfig
+ children: layerList
},
rootVisible: false
});
tree.render(document.body);
-Don't forget to add a title to the tree panel.
-
.. note::
- the `treeConfig` instance don't refer to the mapPanel instance. An internal method is used to find a MapPanel instance (the first MapPanel instance find actually).
+ You may ask why we don't need to refer to any mapPanel instance. Thanks to an internal method the MapPanel is guessed, the first instance found actually.
-The treeConfig array allow to configure the layer tree. You have two layer container: baselayercontainer and overlaylayercontainer. The first one will contains base layer and the latter one overlays. The expand parameter allow you to expand tree when loaded.
+The `expanded` parameter allows you to expand tree when loaded.
-You can also create your own tree with the `gx_layer` value in the nodeType property. The `layer` property link to the layers called "Tasmania (Group Layer)" in the layers array and the `loader` method tell which parameter used in the URL to get the layer name, LAYER parameter in this case which is the parameter which list the layer name to retreive in a WMS request.
+A ``Ext.tree.TreeLoader`` with a `applyLoader` param set to false is required to not interfer with loaders of nodes further down the tree hierarchy.
-The TreePanel is a normal ExtJS panel. Several options are available, here arethe one we used:
-
-- `border`: to add a border line around the panel, (defaults to true).
-- `loader`: A Ext.tree.TreeLoader for use with this TreePanel.
-- `root`: The root node for the tree.
-- `rootVisible`: false to hide the root node (defaults to true)
-
-The last line render the `tree` instance inside the body tag of the page. You can use the `render` property inside the tree instance to do the same thing.
-
-
-
More information about the Commits
mailing list