Relatório e Impressão no Flex; Tutorial.

por: Mário Santos
   

Muitas vezes temos que imprimir algo no nosso projecto flex, mas não sabemos bem como o fazer… ora, e se tivessemos diversos templates para imprimir o que quisermos ? facil não? pois é, neste tutorial vou explicar um processo bem simples de termos os nossos relatórios já praticamente prontos a receber dados para serem impressos… vamos por partes, criem um novo projecto com o nome testRelatorio. e depois criem uma pasta na raiz (normalmente src) desse projecto chamada print e dentro dessa pasta print criem uma nova pasta assets…


No meu exemplo uso o logo do blog, se quiserem seguir o tutorial, copiem a seguinte imagem e colem a seguinte imagem nessa pasta assets:

Logo

Logo

Vamos agora criar um novo componente. Menus: File->New->MXML Component e escolham as seguintes definições:

Novo MXML Component

Novo MXML Component

Cliquem em Finish

Temos o nosso template, vamos colocar nesse template todo o código em baixo :

Download: template.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="595" height="842" backgroundColor="#FDF8F8" backgroundAlpha="1">
  3.     <mx:Canvas x="33" y="34" width="526" height="775" id="safeArea">
  4.         <mx:Text y="10" text="Header" width="288" height="117" id="DOC_HEADER_TEXTO" color="#030303" right="10" fontFamily="Verdana" fontSize="13" fontStyle="italic" textAlign="right"/>
  5.         <mx:Canvas x="0" y="192" width="526" height="583" id="DOC_CONTEUDO">
  6.         </mx:Canvas>
  7.     </mx:Canvas>
  8.     <mx:Image x="33" y="34" source="@Embed(source='assets/logo.png')" id="DOC_LOGO"/>
  9.     <mx:Label x="33" y="185" text="Titulo" width="526" height="27" fontWeight="bold" fontStyle="normal" textAlign="center" fontSize="13" color="#CD3E06" id="DOC_TITULO"/>
  10.     <mx:Label y="805" text="Rodape" width="526" textAlign="center" horizontalCenter="0" id="DOC_RODAPE" color="#919394"/>
  11. </mx:Canvas>
Download: template.mxml

E pronto, temos o nosso template pronto, com areas de logo, header, titulo, conteudo e rodape, que deve estar como a imagem:

Parte 2 - template.mxml

Parte 2 - template.mxml

voltamos à nossa aplicação criada no inico do projecto (testRelatorio.mxml) e vamos colar este código:

Download: testRelatorio.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFDFD, #FFFDFD]">
  3. <mx:Script>
  4.     <![CDATA[
  5.         import mx.collections.ArrayCollection;
  6.     [Bindable]
  7.     private var dados:ArrayCollection = new ArrayCollection([{titulo: "Livro a", cod: "#5345", preco: "50 €"},{titulo: "CADER B", cod: "#553", preco: "12 €"},{titulo: "LIVRO FLEX", cod: "#5885", preco: "30 €"}]);
  8.     ]]>
  9. </mx:Script>
  10.     <mx:DataGrid dataProvider="{dados}" width="350" horizontalCenter="0" verticalCenter="0" id="minhaDataGrid">
  11.         <mx:columns>
  12.             <mx:DataGridColumn headerText="Cod." dataField="cod" width="30"/>
  13.             <mx:DataGridColumn headerText="Artigo 1" width="270" dataField="titulo"/>
  14.             <mx:DataGridColumn headerText="Preco" dataField="preco" width="50"/>
  15.         </mx:columns>
  16.     </mx:DataGrid>
  17.     <mx:Button label="Imprime" width="350" horizontalCenter="0" verticalCenter="90"/>
  18.    
  19. </mx:Application>
Download: testRelatorio.mxml

Devemos ter algo como:

Parte 3 - testeRelatorio.mxml

Parte 3 - testeRelatorio.mxml

Agora só falta a nossa função de imprimir.

