QueTwo's Blog

thouoghts on telecommunications, programming, education and technology

Monthly Archives: October 2006

Printing in Flex (Part 2)

So, now I’ve confused you all on how to use the DataGrid component to print, lets talk about printing in Flex.

There are two theories in printing in Flex. One is what I call the "Clean-Sheet" method, where you create a new Flex Component to represent the page you will be physically printing to. The Clean-Sheet method allows the greatest amount of control (you can set things like headers/footers, margins, gutters, etc.), but it is the most difficult and most verbose to program for.

The other method is the just add existing items to the print-queue. This requires very little code, and is still pretty accurate. I’ll begin with some code and show you what each line does.

import mx.printing.FlexPrintJob;
public function printGraph():void
var printJob:FlexPrintJob = new FlexPrintJob();

Hopefully, that didn’t look too confusing… Anyway, so what is happening is first, I’m setting up a script block to do some ActionScript (and including the CDATA block so I can write some inline ActionScript code within the MXML. I then import the mx.printing.FlexPrintJob library to facilitate the printing.

Once I’ve setup the enviroment, I then setup a function that will be called to print an object. In my case, I setup a button (not shown) that has a click event that is like click="printGraph();".

I then setup a new in-memory object to hold my printed page. This new object is named printJob and has a type of FlexPrintJob (which is what we just imported).

We then setup a new print queue. I do this in an if statement, by issuing the command: printJob.start() This will also launch the Windows "Select A Printer" dialog that users are familar with. You will now need to add objects to the print queue. Each object you add represents ONE PAGE in the print. Keep this in mind when you are adding objects, and pick carefully which objects you want to add (Hint: add a canvas or an HBox instead of that label). You add objects to the queue by accessing the printJob’s function addObject, and then passing the object you wish to add. In the example’s case, there exists an object in the local scope named myChart.

Next, you will need to send the object to the printer. The print will NOT begin until you call the send() function of the printJob object. The user will not gain control of your application until this function has been called.

That’s pretty much it to do a simple print. Remember, if your object called for 100% width of its parent, then the object will occupy 100% of the available space on the page.


Printing in Flex (Part 1)

Most people associate Adobe Flex as a great presentation tool, but what most people don’t realize is that Flex also has a very powerful printing engine. There is a component that is not listed on the Components Toolbox known as the <mx:PrintDataGrid>

The PrintDataGrid extends the <mx:DataGrid> component. It has all the same features of the DataGrid, minus the drag/drop, editing, and sorting ability (things you wouldn’t be doing on a printed page anyway <or would you?!>)

So, for example, if you had a new HBox that you wanted to print (i’ll get onto that in a bit), you could include the following code :

<mx:PrintDataGrid width="100%" height="80%" id="myDataGrid" sizeToPage="true" headerHeight="40">
<mx:DataGridColumn headerText="Date/Time" dataField="STARTTIME" labelFunction="formatmyDate" headerWordWrap="true" width="130" fontSize="7"/>
<mx:DataGridColumn headerText="Agent" dataField="LOGID" fontSize="7"/>
<mx:DataGridColumn headerText="ACD Calls" dataField="ACDCALLS" headerWordWrap="true" fontSize="7"/>

This will slap a printable data-grid onto the form, and set the width to the width of the HBox (which will usually be the width of the printable area), and put a few columns. So, why go through this work when you can just print your regular datagrid? Well, this datagrid will setup PAGING for you! For example, if you executed the following code :

// print the next printable form.


This will auto-pagnate your code, assuming you loop as long as their is another "validNextPage".

One thing you will notice in the above code (the mx:PrintDataGrid code), I made the height of the data-grid 80%. Flex uses this value to determine how it should pagnate the data. If you set this value to 100% (as I was doing at first), it will pagnate the data at 100%, and display, maybe 85% of the data. At each page, you will be missing some data.

Part two of this will article will talk about printing with Flex in general. If the above code dosen’t make any sense, read at least part two. This posting really should have been a second posting to the topic, but oh, well