Há algum tempo quero escrever sobre esse assunto mas sempre espero ter tempo de fazer um screencast ou um cookbook. Vi que se eu fosse esperar por isso esse post corria o risco de sair só ano que vem. Separei então alguns artigos interessantes sobre esse assunto.

Depois de assistir a uma palestra na última developer week, fiquei impressionado com a rapidez e a simplicidade em se criar uma aplicação AIR para a plataforma Force.com.

Force.com é a primeira do mundo sob o conceito de plataforma como serviço (PaaS), permitindo que desenvolvedores criem e distribuam qualquer tipo de aplicação de negócios na nuvem, totalmente on-demand e sem nenhum software.

Ela foi lançada pela SalesForce em 2007, empresa que iniciou desenvolvendo e vendendo uma solução CRM em SaaS e agora oferece sua estrutura para outras pessoas que queiram criar suas aplicações SaaS.

Agora a Force.com disponibiliza aos desenvolvedores o Adobe Flash Builder for Force.com, uma IDE que auxilia no desenvolvimento de aplicações AIR para a Force.com. Essa aplicações podem ser executadas mesmo quando você está offline e gerenciam toda a sincronização com sua aplicação SaaS.

Para você iniciar o desenvolvimento na plataforma Force.com você precisa primeiramente criar um cadastro em developer.force.com e logo após isso baixar a IDE em developer.force.com/flashbuilder.

Esse artigo explica extamente como criar sua conta de desenvolvedor e rodar sua primeira aplicação Force.com, bem como este pdf. Se você quiser entender um pouco melhor como funciona a plataforma sugiro ler a documentação em developer.force.com.

O vídeo abaixo apresenta a IDE, e neste site você encontra um screencast da criação de uma aplicação AIR.

Além de tudo ainda existe um canal na ADC voltado para isso. Até mais!

Há algum tempo me interessei em desenvolver aplicativos para o Orkut de forma experimental utilizando o Flex. Depois de alguma pesquisa e um pouco de tempo perdido cheguei à essa biblioteca. Ela é basicamente uma interface entre actionscript e as funções do OpenSocial.

O que é OpenSocial?

O serviço OpenSocial define uma API comum para desenvolver aplicativos sociais que irão funcionar em diversos sites. Elas possibilitam que os desenvolvedores criem aplicativos utilizando JavaScript e HTML padrão para acessar amigos de uma rede social e atualizar feeds.

Ou seja, você desenvolve um aplicativo utilizando a API e pode rodá-lo em diferentes containers, como: Orkut, MySpace, LinkedIn, IGoogle, Hi5, Ning entre outros. Infelizmente o Facebook não suporta o padrão OpenSocial, mas existem outras bibliotecas que realizam essa comunicação, a mais conhecida é esta.

Bom, vamos no ater à API OpenSocial. Depois de fazer o download do SWC é hora de baixar a aplicação de exemplo, que demonstra algumas das funções básicas da API. Se você preferir pode baixar o projeto dessa aplicação já com o SWC.

Aplicação compilada, agora é hora botá-la pra funcionar. Para que você consiga rodar sua aplicação no Orkut são necessários mais alguns passos:

1. Disponibilizar publicamente seu SWF, no meu caso a nossa aplicação está em http://www.joaoaugusto.com.br/SampleApp.swf.
2. Criar um arquivo XML (conforme modelo abaixo) e disponibilizá-lo publicamente. Novamente, no meu caso http://www.joaoaugusto.com.br/SampleApp.xml

   <?xml version="1.0" encoding="UTF-8" ?>
   <Module>
   <ModulePrefs title="SampleApp">
     <Require feature="flash"/>
     <Require feature="views"/>
     <Require feature="dynamic-height"/>
     <Require feature="opensocial-0.8"/>
   </ModulePrefs>
   <Content type="html">
   <![CDATA[
     <!-- The flash element -->
     <div id="flashcontainer" style="text-align: center;"></div>
   
     <!-- Embed the swf file -->
     <script type="text/javascript">
       var flashObjId = "flashObj";
       gadgets.flash.embedFlash(
         "http://www.joaoaugusto.com.br/SampleApp.swf",
         "flashcontainer", "9", {
           name: flashObjId,
           id: flashObjId,
           quality: "high",
           wmode: "window",
           allowScriptAccess: "always"
         });
       gadgets.window.adjustHeight();
     </script>
   ]]>
   </Content>
   </Module>
   

