[Commits] r2207 - in sandbox/camptocamp/extensions/geoext.ux/ux: . FeatureBrowser FeatureBrowser/examples FeatureBrowser/lib FeatureBrowser/lib/GeoExt.ux FeatureBrowser/tests FeatureBrowser/tests/lib FeatureBrowser/tests/lib/GeoExt.ux
commits at geoext.org
commits at geoext.org
Tue May 25 17:18:38 CEST 2010
Author: pgiraud
Date: 2010-05-25 17:18:38 +0200 (Tue, 25 May 2010)
New Revision: 2207
Added:
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.html
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.js
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/lib/
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/lib/GeoExt.ux/
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/lib/GeoExt.ux/FeatureBrowser.js
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/index.html
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/lib/
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/lib/GeoExt.ux/
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/lib/GeoExt.ux/FeatureBrowser.html
sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/list-tests.html
Log:
FeatureBrowser ux
Added: sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.html
===================================================================
--- sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.html (rev 0)
+++ sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.html 2010-05-25 15:18:38 UTC (rev 2207)
@@ -0,0 +1,22 @@
+<html>
+ <head>
+ <title>FeatureBrowser Example</title>
+
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.1.1/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.1.1/examples/shared/examples.css" />
+
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/ext-all.js"></script>
+ <script src="http://www.openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="../../../../geoext/lib/GeoExt.js"></script>
+
+ <!-- script resources for this ux -->
+ <script type="text/javascript" src="../lib/GeoExt.ux/FeatureBrowser.js"></script>
+
+ <script type="text/javascript" src="featurebrowser.js"></script>
+ </head>
+ <body>
+ <h1>Feature Browser</h1>
+ <p style="margin-bottom:15px;">See <a href="featurebrowser.js">featurebrowser.js</a> for the source code.</p>
+ </body>
+</html>
Added: sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.js
===================================================================
--- sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.js (rev 0)
+++ sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/examples/featurebrowser.js 2010-05-25 15:18:38 UTC (rev 2207)
@@ -0,0 +1,44 @@
+Ext.onReady(function() {
+
+ // required for tooltips
+ Ext.QuickTips.init();
+
+ features = [
+ new OpenLayers.Feature.Vector(null, {
+ name: 'toto',
+ age: '20',
+ photo: 'http://ecx.images-amazon.com/images/I/31DbVJExgLL._SL75_SS50_.jpg',
+ type: 'employee'
+ }),
+ new OpenLayers.Feature.Vector(null, {
+ foo: 'bar',
+ dude: 'truite',
+ type: 'thing'
+ })
+ ];
+
+ var browser = new GeoExt.ux.FeatureBrowser({
+ title: 'Feature Browser - no template',
+ renderTo: Ext.getBody(),
+ width: 200,
+ height: 200,
+ features: features,
+ bodyStyle: "padding: 5px;"
+ });
+
+ var browser = new GeoExt.ux.FeatureBrowser({
+ title: 'Feature Browser - \'type\' attribute dependent template',
+ renderTo: Ext.getBody(),
+ width: 200,
+ height: 200,
+ features: features,
+ tplFeatureAttribute: 'type',
+ tpl: {
+ 'employee': new Ext.Template(
+ '<b>{name}</b>({age})<br />',
+ '<img src="{photo}" />'
+ )
+ },
+ bodyStyle: "padding: 5px;"
+ });
+});
Added: sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/lib/GeoExt.ux/FeatureBrowser.js
===================================================================
--- sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/lib/GeoExt.ux/FeatureBrowser.js (rev 0)
+++ sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/lib/GeoExt.ux/FeatureBrowser.js 2010-05-25 15:18:38 UTC (rev 2207)
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2008-2009 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.
+ */
+
+Ext.namespace("GeoExt.ux");
+
+/** api: (define)
+ * module = GeoExt.ux
+ * class = FeatureBrowser
+ */
+
+/** api: constructor
+ * .. class:: FeatureBrowser(config)
+ *
+ * Creates a Panel to browse in a features list,
+ * show attributes for each using templates.
+ */
+GeoExt.ux.FeatureBrowser = Ext.extend(Ext.Panel, {
+
+ /** api: config[elseTpl]
+ * ``Ext.Template`` | ``Ext.XTemplate`` Ext.Template or Ext.XTemplate
+ * to be used for features which don't match any of the tpl keys.
+ * Will be taken into account only if tpl is an Object. Optional.
+ */
+ elseTpl: null,
+
+ /** api: config[tpl]
+ * ``Ext.Template`` | ``Ext.XTemplate`` | ``Object`` | ``Function``
+ * Ext.Template or Ext.XTemplate to be applied for each feature with
+ * feature.attributes as context. If provided as an Object, each key
+ * may correspond to the value for the tplFeatureAttribute key in the
+ * feature attributes. The corresponding value has to be a valid template.
+ * Optional.
+ */
+ tpl: undefined,
+
+ /** api: config[tplFeatureAttribute]
+ * ``String`` | ``Number``
+ * The attribute which value is to be compared with one of the tpl members
+ * when provided as an Object. Mandatory is tpl is a Object. Optional.
+ */
+ tplFeatureAttribute: null,
+
+ /** api: config[features]
+ * ``Array`` Array of ``OpenLayers.Feature.Vector`` to build the
+ * FeatureBrowser with. Required.
+ */
+ features: null,
+
+ /** private: method[initComponent]
+ */
+ initComponent: function() {
+
+ this.layout = "card";
+
+ var nbFeatures = this.features.length;
+
+ var items = [],
+ feature,
+ tpl;
+ for (var i = 0; i < nbFeatures; i++) {
+ feature = this.features[i];
+ tpl = this.getTemplateForFeature(feature);
+
+ items.push(new Ext.BoxComponent({
+ id: 'card-'+ this.id + i,
+ html: tpl.apply(feature.attributes)
+ }));
+ }
+
+ var bbar = false;
+ if (nbFeatures > 1) {
+ bbar = [
+ nbFeatures + ' éléments',
+ '->',
+ {
+ id: 'move-prev' + this.id,
+ iconCls: "x-tbar-page-prev",
+ handler: this.navHandler.createDelegate(this,
+ [-1, nbFeatures, this.features]),
+ disabled: true,
+ listeners: {
+ click: function(button, e) {
+ e.stopEvent();
+ }
+ }
+ },
+ {
+ id: 'move-next' + this.id,
+ iconCls: "x-tbar-page-next",
+ handler: this.navHandler.createDelegate(this,
+ [1, nbFeatures, this.features]),
+ listeners: {
+ click: function(button, e) {
+ e.stopEvent();
+ }
+ }
+ }
+ ];
+ }
+ this.items = items;
+ this.bbar = bbar;
+ this.activeItem = 0;
+
+ GeoExt.ux.FeatureBrowser.superclass.initComponent.call(this);
+
+ // add custom events
+ this.addEvents(
+
+ /** api: events[featureselected]
+ * Fires when a feature is displayed in the FeatureBrowser.
+ * Application may use this to highlight it on the map, for
+ * example.
+ *
+ * Listener arguments:
+ * * panel - :class:`GeoExt.ux.FeatureBrowser` This panel.
+ * * feature - ``OpenLayers.Feature.Vector`` The selected feature
+ */
+ 'featureselected'
+ );
+ this.fireEvent('featureselected', this, this.features[0]);
+ },
+
+ /** private: method[navHandler]
+ * The navigation handler method. Called when navigation buttons
+ * (next or previous) are clicked
+ */
+ navHandler: function(direction, total, features) {
+ var lay = this.getLayout();
+ var i = lay.activeItem.id.split('card-' + this.id)[1];
+ var next = parseInt(i, 10) + direction;
+ lay.setActiveItem(next);
+ this.fireEvent('featureselected', this, features[next]);
+ Ext.getCmp('move-prev' + this.id).setDisabled(next===0);
+ Ext.getCmp('move-next' + this.id).setDisabled(next==total - 1);
+ },
+
+ /** private: method[getTemplateForFeature]
+ * Returns a template for the given feature.
+ *
+ * :param feature: ``OpenLayers.Feature.Vector`` The feature to create
+ * a template with.
+ *
+ * :return: ``Ext.Template`` | ``Ext.XTemplate`` The created template.
+ */
+ getTemplateForFeature: function(feature) {
+ var tpl,
+ attributes = feature.attributes;
+
+ if (this.tpl instanceof Ext.Template) {
+ tpl = this.tpl;
+ } else if (typeof this.tpl === 'object') {
+ tpl = this.tpl[attributes[this.tplFeatureAttribute]] ||
+ this.elseTpl;
+ } else if (typeof this.tpl === 'function') {
+ // currently unsupported
+ }
+
+ // create a default template with key/value pairs
+ if (!tpl) {
+ var templateString = '';
+ for (var k in attributes) {
+ templateString += '<div>' +
+ '<b>' + k + ': </b>' +
+ '{' + k + '}' +
+ '</div>';
+ }
+ tpl = new Ext.Template(templateString);
+ }
+
+ return tpl;
+ }
+});
Added: sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/index.html
===================================================================
--- sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/index.html (rev 0)
+++ sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/index.html 2010-05-25 15:18:38 UTC (rev 2207)
@@ -0,0 +1,4 @@
+<html>
+ <head><meta http-equiv="refresh" content="0;url=../../../../geoext/tests/run-tests.html?testlist=../../geoext.ux/ux/FeatureBrowser/tests/list-tests.html"></head>
+ <body></body>
+</html>
Added: sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/lib/GeoExt.ux/FeatureBrowser.html
===================================================================
--- sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/lib/GeoExt.ux/FeatureBrowser.html (rev 0)
+++ sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/lib/GeoExt.ux/FeatureBrowser.html 2010-05-25 15:18:38 UTC (rev 2207)
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html debug="true">
+ <head>
+ <script type="text/javascript" src="http://www.openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/ext-all.js"></script>
+ <script type="text/javascript" src="../../../../../../geoext/lib/GeoExt.js"></script>
+ <script type="text/javascript" src="../../../lib/GeoExt.ux/FeatureBrowser.js"></script>
+
+ <script type="text/javascript">
+ var features = [
+ new OpenLayers.Feature.Vector(null, {
+ foo: "foo0",
+ bar: "bar0"
+ }),
+ new OpenLayers.Feature.Vector(null, {
+ foo: "foo1",
+ bar: "bar1"
+ })
+ ];
+
+ function test_initialize(t) {
+ t.plan(3);
+ var browser;
+
+ browser = new GeoExt.ux.FeatureBrowser({
+ features: features
+ });
+ t.ok(browser instanceof GeoExt.ux.FeatureBrowser, "Instance created correctly");
+ t.eq(browser.items.getCount(), 2, "Correct number of items");
+ browser.destroy();
+
+ browser = new GeoExt.ux.FeatureBrowser({
+ features: [features[0]]
+ });
+ t.ok(browser.getBottomToolbar() == null, "No bbar required");
+ browser.destroy();
+ }
+
+ function test_events(t) {
+ t.plan(3);
+ var browser;
+
+ var count = 0;
+ var selectedFeature;
+ browser = new GeoExt.ux.FeatureBrowser({
+ renderTo: Ext.getBody(),
+ features: features,
+ listeners: {
+ featureselected: function(panel, feature) {
+ count++;
+ selectedFeature = feature;
+ }
+ }
+ });
+ t.ok(selectedFeature == features[0], "featureselected listener called with correct argument");
+
+ var nextBtn = Ext.getCmp('move-next' + browser.id);
+ nextBtn.handler.call(nextBtn, nextBtn, Ext.EventObject)
+ t.eq(count, 2, "featureselected event triggered twice");
+ t.ok(selectedFeature == features[1], "featureselected listener called with correct argument");
+ browser.destroy();
+ }
+
+ function test_getTemlate(t) {
+ t.plan(6);
+
+ var browser, tpl;
+
+ // no template
+ browser = new GeoExt.ux.FeatureBrowser({
+ features: features
+ });
+ tpl = browser.getTemplateForFeature(features[0]);
+ t.eq(tpl.apply(features[0].attributes),
+ '<div><b>foo: </b>foo0</div><div><b>bar: </b>bar0</div>',
+ "Template is correct when no template given"
+ );
+
+ // a unique template
+ browser = new GeoExt.ux.FeatureBrowser({
+ features: features,
+ tpl: new Ext.Template('{foo}')
+ });
+ tpl = browser.getTemplateForFeature(features[0]);
+ t.eq(tpl.apply(features[0].attributes), 'foo0',
+ "Template is correct when a template is given"
+ );
+ tpl = browser.getTemplateForFeature(features[1]);
+ t.eq(tpl.apply(features[1].attributes), 'foo1',
+ "Template is correct when a template is given"
+ );
+
+ // a hash
+ browser = new GeoExt.ux.FeatureBrowser({
+ features: features,
+ tplFeatureAttribute: 'foo',
+ tpl: {
+ 'foo0': new Ext.Template('{foo}')
+ }
+ });
+ tpl = browser.getTemplateForFeature(features[0]);
+ t.eq(tpl.apply(features[0].attributes), 'foo0',
+ "Template is correct when tpl is a hash and feature matches"
+ );
+ tpl = browser.getTemplateForFeature(features[1]);
+ t.eq(tpl.apply(features[1].attributes),
+ '<div><b>foo: </b>foo1</div><div><b>bar: </b>bar1</div>',
+ "Template is correct when tpl is a hash and feature doesn't match"
+ );
+
+ // a hash and elseTpl defined
+ browser = new GeoExt.ux.FeatureBrowser({
+ features: features,
+ tplFeatureAttribute: 'foo',
+ elseTpl: new Ext.Template('truite'),
+ tpl: {
+ 'never': 'something'
+ }
+ });
+ tpl = browser.getTemplateForFeature(features[1]);
+ t.eq(tpl.apply(features[1].attributes), 'truite',
+ "Template is correct when tpl is a hash, elseTpl given and feature doesn't match"
+ );
+ }
+ </script>
+ <body>
+ <div id="map" style="width:600px;height:400px;"></div>
+ </body>
+</html>
Added: sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/list-tests.html
===================================================================
--- sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/list-tests.html (rev 0)
+++ sandbox/camptocamp/extensions/geoext.ux/ux/FeatureBrowser/tests/list-tests.html 2010-05-25 15:18:38 UTC (rev 2207)
@@ -0,0 +1,3 @@
+<ul id="testlist">
+ <li>../../geoext.ux/ux/FeatureBrowser/tests/lib/GeoExt.ux/FeatureBrowser.html</li>
+</ul>
More information about the Commits
mailing list