vamos colocar no nosso testeRelatorio.mxml a seguir ao nosso arrayCollection:

  1. import print.template;
  2.     import mx.printing.FlexPrintJob;
  3.    
  4.     [Embed(source="print/assets/logo.png")]
  5.     private var logotipo:Class
  6.    
  7.     private function imprime():void {
  8.        
  9.         var modelo:template = new template;
  10.         modelo.visible=false;
  11.         addChild(modelo);
  12.         modelo.DOC_HEADER_TEXTO.text="Exmo. Sr. Antunes Costa\n\nRelatorio resumido das compras por pagar!";
  13.         modelo.DOC_LOGO.source=logotipo; //convem ser uma imagem já embebida, podemos usar caminho, mas a class é mais rapida a ser carregada e impede que haja falta de foto na impressão.
  14.         modelo.DOC_TITULO.text="RELATORIO FALTAS!"
  15.         modelo.DOC_RODAPE.text="Listagem de falhas de pagamento. Para mais informações contacte +225 554 25485";
  16.         modelo.DOC_CONTEUDO.addChild(minhaDataGrid); //adicionamos a datagrid como child do nosso conteudo
  17.         //adicionamos o modelo para ficar no stage, invisivel.
  18.        
  19.         //declaramos o trabalho de impressão
  20.         var printJob:FlexPrintJob = new FlexPrintJob();
  21.         //iniciamos o trabalho de impressão
  22.         if(printJob.start()) {
  23.            
  24.         //adicionamos a nossa pagina para imprimir
  25.         printJob.addObject(modelo);
  26.         //enviamos o trabalho para a impressora
  27.         printJob.send();
  28.         //removemos o nosso modelo do stage
  29.         removeChild(modelo);
  30.  
  31.             }
  32.        
  33.         }

e colocamos no nosso botão de imprimir, dentro da sua tag, o click=”imprime()”;

  1. <mx:Button label="Imprime" width="350" horizontalCenter="0" verticalCenter="90" click="imprime()"/>

Pronto, salvem a vossa aplicação e corram o exemplo, cliquem em imprimir e vejam o quanto facil foi :)

Se quiserem podem criar outros templates, das mais variadas formas e exemplos.. sendo que devem importa-lo e adiciona-lo ao stage sempre invisivel para não estragar a vossa aplicação… neste exemplo a datagrid desaparece porque a mudei de child…adicionando-a ao template. Se quiserem sempre visivel, criem uma nova datagrid igual no template.mxml com o nome DOC_DATAGRID e a quando da impressão adicionem-lhe o mesmo dataprovider:

modelo.DOC_DATAGRID.dataProvider=dados;

e voilá!

Dica. Se quiserem imprimir em pdf, ou usam o AlivePDF ou usam um driver da adobe para juntar uma impressora de pdf’s que envia o trabalho de impressão para esse driver que grava em pdf.

Podem ver o exemplo online com o códig fonte disponivel aqui

Espero que seja util.

Abraço.

versão pdf temporariamente indisponivel.
Deixe um comentário ou um Trackback