3. Ter acesso ao sandbox.orkut.com, que você consegue em http://sandbox.orkut.com/SandboxSignup.aspx.

Depois de logado dentro de sua conta no sandbox você verá à esquerda da tela uma seção chamada “Apps” e ao lado do título da seção um botão “Editar”:

Após entra na tela de edição das aplicações, aparecerá um campo para que você preencha utilizando o endereço do XML que disponiblizamos em um dos passos acima:

Pronto, agora você já pode acessar as funções básicas da API OpenSocial através do seu Orkut.

.

Para mais informacões acesse o site oficial da OpenSocial Actionscript Client Library. Até mais!

Problema

Temos um DateField no Flex e queremos enviar a data selecionada para o PHP como um objeto Date e não somente uma simples string no fomato DD/MM/YYYY. Enviando o objeto Date, teremos o benefício de ter todas as informações de Timezone, GMT e etc para serem manipuladas futuramente via backend.

Solução

Para resolvermos nosso problema, devemos utilizar o Zend Amf para serialização/deserialização de objetos entre Flex e PHP. No Flex simplesmente usaremos a propriedade selectedDate do DateField para selecionarmos o objeto Date e após enviar ao PHP via RemoteObject. O Zend Amf terá o papel de converter este objeto para Zend Date e vice versa.

Explicação Detalhada

Obs.: O ViewSource está habilitado no exemplo abaixo para quem quiser acompanhar melhor esta explicação.

1º – Capturamos o objeto Date pela propriedade selectedDate do DateField e enviamos para o PHP.

FlexPHPDate.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

public function getTimezone():void
{
remote.getTimezone(dt.selectedDate);
}

public function getTimestamp():void
{
remote.getTimestamp(dt.selectedDate);
}

protected function remote_resultHandler(event:ResultEvent):void
{
Alert.show(event.result.toString());
}

]]>
</mx:Script>

<mx:DateField id="dt" formatString="DD/MM/YYYY" />

<mx:Button label="Get Timezone" click="getTimezone()" enabled="{ dt.selectedDate != null }" />
<mx:Button label="Get UNIX timestamp" click="getTimestamp()" enabled="{ dt.selectedDate != null }" />

<mx:RemoteObject id="remote" destination="zend" endpoint="../gateway.php"
source="DateService"
result="remote_resultHandler(event)"/>

</mx:Application>

2º – Recebemos o objeto Date no PHP já convertido para Zend_Date. Isso é feito automaticamente pelo Zend_Amf.

DateService.php (está localizando dentro da pasta /services/)

<?php

class DateService
{
public function getTimezone(Zend_Date $date)
{
return $date->getTimezone();
}

public function getTimestamp(Zend_Date $date)
{
return $date->getTimestamp();
}
}

Exemplo da Solução: Ao selecionarmos a data e selecionando Get Timezone, mandaremos para o PHP o objeto Date e após o PHP enviará para nós um timestamp desta data atravéz do Zend_Date. Acontece o mesmo para Get UNIX Timestamp.

Baixe aqui o projeto Flex incluindo o PHP: FlexPHPDate.zip

Observações Finais

Esta prática é interessante para manipularmos o mesmo objeto Date de uma linguagem para outra, com várias informações de Timezone, GMT e etc, como citados acima.

Abraços a todos e até o próximo Fiel Cookbook.

