In most cases, you do not want your printed output to look like the screen display. The screen might use a horizontally oriented layout that is not appropriate for paper printing. You might have display elements on the screen that would be distracting in a printout. You might also have other reasons for wanting the printed and displayed content to differ; for example, you might want to omit a password field.

To print your output with print-specific contents and appearance, use separate objects for the screen layout and the print layout, and share the data used in the screen layout with the print layout. You then use the print layout in your call or calls to the FlexPrintJob addObject() method.

If your form includes a DataGrid, AdvancedDataGrid, or OLAPDataGrid control, use the PrintDataGrid, PrintAdvancedDataGrid, PrintOLAPDataGrid or control in your print layout. The print version of these controls have two advantages over the normal controls for printed output:

• It has a default appearance that is designed specifically for printing.
• It has properties and methods that support printing grids that contain multiple pages of data.

The code in Example: A simple print-specific output format uses a short PrintDataGrid control. For more information on using the PrintDataGrid control, see Using the PrintDataGrid control for multipage grids. For more information on using the PrintAdvancedDataGrid and PrintOLAPDataGrid control, see Using the PrintAdvancedDataGrid control.

Example: A simple print-specific output format

This example creates a Flex form with three text boxes for entering contact information, and a data grid that displays several lines of product information. The following image shows how the output of this application looks on the screen:

The following image shows how the output looks when the user clicks the Print button to print the data:

In this example, the MXML application file displays the screen and controls the printing. A separate custom MXML component defines the appearance of the printed output.

When the user clicks the Print button, the application's doPrint() method does the following things:

1. Creates and starts the print job to display the operating system's Print dialog box.
2. After the user starts the print operation in the Print dialog box, creates a child control using the myPrintView component.
3. Sets the MyPrintView control's data from the form data.
4. Sends the print job to the printer.
5. Cleans up memory by removing the print-specific child component.

The printed output does not include the labels from the screen, and the application combines the text from the screen's three input boxes into a single string for printing in a Label control.

The following code shows the contents of the application file:

<?xml version="1.0"?>
<!-- printing\DGPrintCustomComp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="450" 
    width="550">

    <mx:Script>
        <![CDATA[
            import mx.printing.FlexPrintJob;
            import myComponents.MyPrintView;

            public function doPrint():void {
                // Create a FlexPrintJob instance.
                var printJob:FlexPrintJob = new FlexPrintJob();
    
                // Start the print job.
                if(printJob.start()) {
                    // Create a MyPrintView control as a child 
                    // of the current view.
                    var formPrintView:MyPrintView = new MyPrintView();
                    addChild(formPrintView);
    
                    // Populate the print control's contact label 
                    // with the text from the form's name, 
                    // phone, and e-mail controls.
                    formPrintView.contact.text = 
                        "Contact: " + custName.text + "  " +
                        custPhone.text + "  " + custEmail.text;
    
                    // Set the print control's data grid data provider to be 
                    // the displayed data grid's data provider.
                    formPrintView.myDataGrid.dataProvider = 
                        myDataGrid.dataProvider;
    
                    // Add the SimplePrintview control to the print job.
                    // For comparison, try setting the 
                    // second parameter to "none".
                    printJob.addObject(formPrintView);
    
                    // Send the job to the printer.
                    printJob.send();
    
                    // Remove the print-specific control to free memory.
                    removeChild(formPrintView);
                }
            }
        ]]>
    </mx:Script>

    <!-- The form to display-->
    <mx:Form id="myForm">
        <mx:FormHeading label="Contact Information"/>
        <mx:FormItem label="Name: ">
            <mx:TextInput id="custName" 
                width="200" 
                text="Samuel Smith"
                fontWeight="bold"/>
        </mx:FormItem>
        <mx:FormItem label="Phone: ">
            <mx:TextInput id="custPhone" 
                width="200" 
                text="617-555-1212"
                fontWeight="bold"/>
        </mx:FormItem>
        <mx:FormItem label="Email: ">
            <mx:TextInput id="custEmail" 
                width="200" 
                text="sam@sam.com"
                fontWeight="bold"/>
        </mx:FormItem>

        <mx:FormHeading label="Product Information"/>
        <mx:DataGrid id="myDataGrid" width="300">
            <mx:dataProvider>
                <mx:Object Product="Flash" Code="1000"/>
                <mx:Object Product="Flex" Code="2000"/>
                <mx:Object Product="ColdFusion" Code="3000"/>
                <mx:Object Product="JRun" Code="4000"/>
            </mx:dataProvider>
        </mx:DataGrid>
        <mx:Button id="myButton" 
            label="Print" 
            click="doPrint();"/>
    </mx:Form>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following MyPrintView.mxml file defines the component used by the application's doPrint() method. The component is a VBox container; it contains a Label control, into which the application writes the contact information from the first three fields of the form, and a PrintDataGrid control, which displays the data from the data source of the screen view's DataGrid control. For more information on the PrintDataGrid control and its advantages for printing, see Using the PrintDataGrid control for multipage grids.

<?xml version="1.0"?>
<!-- printing\myComponents\MyPrintView.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    backgroundColor="#FFFFFF" 
    height="250" width="450" 
    paddingTop="50" paddingLeft="50" paddingRight="50">

    <!-- The controls to print, a label and a PrintDataGrid control. -->
    <mx:Label id="contact"/>
    <mx:PrintDataGrid id="myDataGrid" width="100%">
        <mx:columns>
            <mx:DataGridColumn dataField="Product"/>
            <mx:DataGridColumn dataField="Code"/>
        </mx:columns>
    </mx:PrintDataGrid>
</mx:VBox>