[Commits] r2018 - in sandbox/pgiraud/playground/print-multipage/geoext.ux/ux: . MultiPagePrint MultiPagePrint/examples MultiPagePrint/lib MultiPagePrint/lib/GeoExt.ux

commits at geoext.org commits at geoext.org
Mon Mar 22 15:36:31 CET 2010


Author: pgiraud
Date: 2010-03-22 15:36:31 +0100 (Mon, 22 Mar 2010)
New Revision: 2018

Added:
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.html
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.js
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/PrintExtent.js
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/printCapabilities.json
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/lib/
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/lib/GeoExt.ux/
   sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/lib/GeoExt.ux/MultiPagePrint.js
Log:
multipage print example and ux

Added: sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.html
===================================================================
--- sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.html	                        (rev 0)
+++ sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.html	2010-03-22 14:36:31 UTC (rev 2018)
@@ -0,0 +1,52 @@
+<html>
+    <head>
+        <title>Printing ux MultiPagePrint 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>
+        <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="http://dev.openlayers.org/nightly/OpenLayers.js"></script>
+        <script type="text/javascript" src="../../../../geoext/lib/GeoExt.js"></script>
+        
+        <!-- script resources for this ux -->
+        <script type="text/javascript" src="PrintExtent.js"></script>
+        <script type="text/javascript" src="../lib/GeoExt.ux/MultiPagePrint.js"></script>
+        
+        <script type="text/javascript" src="MultiPagePrint.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.opengeo.org/geoserver/pdf/info.json?var=printCapabilities"></script>
+        <!--<script type="text/javascript" src="printCapabilities.json"></script>-->
+        
+    </head>
+    <body>
+        <h1>MultiPagePrint Form using GeoExt.data.PrintProvider</h1>
+        
+        <p>This example shows how to use GeoExt.ux.MultiPagePrint 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 handles on the map can be used to change center,
+        scale and rotation. Dragging one of the handles will change the scale.
+        Dragging the corner handles on their edges will rotate the extent, if
+        supported by the layout. Holding the SHIFT key will constrain rotation
+        to 45° steps.</p>
+        
+        <p>Note that this example uses GET requests to communicate with the
+        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>
+        
+        <p>See <a href="MultiPagePrint.js">MultiPagePrint.js</a> for the source code.</p>
+        
+        <div id="content"></div>
+    </body>
+</html>

Added: sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.js
===================================================================
--- sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.js	                        (rev 0)
+++ sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/MultiPagePrint.js	2010-03-22 14:36:31 UTC (rev 2018)
@@ -0,0 +1,114 @@
+var printProvider, printForm;
+
+Ext.onReady(function() {
+
+    printProvider = new GeoExt.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({
+        region: "center",
+        layers: [new OpenLayers.Layer.WMS("Global Imagery",
+            "http://labs.metacarta.com/wms/vmap0",
+            {layers: "basic"})],
+        center: [16,48],
+        zoom: 5
+    });
+
+    // 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"
+        })
+    });
+    var geom = OpenLayers.Geometry.fromWKT, Vec = OpenLayers.Feature.Vector;
+    redline.addFeatures([
+        new Vec(geom("POLYGON(15 47, 15 46, 16 47, 16 48)")),
+        new Vec(geom("LINESTRING(14 48, 14 47, 15 48, 14 49, 16 49)")),
+        new Vec(geom("POINT(16 49)"))
+    ]);
+    mapPanel.map.addLayer(redline);
+    
+    // Create a vector layer for the print page extent and handles.
+    // We only do this because we want fancy styles for the handles,
+    // otherwise MultiPagePrint's PrintExtent would auto-create one for us.
+    var extentLayer = new OpenLayers.Layer.Vector("print", {
+        displayInLayerSwitcher: false,
+        styleMap: new OpenLayers.StyleMap(new OpenLayers.Style(Ext.applyIf({
+            pointRadius: 4,
+            graphicName: "square",
+            rotation: "${getRotation}",
+            strokeColor: "${getStrokeColor}",
+            fillOpacity: "${getFillOpacity}"
+        }, OpenLayers.Feature.Vector.style["default"]), {
+            context: {
+                getStrokeColor: function(feature) {
+                    return feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point" ?
+                        "#000" : "#ee9900";
+                },
+                getFillOpacity: function(feature) {
+                    return feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point" ?
+                        0 : 0.4;
+                }
+            }
+        })
+    )});
+    
+    // a multi page print form
+    printForm = new GeoExt.ux.MultiPagePrint({
+        mapPanel: mapPanel,
+        layer: extentLayer, // optional
+        autoFit: true,
+        printProvider: printProvider,
+        bodyStyle: {padding: "5px"},
+        labelWidth: 65,
+        fieldsWidth: 115,
+        region: "east",
+        border: false
+    });
+
+    var formCt = new Ext.Panel({
+        layout: "fit",
+        region: "east",
+        width: 250
+    });
+    
+    new Ext.Panel({
+        renderTo: "content",
+        layout: "border",
+        width: 800,
+        height: 350,
+        items: [mapPanel, formCt]
+    });
+    
+    /* add the print form to its container and make sure that the print page
+     * fits the max extent
+     */
+    formCt.add(printForm);
+    formCt.doLayout();
+
+    /* use this code block instead of the above one if you configured the
+     * printProvider with url instead of capabilities
+    var myMask = new Ext.LoadMask(formCt.body, {msg:"Loading data..."});
+    myMask.show();
+    printProvider.on("loadcapabilities", function() {
+        myMask.hide();
+        formCt.add(printForm);
+        formCt.doLayout();
+    });
+     */
+    
+});

