4 Replies Latest reply on Dec 6, 2007 7:11 AM by P Steven

    Flex Print large blocks of text

    Anakin_Jay
      I can't figure out how to print multiple pages of text. Here's my situation:


      I have a bunch of fields getting populated by an httprequest that pull the information from a database.

      When I go to print, I'm using an external component as a "template" for how I want the print to look.

      My problem is, If I set my canvas size to 100% then nothing at all prints. So I have to define a set height and width.
      Once I do that, my text field then becomes 100% of the available height of the canvas, but it's not enough. The text is longer than the text box, and therefore doesn't print.

      Here's my code. Can anyone please help me?

      ///////////////////////////////////////////////////////////////////
      ## printTest.mxml -- print template
      /////////////////////////////////////////////////////////////////////
      <?xml version="1.0" encoding="utf-8"?>



      <mx:Canvas autoLayout="false" clipContent="false" creationComplete="init();" xmlns:mx=" http://www.adobe.com/2006/mxml" borderThickness="0" backgroundColor="#ffffff" width="842" height="1000" borderColor="#ffffff" color="#000000" alpha="1.0" backgroundAlpha="1.0">
      <mx:Script>
      <![CDATA[

      [Embed(source="../images/wvuf.jpg")]


      [Bindable]
      public var Logo:Class;

      public function init() {
      detailcontent.height = detailcontent.explicitHeight
      }

      ]]>
      </mx:Script>
      <mx:Text x="206" y="20" width="608" id="detailtitle" height="53" fontFamily="Times New Roman" fontWeight="bold" fontSize="27"/>
      <mx:Label text="Organization" fontWeight="bold" x="89" y="80" fontSize="13" width="132"/>
      <mx:Label text="Request for Proposal" x="68" y="61"/>
      <mx:Text width="165.5" id="detailorg" height="28" x="97" y="94" fontSize="13"/>
      <mx:Label text="Website" fontWeight="bold" x="280.5" y="80" fontSize="13" width="90"/>
      <mx:Text width="193" id="detailweb" height="27" x="331" y="97" fontSize="13"/>
      <mx:Label text="Deadline" fontWeight="bold" x="551" y="81" fontSize="13" width="99"/>
      <mx:Text width="140" id="detaildeadline" height="26" x="562" y="95" fontSize="13"/>
      <mx:Label text=" HTTP://" x="280.5" y="96" fontSize="13" width="75"/>

      <mx:Text id="detailcontent" fontSize="12" top="121" bottom="875" left="110" right="140" enabled="true"/>
      <mx:Image x="67" y="23" source="{Logo}" width="131" height="47"/>

      </mx:Canvas>



      //////////////////////////////////////////////////////////////////
      ## Function called when print button is pushed.
      /////////////////////////////////////////////////////////////////
      public function printRfp() {

      var printJob:FlexPrintJob = new FlexPrintJob();


      // Create a MyPrintView control as a child
      // of the current view.

      var formPrintView:printTest = new printTest();
      addChild(formPrintView);

      // Populate the print template

      formPrintView.detailtitle.text = detailtitle.text;
      formPrintView.detailcontent.text = detailcontent.text;
      formPrintView.detaildeadline.text = detaildeadline.text;
      formPrintView.detailorg.text = detailorg.text;
      formPrintView.detailweb.text = detailweb.text;
      detailcontent.validateNow();

      formPrintView.detailcontent.height = detailcontent.textHeight;


      // Start the print job, and add the template to the print job.

      printJob.start();

      printJob.addObject(formPrintView);


      // Send the job to the printer.
      printJob.send();

      // Remove the print-specific control to free memory.
      removeChild(formPrintView);


      }


        • 1. Re: Flex Print large blocks of text
          P Steven Level 1
          Hi there

          I have an identical scenario to you Anakin and just cannot find any solution despite searching for the last few days.

          Did you manage to find a solution? If so please can you share it with me?

          Basically my template just has one text area that is filled with the text. When I print it, only one page of text is printed.

          Here is my print function

          [code]

          private function doPrint():void {

          var printJob:FlexPrintJob = new FlexPrintJob();

          var formPrintView:SubmissionReport = new SubmissionReport();
          addChild(formPrintView);

          var todayDate:Date = new Date();

          formPrintView.detailUsername.text = _session.getSessionUsername();
          formPrintView.detailDate.text = String(todayDate);
          formPrintView.detailcontent.text = _session.returnSubmissionReportText()

          printJob.start();

          printJob.addObject(formPrintView);


          printJob.send();

          removeChild(formPrintView);


          }

          [/code]

          Many thanks

          Paul
          • 2. Re: Flex Print large blocks of text
            Martin-R
            Here's my solution:

            1. Set up the function that does the printing like this:

            [Bindable] public var formTitle:String = "The Title of The Printout";

            public function doPrint():void {
            var printJob:FlexPrintJob = new FlexPrintJob();
            printJob.printAsBitmap = false;

            // if you don't click Print, then do nothing
            if (printJob.start()) {
            // Create a PrintView control as a child of the application
            var thePrintView:PrintViewer = new PrintViewer();
            Application.application.addChild(thePrintView);

            // Set the print view properties
            thePrintView.header.formTitle = this.formTitle;
            thePrintView.width = printJob.pageWidth;

            // Send the job to the printer.
            printJob.addObject(thePrintView, FlexPrintJobScaleType.MATCH_WIDTH);
            printJob.send();
            Application.application.removeChild(thePrintView);
            }
            }

            Note that I only set the width of the printView, not the height. Set the width to the printer page width from the FlexPrintJob.


            2. Set up the print component that contains the content as follows:

            <!--
            This component is named PrintViewer.mxml
            -->
            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox
            xmlns:mx=" http://www.adobe.com/2006/mxml"
            xmlns="*"
            backgroundColor="#FFFFFF"
            xmlns:subcoms="subcomponents.*"
            paddingLeft="20"
            paddingRight="20"
            paddingBottom="20"
            paddingTop="20">

            <!-- The template for the printed page, with the contents for all pages. -->
            <subcoms:PrintHeader id="header" />
            <subcoms:DataViewer id="PrintDataViewer" />
            </mx:VBox>

            Note that there is no height or width setting for this component.

            3. The sub-components are as follows:

            <!--
            This is PrintHeader.mxml
            -->
            <?xml version="1.0"?>
            <mx:VBox
            xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="100%"
            horizontalAlign="center" >

            <mx:Script>
            <![CDATA[
            [Bindable] public var formTitle:String;
            ]]>
            </mx:Script>

            <mx:Label text="{this.formTitle}" styleName="printHeaderStyle"/>
            </mx:VBox>

            I had to make the width 100% here because the printHeaderStyle centers the title.

            <!--
            This is DataViewer.mxml
            -->
            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox
            xmlns:mx=" http://www.adobe.com/2006/mxml"
            xmlns:subcoms="subcomponents.*">

            <mx:Script>
            <![CDATA[
            import valueobjects.*;

            [Bindable] public var detailObject:IRC_Complaint_Detail;
            ]]>
            </mx:Script>

            <mx:Form width="100%">
            <mx:FormItem label="Date Entered:">
            <mx:Text id="PrintComplaint_DateEntered" text="{this.detailObject.dateEntered}"/>
            </mx:FormItem>
            <mx:FormItem label="Date/Time of Call:">
            <mx:Text id="PrintComplaint_CallDate" text="{this.detailObject.callDate}"/>
            </mx:FormItem>
            <mx:FormItem label="Date Reported to Call Center:">
            <mx:Text id="PrintComplaint_DateReported" text="{this.detailObject.dateReported}"/>
            </mx:FormItem>
            <mx:FormItem label="Previously Reported By:"
            includeInLayout="{(this.detailObject.preRptDate == null)?false:true}"
            visible="{(this.detailObject.preRptDate == null)?false:true}">
            <mx:Text id="Complaint_WhoPreReported" text="{this.detailObject.whoPreReported}"/>
            </mx:FormItem>
            <mx:FormItem label="Previously Reported Date:"
            includeInLayout="{(this.detailObject.preRptDate == null)?false:true}"
            visible="{(this.detailObject.preRptDate == null)?false:true}">
            <mx:Text id="PrintComplaint_PreReportedDate" text="{this.detailObject.preRptDate}"/>
            </mx:FormItem>

            <mx:Label textAlign="left" text="Summary of Alleged Incident" styleName="printLabelStyle"/>
            <mx:Text width="100%" id="PrintComplaint_Summary" text="{this.detailObject.Summary}"/>
            </mx:Form>
            </mx:VBox>

            Note that there is no height or width set on this component. The long text is printed using a <mx:Text> component with only the width set to 100%. You don't set the height on anything. This way the data just flows across multiple pages as needed. This, or course, depends on the setting of FlexPrintJobScaleType. In this case, I set it to MATCH_WIDTH, which means that it fits the width of the page, and the height extends across multiple pages.

            The key thing here is to NOT set the height on any component you're adding to the print job. As soon as I set the height, what I got was scroll bars and clipped content on the printout.

            HTH,
            Randy
            • 3. Re: Flex Print large blocks of text
              Martin-R Level 1
              Small addendum to my previous post:

              In case you're wondering, the data provider for the form is set in the component that calls the print job. This way all the backend database stuff is done somewhere else, and the print components are not cluttered up with additional code.

              ~randy
              • 4. Re: Flex Print large blocks of text
                P Steven Level 1
                Thanks Randy - I hadn't noticed your previous post. I will give your solution a try as currently I have as a temporary measure written the data to a text file and opened the text file so they can print it using the text editors print functionality.