<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Kalen Gibbons &#187; contextMenu</title>
	<atom:link href="http://www.kalengibbons.com/blog/index.php/tag/contextmenu/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kalengibbons.com/blog</link>
	<description>The Dead Tree Blog</description>
	<lastBuildDate>Mon, 24 Oct 2011 20:43:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Custom Printing with Flex, Part 1: Overriding Flash&#8217;s Built-In Print Option</title>
		<link>http://www.kalengibbons.com/blog/index.php/2009/02/custom-printing-with-flex-part-1-overriding-flashs-built-in-printing/</link>
		<comments>http://www.kalengibbons.com/blog/index.php/2009/02/custom-printing-with-flex-part-1-overriding-flashs-built-in-printing/#comments</comments>
		<pubDate>Fri, 13 Feb 2009 21:27:19 +0000</pubDate>
		<dc:creator>Kalen Gibbons</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[How-To]]></category>
		<category><![CDATA[contextMenu]]></category>
		<category><![CDATA[contextMenuItem]]></category>
		<category><![CDATA[Custom Printing with Flex]]></category>
		<category><![CDATA[series]]></category>

		<guid isPermaLink="false">http://www.kalengibbons.com/blog/?p=145</guid>
		<description><![CDATA[If you&#8217;re like me and you&#8217;ve spent any time working with printing in Flex, you&#8217;ve probably realized that Flash&#8217;s built-in printing capabilities leave a lot to be desired. So I&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re like me and you&#8217;ve spent any time working with printing in Flex, you&#8217;ve probably realized that Flash&#8217;s built-in printing capabilities leave a lot to be desired.  So I&#8217;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.</p>
<div style="text-align: center">
<img alt="Default Flash Context Menu" src="/assets/images/FlashContextMenu.gif" title="Default Flash Context Menu" width="250" height="124" />
</div>
<p>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 <a href=" http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html" target="_blank">The Flex Store</a>, a sample application from Adobe, and the second is the <a href="http://mediastore.verizonwireless.com/" target="_blank">Verizon Media Store</a>.  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.</p>
<table>
<tr>
<td>
<strong>The Flex Store application:</strong><br />
<img alt="Flex Store Screenshot" src="/assets/images/flexstore_screenshot.jpg" title="Flex Store Screenshot" width="365" height="216" />
</td>
<td>
<strong>Printing the Flex Store:</strong><br />
<img alt="Flex Store Printout" src="/assets/images/flexstore_printout.jpg" title="Flex Store Printout" width="365" height="216" align="center" />
</td>
</tr>
<tr>
<td>
<strong>The Verizon Media Store:</strong><br />
<img alt="Verizon Media Store Screenshot" src="/assets/images/verizonMediaStore_screenshot.jpg" title="Verizone Media Store Screenshot" width="365" height="216" />
</td>
<td>
<strong>Printing the Verizon Media Store:</strong><br />
<img alt="Verizon Media Store Printout" src="/assets/images/verizonMediaStore_printout.jpg" title="Flex Store Printout" width="365" height="216" />
</td>
</tr>
</table>
<p>As you can see, the results were less than satisfactory.  I would consider this unacceptable for my applications.  So, the question arises: <strong>&#8220;How do you prevent users from printing from the context menu?&#8221;</strong></p>
<p>The answer is simple &#8211; override Flash&#8217;s built-in context menu with your own.  This is how you do it:<br/><br/></p>
<div class="code">
<span class="asReserved">private</span> <span class="asFunction">function</span> setContextMenu():<span class="asReserved">void</span>{</p>
<div class="indent">
<span class="asComment">//create the new contextMenu </span><br />
<span class="asVar">var</span> customContextMenu:ContextMenu = <span class="asReserved">new</span> ContextMenu();<br />
<span class="asComment">//disable the default options</span><br />
customContextMenu.hideBuiltInItems();</p>
<p><span class="asComment">//create your own print option, and add it to the new contextMenu</span><br />
<span class="asVar">var</span> printOption:ContextMenuItem = <span class="asReserved">new</span> ContextMenuItem(<span class="asString">&quot;Print Me&quot;</span>);<br />
printOption.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doPrint);<br />
customContextMenu.customItems.push(printOption);</p>
<p><span class="asComment">//set the newly created contextMenu for this application</span><br />
<span class="asReserved">this</span>.contextMenu = customContextMenu;</div>
<p>}<br />
<br />
<span class="asReserved">private</span> <span class="asFunction">function</span> doPrint(event:ContextMenuEvent):<span class="asReserved">void</span>{<br />
<span class="asComment indent">//now print this application</span><br />
}
</div>
<p>Okay, so let&#8217;s review the code.  The first thing you need to do is to create a new ContextMenu and then call its <strong>hideBuiltInItems</strong> 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&#8217;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.</p>
<p>To add our own menu option, just create a new <strong>ContextMenuItem</strong> 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 <em>doPrint</em> 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.</p>
<p>You can see the results below. Although nothing spectacular has taken place here, we&#8217;ve disabled Flash&#8217;s built-in print capabilities and will be routing all print requests through our own function.</p>
<div style="text-align: center">
<img alt="Default Flash Context Menu" src="/assets/images/CustomContextMenu.gif" title="Custom Context Menu" width="250" height="132" />
</div>
<p><strong>Gotcha:</strong><br/><br />
When creating CustomMenuItems, the labels you provide must be different than those provided by the default items.  For example, you cannot use &#8220;Print&#8221; as your label or the application will ignore the option.  However, you can use variations, such as &#8220;Print This&#8221; or &#8220;Print Page.&#8221;</li>
</p>
<p><br/>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 <a href="http://livedocs.adobe.com/flex/3/langref/flash/ui/ContextMenu.html" target="_blank">Livedocs</a>.</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kalengibbons.com/blog/index.php/2009/02/custom-printing-with-flex-part-1-overriding-flashs-built-in-printing/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