Added: sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/PrintExtent.js
===================================================================
--- sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/PrintExtent.js	                        (rev 0)
+++ sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/PrintExtent.js	2010-03-22 14:36:31 UTC (rev 2018)
@@ -0,0 +1,401 @@
+/**
+ * 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.plugins")
+
+/** api: (define)
+ *  module = GeoExt.plugins
+ *  class = PrintExtent
+ */
+
+/** api: example
+ *  Sample code to create a MapPanel with a PrintExtent, and print it
+ *  immediately:
+ * 
+ *  .. code-block:: javascript
+ *
+ *      var printExtent = new GeoExt.plugins.PrintExtent({
+ *          printProvider: new GeoExt.data.PrintProvider({
+ *              capabilities: printCapabilities
+ *          })
+ *      });
+ *     
+ *      var mapPanel = new GeoExt.MapPanel({
+ *          border: false,
+ *          renderTo: "div-id",
+ *          layers: [new OpenLayers.Layer.WMS("Tasmania", "http://demo.opengeo.org/geoserver/wms",
+ *              {layers: "topp:tasmania_state_boundaries"}, {singleTile: true})],
+ *          center: [146.56, -41.56],
+ *          zoom: 6,
+ *          plugins: printExtent
+ *      });
+ *
+ *      // print the map
+ *      printExtent.print();
+ */
+
+/** api: constructor
+ *  .. class:: PrintExtent
+ * 
+ *  Provides a way to show and modify the extents of print pages on the map. It
+ *  uses a layer to render the page extent and handle features of print pages,
+ *  and provides a control to modify them. Must be set as a plugin to a
+ *  :class:`GeoExt.MapPanel`.
+ */
+GeoExt.plugins.PrintExtent = Ext.extend(Ext.util.Observable, {
+
+    /** private: initialConfig
+     *  ``Object`` Holds the initial config object passed to the
+     *  constructor.
+     */
+    initialConfig: null,
+
+    /** api: config[printProvider]
+     *  :class:`GeoExt.data.PrintProvider` The print provider this form
+     *  is connected to. Optional if pages are provided.
+     */
+    /** api: property[printProvider]
+     *  :class:`GeoExt.data.PrintProvider` The print provider this form
+     *  is connected to. Read-only.
+     */
+    printProvider: null,
+    
+    /** private: property[map]
+     *  ``OpenLayers.Map`` The map the layer and control are added to.
+     */
+    map: null,
+    
+    /** api: config[layer]
+     *  ``OpenLayers.Layer.Vector`` The layer used to render extent and handle
+     *  features to. Optional, will be created if not provided.
+     */
+    /** private: property[layer]
+     *  ``OpenLayers.Layer.Vector`` The layer used to render extent and handle
+     *  features to.
+     */
+    layer: null,
+    
+    /** private: property[control]
+     *  ``OpenLayers.Control.TransformFeature`` The control used to change
+     *      extent, center, rotation and scale.
+     */
+    control: null,
+    
+    /** api: config[pages]
+     *  Array of :class:`GeoExt.data.PrintPage` The pages that this form
+     *  controls. Optional. If not provided, it will be created with one page
+     *  that fits the current map extent.
+     *  
+     *  .. note:: All pages must use the same PrintProvider.
+     */
+    /** api: property[pages]
+     *  Array of :class:`GeoExt.data.PrintPage` The pages that this component
+     *  controls. Read-only.
+     */
+    pages: null,
+
+    /** api: property[page]
+     *  :class:`GeoExt.data.PrintPage` The page currently set for
+     *  transformation.
+     */
+    page: null,
+
+    /** private: method[constructor]
+     *  Private constructor override.
+     */
+    constructor: function(config) {
+        config = config || {};
+
+        Ext.apply(this, config);
+        this.initialConfig = config;
+
+        if(!this.printProvider) {
+            this.printProvider = this.pages[0].printProvider;
+        }
+
+        this.pages = [];
+        
+        this.addEvents(
+            /** api: events[selectpage]
+             *  Triggered when a page has been selected using the control
+             *  
+             *  Listener arguments:
+             *  * printPage - :class:`GeoExt.data.PrintPage` this printPage
+             */
+            "selectpage"
+        );
+
+        GeoExt.plugins.PrintExtent.superclass.constructor.apply(this, arguments);
+
+    },
+
+    /** api: method[print]
+     *  :param options: ``Object`` Options to send to the PrintProvider's
+     *      print method. See :class:`GeoExt.data.PrintProvider` :: ``print``.
+     *  
+     *  Prints all pages as shown on the map.
+     */
+    print: function(options) {
+        this.printProvider.print(this.map, this.pages, options);
+    },
+
+    /** private: method[init]
+     *  :param mapPanel: class:`GeoExt.MapPanel`
+     *  
+     *  Initializes the plugin.
+     */
+    init: function(mapPanel) {
+        this.map = mapPanel.map;
+        mapPanel.on("destroy", this.onMapPanelDestroy, this);
+        this.setUp();
+    },
+
+    /** api: method[addPage]
+     *  Adds a page to the list of pages that this plugin controls.
+     *  :param page: :class:`GeoExt.data.PrintPage` The page to add
+     *       to this plugin. If not provided, a page that fits the current
+     *       extent is created.
+     *  :return: page :class:``GeoExt.data.PrintPage``
+     */
+    addPage: function(page) {
+        page = page || new GeoExt.data.PrintPage({
+            printProvider: this.printProvider
+        });
+        this.pages.push(page);
+        this.layer.addFeatures([page.feature]);
+        page.on("change", this.onPageChange, this);
+
+        this.page = page;
+        var map = this.map;
+        if(map.getCenter()) {
+            this.fitPage();
+        } else {
+            map.events.register("moveend", this, function() {
+                map.events.unregister("moveend", this, arguments.callee);
+                this.fitPage();
+            });
+        }
+        return page;
+    },
+
+    /** api: method[removePage]
+     *  Removes a page from the list of pages that this plugin controls.
+     *  :param page: :class:`GeoExt.data.PrintPage` The page to remove
+     *       from this plugin.
+     */
+    removePage: function(page) {
+        this.pages.remove(page);
+        this.layer.removeFeatures([page.feature]);
+        page.un("change", this.onPageChange, this);
+    },
+    
+    /** api: method[selectPage]
+     *  Selects the given page (ie. calls the setFeature on the
+     *      modify feature control)
+     *  :param page: :class:`GeoExt.data.PrintPage` The page to select
+     */
+    selectPage: function(page) {
+        this.control.setFeature(page.feature);
+        // FIXME raise the feature up so that it is on top
+    },
+
+    /** api: method[setUp]
+     *  Sets up the plugin, initializing the ``OpenLayers.Layer.Vector``
+     *  layer and ``OpenLayers.Control.TransformFeature``, and centering
+     *  the first page if no pages were specified in the configuration.
+     */
+    setUp: function() {
+        this.initLayer();
+
+        this.initControl();
+        this.map.addControl(this.control);
+        this.control.activate();
+
+        this.printProvider.on("layoutchange", this.updateBox, this);
+
+        if(!this.initialConfig.pages) {
+            this.addPage();
+        } else {
+            for(var i=0, len=this.initialConfig.pages.length; i<len; ++i) {
+                var page = this.initialConfig.pages[i];
+                this.addPage(page);
+            }
+        }
+    },
+
+    /** private: method[tearDown]
+     *  Tear downs the plugin, removing the
+     *  ``OpenLayers.Control.TransformFeature`` control and
+     *  the ``OpenLayers.Layer.Vector`` layer.
+     */
+    tearDown: function() {
+        // note: we need to be extra cautious when destroying OpenLayers
+        // objects here (the tests will fail if we're not cautious anyway).
+        // We use obj.events to test whether an OpenLayers object is
+        // destroyed or not.
+
+        this.printProvider.un("layoutchange", this.updateBox, this);
+
+        var map = this.map;
+
+        var control = this.control;
+        if(control && control.events) {
+            control.deactivate();
+            if(map && map.events && control.map) {
+                map.removeControl(control);
+            }
+        }
+
+        var layer = this.layer;
+        if(layer && layer.events) {
+            for(var i=0, len=this.pages.length; i<len; ++i) {
+                var page = this.pages[i];
+                page.un("change", this.onPageChange, this);
+                layer.removeFeatures([page.feature]);
+            }
+        }
+
+        if(!this.initialConfig.layer &&
+           map && map.events &&
+           layer && layer.map) {
+            map.removeLayer(layer);
+        }
+    },
+
+    /** private: method[onMapPanelDestroy]
+     */
+    onMapPanelDestroy: function() {
+        this.tearDown();
+
+        var map = this.map;
+
+        var control = this.control;
+        if(map && map.events &&
+           control && control.events) {
+            control.destroy()
+        }
+
+        var layer = this.layer;
+        if(!this.initialConfig.layer &&
+           map && map.events &&
+           layer && layer.events) {
+            layer.destroy();
+        }
+
+        delete this.layer;
+        delete this.control;
+        delete this.page;
+        this.map = null;
+    },
+
+    /** private: method[initLayer]
+     */
+    initLayer: function() {
+        if(!this.layer) {
+            this.layer = new OpenLayers.Layer.Vector(null, {
+                displayInLayerSwitcher: false
+            });
+        }
+        if(!this.layer.map) {
+            this.map.addLayer(this.layer);
+        }
+    },
+    
+    /** private: method[initControl]
+     */
+    initControl: function() {
+        var pages = this.pages;
+
+        if(!this.control) {
+            this.control = new OpenLayers.Control.TransformFeature(this.layer, {
+                preserveAspectRatio: true,
+                eventListeners: {
+                    "beforesetfeature": function(e) {
+                        for(var i=0, len=this.pages.length; i<len; ++i) {
+                            if(this.pages[i].feature === e.feature) {
+                                this.page = this.pages[i];
+                                e.object.rotation = -this.pages[i].rotation;
+                                break;
+                            }
+                        }
+                    },
+                    "setfeature": function(e) {
+                        for(var i=0, len=this.pages.length; i<len; ++i) {
+                            if(this.pages[i].feature === e.feature) {
+                                this.fireEvent("selectpage", this.pages[i]);
+                                break;
+                            }
+                        }
+                    },
+                    "beforetransform": function(e) {
+                        this._updating = true;
+                        var page = this.page;
+                        if(e.rotation) {
+                            if(this.printProvider.layout.get("rotation")) {
+                                page.setRotation(-e.object.rotation);
+                            } else {
+                                e.object.setFeature(page.feature);
+                            }
+                        } else if(e.center) {
+                            page.setCenter(OpenLayers.LonLat.fromString(
+                                e.center.toShortString()
+                            ));
+                        } else {
+                            page.fit(e.object.box);
+                            var minScale = this.printProvider.scales.getAt(0);
+                            var maxScale = this.printProvider.scales.getAt(
+                                this.printProvider.scales.getCount() - 1);
+                            var boxBounds = e.object.box.geometry.getBounds();
+                            var pageBounds = page.feature.geometry.getBounds();
+                            var tooLarge = page.scale === minScale &&
+                                boxBounds.containsBounds(pageBounds);
+                            var tooSmall = page.scale === maxScale &&
+                                pageBounds.containsBounds(boxBounds);
+                            if(tooLarge === true || tooSmall === true) {
+                                this.updateBox();
+                            }
+                        }
+                        delete this._updating;
+                        return false;
+                    },
+                    "transformcomplete": this.updateBox,
+                    scope: this
+                }
+            });
+        }
+    },
+
+    /** private: method[fitPage]
+     *  Fits the current print page to the map.
+     */
+    fitPage: function() {
+        if(this.page) {
+            this.page.fit(this.map);
+        }
+    },
+
+    /** private: method[updateBox]
+     *  Updates the transformation box after setting a new scale or
+     *  layout, or to fit the box to the extent feature after a tranform.
+     */
+    updateBox: function() {
+        var page = this.page;
+        this.control.setFeature(page.feature, {rotation: -page.rotation});
+    },
+
+    /** private: method[onPageChange]
+     *  Handler for a page's change event.
+     */
+    onPageChange: function(page, mods) {
+        if(!this._updating) {
+            this.control.setFeature(page.feature, {rotation: -page.rotation});
+        }
+    }
+});
+
+/** api: ptype = gx_printextent */
+Ext.preg && Ext.preg("gx_printextent", GeoExt.plugins.PrintExtent);

