As mentioned in the lesson introduction, sometimes what the screen displays is not what you want printed. The layout will be for the computer monitor, wider than it is long, when the printed page is usually longer than it is wide. You can build a container that is not visible to the user on the monitor, but is printed when the user asks for a hard copy. The PrintDataGrid class is often used in this case because it is tailored to have a better printed appearance than the normal DataGrid, as well as print across multiple pages instead of displaying scroll bars like the normal DataGrid.
The normal DataGrid appears on the left of the following figure, and the PrintDataGrid appears on the right.
1. | Open the file PrintingTask2.mxml from the flex2tfs_Printing project. Run the application.
Notice that this file contains a Form with some default information in the TextInput controls, followed by a DataGrid. Your goal in this task is to display the name and e-mail address above the DataGrid when printed. Of course, you will not display the exact Form, but place the user information in a Label control and display it above the PrintDataGrid container with the same data as the normal DataGrid.
|
| |
2. | Below the Form, insert a VBox that will be used as the print container. It should have the following properties and associated values:
id: | printVBox | backgroundColor: | #FFFFFF | width: | 450 | height: | 250 | paddingTop: | 50 | paddingLeft: | 50 | paddingRight: | 50 | visible: | false |
The VBox property values are special in two ways. First, the backgroundColor and padding have the values they do for better appearance when printing. The white background is best for printing, and the large amount of padding will keep the output from getting too close to the edges of the paper.
Second, at application startup this VBox will not be visible. Although setting the VBox visible property to false makes the VBox disappear, the VBox will still occupy space on the screen, which will just look like blank space at the end of the page.
|
3. | In the VBox, insert an <mx:Label> with an, id of contact.
This is where you will bind the user name and e-mail address gathered in the form.
|
4. | Following the Label control, insert a <mx:PrintDataGrid> tag with an id of myPrintDG and a width and height of 100%.
You will tie the dataProvider of the normal DataGrid to this one.
|
5. | Check to be sure that your VBox appears as follows:
<mx:VBox backgroundColor="#538FFFFFF" height="250" width="450" paddingTop="50" paddingLeft="50" paddingRight="50" visible="false"> <mx:Label /> <mx:PrintDataGrid width="100%" height="100%"/> </mx:VBox>
In a function that is called on the Button click, you will dynamically modify this VBox and content with values you want displayed when printing.
|
6. | In the script block, import the mx.printing.FlexPrintJob class.
Remember that you could have skipped this step; when you used the class for data typing a variable, it would have been automatically imported for you.
|
7. | 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, which you learned in the last task. At this point, your function should appear as follows:
private function doPrint():void{ var pj:FlexPrintJob = new FlexPrintJob(); if(pj.start() != true) { return; } }
In most circumstances you can assume that the start of functions you build to do printing will start in this way.
|
| |
8. | Fill the contact Label from the VBox with the customer name and customer e-mail concatenated together with the literal text Contact: preceding them.
contact.text="Contact: " + custName.text + " " + custEmail.text;
Here you are taking information gathered from the Form and reformatting it for the printed output.
|
9. | Set the dataProvider of the PrintDataGrid equal to the dataProvider of the normal DataGrid.
myPrintDG.dataProvider=prodInfo.dataProvider;
You want to display the same data in the PrintDataGrid as the data in normal DataGrid, and making them use the same dataProvider is a sure way to make that happen.
|
10. | Add the VBox to the print job using the addObject() method and then send the print job to the printer using the send() method.
pj.addObject(printVBox); pj.send();
|
11. | Check to be sure that your function appears as follows:
private function doPrint():void{ var pj:FlexPrintJob = new FlexPrintJob(); if(pj.start() != true) { return; } contact.text = "Contact: " + custName.text + " " + custEmail.text; myPrintDG.dataProvider = prodInfo.dataProvider; pj.addObject(printVBox); pj.send(); }
You now have a function that can print your VBox.
|
12. | Add a click event that calls the doPrint() function to the Button in the Form with the label Print.
<mx:Button label="Print" click="doPrint()"/>
This provides functionality to the user to print when wanted.
|
| |
13. | Run the application. Click the Button labeled Print in the Flex application.
You should be able to both print and cancel the print job. When you print, you will see the VBox printed with the appropriate properties' values and content.
|
