Pessoal,
Finalmente ontem a ADOBE liberou a certificação oficial para o Flex 3 + AIR.
Ta ai uma otima oportunidade para todos!!!
Custa $150,00 dólares.
Aqui o site do Guia de Estudo:
http://partners.adobe.com/public/en/ace/ACE_Exam_Guide_FlexAIR.pdf
Aqui o site com os valores e local para inscrição e compra do exame:
http://partners.adobe.com/public/ace/main.html
Boa Sorte!!
Juliano
Liberada a versão v0.2 do MasterTextInput.
Agora com a funcionalidade de Máscara implementada através da propriedade InputMask.
Foi liberada também uma aplicação de exemplo, com exemplos de todas as funcionalidades.
A aplicação de exemplo e o fonte podem ser acessados clicando aqui
Site do projeto: http://code.google.com/p/mastertextinput/
Espero que gostem…
Pessoal,
Desenvolvi um componente para Flex chamado MasterTextInput. Totalmente Open Source e projeto criado no Google Code.
O MasterTextInput estende as características de um TextInput com novas funcionalidades e facilidades implementada para nos ajudar no nosso dia-a-dia.
Segue a lista das Funcionalidades já desenvolvidas nesta versão v0.1:
== AUTO TEXT CASE TYPE ==
Desc: Transformar automaticamente o texto digitado em minúscula ou maiúscula.
Propriedade: capsType()
Valores:
- normal : Sem case [DEFAULT]
- lowercase : Transforma em Minúscula
- upercase : Transforma em Maiúscula
- init : Transforma a primeira letra de cada palavra em Maiúscula o resto em minúscula.
== AUTO TAB ON <ENTER> KEY PRESS ==
Desc: Automaticamente coloca o foco no próximo componente ao pressionar a tecla <ENTER>. Realiza a mesma função da tecla <TAB>
Propriedade: nextFocusOnEnter()
Valores:
- true : Ativa função [DEFAULT]
- false : Inativa função
Eventos:
- enterPressed : Disparado ao pressionar a tecla <ENTER>. Pode ser usado para implementações customizadas.
== AUTO RESTRICT ==
Desc: Restrições de input de texto já implementadas.
Propriedade: onlyRestrict()
Valores:
- none : Não realiza restrição [DEFAULT]
- number : Aceita apenas caracteres numéricos
- alphabetic : Aceita apenas texto
- alphabeticNoSpecial : Aceita apenas texto, porém não aceita caracteres especiais como : @ - / * & …
Observação: Para restrições customizadas pode-se continuar utilizando a propriedade restrict().
== EMBEDED VALIDATORS ==
Desc: Validação embutida. Não será mais necessário criar <Validators> por fora para cada campo. Já existirá as validações automáticas apenas setando uma propriedade do MasterTextInput. As mensagens de Validação já são automaticamente traduzidas para o Português/Inglês/Espanhol sem a necessidade de nenhum tipo de implementação.
Propriedade: validator()
Valores:
- none : Sem validação automática [DEFAULT]
- email : Validação de E-mail
- phone : Validação de telefone
- number : Validação de número
- string : Validação de string
- date : Validação de data
Observações:
- Todas as propriedades específicas de cada validador também existe no MasterTextInput. Como por exemplo FormatInput para validador de data, MaxValue para Number, MaxLenght para String e assim para todas as outras propriedades padrões dos validadores.
- Existe um objeto Publico chamado “currentValidator” ele irá sempre apontar para o validador atual do seu MasterTextInput, assim você poderá via AS modificar qualquer característica do validador dinamicamente, associar ele a um Array para validação agrupada e qualquer outra função.
- As propriedades Trigger() e TriggerEvent() existem no MasterTextInput para que seja possível definir quando será disparada a validação do campo. O momento padrão é ao sair o foco do componente.
- Todas as validações estão com as características implementadas por DEFAULT do Brasil, como por exemplo, a formatação da data como DD/MM/YYYY, separador decimal como (,) separador de milhar como (.) e assim sucessivamente.
Propriedade: ValidationLanguage()
Desc: Esta propriedade terá a língua que será mostrada as mensagens de validação dos Validadores do MasterTextInput.
Valores:
- portuguese : Todas as mensagens de validação ficam em Português. [DEFAULT]
- english : Mensagens de validação em inglês.
- spanish : Mensagens de validação em espanhol.
Observações:
- Pode-se modificar a linguagem dinamicamente setando este propriedade via Action Script.
== CLEAR BUTTON ==
Desc: Mostrará um botão com um ícone em “X” no momento em que algum texto for digitado no MasterTextInput. Ao clicar o botão o campo será limpo.
Propriedade: showClearButton()
Valores:
- true : Mostra botão [DEFAULT]
- false : Não mostra botão
Implementações em andamento para versão v0.2:
== Auto Formatadores ==
- Formatar DATA
- Formatar CEP
- Formatar CNPJ
- Formata CPF
- Formatar Telefone
- Formatação customizada : ###.###.##-##
== Validadores para CPF, CNPJ e IP ==
== Undo e Redo ==
== Label Prompt ==
Peço a quem estiver interessado, realizar o download no site do projeto.
Favor realizem testes e contribuam com novas idéias para serem implementadas afim de deixar este componente bem completo.
Site do Projeto: http://code.google.com/p/mastertextinput/
Site Flexpernambuco: http://www.flexpernambuco.com.br/
Sugestões enviar para: juliano.mendes@flexpernambuco.com.br
Abraços,
Juliano Mendes
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.
O treinamento pode ser acessado aqui:
http://www.adobe.com/devnet/flex/videotraining/
Juliano
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
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
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:
A seguir vamos explicar todos os componentes distribuídos pelo FlexReport que serão utilizados na criação de um 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
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
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.
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
Comentarios Recentes