Jul 29

Liberada Documentação e Especificação do Flex 4

Dicas, Documentação, Flex 48 Comentarios »

Ae Pessoal,

Finalmente foi liberada a especificação e documentação da nova versão do Flex 4 denominada “Gumbo”.

Segue os links:

ASDoc
MXML 2009 - novo MXML
Gumbo SDK

Vamos correr atrás e ficar sempre atualizado!

Boa Sorte!!!

Abraços,

Juliano

Jul 09

Relatórios usando FlexReport

Flex 25 Comentarios »

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:
Estrutura

  • /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

Jul 07

Relatórios em PDF usando PHP e Flex

Flex 10 Comentarios »

Olá amigos,

Nesse post vou mostrar como faço meus relatórios em PHP e consigo acessar através do Flex, bem estou levando em consideração que você conheça a classe FPDF, que pode ser baixada clicando aqui, e também conheça o AMFPHP que é responsável pela conexão entre Flex e PHP que pode ser baixado clicando aqui, e que você já tenha uma conexão com algum banco de dados, neste exemplo vou usar o MySQL.

Então vamos criar o arquivo reports.php e digitar o código em PHP:

<?php
require_once("pdf.php");
 
class reports {
   function reports() {
      mysql_connect("localhost","root","senha");
      mysql_select_db("meubanco");
      session_start();
   }
 
  function meuRelatorio() {
      $sql = "select * from clientes order by nome";
 
      $pdf = new PDF('L'); 
 
      $pdf->SetName("Listagem dos clientes");
      $pdf->Open();
      $pdf->AddPage();
      $pdf->SetFont('Arial', 'B', 8);
      $pdf->Cell(10, 5, "Id", 0, 0);
      $pdf->Cell(50, 5, "Nome", 0, 0);
      $pdf->SetX(-10);
      $pdf->line(10, 25, $pdf->GetX(), 25);
      $pdf->SetXY(10, 27);
      $pdf->SetFont('Arial', '', 8); 	 		
 
      $ds = mysql_query($sql);
      while ($rs = mysql_fetch_object($ds)) {
 
         $pdf->Cell(10, 5, $rs->ID_CLIENTE, 0, 0);
         $pdf->Cell(50, 5, $rs->NOME, 0, 1);
      }
 
      $arquivo = "tmp/relatorio_".session_id().".pdf";
 
      $pdf->Output( $arquivo,'F' );
 
      return $arquivo;
   }
}

Até aí o fizemos é o seguinte, conectamos ao banco, montamos o relatório em pdf, gravamos o arquivo com um nome temporário usando a session_id, e retornamos o nome do arquivo para o flex, ok?

Agora vamos ao Flex, faremos uma aplicação simples apenas com um botão para chamar o metodo “meuRelatorio” e abrir o PDF em outra janela, então vamos lá.

Para manter uma conexão com o PHP eu uso um package que nomeio de ConexaoRemota, então crie um arquivo chamado ConexaoRemota.as com o seguinte conteúdo:

package
{
        import flash.net.NetConnection;
        import flash.net.ObjectEncoding;
        import flash.events.SecurityErrorEvent;
 
        public class ConexaoRemota extends NetConnection {
               public function ConexaoRemota(strURL:String) {
                     objectEncoding = ObjectEncoding.AMF0;
 
                     if(strURL)
                     	connect(strURL);
               }
        }
 
}

Agora inicie uma nova aplicação no Flex, e digite o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
		]]>
	</mx:Script>
 
	<mx:Button x="26" y="25" label="Visualizar relatório" click="abrePDF()"/>
 
</mx:Application>

Na Tag script digite o seguinte código:

import mx.controls.Alert;
 
public var gateway:ConexaoRemota;
 
private function initApp():void {
	gateway = new ConexaoRemota("http://127.0.0.1/relatorios/amfphp/gateway.php");  // caminho do arquivo gateway.php do AMFPHP
}
 
private function abrePDF():void {
	gateway.call("reports.meuRelatorio",new Responder(onResultPDF,onFaultAmf));  // chama o método meuRelatorio lá do arquivo reports.php
}
 
private function onFaultAmf(result:*):void {
	Alert.show("Erro no processamento!");
}
 
private function onResultPDF(result:*):void {
	var file:FileReference;
	var urlString:String = "http://127.0.0.1/relatorios/amfphp/services/"+result;  // local que criou o arquivo PDF
	var request:URLRequest = new URLRequest(urlString);
 
	navigateToURL(request,"_blank");	// abre o PDF em outra janela
}

Pronto! basta rodar sua aplicação e vê se funciona rsss, bem espero que tenha ficado claro pra vocês, abaixo você encontra a aplicação rodando para testar.

Espero ver os comentários de vocês sobre este post.

Abraços,

Ricardo Cerqueira

Jul 04

Flex Builder

Dicas, Flex Sem Comentarios »

Para quem ainda tem dúvidas de como baixar a IDE de desenvolvimento do Flex, chamada Flex Builder ai vai os links.

A IDE não é Free. Ela é trial por 60 dias. Porém ela é Totalmente Free para estudantes e instituições de ensino.

Para download acesse: http://www.adobe.com/products/flex/

Para que a Adobe libere uma licença, você deve provar que é estudante enviando uma cópia da sua carteira de estudante ou contrato com a Universidade através do Site: https://www.flexregistration.com/
Eles enviam uma licença em até 3 dias.

Jul 04

e-solicite v0.1.60

Aplicações completas, Flex, e-solicite 48 Comentarios »

Pessoal, o e-solicite foi atualizado para a versão 0.1.60 com algumas mudanças.

* O sistema recebeu uma nova aparência.
- Foi retirada a tree de menu a fim de ganharmos espaço para abertura das telas.
- Foi criado um novo ambiente de telas
- Os botões estão com novos efeitos
* Iniciado o desenvolvimento dos dashboards.
- Criado dashboard de solicitações do usuário logado
- Solicitações por tipo de solicitação
- Solicitações por cliente.
- Dashboards são abertos no estido MDI, podendo maximizar, minimizar, fechar, etc…

Ainda está sendo desenvolvido a geração dinamica de dashboards, apenas foi iniciado o desenvolvimento do template das telas, com botão para refresh, impressão do dashboard, permitir modificar os parâmetros de filtros do dashboard.

Segue alguns prints:

Para testar o e-solicite acesse aqui.
usuário: flexpe senha: flex

Quem puder testar e reportar problemas e/ou sugestões de melhorias seria muito bom!

Espero que gostem.

Abraços,

Juliano

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in