Tag: Tips & Tricks

I have come across a basic need for printing a complex layout in the Adobe Flex. After a long search i thought the following will be helpful to all if shared.

Requirements:

1. My layout has the following. Header (Fixed, to be shown in all page.), First Page Header (Displayed only in single page), DataGrid with data rolling out to more than one page, Fixed footer following the DataGrid and a Footer that come only in last page of the Printed output.
2. I am given only the outer most component object and list of all ids of the following components.
3. No server side support is available.

Problems:

1. My DataGrid is not accessible directly.
2. Complex layout and needed Paginationrn3. Fixed, floating header and footers.

Solution:

With reference to the Adobe Live docs, the solutions is almost near except to the complex structure.
rnI have created a Template that holds all the data to be iterated in the report. I contains the sections like Fixed Header, Floating Header, DataGrid, Fixed Footer, Floating Footer as follows.

1. PrintTemplate.mxml

<s:VGroup id="allPageHeader" width="100%" />
< s:VGroup id="firstPageHeader" width="100%" />
< mx:PrintDataGrid id="printDataGrid" width="100%" />
< s:VGroup id="allPageFooter" width="100%" />
< s:VGroup id="lastPagefooter" width="100%" />

2. PrintSample.mxml

protected function doPrint(outerGroup:DisplayObjectContainer, fixedHeaderIDs:ArrayCollection, floatHeaderIDs:ArrayCollection, dataGridId:String, floatFooterIDs:ArrayCollection , fixedFooterIDs:ArrayCollection):void{...}

Here we have to pass the list of IDs of the sections as we need to the doPrint method as follows.

doPrint(outerGroup, fixedHeaderIDs, floatHeaderIDs, dataGridId, fixedFooterIDs, floatFooterIDs);Completing the rendering the print object will be sent to printer and a popup will be shown.

Source Code: Printing in Adobe Flex

Update:

In the above example, if the Printout is taken with the printAsBitmap set to false, then there will be thick line under the header of the DataGrid ie, the PrintDataGrid. To solve this problem you have to use a Header Renderer and set a background color or Image for the header as follows.

<?xml version="1.0" encoding="utf-8"?>
< s:SparkSkin xmlns:fx="http:/s.adobe.com/mxml/2009" xmlns:s="library:/s.adobe.com/flex/spark" xmlns:mx="library:/s.adobe.com/flex/mx" > < s:Rect left="0" right="0" top="0"> < s:fill> < s:BitmapFill source="@Embed(''header.png'')"/> 
< /s:fill> < s:stroke> < s:SolidColorStroke color="grey" /> 
< /s:stroke> < /s:Rect>< /s:SparkSkin>

Save the file as SampleSkin and add this skin to the headerBackroundSkin property of PrintDataGrid in the PrintTemplate as follows.

<mx:PrintDataGrid id="printDataGrid" width="100%" headerBackgroundSkin="SampleSkin" />

This will resolve the issue and set a neat header to the DataGrid in the print.