9 Replies Latest reply on May 5, 2011 5:11 AM by new flex guy

    Print content from a scrolling Spark List?

    Handycam Level 1

      My application has content that is displayed in a spark list, using a custom item renderer that has a couple of labels and image components to display the data.

       

      I would like to add this list to a print job, but of course the items that don't fit in the scroll do not print.  I have tried temporarily enlarging the list's height, but then it fails silently if the list exceeds the application's height.

       

      How can I get all the content in the list to print, even if it's scrolled off?

       

      I know there's a datagrid for this, but the app has been laid out and approved with the list so I'd prefer to use a List.

       

      Thanks.

        • 1. Re: Print content from a scrolling Spark List?
          Flex harUI Adobe Employee

          Usually you want to control page-break so it doesn't break in the middle of

          a row, so you will have to use the PrintDataGrid or do the equivalent with

          list (print a page, set scrollPosition, print another page...)

          • 2. Re: Print content from a scrolling Spark List?
            Handycam Level 1

            I replaced my List with this Datagrid:

             

             

            <mx:DataGrid id="shopGrid" width="100%" height="100%" showHeaders="false">
                 <mx:columns>
                      <mx:DataGridColumn>
                           <mx:itemRenderer>
                                <fx:Component>
                                     <mx:VBox>
                                          <s:Label text="{XML(data).itemName}" width="500" styleName="productTitle" />
                                          <s:Label text="{XML(data).sponsor}" width="500" styleName="productSponsor" />
                                          <s:Label text="{XML(data).description}" width="550" styleName="productDescription" />
                                     </mx:VBox>
                                </fx:Component>
                           </mx:itemRenderer>
                      </mx:DataGridColumn>
                 </mx:columns>
            </mx:DataGrid>
            

             

             


            And following the steps in the Flex 4 Cookbook:

             

             

            public function print():void
            {
                 var printJob:FlexPrintJob = new FlexPrintJob(); 
                 if (printJob.start()){
                      var printGrid:PrintDataGrid = new PrintDataGrid(); 
                      printGrid.width = printJob.pageWidth; 
                      printGrid.height = printJob.pageHeight; 
                      printGrid.columns = [ shopGrid.columns ];
                      printGrid.dataProvider = shoppingItems2; 
                      printGrid.visible = false; 
                      this.addElement(printGrid); 
                      printJob.addObject(printGrid);
                      while (printGrid.validNextPage)
                      {
                           printGrid.nextPage(); 
                           printJob.addObject(printGrid);
                      } 
                      printJob.send(); 
                      this.removeElement(printGrid);
                 }
            }
            

             

             

            But it throws an error:

             

            TypeError: Error #1034: Type Coercion failed: cannot convert []@1701ba39 to mx.controls.dataGridClasses.DataGridColumn.

            • 3. Re: Print content from a scrolling Spark List?
              Flex harUI Adobe Employee

              Probably should be:

                        printGrid.columns = shopGrid.columns;

               

              However, you really should use new instances of DataGridColumn, and copy the

              relevant properties.

              • 4. Re: Print content from a scrolling Spark List?
                Handycam Level 1

                Thanks.  I can do it both ways.  However, how can I fix the width/scrollbars?

                 

                My original grid is like this:

                 

                https://img.skitch.com/20110301-kfm82qag1unsx3paddr1trkkqf.jpg

                The middle column I can only get the text to wrap if I set the Label width to an actual number (here 550).  But then when I print it, I get this:

                 

                https://img.skitch.com/20110301-eek3kqu9cq7fa1b7dajxqkeppr.jpg

                As you can see, I get scrollbars, and the images are missing.  Any suggestions?

                • 5. Re: Print content from a scrolling Spark List?
                  Flex harUI Adobe Employee

                  All visuals have to be ready at the time you call addObject.  Images that

                  are loaded externally will arrive too late.  If you use SuperImage, it

                  should cache the image when used in the regular DG and then it might show up

                  in time for printing.

                   

                  I don't do a lot of printing, so I'm not sure if you'll have to adjust

                  widths and font sizes for the print page or not.  I would first try using an

                  embedded font.  DeviceFonts scale in "odd" ways.

                  • 6. Re: Print content from a scrolling Spark List?
                    Handycam Level 1

                    OK, what I wound up doing was creating a VGroup with a header image and a printdatagrid.  Which works, mostly, except for the missing images on the second page.  I must have something awry in my print function, since when printed I only get the header on the first page AND I am getting a blank page printed between page 1 and 2.  Also, I'd like it better if the user couldn't see the VGroup as the data is printing.

                     

                    Here's the VGroup

                    <s:VGroup id="printWindow" width="600" height="100%" visible="false" >
                         <s:Group id="printHeader">
                              <s:BitmapImage source="@Embed('assets/print-header.gif')" />
                         </s:Group>
                         <mx:PrintDataGrid id="shopGrid" width="100%" height="100%" 
                                               showHeaders="false"  verticalGridLines="false" borderStyle="none" 
                                               variableRowHeight="true">
                                             ... grid code...
                         </mx:PrintDataGrid>
                    </s:VGroup>
                    

                     

                    And my print handler:

                    protected function printBtn_clickHandler(event:MouseEvent):void {
                    var pj:FlexPrintJob = new FlexPrintJob();
                         if (pj.start()) {
                              printWindow.visible = true;
                              printWindow.validateNow();
                              pj.addObject(printWindow);
                              while (shopGrid.validNextPage)
                              {
                                   shopGrid.nextPage(); 
                                   pj.addObject(shopGrid);
                              } 
                              pj.send();
                              printWindow.visible = false;
                         }   
                    }
                    

                     

                    BTW, I did look into SuperImage but the code is very old at this point. If I have time I can try to figure out where it needs updating, unless someone has a Flex 4.1+ version of it.

                    • 7. Re: Print content from a scrolling Spark List?
                      Handycam Level 1

                      Can I use the 4.5 SDK and use BitmapImage for my Images?  Would that allow for caching in the printdatagrid?

                      • 8. Re: Print content from a scrolling Spark List?
                        Flex harUI Adobe Employee

                        That might work as well.

                         

                        There is theoretically a way to delay submitting the page if you are using

                        10.1 or later, but I haven't tried it to prove that it will work.

                        • 9. Re: Print content from a scrolling Spark List?
                          new flex guy Level 1

                          can anyone tell me to print whole list data in flex 4 ?

                          <?xml version="1.0" encoding="utf-8"?>

                          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx"

                             width="950" height="600" >

                          <s:layout>

                          <s:VerticalLayout/>

                          </s:layout>

                           

                          <fx:Script>

                          <![CDATA[

                          import mx.controls.Alert;

                          import mx.printing.FlexPrintJob;

                          import mx.printing.FlexPrintJobScaleType;

                          protected function button1_clickHandler(event:MouseEvent):void

                          {

                          lstStudentData.dataProvider = arrCol_Div_Chars;

                          }

                           

                          protected function btnPrint_clickHandler():void

                          {

                            // WANT TO WRITE PRINT CODE HERE

                          }

                           

                          ]]>

                          </fx:Script>

                           

                          <fx:Declarations>

                          <s:ArrayCollection id="arrCol_Div_Chars">

                          <fx:Object label='A' />

                          <fx:Object label='B' />

                          <fx:Object label='C' />

                          <fx:Object label='D' />

                          <fx:Object label='E' />

                          <fx:Object label='F' />

                          <fx:Object label='G' />

                          <fx:Object label='H' />

                          <fx:Object label='I' />

                          <fx:Object label='J' />

                          <fx:Object label='K' />

                          <fx:Object label='L' />

                          <fx:Object label='M' />

                          <fx:Object label='N' />

                          <fx:Object label='O' />

                          <fx:Object label='P' />

                          <fx:Object label='Q' />

                          <fx:Object label='R' />

                          <fx:Object label='S' />

                          <fx:Object label='T' />

                          <fx:Object label='U' />

                          <fx:Object label='V' />

                          <fx:Object label='W' />

                          <fx:Object label='X' />

                          <fx:Object label='Y' />

                          <fx:Object label='Z' />

                          </s:ArrayCollection>

                          </fx:Declarations>

                           

                          <s:VGroup>

                          <s:Button label="Show " click="button1_clickHandler(event)" />

                          <s:Button label="Print" click="btnPrint_clickHandler()" />

                          </s:VGroup>

                           

                          <s:List width="900" height="500"  id="lstStudentData"   itemRenderer="compononts.CustomListItemRenderer"

                          useVirtualLayout="true"   >

                          <s:layout >

                          <s:TileLayout requestedColumnCount="2" horizontalAlign="center" verticalAlign="middle"

                             />

                          </s:layout>

                           

                          </s:List>

                           

                          </s:WindowedApplication>

                          thx in advanced,