Printing a Receipt from the Checkout Process

In this task, you will put your new knowledge about printing to work in the EComm application. You will add a Button to the order confirmation page to give the customer an option to print a receipt. In this case, you will create a custom component to print the receipt.


Back in the normal FlexGrocer project, open views/ecomm/OrderConf.mxml.

This is the page in which you will add the print receipt Button.


Add a Button control beneath the last Button on the page with a label of Print Receipt and add a click event that calls a method named doPrint().

<mx:Button label="Print Receipt" click="doPrint()"/> 

This printing process will be similar to what you did in the previous task in this lesson.


At the bottom of the script block, create a private function named doPrint() data typed as void. In the function, create a new FlexPrintJob object local to the function named pj. Also insert an if statement that gracefully handles the situation if the user cancels the print job. Your function should appear as follows:

private function doPrint():void{    var pj:FlexPrintJob = new FlexPrintJob();    if(pj.start() != true)    {       return;    } } 

This is the standard way to start printing functions. The FlexPrintJob class was automatically imported when you created the pj instance; otherwise, add an import for mx.printing.FlexPrintJob to your script block.


At the top of the script block, import a custom component you will build later in this task named PrintReceipt, which will be created in the views/ecomm folder.

import views.ecomm.PrintReceipt; 

You will instantiate an instance of this class, so you must import it.


In the doPrint() function just below the if block, create an instance local to the function of the PrintReceipt custom component class named theReceipt.

var theReceipt:PrintReceipt=new PrintReceipt(); 

This is the instance of the custom component you will use for printing.


Use the addChild() method to add the newly created theReceipt object as a DisplayObject of the current file.


This adds an instance of the PrintReceipt class, which you will develop shortly, to the current container.


Assign the orderInfo variable to a like named property you will create in the theReceipt object.


Here you are taking information gathered from the billing information Form and assigning it a property of the custom component. You will display some of this information on the receipt.


Add the theReceipt object to the print job using the addObject() method and then send the print job to the printer using the send() method.

pj.addObject(theReceipt); pj.send(); 


To "clean up" after printing, remove the myPrintView object.



Check to be sure that your function appears as follows:

private function doPrint():void{    var pj:FlexPrintJob = new FlexPrintJob();    if(pj.start() != true){       return;    }    var theReceipt:PrintReceipt=new PrintReceipt();    this.addChild(theReceipt);    theReceipt.orderInfo=orderInfo;    pj.addObject(theReceipt);    pj.send();    this.removeChild(theReceipt); } 

This completes the code needed on the OrderConf.mxml page. Now, you need to build the custom component used. From the code you have written, you know that the custom component must be called PrintReceipt.mxml and it must have a property named orderInfo. You also will display whatever you want the printed receipt to contain.


Right-click the views.ecomm folder in the FlexGrocer project and choose New > MXML Component. Set the Filename to be PrintReceipt.mxml. and the Based On component should be a VBox. Set the width and height to be 450. Click Finish.

This is the skeleton of the custom component that will be used just for printing.


Set the following properties for the VBox:










Insert a script block and import the valueObjects.OrderInfo class.

This is the datatype that will be used for the property you are about to create.


In the script block, create a bindable, public variable name orderInfo, data typed as OrderInfo.

This is the property that was assigned a value in the printing function.


Following the script block, insert a Label with the text set equal to the literal text Flex Grocer Thanks You!, a fontSize of 20 and a width of 100%.

This will be printed at the top of the receipt.


Next, copy the complete Form block from the OrderConf.mxml page and paste it below the Label. Remove the Label from this new copy of the Form that reads Checkout Page 3 of 3.

Remember that what you print does not have to match what the screen looks like. In this case, the Label that indicates where you are in the checkout process makes no sense to be printed, while the rest of the information from the Form should be part of the printed receipt.


Also copy the <mx:DateFormatter> tag from OrderConf.mxml and paste it just below the script block.

This is used to format the date in the Form.


Run the EComm.mxml application. Go through the ordering process. On the last page, click the Print Receipt Button.


Remember that you must have the ColdFusion instance started for EComm to function correctly.

You will see that the receipt prints.

Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225 © 2008-2017.
If you may any questions please contact us: