1 Reply Latest reply on Sep 9, 2009 8:27 PM by babo_ya

    Printing images using a PrintDataGrid

    Jared Langdon Level 1

      I am trying to print many images from my app.  I am taking snapshots of objects on the app, putting them into an ArrayCollection, and displaying them in a DataGrid.  So far so good.  When I assign the same ArrayCollection to a PrintDataGrid, weirdness ensues.  Not only do the images not appear in the PrintDataGrid, they don't even appear anymore in the DataGrid.  Here's the code:

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

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="left"
              backgroundColor="white"
      >

          <mx:Script>
              <![CDATA[
               import mx.collections.ArrayCollection;
                  import mx.graphics.ImageSnapshot;
         import mx.controls.Image;
         import mx.printing.FlexPrintJob;

         private function doInit():void {
          for (var i:int = 0; i<5; i++) {
                    var oBM:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(btn));
                    oData.addItem({image:oBM});
          }
         }
        
         private function doPrint():void {
          oPDG.dataProvider = oData;
         }
        
                  private function takeSnapshot(source:IBitmapDrawable):void {
                   var oBM:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(source));
                   oData.addItem({image:oBM});
                  }

                  [Bindable]
                  private var oData:ArrayCollection = new ArrayCollection();
                 
              ]]>
          </mx:Script>

          <mx:ApplicationControlBar dock="true">
              <mx:Button label="Initialize oData" click="doInit();" />
              <mx:Button label="Assign oData to PrintDataGrid" click="doPrint();" />
          </mx:ApplicationControlBar>

          <mx:HBox>
           <!-- Take a snapshot of this -->
        <mx:Button id="btn" label="snapshot me!" />

        <mx:PrintDataGrid variableRowHeight="true" id="oPDG" width="100%" >
         <mx:columns>
          <mx:DataGridColumn width="200" headerText="Stuff" >
            <mx:itemRenderer>
             <mx:Component>
              <mx:Image source="{data.image}" />
             </mx:Component>
            </mx:itemRenderer>
           </mx:DataGridColumn>
         </mx:columns>
        </mx:PrintDataGrid>

              <mx:DataGrid variableRowHeight="true" minHeight="0" dataProvider="{oData}" >
               <mx:columns>
                <mx:DataGridColumn width="200" headerText="Stuff" >
           <mx:itemRenderer>
            <mx:Component>
             <mx:Image source="{data.image}" />
            </mx:Component>
           </mx:itemRenderer>
          </mx:DataGridColumn>

               </mx:columns>
              </mx:DataGrid>
          </mx:HBox>

      </mx:Application>

      Run the application.  Click Initialize oData to fill up the oData object (my data provider, which is an ArrayCollection) with snapshots of the button labelled "snapshot me!".  The images dutifully appear in the DataGrid to the right.  Now click "Assign oData to PrintDataGrid" and see what happens!  The images don't appear in the PrintDataGrid and the vanish from the DataGrid.  Anyone know what's going wrong here?  Any suggestions on how to print snapshot images using a PrintDataGrid?  Many thanks.

       

      Jared

        • 1. Re: Printing images using a PrintDataGrid
          babo_ya Level 3

          I wish I can help you with this issue. I've been trying to fix this last 30 mins.

           

          I converted the "PrintDataGrid" to DataGrid and just worked. but, i'm sure that's NOT what you are after.

           

          Try this...

           

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

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                  layout="vertical"

                  verticalAlign="left"

                  backgroundColor="white"

          >

              <mx:Script>

                  <![CDATA[

                   import mx.collections.ArrayCollection;

                      import mx.graphics.ImageSnapshot;

             import mx.controls.Image;

             import mx.printing.FlexPrintJob;

           

             private var dp:ArrayCollection = new ArrayCollection();

             private var dp2:ArrayCollection = new ArrayCollection();

           

             private function doInit():void {

              for (var i:int = 0; i<5; i++) {

                        var oBM:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(btn));

                        oData.addItem({image:oBM});

           

                       dp.addItem(oBM); 

              }

             }

           

             private function doPrint():void {

             // oPDG.dataProvider = oData;

           

           

              //oPDG.dataProvider = dp;

           

              var i:int;

              var len:int = dp.length;

              for(i = 0; i < len; i++)

              {

              var b:Bitmap = new Bitmap((dp.getItemAt(i) as Bitmap).bitmapData);

             

              var k:Object = new Object();

              k.image = b;

             

             

              dp2.addItem(k);

              }

              oPDG.dataProvider = dp2;

           

             }

           

                      private function takeSnapshot(source:IBitmapDrawable):void {

                       var oBM:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(source));

                       oData.addItem({image:oBM});

                      }

                      [Bindable]

                      private var oData:ArrayCollection = new ArrayCollection();

           

                  ]]>

              </mx:Script>

           

              <mx:ApplicationControlBar dock="true">

                  <mx:Button label="Initialize oData" click="doInit();" />

                  <mx:Button label="Assign oData to PrintDataGrid" click="doPrint();" />

              </mx:ApplicationControlBar>

              <mx:HBox>

               <!-- Take a snapshot of this -->

            <mx:Button id="btn" label="snapshot me!" />

            <mx:DataGrid variableRowHeight="true" id="oPDG" height="300" width="100%" >

             <mx:columns>

              <mx:DataGridColumn width="200" headerText="Stuff" >

                <mx:itemRenderer>

                 <mx:Component>

                  <mx:Image source="{data.image}" />

                 </mx:Component>

                </mx:itemRenderer>

               </mx:DataGridColumn>

             </mx:columns>

            </mx:DataGrid>

                  <mx:DataGrid variableRowHeight="true" minHeight="0" dataProvider="{oData}" >

                   <mx:columns>

                    <mx:DataGridColumn width="200" headerText="Stuff" >

               <mx:itemRenderer>

                <mx:Component>

                 <mx:Image source="{data.image}" />

                </mx:Component>

               </mx:itemRenderer>

              </mx:DataGridColumn>

                   </mx:columns>

                  </mx:DataGrid>

              </mx:HBox>

          </mx:Application>

           

           

           

          hope this helps,

          BaBo,