17 Replies Latest reply on Apr 7, 2011 10:44 AM by DilipShah

    Does FlexPrintJob work with DataGroup?

    DilipShah Level 1
      I'm trying to print a DataGroup that has 100+ elements  and it prints first few elements. Area for the subsequent ones and the  subsequent pages generated are all blank!
      Here is printing-related code:
      var printJob:FlexPrintJob = new  FlexPrintJob();
         
      // start the print job
      if (printJob.start() !=  true) return;
         
      // add the object to print
      printJob.addObject(myDataGroup,  FlexPrintJobScaleType.MATCH_WIDTH);
         
      // send the print job to the  printer
      printJob.send();
      I'm stuck at this point and need to decide if this  approach is going to work or I need to switch to some other approach such as PDF  generation, etc.
      Thanks in advance for any input.

        • 1. Re: Does FlexPrintJob work with DataGroup?
          UbuntuPenguin Level 4

          I would use the PrintDataGrid class if I had to do what you are doing.


          1 person found this helpful
          • 2. Re: Does FlexPrintJob work with DataGroup?
            DilipShah Level 1

            Thanks for the suggestion but I have a custom ItemRenderer that I need to use for this group of data. From my past experience, it's not trivial (if at all possible) to use a Spark ItemRenderer with DataGrid.

            • 3. Re: Does FlexPrintJob work with DataGroup?
              Flex harUI Adobe Employee

              FlexPrintJob will print the DataGroup at whatever size the DataGroup is,

              scaled to match the scaling options.  If the DataGroup isn't large enough to

              display every item and/or is using virtualLayout, then it won't display

              every item.

               

              If all items won't fit on a page, you might want display a page full of

              items on separate pages.  That's what PrintDataGrid knows how to do.

               

              You can convert a Spark Renderer so it can work in PrintDataGrid if you need

              to.

              1 person found this helpful
              • 4. Re: Does FlexPrintJob work with DataGroup?
                DilipShah Level 1

                Thanks Flex harUI!

                 

                I followed your advice and also looked at your exchange with solapola (http://forums.adobe.com/thread/822556?decorator=print&displayFullThread=true).

                 

                Now I do get as many rows as the items in my data provider but each row is blank!

                 

                Here is the print function:
                /**
                  * Handles click event on print button.
                  *
                  */
                protected function print_clickHandler(event:MouseEvent):void {
                     var printJob:FlexPrintJob = new FlexPrintJob();
                     if (printJob.start()) {
                         // Set the print view properties.
                         questionListView.width = printJob.pageWidth;
                         questionListView.height = printJob.pageHeight;
                        
                         printJob.addObject(questionListView, FlexPrintJobScaleType.NONE);
                         printJob.send();
                     }
                }

                 

                Here is the PrintDataGrid
                <mx:PrintDataGrid 
                    id="questionListView"
                    dataProvider="{quiz.questions}"
                    borderVisible="false"
                    width="100%"
                    >
                    <mx:columns>
                        <mx:DataGridColumn itemRenderer="QuestionPrintRenderer" />
                    </mx:columns>
                </mx:PrintDataGrid >

                 

                 

                QuestionPrintRenderer.mxml:

                <?xml version="1.0" encoding="utf-8"?>
                <s:MXDataGridItemRenderer
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    >
                    <s:Label
                        id="question"
                        width="100"
                        />
                   
                    <fx:Script>
                        <![CDATA[
                            override public function set data(value:Object) : void {
                                if (value != null) {
                                    super.data = value;
                                   
                                    question.text = data.questionStatement;
                                }
                            }
                           
                           
                        ]]>
                    </fx:Script>
                </s:MXDataGridItemRenderer>

                 

                Any idea on what I'm doing wrong?

                 

                Thanks a lot!

                • 5. Re: Does FlexPrintJob work with DataGroup?
                  Flex harUI Adobe Employee

                  If possible, display the DataGroup so you can see what it looks like before

                  printing.

                  • 6. Re: Does FlexPrintJob work with DataGroup?
                    DilipShah Level 1

                    I did that and it looks fine on the screen. It doesn't show up even when I hardcode the values! I'm going to play a bit more and see what's going wrong.

                    • 7. Re: Does FlexPrintJob work with DataGroup?
                      DilipShah Level 1

                      I plugged in the multipage PrintDataGrid example from here (http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c7e.html) into my application and tried to print 20 rows of the grid in the example. It prints a 20-row table but prints data in only the first 4 rows. I'm truly mystified by this behavior!

                      • 8. Re: Does FlexPrintJob work with DataGroup?
                        Flex harUI Adobe Employee

                        Try printing to PDF, then post the PDF and a screenshot.  If the contents of

                        the renderers are relying on asynchronous data, that can cause somethings to

                        not renderer.

                        • 9. Re: Does FlexPrintJob work with DataGroup?
                          DilipShah Level 1

                          Flex harUI, thanks for working with me on this one!


                          Just so that you know, I'm using sdk 4.1.0.16076
                          I tried the multi-page printing example (as an independent application) from the url: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c7e.html
                          and it works as expected.
                          Then I converted the Application container to a VGroup and implemented the example code in my application as is and I encounter the same issue that I've been for the last couple of days. I currently don't have printer attached to my computer and so I printed the output to OneNote and exported the file to pfd.

                          I've attached the screenshot of the populated DataGrid that's on the screen here. As you can see, data is in the DataGrid but they don't get transferred or are somehow stay hidden in the PrintDataGrid. It looks like this forum doesn't allow uploading pdf file. Let me see how I can send it to you.
                          What could be going on here?

                          MultiPagePrint-datagrid.JPG
                          • 10. Re: Does FlexPrintJob work with DataGroup?
                            DilipShah Level 1

                            Here is link to the PDF file: http://208.109.190.155:9080/BlueSkyLearning-QA/tempFiles/MultiPagePrint-withIssues.pdf

                             

                            Notice how data stops showing up on the first page and then again show up on the second!

                            • 11. Re: Does FlexPrintJob work with DataGroup?
                              Flex harUI Adobe Employee

                              Can't seem to load the PDF.  Maybe post a screenshot of the PDF as a JPG.

                               

                              The screenshot you did post only showed a 7 row DG.  Therefore on each page

                              you should see exactly that DG.  If you are printing something else, we need

                              to see what that thing you are actually printing looked like.

                              • 12. Re: Does FlexPrintJob work with DataGroup?
                                DilipShah Level 1

                                Here are the screen shots for page 1 and 2 of the PDF file.

                                MultiPagePrint-PDF-page1.JPG

                                 

                                MultiPagePrint-PDF-page2.JPG

                                The image I uploaded earlier is that of a datagrid with 35 rows. The height of the datagrid is small and so it shows only 6 rows along with the scroll bar.

                                 

                                Hope this helps further understand what's going on.

                                 

                                Thanks!

                                • 13. Re: Does FlexPrintJob work with DataGroup?
                                  Flex harUI Adobe Employee

                                  If you submit a 6-row DG to FlexPrintJob, regardless of how many rows are in

                                  the dataprovider, it will print 6 rows with a scroll bar.  If you are

                                  submitting something else to FlexPrintJob, or modifying the height of the

                                  6-row DG before submitting it, I would display that thing somewhere in your

                                  UI so you can see what it looks like when it gets submitted.

                                  • 14. Re: Does FlexPrintJob work with DataGroup?
                                    DilipShah Level 1
                                    I spent some more time on this and I believe we are getting  closer to the resolution but not quite there.
                                    I changed the module container from VGroup with a few other items in it to Group.
                                    Here is the screen output, which shows the entire table filled with data:
                                    MultiPagePrint-datagrid.JPG
                                    Here is the link to the generated PDF, where you can see that bottom rows are empty!
                                    Why are a few of the bottom rows skipped? If I add more  rows, say 100, on each print page, the bottom certain number of rows are left  blank!
                                    Thanks again for all your help.
                                    • 15. Re: Does FlexPrintJob work with DataGroup?
                                      Flex harUI Adobe Employee

                                      Hard to tell.  Is this test case pretty small?  Post it so we can take a

                                      look.

                                      • 16. Re: Does FlexPrintJob work with DataGroup?
                                        DilipShah Level 1

                                        My project is too big to post here. I'll try to recreate the issue in a smaller project and post it here.

                                         

                                        Once again, thanks a lot for all the help so far.

                                        • 17. Re: Does FlexPrintJob work with DataGroup?
                                          DilipShah Level 1
                                          I believe I have narrowed down to what's causing this issue of PrintDataGrid skipping last several rows in the printout of each page.
                                          I have skinned my application and that skin has scrollbar.
                                          =======
                                          <?xml version="1.0" encoding="utf-8"?>
                                          <!--
                                          ADOBE SYSTEMS INCORPORATED
                                          Copyright 2008 Adobe  Systems Incorporated
                                          All Rights Reserved.
                                          NOTICE: Adobe permits you to use, modify, and distribute  this file
                                          in accordance with the terms of the license agreement accompanying  it.
                                          -->
                                          <!--- The default skin class for the Spark  Application component.
                                          @see spark.components.Application
                                          @langversion 3.0
                                          @playerversion Flash  10
                                          @playerversion AIR 1.5
                                          @productversion Flex 4
                                          -->
                                          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark"
                                            xmlns:fb="http://ns.adobe.com/flashbuilder/2009"  alpha.disabled="0.5"  alpha.disabledWithControlBar="0.5">

                                          <fx:Metadata>
                                            <![CDATA[ 
                                            /**
                                            * A strongly typed property that references the component to  which this skin is  applied.
                                            */
                                            [HostComponent("spark.components.Application")]
                                            ]]>
                                          </fx:Metadata>

                                          <fx:Script fb:purpose="styling">
                                            <![CDATA[
                                             /**
                                              *  @private
                                               */
                                             override protected function updateDisplayList(unscaledWidth:Number,
                                                          unscaledHeight:Number) :  void
                                             {
                                              bgRectFill.color = getStyle('backgroundColor');
                                              super.updateDisplayList(unscaledWidth,  unscaledHeight);
                                             }
                                            ]]>
                                          </fx:Script>

                                          <s:states>
                                            <s:State  name="normal" />
                                            <s:State name="disabled" />
                                            <s:State name="normalWithControlBar" />
                                            <s:State name="disabledWithControlBar"  />
                                          </s:states>

                                          <!-- fill -->
                                          <!---
                                          A  rectangle with a solid color fill that forms the background of the  application.
                                          The color of the fill is set to the Application's  backgroundColor property.
                                          -->
                                          <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
                                            <s:fill>
                                             <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
                                            </s:fill>
                                          </s:Rect>

                                          <s:Scroller left="1" top="1" right="1" bottom="1" id="scroller">
                                            <s:Group  left="0" right="0" top="0"  bottom="0">
                                             <s:layout>
                                              <s:VerticalLayout gap="0" horizontalAlign="justify" />
                                             </s:layout>
                                            
                                             <!--- 
                                             @private
                                             Application Control Bar
                                             -->
                                             <s:Group id="topGroup" minWidth="0" minHeight="0"
                                                includeIn="normalWithControlBar, disabledWithControlBar" >
                                             
                                              <!-- layer 0: control bar highlight  -->
                                              <s:Rect left="0" right="0" top="0" bottom="1" >
                                               <s:stroke>
                                                <s:LinearGradientStroke rotation="90" weight="1">
                                                 <s:GradientEntry color="0xFFFFFF" />
                                                 <s:GradientEntry color="0xD8D8D8"  />
                                                </s:LinearGradientStroke>
                                               </s:stroke>
                                              </s:Rect>
                                             
                                              <!--  layer 1: control bar fill -->
                                              <s:Rect left="1" right="1" top="1" bottom="2" >
                                               <s:fill>
                                                <s:LinearGradient rotation="90">
                                                 <s:GradientEntry color="0xEDEDED" />
                                                 <s:GradientEntry color="0xCDCDCD"  />
                                                </s:LinearGradient>
                                               </s:fill>
                                              </s:Rect>
                                             
                                              <!--  layer 2: control bar divider line -->
                                              <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                                               <s:fill>
                                                <s:SolidColor color="0x000000" />
                                               </s:fill>
                                              </s:Rect>
                                             
                                              <!--  layer 3: control bar -->
                                              <!--- @copy spark.components.Application#controlBarGroup -->
                                              <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                                               <s:layout>
                                                <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                                               </s:layout>
                                              </s:Group>
                                             </s:Group>
                                            
                                             <!--- @copy spark.components.SkinnableContainer#contentGroup -->
                                             <!--<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />-->
                                             <s:Group id="contentGroup"  left="0" right="0" top="0" bottom="0"  />
                                            </s:Group>
                                          </s:Scroller>

                                          </s:Skin>
                                          =======
                                          This way, instead of browser scrollbar I can use my custom scrollbar for the application.
                                          If I remove this skin, the printing is as expected and the issue is resolved!

                                          I also tried this custom skin on Adobe's  PrintDataGrid example (http://help.adobe.com/en_US/FlashPlatform//reference/actionscript/3/mx/printing/PrintDataG rid.html). After that, if you reduce the height of the browser, you can see that the printed grid skips last several rows.
                                          At this juncture I have couple of choices.
                                          1. Somehow find a fix of this issue while continue to use this custom application skin with my own scrollbar
                                          2. Not use custom skin with the scrollbar and use the browser scrollbar. I did some research on this but it looks like I need to fix the size of embedded swf in the html wrapper.
                                          That means, I cannot have this:
                                          swfobject.embedSWF("main.swf", "flashContent", "100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
                                          and have something like this
                                          swfobject.embedSWF("main.swf", "flashContent", "960", "700", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
                                          But if I fix the size of main.swf, the application trims the display as this specified size!
                                          Do you know how to let Flex determine the application size and when it goes beyond the browser, the browser brings up the scrollbar?
                                          Thanks!