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:
private function setContextMenu():
void{
var customContextMenu:ContextMenu =
new ContextMenu();
customContextMenu.hideBuiltInItems();
var printOption:ContextMenuItem = new ContextMenuItem("Print Me");
printOption.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doPrint);
customContextMenu.customItems.push(printOption);
this.contextMenu = customContextMenu;
}
private function doPrint(event:ContextMenuEvent):void{
}
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.