Added: sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/printCapabilities.json
===================================================================
--- sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/printCapabilities.json	                        (rev 0)
+++ sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/examples/printCapabilities.json	2010-03-22 14:36:31 UTC (rev 2018)
@@ -0,0 +1 @@
+printCapabilities={"scales":[{"name":"1:25,000","value":"25000"},{"name":"1:50,000","value":"50000"},{"name":"1:100,000","value":"100000"},{"name":"1:200,000","value":"200000"},{"name":"1:500,000","value":"500000"},{"name":"1:1,000,000","value":"1000000"},{"name":"1:2,000,000","value":"2000000"},{"name":"1:4,000,000","value":"4000000"}],"dpis":[{"name":"75","value":"75"},{"name":"150","value":"150"},{"name":"300","value":"300"}],"layouts":[{"name":"A4 portrait","map":{"width":440,"height":483},"rotation":true},{"name":"Legal","map":{"width":440,"height":483},"rotation":false}],"printURL":"http://demo.opengeo.org/geoserver/pdf/print.pdf","createURL":"http://demo.opengeo.org/geoserver/pdf/create.json"};

Added: sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/lib/GeoExt.ux/MultiPagePrint.js
===================================================================
--- sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/lib/GeoExt.ux/MultiPagePrint.js	                        (rev 0)
+++ sandbox/pgiraud/playground/print-multipage/geoext.ux/ux/MultiPagePrint/lib/GeoExt.ux/MultiPagePrint.js	2010-03-22 14:36:31 UTC (rev 2018)
@@ -0,0 +1,402 @@
+/**
+ * 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")
+
+/*
+ * @include GeoExt/data/PrintPage.js
+ * @include GeoExt/plugins/PrintExtent.js
+ * @include GeoExt/plugins/PrintProviderField.js
+ * @include GeoExt/plugins/PrintPageField.js
+ */
+
+/** api: (define)
+ *  module = GeoExt.form
+ *  class = MultiPagePrint
+ *  base_link = `Ext.form.FormPanel <http://extjs.com/deploy/dev/docs/?class=Ext.form.FormPanel>`_
+ */
+
+/** api: constructor
+ *  .. class:: MultiPagePrint
+ * 
+ *  An instance of this form creates a multiplu print page. Layout, DPI, scale
+ *  and rotation are configurable in the form. A Print button is also added to
+ *  the form. User can add pages and configure specific parameters such as
+ *  title and comment for each page.
+ */
+GeoExt.ux.MultiPagePrint = Ext.extend(Ext.form.FormPanel, {
+    
+    /* begin i18n */
+    /** api: config[layoutText] ``String`` i18n */
+    layoutText: "Layout",
+    /** api: config[dpiText] ``String`` i18n */
+    dpiText: "DPI",
+    /** api: config[scaleText] ``String`` i18n */
+    scaleText: "Scale",
+    /** api: config[rotationText] ``String`` i18n */
+    rotationText: "Rotation",
+    /** api: config[printText] ``String`` i18n */
+    printText: "Print",
+    /** api: config[creatingPdfText] ``String`` i18n */
+    creatingPdfText: "Creating PDF...",
+    /** api: config[pageText] ``String`` i18n */
+    pageText: "Page",
+    /** api: config[addPageText] ``String`` i18n */
+    addPageText: "Add page",
+    /** api: config[defaultTitleText] ``String`` i18n */
+    defaultTitleText: "A custom title",
+    /** api: config[defaultCommentText] ``String`` i18n */
+    defaultCommentText: "A custom comment",
+    /* end i18n */
+   
+    /** api: config[printProvider]
+     *  :class:`GeoExt.data.PrintProvider` The print provider this form
+     *  is connected to.
+     */
+    
+    /** api: config[mapPanel]
+     *  :class:`GeoExt.MapPanel` The map panel that this form should be
+     *  connected to.
+     */
+    
+    /** api: config[layer]
+     *  ``OpenLayers.Layer`` Layer to render page extents and handles
+     *  to. Useful e.g. for setting a StyleMap. Optional, will be auto-created
+     *  if not provided.
+     */
+
+    /** api: config[printOptions]
+     *  ``Object`` Optional options for the printProvider's print command.
+     */
+
+    /** api: property[printOptions]
+     *  ``Object`` Optional options for the printProvider's print command.
+     */
+    printOptions: null,
+    
+    /** api: config[fieldsWidth]
+     *  ``Object``Optional width to give to the form fields. We use an 
+     *  config option here because using defaults will not work with
+     *  the form fields inside the tanpanel items. Defaults to 150.
+     */
+    fieldsWidth: 150,
+
+    /** api: property[printOptions]
+     *  ``Object`` Optional options for the printProvider's print command.
+     */
+    printOptions: null,
+    
+    /** api: config[hideUnique]
+     *  ``Boolean`` If set to false, combo boxes for stores with just one value
+     *  will be rendered. Default is true.
+     */
+    
+    /** api: config[hideRotation]
+     *  ``Boolean`` If set to true, the Rotation field will not be rendered.
+     *  Default is false.
+     */
+    
+    /** api: config[busyMask]
+     *  ``Ext.LoadMask`` A LoadMask to use while the print document is
+     *  prepared. Optional, will be auto-created with ``creatingPdfText` if
+     *  not provided.
+     */
+    
+    /** private: property[busyMask]
+     *  ``Ext.LoadMask``
+     */
+    busyMask: null,
+
+    /** private: property[pagesPanel]
+     *  ``Ext.TabPanel``
+     */
+    pagesPanel: null,
+   
+    // FIXME required ?
+    /** private: property[printExtent]
+     *  :class:`GeoExt.plugins.PrintExtent`
+     */
+    printExtent: null,
+    
+    // FIXME: required ? do we need multiple printPages ?
+    /** api: property[printPages]
+     *  ``Array`` Array of :class:`GeoExt.data.PrintPage`
+     *  The print pages for this form.
+     */
+    printPages: null,
+   
+    /** private: method[initComponent]
+     */
+    initComponent: function() {
+        GeoExt.ux.MultiPagePrint.superclass.initComponent.call(this);
+        
+        this.printExtent = new GeoExt.plugins.PrintExtent({
+            printProvider: this.initialConfig.printProvider,
+            layer: this.initialConfig.layer
+        });
+        this.printPages = this.printExtent.pages;
+
+        this.mapPanel.initPlugin(this.printExtent);
+
+        if (!this.busyMask) {
+            this.busyMask = new Ext.LoadMask(Ext.getBody(), {
+                msg: this.creatingPdfText
+            });
+        }
+
+        this.printExtent.printProvider.on({
+            "beforeprint": this.busyMask.show,
+            "print": this.busyMask.hide,
+            scope: this.busyMask
+        });
+
+        if(this.printExtent.printProvider.capabilities) {
+            this.initForm();
+        } else {
+            this.printExtent.printProvider.on({
+                "loadcapabilities": this.initForm,
+                scope: this,
+                single: true
+            });
+        }        
+
+        //for accordion
+        this.on('expand', this.setUp, this);
+        this.on('collapse', this.tearDown, this);
+
+        //for tabs
+        this.on('activate', this.setUp, this);
+        this.on('deactivate', this.tearDown, this);
+
+        //for manual enable/disable
+        this.on('enable', this.setUp, this);
+        this.on('disable', this.tearDown, this);
+
+        //for use in an Ext.Window with closeAction close
+        this.on('destroy', this.tearDown, this);
+    },
+    
+    /** private: method[initForm]
+     *  Creates and adds items to the form.
+     */
+    initForm: function() {
+        var p = this.printExtent.printProvider;
+        var hideUnique = this.initialConfig.hideUnique !== false;
+        !(hideUnique && p.layouts.getCount() <= 1) && this.add({
+            xtype: "combo",
+            fieldLabel: this.layoutText,
+            store: p.layouts,
+            displayField: "name",
+            typeAhead: true,
+            mode: "local",
+            forceSelection: true,
+            triggerAction: "all",
+            selectOnFocus: true,
+            width: this.fieldsWidth,
+            plugins: new GeoExt.plugins.PrintProviderField()
+        });
+        !(hideUnique && p.dpis.getCount() <= 1) && this.add({
+            xtype: "combo",
+            fieldLabel: this.dpiText,
+            store: p.dpis,
+            displayField: "name",
+            typeAhead: true,
+            mode: "local",
+            forceSelection: true,
+            triggerAction: "all",
+            selectOnFocus: true,
+            width: this.fieldsWidth,
+            plugins: new GeoExt.plugins.PrintProviderField()
+        });
+
+        this.pagesPanel = new Ext.TabPanel({
+            title: 'the pages form',
+            enableTabScroll: true,
+            layoutOnTabChange: true
+        });
+
+        this.add(new Ext.Button({
+            text: this.addPageText,
+            handler: this.addPage,
+            scope: this
+        }));
+
+        this.add(this.pagesPanel);
+
+        this.addButton({
+            text: this.printText,
+            handler: function() {
+                this.printExtent.print(this.printOptions);
+            },
+            scope: this
+        });
+
+        this.doLayout();
+
+        if(this.autoFit === true) {
+            this.onMoveend();
+            this.mapPanel.map.events.on({
+                "moveend": this.onMoveend,
+                scope: this
+            })
+        }
+        this.addPageForm(this.printExtent.pages[0]);
+
+        this.printExtent.on('selectpage', function(page) {
+            for(var i=0, len=this.printPages.length; i<len; ++i) {
+                if(this.printPages[i] == page) {
+                    this.pagesPanel.setActiveTab(i);
+                    break;
+                }
+            }
+        }, this);
+
+        this.pagesPanel.on({
+            'beforeremove': function(container, panel) {
+                // don't remove the last tab
+                if (container.items.length <= 1) {
+                    return false;
+                }
+            }
+        });
+    },
+
+    /** private: method[addPage]
+     *  Adds a page to the print Extent and adds the corresponding
+     *     tab in the form.
+     */
+    addPage: function() {
+        var page = this.printExtent.addPage();
+        this.addPageForm(page);
+    },
+
+    /** private: method[addPageForm]
+     *  Adds a panel in the tab panel for the given page
+     *  :param page: :class:`GeoExt.data.PrintPage`
+     */
+    addPageForm: function(page) {
+
+        var p = this.printExtent.printProvider;
+        var hideUnique = this.initialConfig.hideUnique !== false;
+
+        var pageTab = new Ext.Panel({
+            title: this.pageText,
+            layout: 'form',
+            closable: true
+        });
+        // add custom fields to the form
+        pageTab.add({
+            xtype: "textfield",
+            name: "mapTitle",
+            fieldLabel: "Title",
+            value: this.defaultTitleText,
+            width: this.fieldsWidth,
+            plugins: new GeoExt.plugins.PrintPageField({
+                printPage: page
+            }),
+            listeners: {
+                valid: function(field) {
+                    pageTab.setTitle(field.getValue());
+                }
+            }
+        });
+        pageTab.add({
+            xtype: "textarea",
+            fieldLabel: "Comment",
+            name: "comment",
+            value: this.defaultCommentText,
+            width: this.fieldsWidth,
+            plugins: new GeoExt.plugins.PrintPageField({
+                printPage: page
+            })
+        });
+        
+        !(hideUnique && p.scales.getCount() <= 1) && pageTab.add({
+            xtype: "combo",
+            fieldLabel: this.scaleText,
+            store: p.scales,
+            displayField: "name",
+            typeAhead: true,
+            mode: "local",
+            forceSelection: true,
+            triggerAction: "all",
+            selectOnFocus: true,
+            width: this.fieldsWidth,
+            plugins: new GeoExt.plugins.PrintPageField({
+                printPage: page
+            })
+        });
+        pageTab.initialConfig.hideRotation !== true && pageTab.add({
+            xtype: "textfield",
+            fieldLabel: this.rotationText,
+            name: "rotation",
+            enableKeyEvents: true,
+            width: this.fieldsWidth,
+            validator: function(v) {
+                return !isNaN(v)
+            },
+            plugins: new GeoExt.plugins.PrintPageField({
+                printPage: page
+            })
+        });
+
+        pageTab.on({
+            'activate': function(panel) {
+                this.printExtent.selectPage(page);
+            },
+            'destroy': function(panel) {
+                this.printExtent.removePage(page);
+            },
+            scope: this
+        });
+
+        this.pagesPanel.add(pageTab);
+        this.doLayout();
+        this.pagesPanel.setActiveTab(pageTab);
+    },
+    
+    /** private: method[onMoveend]
+     *  Handler for the map's moveend event
+     */
+    onMoveend: function() {
+        // FIXME, now we have multiple pages
+        //this.printPage.fit(this.mapPanel.map);
+    },
+    
+    /** private: method[beforeDestroy]
+     */
+    beforeDestroy: function() {
+        var p = this.printExtent.printProvider;
+        p.un("beforePrint", this.busyMask.show, this.busyMask);
+        p.un("print", this.busyMask.hide, this.busyMask);
+        if(this.autoFit === true) {
+            this.mapPanel.map.events.un({
+                "moveend": this.onMoveend,
+                scope: this
+            })
+        }
+        GeoExt.ux.MultiPagePrint.superclass.beforeDestroy.apply(this, arguments);
+    },
+
+    /** private: method[setUp]
+     * Handler for the panel's expand/activate/enable event
+     */
+    setUp: function() {
+        this.printExtent.setUp();
+    },
+
+    /** private: method[tearDown]
+     * Handler for the panel's collapse/deactivate/disable/destroy event
+     */
+    tearDown: function() {
+        this.printExtent.tearDown();
+    }
+});
+
+/** api: xtype = gxux_multipageprint */
+Ext.reg("gxux_multipageprint", GeoExt.ux.MultiPagePrint);



More information about the Commits mailing list