Jul 09
Olá amigos,
Atendendo a vários pedidos, estou iniciando uma série de posts de como criar Relatórios no Flex utilizando o FlexReport.
Para que o exemplo funcione você deve ter baixado a lib do FlexReport clicando aqui e também a lib AlivePDF clicando aqui.
No exemplo utilizo Flex+PHP+Mysql porém sem a utilização de AMFPHP.
Segue a estrutura do projeto no FlexBuilder:
- /assets/img –> contém o logo que será mostrado no cabeçalho do relatório;
- /database –> contém os arquivos .php do projeto
- /libs –> contém as bibliotecas utilizadas no projeto, neste caso AlivePDF
- /libs/reports –> contém os arquivos do FlexReport
- /reports –> contém todos os arquivos dos nossos relatórios e objetos customizados do FlexReport
A seguir vamos explicar todos os componentes distribuídos pelo FlexReport que serão utilizados na criação de um relatório:
- Body –> componente que indica o corpo do relatório;
- Page –> componente que indica a página do relatório;
- Preview –> componente de pré-visualização de um relatório, contém todos os controles de Zoom de página, movimentação entre páginas e thumbs das páginas;
- PrintComponent –> herda de um Canvas, utilizado para impressão no relatório de outros componentes MXML dentro dele.
- PrintTextArea –> componente utilizado para imprimir textos dentro do relatório;
- Report –> componente principal que indica um relatório;
- ReportDatagris –> componente utilizado para impressão de uma grid no relatório.
Os fontes destes componentes encontram-se na pasta /org/print do FlexReport e podem ser modificados a fim de implementar alguma nova funcionalidade ou fazer a tradução para o português de seus componentes.
Um relatório básico é composto das seguintes partes:
- Um Cabeçalho (Header);
- Body (Corpo do relatório);
- Rodapé (Footer).
Vamos então criar templates para o Cabeçalho e Rodapé dos relatórios. Estes componentes serão reutilizados em todos os nossos relatórios.
Vamos criar o arquivo Header.mxml e digitar o código a seguir:
<?xml version="1.0"?> <PrintComponent xmlns="libs.reports.org.print.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="78"> <mx:Script> <![CDATA[ [Bindable] public var title:String = "Título do Relatório"; [Bindable] [Embed(source="/assets/img/eSolicite48x48.png")] public var logo:Class; ]]> </mx:Script> <mx:Label text="E-Solicite" color="#000000" fontWeight="bold" fontSize="16" top="0" left="0"/> <mx:Label text="Página: {pageNumber}" fontSize="12" right="0" top="0"/> <mx:Image x="0" y="23" source="{logo}"/> <mx:Label text="{title}" color="#000000" fontWeight="bold" fontSize="12" top="32" left="47"/> <mx:Label text="{date} as {time}" color="#000000" fontWeight="normal" fontSize="12" top="51" left="47"/> </PrintComponent>
screen Header:
Então vamos criar o arquivo Footer.mxml e digitar o código a seguir:
<?xml version="1.0"?> <PrintComponent xmlns="libs.reports.org.print.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="30"> <mx:Label text="E-Solicite" color="#000000" fontWeight="bold" fontSize="16" top="0" left="0"/> <mx:Label text="Página {pageNumber}" fontSize="12" right="0" top="0"/> </PrintComponent>
screen Footer:
Com o nosso template do cabeçalho e rodapé criados, agora vamos criar o template do relatório:
Nosso template do relatório será composto de um Cabeçalho, Corpo e Rodapé e será um componente do tipo Report. Dentro do nosso corpo vamos adicionar um componente do tipo ReportDataGrid.
Vamos então criar o arquivo rListagem.mxml com o seguinte código:
<?xml version="1.0" encoding="utf-8"?> <Report xmlns="libs.reports.org.print.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="595" height="842" xmlns:report="*" xmlns:reports="reports.*"> <!-- REPORT LAYOUT --> <reports:Header id="header" width="100%" showInAllPages="true"/> <Body width="100%" height="100%"> <ReportDataGrid id="grid" sizeToPage="true" wordWrap="true" width="100%" fontSize="9"/> </Body> <reports:Footer width="100%" showInFirstPage="true" showInMiddlePages="true" showInLastPage="true"/> <mx:Script> <![CDATA[ public override function loadData() : void { } ]]> </mx:Script> </Report>
Screen Template:
Vamos agora criar nosso componente de previsualização. Vamos criar o arquivo ReportPreview.mxml com o seguinte código:
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApplication()" xmlns:ns1="libs.reports.org.print.*"> <mx:Script> <![CDATA[ import libs.reports.org.doc.PaperFormat; import libs.reports.org.print.Report; import libs.reports.templates.dataproviders.DemoReportDP; import libs.reports.org.doc.Document; [Bindable] public var doc:Document = null; [Bindable] public var datasourceText:ReportDPText; [Bindable] public var title:String = null; /** Função que receberá o Relatório a ser impresso **/ public function execute(report:Report = null):void { /** Criando a instancia do documento **/ /** Pode-se passar o formato do papel do relatório **/ doc = new Document(report, datasourceText, PaperFormat.A4); /** Script php de geração do PDF **/ doc.pdfScript = "http://www.flexpernambuco.com.br/solicite/libs/create.php"; doc.pdfEnabled = true; doc.title = title; printPreview.doc = doc; } private function initApplication():void { } ]]> </mx:Script> <ns1:Preview id="printPreview" left="5" right="5" top="5" bottom="5"> </ns1:Preview> </mx:Canvas>
Em nosso exemplo temos uma tela de listagem referente a tabela Tipos de Solicitação. Vamos agora implementar o exemplo.
Parte de acesso ao banco de dados:
arquivo config.php:
<? //**********************************************// // Constantes de Banco de Dados: // Nao esqueca de mudar esses dados ao publicar no servidor //**********************************************// DEFINE('NOMESERV','localhost'); DEFINE('NOMEUSU','root'); DEFINE('SENHADB',''); DEFINE('NOMEDB','myDB'); //**********************************************// // Database Query: //**********************************************// $con = mysql_connect(NOMESERV,NOMEUSU,SENHADB) OR DIE("Impossivel Conectar ao Banco de Dados"); @mysql_select_db(NOMEDB) or die( "ACESSO BLOQUEADO!! Nao foi possivel selecionar o Banco de Dados $query." . NOMEDB); ?>
Arquivo GetListTipoSolicitacao.php:
<?php /** Conexao com o banco de dados **/ require ('config.php'); /** Variavel que retorna o XML ao Front-end **/ $return =""; /** Inicio do XML **/ $return = "<?xml version='1.0' encoding='iso-8859-1'?>"; $return .="<root>"; /** Realiza a conexao com o banco **/ if ($con) { /** Cursor **/ $sql = ("Select cd_tipo_solicitacao, " ." ds_tipo_solicitacao " ." From tipo_solicitacao " ." Where 1 = 1 " ); /** FILTROS **/ if ( $_POST[ds_tipo_solicitacao] != "" ) { $sql .= " And ds_tipo_solicitacao LIKE '%".$_POST[ds_tipo_solicitacao]."%' "; } if ( $_POST[cd_tipo_solicitacao] != "" ) { $sql .= " And cd_tipo_solicitacao = ".$_POST[cd_tipo_solicitacao]; } /** Ordernacao **/ $sql .= " order by ds_tipo_solicitacao "; /** Executa a Query **/ $query = mysql_query($sql); $totRows = mysql_num_rows($query); if ($totRows > 0){ /** Realiza um Loop em todos os registros e monta o XML **/ while ( $record = mysql_fetch_object( $query ) ) { $return .= "<tipo_solicitacao>"; $return .= "<cd_tipo_solicitacao>".$record->cd_tipo_solicitacao."</cd_tipo_solicitacao>"; $return .= "<ds_tipo_solicitacao>".$record->ds_tipo_solicitacao."</ds_tipo_solicitacao>"; $return .= "</tipo_solicitacao>"; } } } else { /** retorna um Erro no XML **/ $return .= "<error_text>Problemas com a conexao ao banco de dados</error_text>"; } /** Finaliza o XML **/ $return .= "<message_text>".$totRows."</message_text>"; $return .="</root>"; mysql_free_result( $query ); print ($return) ?>
Arquivo reportFlex.mxml: Application do nosso exemplo:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <!-- HTTP Server - Get information from Database --> <mx:HTTPService resultFormat="e4x" id="listTipoSolicitacao" showBusyCursor="true" url="http://localhost/reportFlex/database/GetListTipoSolicitacao.php" method="POST" fault="falhouHTTP(event);" result="resultadoHTTP(event.result);"> <mx:request> <cd_tipo_solicitacao>{cd_tipo_solicitacao.text}</cd_tipo_solicitacao> <ds_tipo_solicitacao>{ds_tipo_solicitacao.text.toUpperCase()}</ds_tipo_solicitacao> </mx:request> </mx:HTTPService> <mx:Script> <![CDATA[ import mx.rpc.events.FaultEvent; import mx.controls.Alert; import reports.ReportPreview; import reports.rListagem; import mx.containers.Box; import mx.managers.PopUpManager; /** responsavel por mostrar o erro, caso ocorra no HTTP server **/ private function falhouHTTP(faultEvent:FaultEvent):void { Alert.show('Requisição falhou: [' + faultEvent.fault.faultCode + '=' + faultEvent.fault.name + ']','Erro'); } /** preenche a grid com o resultado XML do HTTP server **/ private function resultadoHTTP(resultObject:Object):void { for each (var message:String in resultObject.message_text) { /** atualiza status **/ gridStatus.text = message + " registro(s) retornados..."; } } /** Imprime relatório de listagem **/ private function executaRelatorio():void{ var titleW:Box = Box(PopUpManager.createPopUp(this,Box,true)); // Objeto de Previsualização do Laudo var report:ReportPreview = new ReportPreview(); // Nosso relatório var listagem:rListagem = new rListagem(); // Popup titleW.width = Application.application.width; titleW.height = Application.application.height; report.width = titleW.width; report.height = titleW.height; titleW.addChild(report); report.addChild(listagem); // Atibuindo as informações da Grid para a Grid // do nosso Relatório listagem.grid.dataProvider = grid.dataProvider; listagem.grid.columns = grid.columns; listagem.header.title = "Relatório: Listagem de Tipos de Solicitação"; report.execute(listagem); } ]]> </mx:Script> <mx:DataGrid dataProvider="{listTipoSolicitacao.lastResult.tipo_solicitacao}" x="10" y="57" width="447" height="193" id="grid"> <mx:columns> <mx:DataGridColumn visible="true" headerText="Código" dataField="cd_tipo_solicitacao" width="80"/> <mx:DataGridColumn visible="true" headerText="Descrição" dataField="ds_tipo_solicitacao"/> </mx:columns> </mx:DataGrid> <mx:Button x="379" y="27" label="Atualizar" id="btnAtualizar" click="listTipoSolicitacao.send()"/> <mx:Button x="10" y="284" label="Visualizar relatório" id="btnPreview" click="executaRelatorio();"/> <mx:TextInput x="10" y="27" width="83" id="cd_tipo_solicitacao"/> <mx:TextInput x="101" y="27" width="270" id="ds_tipo_solicitacao"/> <mx:Label x="10" y="10" text="Código" width="83"/> <mx:Label x="10" y="258" width="447" id="gridStatus"/> <mx:Label x="101" y="10" text="Descrição" width="270"/> </mx:Application>
Espero que todos gostem e que este exemplo ajude.
O exemplo pode ser acessado clicando aqui
O código do exemplo pode ser baixado clicando aqui
Abraços,
Juliano Mendes
July 9th, 2008 at 8:56 pm
Parabéns !Ficou muito bom o tuto….
July 9th, 2008 at 9:52 pm
Show de bola Juliano!!
July 10th, 2008 at 1:21 pm
seria dificil para vc disponibilar o conteúdo do arquivo:
“http://www.flexpernambuco.com.br/solicite/libs/create.php”
grato
e o artigo ficou muito bom
parabéns
July 11th, 2008 at 7:53 am
O FlexReport é free?
onde acho ele p/ download?
July 11th, 2008 at 9:18 pm
Parabéns pelo artigo e obrigado por divulgar o FlexReport. Gostaria de lhe pedir para incluir este artigo no site do FlexReport.
Cumprimentos
July 14th, 2008 at 2:25 pm
Compreendi o funcionamento do GetListTipoSolicitacao.php, que retorna um XML.
Mas não obtive nenhum retorno ao acessar o create.php. Seria possível disponibilizar o código deste arquivo?
July 14th, 2008 at 4:20 pm
Testa ai.
arquivo create.php:
< ?php
$method = $_GET['method'];
$name = $_GET['name'];
if ( isset ( $GLOBALS["HTTP_RAW_POST_DATA"] )) {
// get bytearray
$pdf = $GLOBALS["HTTP_RAW_POST_DATA"];
// add headers for download dialog-box
header('Content-Type: application/pdf');
header('Content-Length: '.strlen($pdf));
header('Content-disposition:'.$method.'; filename="'.$name.'"');
echo $pdf;
} else echo 'An error occured.';
?>
August 17th, 2008 at 1:36 pm
Parabens pelo artigo, ficou muito bom.
Só gostaria de uma dica, pra quando eu precisar imprimir um relatório de clientes por exemplo, agrupando e totalizando por cidade.
August 17th, 2008 at 11:43 pm
Voce pode colocar campos totalizadores dentro do seu relatório e fazer o preenchimento dele diretamente via AS. Da uma olhada no exemplo na funcao executae Relatorio() da mesma forma que voce preenche os valores da Grid voce preencheria o totalizador.
October 16th, 2008 at 1:42 am
Sim Filipe, voce pode implementar suas tabelas ou matrizes em um DataGrid, e como mostra no exemplo transportar isso para o FlexReport. Boa Sorte
November 16th, 2008 at 2:13 am
Estou fazendo em Java o meu sistema em Flex com base nesse tutorial (http://blog.digows.com/category/java/), pelo jeito que a parte Java do sistema foi desenvolvida tem como fazer relatórios usando ele?
November 24th, 2008 at 8:13 am
Gostaria de saber como faço para aumentar o tamanho da página do relatório, ou colocar a página em paisagem.
Onde encontro documentação sobre o flex reports?
January 30th, 2009 at 4:32 pm
Parabéns pela publicação! É de grande utilidade! Obrigado.
January 30th, 2009 at 4:35 pm
Teria como exportar para outros formatos além do PDF?
March 19th, 2009 at 8:39 am
Olá, Juliano!
Vi em um post seu na flex-brasil (http://br.groups.yahoo.com/group/flex-brasil/message/15656), que você comentava um bug no FlexReport ao rotacionar a página. Pelo seu post, eu entendi que você estava atualizando a biblioteca.
Você conseguiu corrigir o problema? Tem uma versão mais atualizada da biblioteca? Parece que o cara do Kamelyon não atualiza o FlexReport já há um bom tempo …
Abraços, e obrigado!
April 24th, 2009 at 9:29 am
Olá, eu gostaria de saber como faço pra, quando clicar no botão de pdf, o usuário possa salvar o pdf gerado na sua máquina!
Obrigado!
June 6th, 2009 at 12:55 pm
Muito bem, ficou muito claro. Gostaria de saber se tem como mesclar a página criada com um PDF já pronto. Obrigado pela atenção.
July 28th, 2009 at 3:08 pm
sergio,
basta ler o pdf ja pronto via php e retornando os valores pra aplicacao flex
August 3rd, 2009 at 11:57 am
Bom Dia
o arquivo mandado não tá gerando o pdf….
“http://www.flexpernambuco.com.br/solicite/libs/create.php”
Sabes o que pode ser?? se puder mandar algo por e-mail, já ajuda…
aironart@bol.com.br
September 15th, 2009 at 10:10 am
Olá pessoal,
Estou com um problema e não consigo resolver. Quando mando imprimir a partir de um Sistema Windows a página vem em branco, e quando mando imprimir de um Linux vem tudo bonitinho.
Alguma dica!?
Obrigada,
September 24th, 2009 at 9:48 am
Tem como, quando exportar para PDF ele ser selecionável? Como um texto e não como uma imagem?
October 15th, 2009 at 9:26 am
Estou me baseando nesse seu exemplo, passando o dataprovider de uma grid minha. O relatório aparece, mas com linhas em branco. O que estou fazendo errado?
January 13th, 2010 at 10:37 am
É possível ter quebra no relatório?
July 22nd, 2010 at 9:55 am
tem algum flexreport para FLASH BUILDER 4? ou algum outro parecido que o usuario possa visualizar antes de imprimir?
July 30th, 2010 at 2:44 pm
O interessante é que sempre a última linha do grid sai expremida na impressão impossibilitando a leitura. Não consegui resolver isso!!! Alguém tem alguma solução para isso?