Custom Printing with Flex, Part 1: Overriding Flash’s Built-In Print Option
If you’re like me and you’ve spent any time working with printing in Flex, you’ve probably realized that Flash’s built-in printing capabilities leave a lot to be desired. So I’ve decided to create a short series of articles on how to do custom printing in Flex. This article will be the first in the series and will discuss how to prevent users from printing directly from the context menu.
By default, when users right-click on a SWF file, they receive the default context menu, which provides them several options, and one of which is the ability to print. However, in my experience, using this option for printing returns horrible results. Below are two examples of this, the first is the The Flex Store, a sample application from Adobe, and the second is the Verizon Media Store. On the left is a screenshot of each and on the right is a capture of the print results that were produced by using the default print option.
The Flex Store application:
|
Printing the Flex Store:
|
The Verizon Media Store:
|
Printing the Verizon Media Store:
|
As you can see, the results were less than satisfactory. I would consider this unacceptable for my applications. So, the question arises: “How do you prevent users from printing from the context menu?”
The answer is simple – override Flash’s built-in context menu with your own. This is how you do it:
var customContextMenu:ContextMenu = new ContextMenu();
//disable the default options
customContextMenu.hideBuiltInItems();
//create your own print option, and add it to the new contextMenu
var printOption:ContextMenuItem = new ContextMenuItem("Print Me");
printOption.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doPrint);
customContextMenu.customItems.push(printOption);
//set the newly created contextMenu for this application
this.contextMenu = customContextMenu;
}
private function doPrint(event:ContextMenuEvent):void{
//now print this application
}
Okay, so let’s review the code. The first thing you need to do is to create a new ContextMenu and then call its hideBuiltInItems menthod to disable the built-in options (forwardAndBack, loop, play, print, quality, rewind, save, and zoom). This hides the print option and prevents the user from clicking it. Next you add our own menu item to replace the default print option. If you don’t want to do this, because you are going to provide your own print button on the application, you can skip ahead to the last line of code.
To add our own menu option, just create a new ContextMenuItem object and give it a label. Then add an event listener to catch when the user clicks on this option (in this example we have specified doPrint as our listener function; we will be working with that method in the proceeding articles of this series). Finally, add our new menu item to the customItems array, and set our new menu as the contextMenu for the application.
You can see the results below. Although nothing spectacular has taken place here, we’ve disabled Flash’s built-in print capabilities and will be routing all print requests through our own function.
Gotcha:
When creating CustomMenuItems, the labels you provide must be different than those provided by the default items. For example, you cannot use “Print” as your label or the application will ignore the option. However, you can use variations, such as “Print This” or “Print Page.”
In the next article we will discuss how to generate PDF documents for more functional printing and saving. For more information of the ContextMenu, check out the Livedocs.
Tags: contextMenu, contextMenuItem, Custom Printing with Flex, series
Have you added the article about creating PDFs?
Hi Mark,
It’ll be up in a day or two – I’m working on it now. It will cover printing PDFs with the AlivePDF ActionScript Library. After that, there will be two more articles to come: printing application data to PDF, and finally, printing using ActionScript’s built-in facilities.
Thanks for your interest, hold tight.
Kalen Gibbons
Awesome… thanks!
[...] the first article of this series, Overriding Flash’s Built-In Print Option, I discussed how to prevent users from printing directly from Flash, by replacing the default [...]
Thanks a lot for the overriding of print information.
Can you write some code for the event listener as well?
Also, this.contextMenu does not work in my action script function. What should I do for the same? Is there any way of getting a reference to the application object?
Alok B,
I’m not quite sure I understand either of your questions. Please be more specific and provide example code if possible.
Thanks
hai bro, i’ve got some problem when running your sample application in “Custom Printing with Flex, Part 3: Printing Data”. it said : “There was a problem connecting to the server” and everybody can give me reference about making report in flex and php for the server side, THANK
Sorry newbie,
I can’t help you out without A LOT more information.
error happen if i click your ” Print Data Button”, maybe something wrong in your server application
Oh… I see. Thanks for the heads up, I’ll get that fixed shortly.
SVCreation…
Custom Printing with Flex, Part 1: Overriding Flash’s Built-In Print Option | Kalen Gibbons…