Using a print-specific output format

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:

View full size graphic

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 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    height="450" width="600">

    <fx: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();
                    addElement(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.
                    removeElement(formPrintView);
                }
            }
        ]]>
    </fx: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>
                <fx:Object Product="Flash" Code="1000"/>
                <fx:Object Product="Flex" Code="2000"/>
                <fx:Object Product="ColdFusion" Code="3000"/>
                <fx:Object Product="JRun" Code="4000"/>
            </mx:dataProvider>
        </mx:DataGrid>
        <mx:Button id="myButton" 
            label="Print" 
            click="doPrint();"/>
    </mx:Form>
</s: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:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    backgroundColor="#FFFFFF" 
    height="300" width="500" 
    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>