13 Comentários

  1. Silva Developer
    Agosto 7, 2008 às 6:34 pm | Permalink

    Parabéns pelo post, muito informativo, objetico e esclarecedor.

    Abraço,

    Silva Developer

  2. Mário Santos
    Agosto 8, 2008 às 7:47 am | Permalink

    Obrigado! :)

    Abraço.

  3. Victor Chaves Garcia
    Setembro 8, 2008 às 1:49 pm | Permalink

    Mário muito bom! Abraço.

  4. Pedro Neves
    Outubro 8, 2008 às 7:55 pm | Permalink

    Muito bom Mario.
    Ajudou bastante!

  5. José Carlos Fonseca
    Novembro 17, 2008 às 7:06 pm | Permalink

    Boa noite Mário,

    Este exemplo está muito bom!
    Mas quando clico em imprimir escolho pdf e não faz nada.
    Verificei que se comentar a linha “modelo.DOC_CONTEUDO.addChild(minhaDataGrid);” imprime tudo!

    O que pode ser?? Tenho a versão 10 do flash, será isso??

    E imprimir em multiplas páginas, podes ajudar-me?

    Obrigado.

    José Carlos Fonseca
    Fafe - Portugal

  6. Mário Santos
    Novembro 18, 2008 às 10:09 am | Permalink

    Mas está a imprimir como? usando um driver de impressora de pdf’s?

  7. José Carlos Fonseca
    Novembro 18, 2008 às 6:45 pm | Permalink

    Sim, quando clico no botao imprime surge o ecrã das impressoras e escolho a “Adobe pdf”, dou nome ao doc e confirmo.

    Nesta altura começa a criar o pdf. Ao fim de alguns segundos esta janela fecha-se e não tenho o pdf criado.

    Obrigado.

    José Carlos Fonseca
    Fafe - Portugal

  8. Mário Santos
    Novembro 18, 2008 às 7:59 pm | Permalink

    Estranho… tente instalar e usar um dos drivers seguintes:

    pdf995 Printer Driver - http://www.pdf995.com/download.html
    Virtual Pdf Printer - http://www.download.com/1770-20_4-0.html?query=Virtual+PDF+Printer&tag=404&searchtype=downloads
    ou o pdf creator ou até mesmo o cutePdf printer nessa mesma pagina…

    teste depois conte o que aconteceu….

    Já agora, usa que sistema operativo ?

  9. José Carlos Fonseca
    Novembro 18, 2008 às 11:44 pm | Permalink

    Mário, já instalei o virtual pdf printer e mesmo assim não dá.

    O estranho é que se eu usar o teu exemplo que tens nesta página funciona mesmo com a printer que tinha.

    O sistema operativo é o XP Pro.

  10. Mário Santos
    Novembro 19, 2008 às 7:14 am | Permalink

    Humm.. mas se funcionava antes, o Sistema Operativo nada tem a ver, você seguiu todos os passos detalhadamente? adicionou bem os childs ?

    Se estiver tudo correcto não sei o que se estará a passar… é que esse exemplo que tenho em cima funciona bem aqui…

    Se puderes, envia-me o código fonte pra dar uma vista de olhos: admin[at]msdevstudio[ponto]com

    cumps

  11. José Carlos Fonseca
    Novembro 19, 2008 às 7:43 pm | Permalink

    De facto o código é exactamente o que tens no exemplo. Quando disse que funcionava é se eu usar o teu exemplo online.

    Não faz mal, vou fazer o print da datagrid, para já, sem num cabeçalho ou rodapé. Obrigado na mesma, o teu exemplo já ajudou bastante.

    Aproveito para pedir ajuda noutra questão, por acaso não tens nenhum exemplo em flex + mysql de pesquisa avançada?

    Obrigado.

  12. Reginaldo Morikawa
    Novembro 20, 2008 às 8:46 pm | Permalink

    Olá, muito útil esse exemplo, funcionou legal aqui, mas se o datagrid tem muitos dados, e cria a scrollbar, só é impresso os primeiros dados visualizados (imprime até a scrollbar do datagrid). Como resolver isso? Gostaria que fosse impresso o restante dos dados em outras páginas. Obrigado por sua atenção.

  13. Mário Santos
    Novembro 21, 2008 às 8:12 am | Permalink

    Boas Reginaldo, esse é o problema… que também acontece numa caixa de texto no html normal, se imprimir uma pagina web com uma caixa de texto html e se esta tiver scrollbars vai verificar que o seu conteudo não será totalmente impresso…

    uma das soluções é antes de imprimir verificar a altura da sua datagrid e no que diz respeito a multi-paginas as coisas complicam-se aplicadas a este exemplo, mas veja:

    http://therush.wordpress.com/2007/01/06/flex-datagrid-printing/
    http://flexed.wordpress.com/2006/12/26/customgrid-v10-or-searchgrid-v20/

    este segundo link é um componente que permite imprimir a datagrid completa…

    cumps.

Deixe um comentário

O seu email nunca será publicado ou partilhado. Campos obrigatórios estão marcados com um *

*
*