Após configurarmos o CruiseControl com o SVN aqui na Informant decidimos que era hora de buscar novas ferramentas para tornar o processo de integração contínua mais completo. Para que pudessemos monitorar a qualidade do código a cada build, assumi a tarefa de integrar o CruiseControl com o FlexPMD, famoso detector de más práticas em código fonte Flex.

Antes de tudo, você precisa baixar a última versão do FlexPMD Ant Task. Descompacte todos os arquivos exceto o jar do Ant dentro da pasta lib de sua instalação do Ant.

Depois de feito isso é hora de adicionar a tarefa do FlexPMD ao build do seu projeto:

<property name="src.dir" value="../../checkout/projeto/flex_src" />
<property name="bin.dir" value="../../projects/projeto/pmd/" />

<taskdef name="flexPmd" classname="com.adobe.ac.pmd.ant.FlexPmdAntTask"/>

<target name="flex-pmd" depends="mkdir">
	<flexPmd sourceDirectory="${src.dir}"
		outputDirectory="${bin.dir}"/>
</target>

Agora que o FlexPMD já está sendo executado junto ao build do seu projeto Flex é necessário fazer com que o log de saída do CruiseControl incorpore o log do FlexPMD. No arquivo de configurações do seu projeto adicione a tag <merge> dentro de <log>. Repare que o atributo “dir” corresponde ao mesmo caminho informado em “bin.dir” no seu build:

<log dir="logs/${project.name}">
	<merge dir="projects/projeto/pmd/"/>
</log>

Com o log sendo salvo, chegou a hora de mostrá-lo em tela. Dentro de main.jsp crie uma nova aba chamada “pmdResults”:

.
.
.
    <cruisecontrol:tabsheet>
      <tr>
        <td bgcolor="white" >
          <cruisecontrol:tab name="buildResults" label="Build Results" >
            <%@ include file="buildresults.jsp" %>
          </cruisecontrol:tab>

          <cruisecontrol:tab name="pmdResults" label="PMD Results" >
            <%@ include file="pmd.jsp" %>
          </cruisecontrol:tab>
.
.
.

Como você pode ver, essa nova aba chama o arquivo pmd.jsp que também precisa ser criado:

<%@ taglib uri="/WEB-INF/cruisecontrol-jsp11.tld" prefix="cruisecontrol"%>
<cruisecontrol:xsl xslFile="/xsl/pmd.xsl"/>

Para que nosso nova aba possa mostrar resultados mais intuitivos vamos adicionar dentro de cruisecontrol.css o seguinte código:

