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
Comentarios Recentes