[Commits] r1691 - in sandbox/ahocevar/playground/ux/Printing: examples ux/data ux/widgets
commits at geoext.org
commits at geoext.org
Sat Jan 9 20:24:05 CET 2010
Author: ahocevar
Date: 2010-01-09 20:24:05 +0100 (Sat, 09 Jan 2010)
New Revision: 1691
Modified:
sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html
sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js
sandbox/ahocevar/playground/ux/Printing/examples/Printing.html
sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js
sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js
Log:
enhanced PrintMapPanel example and some improvements to PrintMapPanel.
Modified: sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html 2010-01-09 09:20:14 UTC (rev 1690)
+++ sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html 2010-01-09 19:24:05 UTC (rev 1691)
@@ -1,63 +1,34 @@
<html>
<head>
- <title>Printing ux Example</title>
+ <title>Printing ux (PrintMapPanel) Example</title>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all-debug.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/examples/shared/examples.css" />
- <script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
- <script type="text/javascript">
- // remove this script tag when http://trac.openlayers.org/ticket/2391 is fixed
- OpenLayers.Layer.Vector.prototype.clone = function (obj) {
-
- if (obj == null) {
- obj = new OpenLayers.Layer.Vector(this.name, this.options);
- }
-
- //get all additions from superclasses
- obj = OpenLayers.Layer.prototype.clone.apply(this, [obj]);
-
- // copy/set any non-init, non-simple values here
- var features = this.features;
- var len = features.length;
- var clonedFeatures = new Array(len);
- for(var i=0; i<len; ++i) {
- clonedFeatures[i] = features[i].clone();
- }
- obj.features = clonedFeatures;
-
- return obj;
- };
- </script>
+ <script src="http://dev.openlayers.org/nightly/OpenLayers.js"></script>
<script type="text/javascript" src="../../../trunk/geoext/lib/GeoExt.js"></script>
<script type="text/javascript" src="../ux/Printing.js"></script>
<script type="text/javascript" src="PrintMapPanel.js"></script>
- <!--
- Using the script tag method to get the print service capabilities and
- make them available in the printCapabilities variable.
- The script tag below can be removed when configuring the printProvider
- with url instead of capabilities
- -->
- <script type="text/javascript" src="http://demo.mapfish.org/mapfishsample/1.2/print/info.json?var=printCapabilities"></script>
+ <script type="text/javascript" src="http://demo.opengeo.org/geoserver/pdf/info.json?var=printCapabilities"></script>
</head>
<body>
- <h1>PrintProvider with a Simple Print Form</h1>
+ <h1>PrintProvider with a PrintMapPanel</h1>
<p>This example shows how to use GeoExt.ux.data.PrintProvider to talk
to the <a href="http://trac.mapfish.org/trac/mapfish/wiki/PrintModuleInstallation">Mapfish print module</a>,
which is also available as
<a href="http://geoserver.org/display/GEOS/Printing+2.0+HOWTO">GeoServer print module</a>.</p>
- <p>The rectangle and handle on the map can be used to change center,
- scale and rotation.</p>
+ <p>Use the "Print" button from the bottom toolbar of the map to open
+ the print dialog.</p>
<p>Note that this example uses GET requests to communicate with the
- print servlet (provided by the Mapfish demo server). This saves us a
+ print servlet (provided by the OpenGeo demo server). This saves us a
proxy, but has limitations (URL length in Internet Explorer, and
character encoding issues). For production use, the POST method is
recommended.</p>
Modified: sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js 2010-01-09 09:20:14 UTC (rev 1690)
+++ sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js 2010-01-09 19:24:05 UTC (rev 1691)
@@ -1,62 +1,71 @@
-var printProvider, map, printMapPanel;
+var mapPanel, printMapPanel, legendPanel;
Ext.onReady(function() {
- printProvider = new GeoExt.ux.data.PrintProvider({
- // using get for remote service access without same origin restriction.
- // For asynchronous requests, we would set method to "POST".
- method: "GET",
- //method: "POST",
-
- // capabilities from script tag in Printing.html. For asynchonous
- // loading, we would configure url instead of capabilities.
- capabilities: printCapabilities
- //url: "/geoserver/pdf/"
- });
-
- var mapPanel = new GeoExt.MapPanel({
- renderTo: "content",
- width: 600,
- height: 350,
- layers: [new OpenLayers.Layer.WMS("Global Imagery",
- "http://labs.metacarta.com/wms/vmap0",
- {layers: "basic"})] ,
- center: [16,48],
- zoom: 5,
+ mapPanel = new GeoExt.MapPanel({
+ region: "center",
+ layers: [
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "http://demo.opengeo.org/geoserver/wms",
+ {layers: "topp:tasmania_state_boundaries"}, {singleTile: true}),
+ new OpenLayers.Layer.WMS("Tasmania Water Bodies",
+ "http://demo.opengeo.org/geoserver/wms",
+ {layers: "topp:tasmania_water_bodies", transparent: true},
+ {buffer: 0})],
+ center: [146.56, -41.56],
+ zoom: 6,
bbar: [{
text: "Print",
handler: showPrintWindow
}]
});
-
- map = mapPanel.map;
- // create a vector layer, which will also be printed.
- var redline = new OpenLayers.Layer.Vector("vector", {
- styleMap: new OpenLayers.StyleMap({
- strokeColor: "red",
- fillColor: "red",
- fillOpacity: 0.7,
- strokeWidth: 2,
- pointRadius: 12,
- externalGraphic: "http://openlayers.org/dev/img/marker-blue.png"
- })
+ legendPanel = new GeoExt.LegendPanel({
+ width: 200,
+ region: "west",
+ defaults: {
+ style: "padding:5px"
+ }
});
- var geom = OpenLayers.Geometry.fromWKT, Vec = OpenLayers.Feature.Vector;
- redline.addFeatures([
- new Vec(geom("POLYGON(15 47, 16 48, 14 49)")),
- new Vec(geom("LINESTRING(15 48, 16 47, 17 46)")),
- new Vec(geom("POINT(16 46)"))
- ]);
- mapPanel.map.addLayer(redline);
+ new Ext.Panel({
+ layout: "border",
+ renderTo: "content",
+ width: 800,
+ height: 350,
+ items: [mapPanel, legendPanel]
+ });
});
function showPrintWindow() {
+ var printLegend = false;
+
+ function updateSize() {
+ if(win) {
+ // sync form width with map width
+ win.items.get(0).setWidth(printMapPanel.getWidth());
+ // sync window width with map width
+ var newWidth = win.getWidth() - win.body.getWidth() + 10 +
+ Math.max(320, printMapPanel.getWidth());
+ newWidth > win.getWidth() && win.setWidth(newWidth);
+ }
+ };
+
printMapPanel = new GeoExt.ux.PrintMapPanel({
- sourceMap: map,
- printProvider: printProvider
+ sourceMap: mapPanel,
+ printProvider: {
+ // using get for remote service access without same origin
+ // restriction. For async requests, we would set method to "POST".
+ method: "GET",
+ //method: "POST",
+
+ // capabilities from script tag in Printing.html.
+ capabilities: printCapabilities
+ },
+ listeners: {
+ "resize": updateSize
+ }
});
-
+
var win = new Ext.Window({
title: "Print",
modal: true,
@@ -69,24 +78,48 @@
items: [{
xtype: "form",
border: false,
- forceLayout: true,
- hideLabels: true,
defaults: {
anchor: "100%"
},
items: [{
- xtype: "textfield",
- name: "mapTitle",
- emptyText: "Enter map title here.",
- plugins: new GeoExt.ux.plugins.PrintProviderField({
- printProvider: printProvider
- })
+ xtype: "container",
+ layout: "column",
+ items: [{
+ xtype: "container",
+ layout: "form",
+ columnWidth: 1,
+ items: {
+ xtype: "textfield",
+ name: "mapTitle",
+ emptyText: "Enter map title here.",
+ hideLabel: true,
+ anchor: "100%",
+ plugins: new GeoExt.ux.plugins.PrintProviderField({
+ printProvider: printMapPanel.printProvider
+ })
+ }
+ }, {
+ xtype: "container",
+ layout: "form",
+ labelWidth: 5, // some space from mapTitle
+ items: {
+ xtype: "checkbox",
+ name: "legend",
+ boxLabel: "Include legend?",
+ listeners: {
+ "check": function(field, checked) {
+ printLegend = checked;
+ }
+ }
+ }
+ }]
}, {
xtype: "textarea",
name: "comment",
emptyText: "Enter comments here.",
+ hideLabel: true,
plugins: new GeoExt.ux.plugins.PrintProviderField({
- printProvider: printProvider
+ printProvider: printMapPanel.printProvider
})
}]
}, printMapPanel],
@@ -95,9 +128,9 @@
xtype: "combo",
width: 98,
plugins: new GeoExt.ux.plugins.PrintProviderField({
- printProvider: printProvider
+ printProvider: printMapPanel.printProvider
}),
- store: printProvider.layouts,
+ store: printMapPanel.printProvider.layouts,
displayField: "name",
typeAhead: true,
mode: "local",
@@ -108,9 +141,9 @@
xtype: "combo",
width: 62,
plugins: new GeoExt.ux.plugins.PrintProviderField({
- printProvider: printProvider
+ printProvider: printMapPanel.printProvider
}),
- store: printProvider.dpis,
+ store: printMapPanel.printProvider.dpis,
displayField: "name",
tpl: '<tpl for="."><div class="x-combo-list-item">{name} dpi</div></tpl>',
typeAhead: true,
@@ -124,19 +157,11 @@
}
}, "->", {
text: "Print",
- handler: printMapPanel.print,
- scope: printMapPanel
+ handler: function(){
+ printMapPanel.print(printLegend && {legend: legendPanel});
+ }
}
- ],
- listeners: {
- "resize": function() {
- printMapPanel.fitMap();
- win.items.get(0).setWidth(printMapPanel.getWidth());
- }
- }
+ ]
}).show();
- // workaround for too large window layout in Chrome. Has an effect similar
- // to setting minWidth on the window.
- win.setWidth(win.getWidth() - win.body.getWidth() + 10 +
- Math.max(320, printMapPanel.getWidth()));
+ updateSize();
}
Modified: sandbox/ahocevar/playground/ux/Printing/examples/Printing.html
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/examples/Printing.html 2010-01-09 09:20:14 UTC (rev 1690)
+++ sandbox/ahocevar/playground/ux/Printing/examples/Printing.html 2010-01-09 19:24:05 UTC (rev 1691)
@@ -1,6 +1,6 @@
<html>
<head>
- <title>Printing ux Example</title>
+ <title>Printing ux (SimplePrint Form) Example</title>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
Modified: sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js 2010-01-09 09:20:14 UTC (rev 1690)
+++ sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js 2010-01-09 19:24:05 UTC (rev 1691)
@@ -63,7 +63,9 @@
* ``http://path/to/printservice/info.json?var=myvar`` in the head of the
* html document, making the capabilities accessible as ``window.myvar``.
* This property should be used when no local print service or proxy is
- * available.
+ * available, or when you do not listen for the ``loadcapabilities``
+ * events before creating components that require the PrintProvider's
+ * capabilities to be available.
*/
/** private: property[capabilities]
@@ -372,7 +374,6 @@
success: function(response) {
this.capabilities = Ext.decode(response.responseText);
this.loadStores();
- this.fireEvent("loadcapabilities", this, this.capabilities);
},
scope: this
});
@@ -387,6 +388,7 @@
this.setLayout(this.layouts.getAt(0));
this.setDpi(this.dpis.getAt(0));
+ this.fireEvent("loadcapabilities", this, this.capabilities);
},
/** private: method[encodeLayer]
Modified: sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js 2010-01-09 09:20:14 UTC (rev 1690)
+++ sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js 2010-01-09 19:24:05 UTC (rev 1691)
@@ -1,16 +1,93 @@
+/**
+ * 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.
+ */
+
+/**
+ * @include data/PrintProvider.js
+ * @include data/PrintPage.js
+ */
Ext.namespace("GeoExt.ux");
+/** api: (define)
+ * module = GeoExt.ux
+ * class = PrintMapPanel
+ */
+
+/** api: (extends)
+ * trunk/widgets/MapPanel.js
+ */
+
+/** api: constructor
+ * .. class:: PrintMapPanel
+ *
+ * A map panel that controls scale and center of a print page, based the
+ * current view of a source map.
+ */
GeoExt.ux.PrintMapPanel = Ext.extend(GeoExt.MapPanel, {
+ /** api: config[map]
+ * ``Object`` Optional configuration for the ``OpenLayers.Map`` object
+ * that this PrintMapPanel uses.
+ */
+
+ /** api: config[sourceMap]
+ * :class:`GeoExt.MapPanel`|``OpenLayers.Layer`` The map that is to be
+ * printed.
+ */
+
+ /** private: property[sourceMap]
+ * ``OpenLayers.Map``
+ */
sourceMap: null,
+ /** config: property[printProvider]
+ * :class:`GeoExt.ux.data.PrintProvider`|``Object`` PrintProvider to use
+ * for printing. If an ``Object`` is provided, a new PrintProvider will
+ * be created and configured with the object.
+ */
+
+ /** api: property[printProvider]
+ * :class:`GeoExt.ux.data.PrintProvider` PrintProvider for this
+ * PrintMapPanel.
+ *
+ * .. note:: The PrintMapPanel requires the printProvider's capabilities
+ * to be available upon initialization. This means that a PrintMapPanel
+ * configured with an object as ``printProvider`` will only work when
+ * ``capabilities`` is provided in the printProvider's configuration
+ * object. If ``printProvider`` is provided as an instance of
+ * :class:`GeoExt.ux.data.PrintProvider`, the capabilities must be loaded
+ * upon PrintMapPanel initialization.
+ */
printProvider: null,
+ /** api: property[printPage]
+ * :class:`GeoExt.ux.data.PrintPage` PrintPage for this PrintMapPanel.
+ * read-only.
+ */
printPage: null,
+ /**
+ * private: method[initComponent]
+ * private override
+ */
initComponent: function() {
+ if(this.sourceMap instanceof GeoExt.MapPanel) {
+ this.sourceMap = this.sourceMap.map;
+ }
+ if(!(this.printProvider instanceof GeoExt.ux.data.PrintProvider)) {
+ this.printProvider = new GeoExt.ux.data.PrintProvider(
+ this.printProvider);
+ }
+ this.printPage = new GeoExt.ux.data.PrintPage({
+ printProvider: this.printProvider
+ });
+
var resolutions = [];
- printProvider.scales.each(function(s){
+ this.printProvider.scales.each(function(s){
var res = OpenLayers.Util.getResolutionFromScale(s.get("value"));
var zoom = this.sourceMap.getZoomForResolution(res)
resolutions.push(this.sourceMap.baseLayer.resolutions[zoom]);
@@ -26,23 +103,23 @@
layer.getVisibility() === true && this.layers.push(clone);
}, this);
- this.map = {
+ this.map = Ext.apply(this.map || {}, {
resolutions: resolutions,
numZoomLevels: resolutions.length
- };
-
- this.printPage = new GeoExt.ux.data.PrintPage({
- printProvider: this.printProvider
});
GeoExt.ux.PrintMapPanel.superclass.initComponent.call(this);
this.fitMap();
this.printProvider.on("layoutchange", this.fitMap, this);
+ this.map.events.register("moveend", this, this.updatePage);
},
+ /** private: method[fitMap]
+ * fits this PrintMapPanel's size to the print extent.
+ */
fitMap: function() {
- this.printPage.fitPage(this.sourceMap);
+ this.updatePage();
var extent = this.printPage.feature.geometry.getBounds();
var zoom = this.sourceMap.getZoomForExtent(extent);
var resolution = this.sourceMap.getResolutionForZoom(zoom);
@@ -52,13 +129,33 @@
);
},
- print: function() {
- this.printPage.fitPage(this.map, true);
- this.printProvider.print(this.map, [this.printPage]);
+ /** private: method[updatePage]
+ * updates the print page to match this PrintMapPanel's center and scale.
+ */
+ updatePage: function() {
+ this.printPage.fitPage(this.rendered ? this.map : this.sourceMap,
+ this.rendered);
},
+ /** api: method[print]
+ * :param options: ``Object`` options for the printProvider's
+ * :ref:`GeoExt.ux.data.PrintProvider.print` method.
+ * Convenience methods for printing the map, without the need to interact
+ * with the printProvider.
+ */
+ print: function(options) {
+ this.printProvider.print(this.map, [this.printPage], options);
+ },
+
+ /** private: method[beforeDestroy]
+ */
beforeDestroy: function() {
+ this.map.events.unregister("moveend", this, this.updatePage);
this.printProvider.un("layoutchange", this.fitMap, this);
GeoExt.ux.PrintMapPanel.superclass.beforeDestroy.apply(this, arguments);
}
});
+
+/** api: xtype = gx_printmappanel */
+Ext.reg('gx_printmappanel', GeoExt.ux.PrintMapPanel);
+
More information about the Commits
mailing list