.pmd-evenrow { font-family:arial,helvetica,sans-serif; font-size:8pt; color:#000000; background-color:#FFFFCC; }
.pmd-oddrow { font-family:arial,helvetica,sans-serif; font-size:8pt; color:#000000; background-color:#CCCCCC; }
.pmd-fileheader { background-color:#FFFFFF; font-family:arial,helvetica,sans-serif; font-size:9pt; color:#000000; }
.pmd-sectionheader { background-color:#000066; font-family:arial,helvetica,sans-serif; font-size:9pt; color:#FFFFFF; }
.pmd-priority-1 { background-color:#FF0000; }
.pmd-priority-2 { background-color:#FF3300; }
.pmd-priority-3 { background-color:#FF9900; }
.pmd-priority-4 { background-color:#FFFF00; }
.pmd-priority-5 { background-color:#0033FF; }

Já temos quase tudo configurado, precisamos “apenas” formatar nossa saída e para isso iremos criar o arquivo pmd.xsl, que já informamos em pmd.jsp. No tutorial da ThoughtWorks de como integrar o CC como o PMD (Java) eles sugerem o seguinte:

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" />

  <xsl:template match="/">
    <xsl:apply-templates select="." mode="pmd" />
  </xsl:template>

  <xsl:template match="/" mode="pmd">

    <xsl:variable name="file.count" select="count(cruisecontrol/pmd/file)"/>
    <xsl:variable name="violation.count" select="count(cruisecontrol/pmd/file/violation)"/>
    <xsl:variable name="p1.count" select="count(cruisecontrol/pmd/file/violation[@priority='1'])"/>
    <xsl:variable name="p2.count" select="count(cruisecontrol/pmd/file/violation[@priority='2'])"/>
    <xsl:variable name="p3.count" select="count(cruisecontrol/pmd/file/violation[@priority='3'])"/>
    <xsl:variable name="p4.count" select="count(cruisecontrol/pmd/file/violation[@priority='4'])"/>
    <xsl:variable name="p5.count" select="count(cruisecontrol/pmd/file/violation[@priority='5'])"/>

    <xsl:if test="count(cruisecontrol/pmd) = 0" >
        PMD was not run against this project
    </xsl:if>
    <xsl:if test="count(cruisecontrol/pmd) &gt; 0">
      <h1 align="center">PMD Violation Report</h1>
      <table align="center" cellpadding="8" cellspacing="0" border="0" width="98%">
      <tr>
        <td class="pmd-sectionheader">
          Summary: <xsl:value-of select="$violation.count"/> violation(s) found in
          <xsl:value-of select="$file.count"/> file(s)
        </td>
      </tr>
      <tr>
        <td>
        <table align="right" cellpadding="1" cellspacing="1" border="0" width="95%">
          <tr>
            <td class="changelists-file-header" colspan="3">
              &#160;Violations by Priority&#160;
            </td>
          </tr>
          <tr>
            <td class="changelists-file-header" width="10">Priority</td>
            <td class="changelists-file-header" width="20">Violations</td>
            <td class="changelists-file-header">Percentage</td>
          </tr>
          <tr>
            <xsl:attribute name="class">pmd-evenrow</xsl:attribute>
            <td><xsl:attribute name="class">pmd-priority-1</xsl:attribute>1</td>
            <td><xsl:value-of select="$p1.count"/></td>
            <td><xsl:value-of select="format-number($p1.count div $violation.count, '##%')"/></td>
          </tr>
          <tr>
            <xsl:attribute name="class">pmd-oddrow</xsl:attribute>
            <td><xsl:attribute name="class">pmd-priority-2</xsl:attribute>2</td>
            <td><xsl:value-of select="$p2.count"/></td>
            <td><xsl:value-of select="format-number($p2.count div $violation.count, '##%')"/></td>
          </tr>
          <tr>
            <xsl:attribute name="class">pmd-evenrow</xsl:attribute>
            <td><xsl:attribute name="class">pmd-priority-3</xsl:attribute>3</td>
            <td><xsl:value-of select="$p3.count"/></td>
            <td><xsl:value-of select="format-number($p3.count div $violation.count, '##%')"/></td>
          </tr>
          <tr>
            <xsl:attribute name="class">pmd-oddrow</xsl:attribute>
            <td><xsl:attribute name="class">pmd-priority-4</xsl:attribute>4</td>
            <td><xsl:value-of select="$p4.count"/></td>
            <td><xsl:value-of select="format-number($p4.count div $violation.count, '##%')"/></td>
          </tr>
          <tr>
            <xsl:attribute name="class">pmd-evenrow</xsl:attribute>
            <td><xsl:attribute name="class">pmd-priority-5</xsl:attribute>5</td>
            <td><xsl:value-of select="$p5.count"/></td>
            <td><xsl:value-of select="format-number($p5.count div $violation.count, '##%')"/></td>
          </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td class="pmd-sectionheader">Files: (<xsl:value-of select="$file.count"/>)</td>
      </tr>
      <xsl:apply-templates select="cruisecontrol/pmd/file" mode="pmd" />
      </table>
    </xsl:if>
  </xsl:template>

  <xsl:template match="file" mode="pmd">
    <tr valign="top">
      <xsl:if test="position() mod 2=0">
        <xsl:attribute name="class">pmd-evenrow</xsl:attribute>
      </xsl:if>
      <xsl:if test="position() mod 2!=0">
        <xsl:attribute name="class">pmd-oddrow</xsl:attribute>
      </xsl:if>
      <td class="modifications-data">
        <b><xsl:value-of select="@name"/></b>
      </td>
    </tr>
    <tr valign="top">
      <xsl:if test="position() mod 2=0">
        <xsl:attribute name="class">pmd-evenrow</xsl:attribute>
      </xsl:if>
      <xsl:if test="position() mod 2!=0">
        <xsl:attribute name="class">pmd-oddrow</xsl:attribute>
      </xsl:if>
      <td class="modifications-data" colspan="5">
        <table align="right" cellpadding="1" cellspacing="1" border="0" width="95%">
          <tr>
            <td class="changelists-file-header" colspan="6">
              &#160;Violations associated with this file:&#160;
              (<xsl:value-of select="count(violation)"/>)
            </td>
          </tr>
          <tr>
            <td class="changelists-file-header">Priority</td>
            <td class="changelists-file-header">Line</td>
            <td class="changelists-file-header">Rule</td>
            <td class="changelists-file-header">Ruleset</td>
            <td class="changelists-file-header">Hint</td>
          </tr>
          <xsl:apply-templates select="violation" mode="pmd"/>
        </table>
      </td>
    </tr>
  </xsl:template>

  <xsl:template match="violation" mode="pmd">
    <tr valign="top" >
      <xsl:if test="position() mod 2=0">
        <xsl:attribute name="class">pmd-evenrow</xsl:attribute>
      </xsl:if>
      <xsl:if test="position() mod 2!=0">
        <xsl:attribute name="class">pmd-oddrow</xsl:attribute>
      </xsl:if>
      <td width="10">
        <xsl:attribute name="class">pmd-priority-<xsl:value-of select="@priority" /></xsl:attribute>
        <xsl:value-of select="@priority"/>
      </td>
      <td class="modifications-data"><xsl:value-of select="@line"/></td>
      <td class="modifications-data"><xsl:value-of select="@rule"/></td>
      <td class="modifications-data"><xsl:value-of select="@ruleset"/></td>
      <td class="modifications-data"><xsl:value-of select="."/></td>
    </tr>
  </xsl:template>

</xsl:stylesheet>

Pronto. Com tudo configurado é hora de dar o build no seu projeto e esperar para ver os resultados:

Fontes:
http://confluence.public.thoughtworks.org/display/CC/CruiseControlWithPMD
http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD

De pouco adianta uma aplicação com restrições de acesso se o transporte dos dados entre Java e Flex é inseguro. Para fazer com que os dados sejam transportados de forma segura, é necessário configurar o BlazeDS e seu servidor de aplicação/container web para realizar conexões HTTPS, e isso é, com certeza, muita mais simples do que você possa imaginar.

Considerando que sua aplicação já está rodando, vamos pôr a mão na massa.

Primeiro de tudo: services-config.xml. Dentro da tag “channels” você deve definir mais um canal, dessa vez usando as classes responsáveis por transportar dados sobre HTTPS:

<channel-definition id="my-secure-amf" class="mx.messaging.channels.SecureAMFChannel">
	<endpoint url="https://{server.name}:9100/dev/messagebroker/amfsecure" class="flex.messaging.endpoints.SecureAMFEndpoint"/>
</channel-definition>

Após isso, você deve configurar ambos remoting-config.xml e proxy-config.xml para usar como padrão o novo canal que você acabou de criar, subtituindo a propriedade “ref” de “channel”, que antes era my-amf, por my-secure-amf:

<default-channels>
	<channel ref="my-secure-amf"/>
<default-channels>

Pronto! Na parte Flex as alterações eram essas, agora é a vez de configurar o servidor alterando o arquivo server.xml, que no JBoss fica sob o diretório:

jboss/server/default/deploy/jboss-web.deployer

E no Tomcat, sob:

tomcat/conf

Você irá encontrar duas tags mais ou menos assim:

<Connector port="8080" address="${jboss.bind.address}"
maxThreads="250" maxHttpHeaderSize="8192"
emptySessionPath="true" protocol="HTTP/1.1"
enableLookups="false" redirectPort="443" acceptCount="100"
connectionTimeout="20000" disableUploadTimeout="true" />

<!--<Connector port="443" protocol="HTTP/1.1" SSLEnabled="true"
address="${jboss.bind.address}" maxThreads="150" scheme="https"
secure="true" clientAuth="false" sslProtocol="TLS" />-->

Já deu pra entender como funciona, não? Tudo bem, eu explico mesmo assim. A tag descomentada é a que você usa hoje, acessando sua aplicação através de, por exemplo, http://localhost:8080. Descomentando o connector que usa a porte 443 (e descomentando a de cima, claro) você dirá ao servidor “olá! a partir de agora você só vai conversar pela porta 443 para que ninguém entenda o que estamos falando”.

Só tem um problema, o servidor precisa de uma chave pública para criptografar os dados que serão transmitidos. Levando em consideração que você já a tenha, vamos prosseguir, caso contrário leia o artigo Creating a keystore file and keystore password for HTTPS connections, da Sun.

Com a chave em mãos vamos completar nosso connector, do arquivo server.xml, com as propriedades keystoreFile e keystorePass:

<Connector port="443" protocol="HTTP/1.1" SSLEnabled="true"
	address="${jboss.bind.address}" maxThreads="150" scheme="https"
	secure="true" clientAuth="false" sslProtocol="TLS"
	keystoreFile="C:/my-key.keystore" keystorePass="my-key-pass"/>

Feito isso, é só reiniciar o servidor, recompilar seu SWF e acessar seu endereço, substituindo http por https. Se você for utilizar a porta 443 não há necessidade de usar “:443″, caso você deseje alterar a porta para, por exemplo “:8443″ deverá deixá-la explícita na URL.

Como capturar um snapshot de um gráfico no Flex, salvar a imagem no servidor e utilizá-la para gerar um relatório em PDF.
Dica: assista em tela cheia

Acesse a aplicação
Assistir no Vimeo
Assistir no Blip.tv
Conhecer meu canal no Blip.tv
Assinar no iTunes
Use o RSS para cadastrar no Adobe Media Player
Download do projeto: Download

Mostro aqui o meu jeito de fazer a validação de fomulários.
Dica: assista em tela cheia.

Ved Cookbook Рepisodio 4 РValida̤̣o Form from Fabio Vedovelli on Vimeo.

Assistir no Vimeo
Assistir no Blip.tv
Conhecer meu canal no Blip.tv
Assinar no iTunes
Use o RSS para cadastrar no Adobe Media Player
Download dos arquivos: Download

Neste episódio será feita a configuração do ZendAMF, utilizado para conectar uma interface Flex ao PHP. O código gerado durante a gravação está disponível ao final do post.
Dica: assista em tela cheia.

Ved Cookbook – episódio 3 – ZendAMF from Fabio Vedovelli on Vimeo.
>

Assistir no Vimeo
Assistir no Blip.tv
Conhecer meu canal no Blip.tv
Assinar no iTunes
Use o RSS [...]

A série Ved Cookbook traz soluções para problemas do dia-a-dia no uso do computador, seja para desenvolvimento, seja para lazer. Neste primeiro episódio veremos como debugar uma aplicação quando o debugger do Flex Builder não puder ser utilizado. Para isso, recorreremos ao De MonsterDebugger (http://demonsterdebugger.com/)

Assistir no Blip.tv
Conhecer meu canal no Blip.tv
Assinar no iTunes
Use o RSS [...]