Recently i am working on a Flex project that i have created a simple print button in order to simply print my flash movie into one single A4 paper. It sounds interesting at first coz no one would think about to print a "moving" picture. However as the project requests, i have to make this possible and make it as simple as possible.
Straight to the code. Firstly i create a simple "PrintButton" that extends the existing UI button and also with a printing function.
package jiang.example {
import flash.events.MouseEvent;
import mx.controls.Button;
import mx.core.UIComponent;
import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
public class PrintButton extends Button {
//component attributes
public var component:UIComponent;
public var paper:String;
public function PrintButton():void {
super();
addEventListener(MouseEvent.CLICK, printJobInvocation);
}
// Define private click event handler.
private function printJobInvocation(event:MouseEvent):void {
var printJob:FlexPrintJob = new FlexPrintJob();
//Start the print job
if (printJob.start() != true) return;
if(paper == "OnePage") {
printJob.addObject(component,
FlexPrintJobScaleType.SHOW_ALL);
}
else if(paper == "FillPage") {
printJob.addObject(component,
FlexPrintJobScaleType.FILL_PAGE);
}
else if(paper == "MatchHeight") {
printJob.addObject(component,
FlexPrintJobScaleType.MATCH_HEIGHT);
}
else if(paper == "MatchWidth") {
printJob.addObject(component,
FlexPrintJobScaleType.MATCH_WIDTH);
}
else if(paper == "None") {
printJob.addObject(component,
FlexPrintJobScaleType.NONE);
}
//default print paper setting
else {
printJob.addObject(component,
FlexPrintJobScaleType.SHOW_ALL);
}
//output to hardware
printJob.send();
}
}
}
This simple class can be compiled in both Flex 2 and 3. Put it into the right folder. Next in my simple MXML application,
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:="jiang.example.*"
backgroundGradientColors="[#ffffff, #ffffff]"
backgroundColor="#FFFFFF">
<mx:VBox>
<mx:VBox id="Template_box" verticalGap="0" ...>
... ... ...
</mx:VBox>
<mx:Spacer height="15"/>
<PrintButton component="{this.Template_box}"
label="Print" borderColor="#000000" fillAlphas="[1.0, 1.0]"
fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #D6F5D1]"/>
</mx:VBox>
</mx:Application>
Remember one thing before you try this little application. Click Flex's "Project" in the menu bar, and then "Properties", and then click "Flex Compiler" in the left-hand menu, add
-default-background-color #FFFFFF (look out the space) to the compiler arguments. This argument will set the application's default color from haloblue to white. Also notice that i have used
backgroundColor="#FFFFFF" in my Application tag, this one also helps me to change the default color to white.
Turn back to my PrintButton tag, it takes two cousmized attributes:
- component: takes any UIComponent that you want to print, e.g. VBox, button, textarea etc.
- paper: tell printer how you want to print it, in one page, multiple page?
My upper example print the "Template_box" component and all its children and it print all of them in one paper (shirk it if its too large). This button can also works with dynamic contents: it will print whatever Template_box has in the screen when you click it. So if your mxml has some runtime WYSIWYG functions, it also works.
However, i found a very annoy problem: the damn halo blue color. I have to set up all parent Boxes to have backgroudcolor = #FFFFFF, otherwise it will print halo blue as the default background color for Box component. I hope i can find an easy and possible solution for this soon.
Posts
