My Print Preview and Print

761
4
06-08-2010 08:05 AM
MattWilliams
New Contributor
I was trying to find a way to create a print preview before going directly to the print dialog and really couldn't find anything from the samples or from the forums. I thought I would post my script just in case someone else would find some use out of it and/or make improvements.

<!-- Print preview code -->
 <mx:Script>
  <![CDATA[
   import mx.core.IUIComponent;
      import mx.graphics.ImageSnapshot;
      
      private function takeSnapshot(source:IBitmapDrawable):void {
                var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(source);
                var imageByteArray:ByteArray = imageSnap.data as ByteArray;
                
                swfLoader.load(imageByteArray);
                printPanel.visible = true;
                printAppBar.visible = true;
                printBackground.visible = true;
               }
             
  ]]>
 </mx:Script>
 
 <!-- Print for real  (from ESRI FLEX samples) -->
 
 <mx:Script>
        <![CDATA[
            import mx.printing.FlexPrintJobScaleType;
            import mx.printing.FlexPrintJob;
            import mx.controls.Alert;

            private function doPrint(myFlexPrintJobScaleType:String):void
            {
                // Create an instance of the FlexPrintJob class.
                var myPrintJob:FlexPrintJob = new FlexPrintJob();

                // Start the print job.
                if (myPrintJob.start())
                {
                    try
                    {
                        // hide the zoom slider so it won't be printed
                        myMap.zoomSliderVisible = false;

                        // Add the panel to print.
                        myPrintJob.addObject(printPanel, myFlexPrintJobScaleType);

                        // turn the zoom slider back on
                        myMap.zoomSliderVisible = true;
                    }
                    catch (error:Error)
                    {
                        Alert.show(error.toString());
                    }
                    // Send the job to the printer.
                    myPrintJob.send();
                }
            }
        ]]>
    </mx:Script>
    
    <!-- Closing the print window -->
    <mx:Script>
     <![CDATA[
      import mx.controls.Alert;
      
      private function closePrintWindow():void
      {
       printBackground.visible = false;
       printAppBar.visible = false;
       printPanel.visible = false;
      }
     ]]>
    </mx:Script>

<!-- MXML for the Print Preview Panel -->
 <mx:Canvas height="100%" width="100%" alpha="0.5" id="printBackground" visible="false" backgroundColor="#FFFFFF"/>
 
 <mx:HBox id="printAppBar" visible="false" x="149" y="5" width="150" backgroundColor="#FFFFFF" paddingLeft="6" paddingTop="3" paddingBottom="3">
  <mx:Button label="PRINT" click="doPrint(FlexPrintJobScaleType.SHOW_ALL)" />
  <mx:Button label="CLOSE" click="closePrintWindow()"/> 
 </mx:HBox>
 <mx:Panel id="printPanel" visible="false" x="300" y="5" height="640" width="495" 
  verticalScrollPolicy="off" horizontalScrollPolicy="off" borderAlpha="0" layout="absolute">
     <mx:SWFLoader id="swfLoader"/>
        </mx:Panel> 

<!-- Print Preview Button -->
<mx:LinkButton id="print" label="Print" click="takeSnapshot(myMap)"/>




<esri:Map id="myMap" .....etc. (might need to change the x,y properties of the map if there are components "on top of it")

Static map elements can be added to the "print panel" according to your own map layout preferences. 

The screen capture code was copied and modified from this webpage.
http://blog.flexexamples.com/2007/11/16/taking-screenshots-in-flex-using-the-imagesnapshotcaptureima...

Also, if anyone could help me figure out how to get the "zoomSliderVisible" to work for me it would be much appreciated. I've modified my Navigation class using CSS and this appears to break the zoomSliderVisible part of the code. Not sure how to get around it.
EDIT: to fix the zoomSlider problem, this line:  myMap.zoomSliderVisible = false; needs to be moved to the first line in the takeSnapshot function. 

Matt Williams
GIS Specialist
Illinois State Water Survey
Tags (2)
0 Kudos
4 Replies
AlexJones
New Contributor II
0 Kudos
MattWilliams
New Contributor
No actually, I didn't. Thanks for showing me this. I guess I just always assumed that the code gallery only had modifications to the flex sample viewer. Glad to see some custom built apps on there now.
0 Kudos
TroySchmidt
New Contributor
Okay so that doesn't exist anymore where I can get to it.  Anyone remember the name or can forward me download they downloaded?
0 Kudos
DasaPaddock
Esri Regular Contributor
0 Kudos