[Commits] r1895 - in sandbox/styler: . ux ux/Styler ux/Styler/examples ux/Styler/ux ux/Styler/ux/widgets
commits at geoext.org
commits at geoext.org
Fri Feb 12 21:36:25 CET 2010
Author: juliensam
Date: 2010-02-12 21:36:25 +0100 (Fri, 12 Feb 2010)
New Revision: 1895
Added:
sandbox/styler/ux/
sandbox/styler/ux/Styler/
sandbox/styler/ux/Styler/examples/
sandbox/styler/ux/Styler/examples/feature-style-selector.html
sandbox/styler/ux/Styler/examples/feature-style-selector.js
sandbox/styler/ux/Styler/license.txt
sandbox/styler/ux/Styler/ux/
sandbox/styler/ux/Styler/ux/LayerStyleManager.js
sandbox/styler/ux/Styler/ux/widgets/
sandbox/styler/ux/Styler/ux/widgets/StyleSelectorComboBox.js
Log:
Addition of basic Styler
Added: sandbox/styler/ux/Styler/examples/feature-style-selector.html
===================================================================
--- sandbox/styler/ux/Styler/examples/feature-style-selector.html (rev 0)
+++ sandbox/styler/ux/Styler/examples/feature-style-selector.html 2010-02-12 20:36:25 UTC (rev 1895)
@@ -0,0 +1,35 @@
+<html>
+ <head>
+ <title>GeoExt Feature Style Selector Example</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" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+ <script src="../../../trunk/openlayers/lib/OpenLayers.js"></script>
+ <script type="text/javascript" src="../../../trunk/geoext/lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="../ux/LayerStyleManager.js"></script>
+ <script type="text/javascript" src="../ux/widgets/StyleSelectorComboBox.js"></script>
+ <script type="text/javascript" src="feature-style-selector.js"></script>
+
+ </head>
+ <body>
+ <div id="title">
+ <h1>GeoExt Style Selector in a ComboBox</h1>
+ </div>
+
+ <div id="description">
+ <p>This example shows how to use the Styler ux to change the style of a feature. The Styler is made of 2 parts:
+ <ul><li>The LayerStyleManager</li><li>A Styler</li></ul></p>
+
+ <p><b>LayerStyleManager:</b> This object is a manager that provides methods to set the current layer and/or current feature(s) being worked on. This manager contains Events that are fired when a style is changed. This object take the style from returned by the Styler and apply it to the layer or feature. </p>
+
+ <p><b>Styler:</b> The Styler object is the type of styler displayed by the LayerStyleManager. This UX can contains many different stylers, from the simple style list in a combobox to a full fledged filter builder that includes a complex style creation tool. The only requirement is for the Styler to have a <u>createLayout</u> method that returns a ExtJS component and a <u>change</u> event that is used to return the Style or Rule to apply to the layer(s) or feature(s). </p>
+
+ <p>By using this concept, we could have many different representation of the Styler (complex, simple, with rules or not, etc.) and always use the same LayerStyleManager object to interact with them.</p>
+
+ <p>The js is not minified so it is readable. See <a
+ href="feature-style-selector.js">feature-style-selector.js</a>.</p>
+ </div>
+ </body>
+</html>
Added: sandbox/styler/ux/Styler/examples/feature-style-selector.js
===================================================================
--- sandbox/styler/ux/Styler/examples/feature-style-selector.js (rev 0)
+++ sandbox/styler/ux/Styler/examples/feature-style-selector.js 2010-02-12 20:36:25 UTC (rev 1895)
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2010 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+/** api: example[zoom-chooser]
+ * Style Selector
+ * --------------
+ * Use a ComboBox to select the style of a feature
+ */
+
+var mapPanel;
+
+Ext.onReady(function() {
+
+
+ // if true a google layer is used, if false
+ // the bluemarble WMS layer is used
+ var options, layer;
+ var extent = new OpenLayers.Bounds(-5, 35, 15, 55);
+
+ layer = new OpenLayers.Layer.WMS(
+ "Global Imagery",
+ "http://maps.opengeo.org/geowebcache/service/wms",
+ {layers: "bluemarble"},
+ {isBaseLayer: true}
+ );
+
+ var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
+
+ // create a point feature
+ var point = new OpenLayers.Geometry.Point(0, 45);
+ var pointFeature = new OpenLayers.Feature.Vector(point,null);
+
+ vectorLayer.addFeatures([pointFeature]);
+
+ var map = new OpenLayers.Map(options);
+
+
+ var styleStore = new Ext.data.SimpleStore( {
+ fields: ['name', 'style'],
+ data: [
+ ['blue', {fillColor: 'blue', pointRadius: 6}],
+ ['big red', {fillColor: 'red', pointRadius: 12}],
+ ['tiny red', {fillColor: 'red', pointRadius: 5}],
+ ['yellow', {fillColor: 'yellow', pointRadius: 6}]
+ ]
+ });
+
+ var styler = new GeoExt.ux.LayerStyleManager(new GeoExt.ux.StyleSelectorComboBox({
+ region: "west",
+ store: styleStore,
+ title: "Style selection",
+ width: 220,
+ split: true
+ }), {});
+
+ styler.setCurrentFeature(pointFeature);
+
+ var layout = styler.createLayout({});
+
+ new Ext.Viewport({
+ layout: "border",
+ items: [{
+ region: "north",
+ contentEl: "title",
+ height: 50
+ }, {
+ region: "center",
+ id: "mappanel",
+ title: "Map",
+ xtype: "gx_mappanel",
+ map: map,
+ layers: [layer, vectorLayer],
+ extent: extent,
+ split: true
+ }, {
+ region: "east",
+ title: "Description",
+ contentEl: "description",
+ width: 400,
+ split: true
+ }, layout]
+ });
+
+ mapPanel = Ext.getCmp("mappanel");
+
+});
+
Added: sandbox/styler/ux/Styler/license.txt
===================================================================
--- sandbox/styler/ux/Styler/license.txt (rev 0)
+++ sandbox/styler/ux/Styler/license.txt 2010-02-12 20:36:25 UTC (rev 1895)
@@ -0,0 +1,43 @@
+This license applies to all code and content hosted in this directory of the
+repository. It does not apply to external code and content which may be
+checked out in working copies (due to svn:externals properties on
+subdirectories).
+
+License
+=======
+
+Copyright (c) 2010, The Open Source Geospatial Foundation
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright notice,
+ this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+ * Neither the name of the Open Source Geospatial Foundation nor the names
+ of its contributors may be used to endorse or promote products derived
+ from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+
+
+Notice about ExtJS
+==================
+
+The GeoExt library is for use with the ExtJS library. ExtJS is distributed
+under the terms of the GPL v3. See http://extjs.com/products/license.php for
+details on ExtJS licensing.
Added: sandbox/styler/ux/Styler/ux/LayerStyleManager.js
===================================================================
--- sandbox/styler/ux/Styler/ux/LayerStyleManager.js (rev 0)
+++ sandbox/styler/ux/Styler/ux/LayerStyleManager.js 2010-02-12 20:36:25 UTC (rev 1895)
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2010 The Open Source Geospatial Foundation
+ *
+ * This is based on The Open Planning Project Styler:
+ * http://svn.opengeo.org/suite/trunk/styler/
+ */
+Ext.namespace("GeoExt.ux");
+
+/**
+ * Constructor: LayerStyleManager
+ * Create a new styler application.
+ *
+ * Extends: Ext.util.Observable
+ */
+GeoExt.ux.LayerStyleManager = Ext.extend(Ext.util.Observable, {
+
+ currentLayer: null,
+ currentFeature: null,
+ styler: null,
+
+ constructor: function(styler, config) {
+ config = config || {};
+
+ this.styler = styler;
+
+ this.addEvents(
+ /**
+ * Event: layerchanged
+ * Fires when the active layer is changed.
+ *
+ * Listener arguments:
+ * layer - {OpenLayers.Layer} The newly active layer.
+ */
+ "layerchanged",
+
+ /**
+ * Event: featurechanged
+ * Fires when the active feature is changed.
+ *
+ * Listener arguments:
+ * feature - {OpenLayers.Feature} The newly active feature.
+ */
+ "featurechanged",
+
+ /**
+ * Event: ruleupdated
+ * Fires when a rule is modified.
+ *
+ * Listener arguments:
+ * rule - {OpenLayers.Rule} The rule modified.
+ */
+ "styleupdated"
+
+ );
+
+ this.initialConfig = Ext.apply({}, config);
+ Ext.apply(this, config);
+
+ GeoExt.ux.LayerStyleManager.superclass.constructor.call(this);
+
+ },
+
+ /**
+ * Method: createLayout
+ * Create the layout of this object.
+ * Redefine this function when extending the class
+ */
+ createLayout: function(config) {
+ var layout = null;
+ if(this.styler) {
+ layout = this.styler.createLayout(config);
+ this.styler.on('change', function(style) {
+ if(this.currentFeature && style && this.currentFeature.style != style) {
+ this.currentFeature.style = style;
+ this.currentLayer.redraw();
+ this.fireEvent("styleupdated", this.currentFeature);
+ }
+ }, this);
+ }
+
+ return layout;
+ },
+
+ /**
+ * Method: setCurrentLayer
+ */
+ setCurrentLayer: function(layer) {
+ if(layer && layer != this.currentLayer)
+ {
+ this.currentLayer = layer;
+ this.fireEvent("layerchanged", this.currentLayer);
+ }
+
+ return this.currentLayer;
+ },
+
+ /**
+ * Method: setCurrentFeature
+ */
+ setCurrentFeature: function(feature) {
+ if(feature && feature != this.currentFeature)
+ {
+ this.currentFeature = feature;
+ this.fireEvent("featurechanged", this.currentFeature);
+
+ this.setCurrentLayer(feature.layer);
+ }
+
+ return this.currentFeature;
+ }
+
+
+});
Added: sandbox/styler/ux/Styler/ux/widgets/StyleSelectorComboBox.js
===================================================================
--- sandbox/styler/ux/Styler/ux/widgets/StyleSelectorComboBox.js (rev 0)
+++ sandbox/styler/ux/Styler/ux/widgets/StyleSelectorComboBox.js 2010-02-12 20:36:25 UTC (rev 1895)
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2010 The Open Source Geospatial Foundation
+ */
+
+/**
+ * Copyright (c) 2010 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ *
+ * This is loosely based on The Open Planning Project Styler:
+ * http://svn.opengeo.org/suite/trunk/styler/
+ */
+Ext.namespace("GeoExt.ux");
+
+/** api: (define)
+ * module = GeoExt.ux.form
+ * class = StyleSelectorComboBox
+ * base_link = `Ext.form.FormPanel <http://extjs.com/deploy/dev/docs/?class=Ext.form.FormPanel>`_
+ */
+
+/** api: constructor
+ * .. class:: StyleSelectorComboBox
+ *
+ * Todo
+ */
+GeoExt.ux.StyleSelectorComboBox = Ext.extend(Ext.Panel, {
+
+ store: null,
+
+ /** private: method[initComponent]
+ */
+ initComponent: function() {
+
+ this.addEvents(
+ /**
+ * Event: change
+ * Fires when the style is changed.
+ *
+ * Listener arguments:
+ * style - {OpenLayers.Style} The style selected.
+ */
+ "change"
+
+ );
+
+ this.initComboBox();
+
+ GeoExt.ux.StyleSelectorComboBox.superclass.initComponent.call(this);
+ },
+
+ createLayout: function(config) {
+ return this;
+ },
+
+ /** private: method[initForm]
+ * Create field options and link them to the controler controls and actions
+ */
+ initComboBox: function() {
+ var oItems= Array();
+
+ if(this.store == null){
+ return;
+ }
+
+ var oCombo = new Ext.form.ComboBox({
+ store: this.store,
+ emptyText: "Style Selection",
+ tpl: '<tpl for="."><div class="x-combo-list-item">{[values.name]}</div></tpl>',
+ editable: false,
+ triggerAction: 'all', // needed so that the combo box doesn't filter by its current content
+ mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes
+ });
+
+ oItems.push(oCombo);
+
+ oCombo.on('select',
+ function(combo, record, index) {
+ oCombo.setValue(record.data.name);
+ this.fireEvent("change", OpenLayers.Util.applyDefaults(record.data.style, OpenLayers.Feature.Vector.style['default']));
+ },
+ this
+ );
+
+ Ext.apply(this, {items: oItems});
+ }
+
+});
+
+/** api: xtype = gx_minisymbolizer */
+Ext.reg("gx_styleselectorcombobox", GeoExt.ux.StyleSelectorComboBox);
More information about the Commits
mailing list