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-imagesnapshotcaptureimage-method/ 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
