Flex in a Week

Dicas, Flex 1 Comentario »


Esse eu recomendo a todos.

A ADOBE lançou um programa de treinamento online baseado em videos.  Este treinamento é grátis e visa ajudar desenvolvedores a acelerar seus estudos em Flex.

São vários video aulas liberadas e divididas em 5 dias, incluindo exercícios e soluções.

Simplemente fantástico para quem estiver começando no Flex.

  • Apenas deixo aqui avisado que todas as aulas são em Inglês.

O treinamento pode ser acessado aqui:
http://www.adobe.com/devnet/flex/videotraining/

Juliano

Efeitos Glow

Exemplos, Flex Sem Comentarios »

Olá amigos,

Um simples exemplo de efeitos de rollOver e rollOut em imagens.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="415" height="380" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]" viewSourceURL="srcview/index.html">
	<mx:Image x="10" y="10" source="assets/img/e-solicite.png" scaleContent="true" width="48" height="48" rollOverEffect="{rollOverEffect}" rollOutEffect="{rollOutEffect}"/>
	<mx:Image x="66" y="10" source="assets/img/32_home.png" scaleContent="true" width="32" height="32" rollOverEffect="{rollOverEffect}" rollOutEffect="{rollOutEffect}"/>
	<mx:Image x="106" y="10" source="assets/img/32_logoff.png" scaleContent="true" width="32" height="32" rollOverEffect="{rollOverEffect}" rollOutEffect="{rollOutEffect}"/>
 
  <mx:Script>
  	<![CDATA[
 
		import mx.effects.Glow;
		import mx.effects.Effect;
 
  		private function get rollOverEffect():Effect {
			var effect:Glow = new Glow();
			effect.blurXTo = effect.blurYTo = 10;
			effect.alphaFrom = 0;
			effect.alphaTo = 0.6;
			effect.color = 0xFFFFFF;
			return effect;
		}
 
		private function get rollOutEffect():Effect {
			var effect:Glow = new Glow();
			effect.blurXTo = effect.blurYTo = 0;
			effect.alphaFrom = 0.6;
			effect.alphaTo = 0;
			effect.color = 0xFFFFFF;
			return effect;
		}
 
  	]]>
  </mx:Script>	
</mx:Application>

O exemplo pode ser acessado clicando aqui
O código está habilitado.

Abraços,

Juliano Mendes

Liberada Documentação e Especificação do Flex 4 (Gumbo)

Dicas, Documentação, Flex 3 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

Relatórios usando FlexReport

Flex 12 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

Relatórios em PDF usando PHP e Flex

Flex 4 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

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.

e-solicite v0.1.60

Aplicações completas, Flex, e-solicite 18 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

Código de Barras em Flex

Flex, componentes 1 Comentario »

Em minhas andanças pela internet encontrei uma lib que gera códigos de barras diretamente no flex.

Muito interessante. Quem quiser verificar ou baixar pode acessar http://flex2.bsi-scs.com/BarCodeDemo/index.php

E-solicite v0.1.55

Aplicações completas, e-solicite 1 Comentario »

Nova versão liberada v0.1.55

Atualizações:

  • Tela de Criar Solicitação liberada com as seguintes características implementadas
    1. Criar solicitação
    2. Transferência entre fases
    3. Transferência entre usuários
    4. Visualizar e criar históricos para a solicitação
    5. Visualizar fases da solicitação
    6. Finalizar uma Solciitação
  • Primeira versão da tela de consulta com as seguintes características
    1. Alguns filtros já implementados
    2. Paginação de acordo coma quantidade de solicitações retornadas na pesquisa
    3. Ao dar duplo clique na solicitação a tela de detalhamento da solicitaçõa será aberta
  • Algumas melhorias gerais
    1. Duplo clique na grid da Lista de Valores seleciona o registro
    2. ao pressionar ESC na lista de valores fecha a mesma

Por enquanto é só.
Para acessar o sistema clique aqui.
Usuario: flexpe
Senha: flex

Aguardo sugetões de melhoria para ser implementadas.

Assim que tivermos um release totalmente funcional passaremos a utilizar esta ferramenta para definir as tarefas da nossa comunidade Flex Pernambuco.

Abraços,

Juliano Mendes

Grupo de E-mail criado

Avisos, Flexpernambuco 3 Comentarios »

Gostaria de convidá-los a participar da Comunidade de Usuários Flex de Pernambuco.
No grupo iremos discutir tudo relacionado a esta fantástica tecnologia e RIA (Rich Internet Application).
Iremos promover encontros periódicos para disseminar ainda mais nosso conhecimento.

Conto com a participação de todos e peço que divulguem esta informação para crescermos ainda mais com nossa comunidade.

Detalhes para entrar no grupo:

Para entrar no grupo de e-mails:

Site Oficial da comunidade:

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