root/trunk/MapFish/client/examples/print/simple.html

Revision 1379, 7.7 kB (checked in by pvalsecc, 6 hours ago)

Added some more help

Line 
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Map printing with a simple form</title>
5 <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <link rel="stylesheet" type="text/css"
7       href="../../mfbase/ext/resources/css/ext-all.css"/>
8 <link rel="stylesheet" type="text/css"
9       href="../../mfbase/mapfish/mapfish.css"/>
10
11 <script type="text/javascript"
12         src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script>
13 <script type="text/javascript"
14         src="../../mfbase/openlayers/lib/OpenLayers.js"></script>
15
16 <script type="text/javascript"
17         src="../../mfbase/ext/adapter/ext/ext-base.js"></script>
18 <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script>
19
20 <script type="text/javascript">
21   // Because of a bug in Firefox 2 we need to specify the MapFish base path.
22   // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282
23   var gMfLocation = "../../mfbase/mapfish/";
24 </script>
25 <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script>
26 <script type="text/javascript" src="../examples.js"></script>
27
28 <style type="text/css">
29   html, body {
30     font: normal 12px verdana;
31     margin: 0;
32     padding: 0;
33     border: 0 none;
34     overflow: hidden;
35     height: 100%;
36   }
37 </style>
38 <script type="text/javascript">
39
40   // reference local blank image
41   Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif';
42   Ext.onReady(function() {
43
44     var map = new OpenLayers.Map($('center'));
45
46     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
47             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0});
48     map.addLayers([wms]);
49
50     var summits = new OpenLayers.Layer.WMS("Summits",
51             "http://demo.mapfish.org/mapfishsample/trunk/wms?",
52             {layers: ['summits'], format: 'image/png', transparent: true},
53             {visibility: false, singleTile: true}
54     );
55     map.addLayer(summits);
56
57     var countries = new OpenLayers.Layer.WMS("Countries",
58             "http://demo.mapfish.org/mapfishsample/trunk/wms?",
59             {layers: ['countries'], format:  OpenLayers.Util.alphaHack()?'image/gif':'image/png', transparent: true},
60             {visibility: true, singleTile: true}
61     );
62     map.addLayer(countries);
63
64     map.addControl(new OpenLayers.Control.LayerSwitcher());
65
66     var layerOverrides={
67         "OpenLayers WMS": {overview: true},
68         Countries: { format: 'image/svg+xml' }
69     };
70
71     var printConfigUrl = mapfish.SERVER_BASE_URL + 'print/info.json';
72     //var printConfigUrl = '/tomcat/print-servlet-1.1-SNAPSHOT/pdf/info.json';
73
74     var toolbar = new mapfish.widgets.toolbar.Toolbar({
75         map: map,
76         configurable: false,
77         items: [new mapfish.widgets.print.PrintAction({
78             map: map,
79             configUrl: printConfigUrl,
80             overrides: layerOverrides,
81             fillSpec: function(printCommand) {
82                 mapfish.widgets.print.PrintAction.prototype.fillSpec.call(this, printCommand);
83
84                 //our layout needs two fields... hard code them here
85                 printCommand.spec.comment = "No comment";
86                 printCommand.spec.mapTitle = "PrintControl";
87             }
88         })]
89     });
90
91     var viewport = new Ext.Viewport({
92       layout:'border',
93       items:[
94         new Ext.BoxComponent({ // raw
95           region: 'north',
96           el: 'north',
97           height: 32
98         }),
99         {
100           region: 'west',
101           id: 'west-panel',
102           title: 'West',
103           split: true,
104           width: 280,
105           minSize: 175,
106           maxSize: 400,
107           collapsible: true,
108           margins: '0 0 0 5',
109           layout: 'accordion',
110           defaults: {
111             collapsed: true
112           },
113           layoutConfig:{
114             animate: true,
115             activeOnTop: false
116           },
117           items: [
118             {
119               contentEl: 'help',
120               collapsed: false,
121               title: 'Help',
122               autoScroll: true,
123               bodyStyle: 'padding: 7px;',
124               border: false
125             },
126             {
127               xtype: 'print-simple',
128               title: 'Print single page',
129               bodyStyle: 'padding: 7px;',
130               formConfig: {
131                 labelWidth: 65,
132                 defaults: {
133                   width: 140,
134                   listWidth: 140
135                 },
136                 items: [
137                   {
138                     xtype: 'textfield',
139                     fieldLabel: OpenLayers.Lang.translate('mf.print.mapTitle'),
140                     name: 'mapTitle',
141                     value: 'Map title'
142                   },
143                   {
144                     xtype: 'textarea',
145                     fieldLabel: OpenLayers.Lang.translate('mf.print.comment'),
146                     name: 'comment',
147                     height: 100,
148                     value: 'Some comments'
149                   }
150                 ]
151               },
152               border: false,
153               map: map,
154               configUrl: printConfigUrl,
155               overrides: layerOverrides
156             },
157             {
158               xtype: 'print-multi',
159               title: 'Print multi page',
160               formConfig: {
161                 labelWidth: 65,
162                 bodyStyle: 'padding: 7px;',
163                 defaults: {
164                   width: 140,
165                   listWidth: 140
166                 }/*,
167                 items: [
168                   {
169                     xtype: 'textfield',
170                     fieldLabel: 'Title',
171                     name: 'title',
172                     value: 'Map title'
173                   }
174                 ]*/
175               },
176               columns: [
177                   {
178                       header: OpenLayers.Lang.translate('mf.print.mapTitle'),
179                       dataIndex: 'mapTitle',
180                       editor: new Ext.form.TextField()
181                   },
182                   {
183                       header: OpenLayers.Lang.translate('mf.print.comment'),
184                       dataIndex: 'comment',
185                       editor: new Ext.form.TextField()
186                   }
187               ],
188               border: false,
189               map: map,
190               configUrl: printConfigUrl,
191               overrides: layerOverrides
192             }
193           ]
194         },{
195             region: 'center',
196             title: 'Map',
197             layout: 'fit',
198             xtype: 'mapcomponent',
199             map: map,
200             tbar: toolbar
201         }]
202     });
203
204     map.setCenter(new OpenLayers.LonLat(8.5, 0), 3);
205   });
206 </script>
207 </head>
208 <body>
209   <div id="west"></div>
210   <div id="north">
211     <p style="font-size:14pt" align="center">MapFish printer</p>
212   </div>
213   <div id="center"></div>
214   <div id="help">
215       There are 3 tools available for the PDF generation (printing):<br/><br/>
216       <ul style="list-style: disc outside; padding-left: 20px;">
217           <li><b>mapfish.widgets.print.SimpleForm</b>:<br />
218               Shows a form and let the user choose the extent of a single page.<br/>
219               You can find it in the West panel.<br/><br/>
220           </li>
221           <li><b>mapfish.widgets.print.MultiPage</b>:<br />
222               Show a table and a form and let the user choose the extent of multiple pages.<br/>
223               You can find it in the West panel.<br/><br/>
224           </li>
225           <li><b>mapfish.PrintAction</b>:<br />
226               An Ext.Action that prints a single page with an extent that fits as good as possible the current map's extent.<br/>
227               You can find it in the toolbar over the map.<br/><br/>
228           </li>
229       </ul>
230       <p>You can enable the "summit" layer (click on the "+" on the right of the map) and it will shown on the PDF as well.</p>
231       <p>Don't hesitate to play with the Layout and DPI fields in the forms.</p>     
232   </div>
233 </body>
234 </html>
Note: See TracBrowser for help on using the browser.