Twitter!

Olá pessoal, tudo bom?

Primeiro que estou contente por esse ser meu primeiro post no blog da DClick.
Segundo que este é o meu primeiro screencast da carreira. Ainda preciso melhorar muito, mas espero que gostem.

Pensem em um back-end Java que independa de front-end. Em uma arquitetura de serviços: RestFull.
Até então, nada de novidade, já que RestFull é algo ‘antigo’ quando se usa outputs em XML ou JSON. Mas e outputs em AMF??? Isso sim é novidade, e é isso que estarei demonstrando para vocês:

E então, alguém sabe os dois grandes problemas em usar/manter isso em um projeto “pra valer”?
Não percam a continuidade aqui!

Código fonte do projeto Java/Flex:
https://github.com/mariojunior/amf-restfull

Abraços galera!

Olá fieis leitores!!

Imagem: pt.fotolia.com

Deve ter reparado que tenho andado meio ausente, deve-se ao facto de andar com bastante trabalho e da minha pequena Luana estar cada vez mais crescida e não fica quieta Mas bom, não se pode ter tudo não é verdade??! Ela é Linda!!

Bom, venho aqui escrever este artigo devido a uma dúvida que me foi colocada no fórum (http://forum.msdevstudio.com) onde me era perguntado como implementar uma encriptação 512 bits usando a conhecida libraria as3crypto. (http://code.google.com/p/as3crypto/)

Apesar de achar esta libraria bem completa, também a acho demasiado complicada.. foi por isso que quando pensei em implementar uma solução destas no passado andei ? procura de uma outra solução que não fizesse apenas a encriptação em Flex/As3, mas também que a mesma string pudesse ser desencriptada no PHP. Encontrei depois de algumas pesquisas uma implementação super interessante no blog (http://www.lostinactionscript.com) que faz precisamente isto. Ecriptação AES duas vias (Flex<->PHP) e posso afirmar que até hoje não encontrei qualquer problema usando este mesmo método, apesar de ter que usar uma biblioteca diferente no php.

No fórum, perguntavam-me como implementar encriptação 512 bits (não enumerava qual o algoritmo, no entanto sugeri o AES 256). Na minha humilde opinião, uma encriptação AES usando ? 256 bits é mais que suficiente visto que, caso não saibam, o AES é dos algoritmos mais seguros do mundo e que se bem implementado com as devidas preocupações com chaves, é teoricamente impossível de desencriptar. Este algoritmo é largamente conhecido e até usado para encriptar dados de documentos do Governo dos Estados Unidos.

Esta implementação no flex e no php é bem simples, basta fazerem o download do arquivo usado no site lostinactionscript.com (download aqui) e no nele (.zip) encontram a class/caminho: ? AES/com/lia/crypto/AES.as. Esta class será a que vamos usar no Flex, para isso criem a mesma estrutura de pastas no vosso projeto flex e copiem esta class para lá. (com/lia/crypto/Aes.as).

No php, as classes para download podem ser encontradas aqui: http://www.movable-type.co.uk/scripts/aes-php.html (Devem criar dois ficheiros .php com o conteúdo apresentado nesse artigo. AesCtr.php e Aes.php)

Depois disto, basta no flex usar:

protected function encripta() :void

var stringEncriptada:String = AES.encrypt(“Texto a encriptar”, “chave”, 256); //Usamos 256bits

E no php para desencriptar:

function desencripta()

$stringDesencriptada = AesCtr::decrypt($stringEncriptada,”chave”, 256);

Para o processo inverso (encriptar no php e desencriptar no flex), temos no PHP:

function encripta()

$stringEncriptada = AesCtr::encrypt(“Texto a encriptar”,”chave”,256);

e no Flex:

protected function desencripta():void

var stringDesencriptada:String = AES.decrypt(stringEncriptada, “chave”, 256);

E pronto, temos o nosso sistema para encriptação / desencriptação em ambos os sentidos. Torna-se muito util quando têm que passar dados mais sensí­veis via AMF (zend, amfphp. weborb) já que ao enviar os dados cifrados tornasse muito mais seguro. Fica o aviso, este algoritmo é seguro o suficiente para grande partes das necessidades, mas não esqueça de usar uma chave segura visto que a segurança depende sempre da implementação. Não é o algoritmo que têm falhas, nós que que as causamos!

Bom, espero que tenha seja util nos vossos projetos.

Abraço.

© msdevweb for TSW – That Should Work Blog, 2011. | Permalink |No comment | Add to del.icio.us

Post tags: AES 256, as3, cifrados, crypto, PHP, protecção

Encontrei o texto abaixo no blog 1up4developers em um post do Plínio Balduino, e como partilho 100% dessa ideia, tomei a liberdade de compartilhar e fazer a tradução livre para o português.

Sometimes things go wrong: hardware is not acting as expected, the API you rely on is not reliable, some vital information is missing. But you don’t care, as you are a hero, a tough Charles Bronson-like guy that will accomplish the mission no matter what.

Another project is saved? Maybe. But someone made a very stupid choice and will pay for it. And I’m talking about you, Bruce Lee.

In six months nobody will remember the adversities you’ve been through. The sleepless nights. The weird bugs. The managers on you back, asking for status reports every five minutes. But something will linger: your name in the source code. It will be there in the SCM, ready to prove that you are a lousy coder and committed buggy/ugly code.

So, next time you find yourself in this kind of situation, take a deep breath and raise the red flag. Share the problem. It’s not fair to chain yourself to something bad just to show that you are tough.

Tradução:

As vezes as coisas dão errado: o hardware não funciona como esperado, a API não é confíavel, alguma informação vital está faltando. Mas não se preocupe, por que você é um heroi, um cara durão como Charles Bronson, que vai cumprir a missão não importe qual seja.

Outro projeto foi salvo? Talvez. Mas alguém fez uma escolha estúpida e vai pagar por isso. E estou falando de você, Bruce Lee.

Em 6 meses ninguém vai lembrar das adversidades que passamos. As noites viradas Os bugs estranhos. Os gerentes na suas costas, perguntando o status a cada 5 minutos. Mas algo vai tardar mas não falhar, o seu nome no código fonte. Vai estar lá no GIT ou SVN, pronto para provar que você é um programador ruim que comitou código feio e com bug.

Então, na próxima vez que se deparar com esse tipo de situação, respire fundo e levante a bandeira vermelha. Compartilhe o problema. Não é justo com toda a cadeia que algo ruim aconteça só para provar que você é um heroi.

Infelizmente já ví isso acontecer inúmeras vezes, o pior é que em uma dúzia delas eu fui o protagonista da história.

Mas aprendi que levantar o problema é o caminho mais curto para a sua resolução.

Esse tema me fez lembrar de um trecho da palestra do DHH na Rails Conf 2009 onde ele falou sobre o segredo da alta produtividade:

Por isso baixe sua guarda, mostre seus defeitos, não banque o durão, muito menos o heroi, pois a construção de um software de qualidade evolve muitas vidas, uma grande porção de dinheiro, várias horas de trabalho e dedição que são MUITO mais importante que o seu EGO.

In the yesterday’s post I released the source code of a Dashboard application that uses custom Spark components. Today I’ll show how to change its layout through Flex 4 skinning techniques.
Analyzing the source code you are gonna realize that this application has 2 custom Spark components: PodManager and PodWindow. Today we’ll focus in the implementation of the PodManager component, which is responsible to manage the PodWindow instances, define where it can be instantiated and for the Dashboard features.

Below you can see how to instantiate the PodManager component, define its skin class and also how you can split the PodWindow instances into two content areas, firstElements e secondElements :

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
    components:firstElements>
?
    <components:secondElements>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:secondElements>
?
components:PodManager>

And the result is the same you’ve already seen in the last post:

And If you wanna change the PodWindow’s layout, displaying it horizontally? Just do this:

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:firstElements>
?
components:PodManager>

The above code shows that you don’t need to change the component skin to change its layout, fot that you can just intantiate all PodWindow in the same content area, into firstElements. But why the PodWindow instances are being displayed horizontally? Why don’t vertically? In order to understand it let’s analyse the skin class of the PodManager component:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:VGroup width="100%" height="100%">
        <s:HGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:HGroup id="secondContainer"
            width="100%" height="100%"/>
    s:VGroup>
?
s:Skin>

The PodWindow instances are being displayed horizontally because the container firstContainer is a HGroup. Let’s turning over the PodWindow’s orientation by creating a new skin class called PodManagerHorizontalSkin :

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:HGroup width="100%" height="100%">
        <s:VGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:VGroup id="secondContainer"
            width="100%" height="100%"/>
    s:HGroup>
?
s:Skin>

And that’s the result:

Let’s instantiate again PodWindow components into the content area secondElements:

<components:firstElements>
    <view:ChartProfit
        width="100%" height="100%"
        title="Profit"/>
components:firstElements>
?
<components:secondElements>
    <view:ChartExpenses
        width="100%" height="100%"
        title="Expenses" />
    <view:ChartWidget
        width="100%" height="100%"
        title="Widget"/>
components:secondElements>

And that’s the final result:

Hope you enjoy it!

Last week I have written a post “Componente para Dashboard no Flex 4″ to show a Dashboard component using Spark in Flex 4. As I’ve gotten a good feedback from readers this time I wanna share the source code with you.
I’ve developed this simple component with the intent to use in the trainings of Flex 4 here at GFT, therefore I suggest you to deeply analyse this code once it brings good concepts for those wanna learn more about how to develop custom Spark components.

Your browser does not support iframes.

Right-click to download source code.

And don’t forget to share your comments below.

Como já tinha falado antes, entrei numa nova fase de alargar um pouco mais os meus conhecimentos; Quem conhece o blog sabe que o meu principal foco sempre foi o desenvolvimento em flash / flex com php / mysql. Tudo tecnologias completamente gratuitas, mas decidi entrar no mundo do java principalmente devido a um projeto no qual estou envolvido e que tive que criar uma aplicação de playlists em java para o servidor de streaming Red5. Para aqueles que desconhecem o red5, ele é um servidor de streaming e remoting feito em java (baseado em grande parte no tomcat) com funcionalidades especificas para streamming.

Depois de muitas cabeçadas la consegui fazer o que se pedia e mais, ainda ganhei o tal bichinho do Java. Foi aqui que tudo começou!

Nesta primeira parte vou falar do que mais me deu voltas à cabeça a quando de isolar por completo o red5 e começar do zero no java com o flex. Acreditem que as configurações podem ser a maior dor de cabeça a quando de iniciar no java, principalmente no remoting.

Todos os passos que aqui vou apresentar com certeza serão alvo de criticas, desagrado, más interpretações e até maus hábitos, no entanto esta foi a forma que consegui, por isso se acharem que não está correto eu até agradeço que me informem da forma correta de o fazer. Então Aqui vamos nós deste a instalação, configuração primeira app java e primeira app flex!

#1 . Requesitos

São necessários alguns procedimentos antes de iniciarmos a integração entres estas tecnologias, pelo que o primeiro passo é fazer o download de:

• Eclipse IDE for java Developers, Pagina de download aqui.
• Java Development Kit, Versão Atual JDK6, Pagina de download aqui.
• Adobe Flhas Builder 4 Trial, Pagina de download aqui. Versão Stand Alone.
• BlazeDS Turnkey, Pagina de download aqui. (Necessita uma conta gratuita na adobe). Download da versão “BlazeDS turnkey” de 47 MB que já traz consigo o servidor tomcat, desta forma não necessitamos de o configurar à parte.
• No meu caso eu uso o Windows 7 32 bits, mas funcionará em qualquer versão do windows 32bits, no entanto se for 64bits devem fazer atenção nos downloads e escolherem a versão correta pro vosso sistema.

#2. Instalação e Configuração do JDK6

Bom, o ficheiro que vai terminar o seu download primeiro, é provavelmente o JDK, e é por esse mesmo que vamos começar. Abram o arquivo, siga os passos de instalação normais (clicando duas ou 3 vezes no Next / Seguitne). A instalação do java far-se-à automaticamente nas pastas por defeito e com as opções por defeito, aqui nada precisamos de alterar. (Deixem o caminho por defeito: C:Program FilesJavajre6) ou então mais tarde lembrem-se de usarem os caminhos corretos da vossa instalação.

No final precisamos de confirmar duas variaveis do sistema, o JAVA_HOME e o PATH que pode parecer complicado mas não o é. O JAVA_HOME aponta para a localização do Java no sistema operativo e o PATH para a localização do executàvel da maquina virtual do java.

(…)
Leia o resto de Tutorial Flex4 + BlazeDS + Java do zero #1 (1,432 palavras)

© msdevweb for TSW – That Should Work Blog, 2010. | Permalink |No comment | Add to del.icio.us

Post tags: blazeds, config, configuração, flash builder, flex4, java, tomcat, Tutorial

Bom, esta frase nunca teve tanto sentido, e vou passar a explicar o porque! Neste artigo vou explicar como criar uma aplicação em Adobe Flash Builder 4 (Flex4) e distribui-la para o Android, e inclusive corre-la no proprio dispositivo… este processo à algum tempo parecia impossivel, mas agora é muito facil… até tive uma discussão bem agradavel com o Janderson que estão a abri-se novas portas e aguardem que ele vai lançar ainda mais dicas na sua palestra do flexmania, não faltem!

Claro que foi preciso alguma investigação e uma ou outra ferramentas para reduzir o trabalho, mas no final temos a mesma aplicação a correr com applicação Desktop, Web e Mobile sem qualquer alteração de código, apenas com atenção a um ou outro elemento.

No momento é altamente recomendado que não usem isto para aplicações finais, porque as suas limitações e alterações no futuro podem ser muitas requerendo por completo a recompilação da aplicação com outro SDK, mas nada de grave… como é apenas para provar a teoria de que o flex já funciona no AIR dos dispositivos Android sem necessidade da tão esperada Framework Slider, aqui vamos.

Primeiro o que é necessário ter instalado na sua maquina.

1. Flash Builder 4 Instalado, podem fazer download aqui: http://www.adobe.com/products/flashbuilder/, podem escolher o trial, e se forem estudantes ou desempregados a licensa é gratuita, vejam aqui.

2. AIR SDK 2.0, podem fazer o download aqui: http://labs.adobe.com/downloads/air2.html

3. AIR SDK 2.5, actualmente apenas em pre-release, registem-se no programa aqui. Depois do registo e do login, podem fazer o dowload do SDK 2.5 (para o android 2.1 Eclair, o download deve ser da release datada do 04/06 2010, a ultima release apenas funciona no Android 2.2 froYo).

4. Package Assistant Pro, a aplicação que poupa algumas dores de cabeça de volta da linha de comandos com o compiler manual do SDK. Esta é a aplicação que torna tudo muito mais facil, acreditem! (Por vezes os antivirus ficam meios loucos com este ficheiro, se for o caso desliguem o antivirus antes do download e instalação.)

Depois disto instalado, (…)
Leia o resto de “Write Once, Deploy to many!” – Flex4 + Air + Android (661 palavras)

© msdevweb for TSW – That Should Work Blog, 2010. | Permalink |No comment | Add to del.icio.us

Post tags: air2.5, android, exemplo, flex4, nexus one, source, Tutorial

Em continuação a série de tutoriais sobre AS3…

Nesta parte do tutorial vamos usar todo o conhecimento passado nos exemplos anteriores para criar um explorador de efeitos e animações…

Começando…

6.9.1. Exemplo de explorador de efeitos / animações

Para o teste de todos estes efeitos, fiz uma class que extende um canvas e nos vai permitir testar todos estes efeitos. No flex criem um novo projecto chamado  testAS3Effects e criem uma pasta dentro da vossa raiz «src» com o nome «com» e dentro dessa uma outra com o nome «msdevstudio», depois criem uma nova class action script e coloquem o seguinte código dentro desse mesmo ficheiro…(…)
Leia o resto de Tutorial Action Script 3 – 018 (137 palavras)

© Mário Santos em TSW – That Should Work, 2010. |
Link Permanente |
Sem comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Air, animações, as3, classes, efeitos, Flash, Flex, Tutoriais, Tutorial, tween

Bom, não era novidade que o AIR já permitia comunicação por sockets, mas a verdadeira novidade na versão 2.0 é que agora permite escutar também uma porta da nossa maquina para comunicações… Mas em que se traduz isto na realidade?? Fácil! A partir de agora podemos criar os nossos pequenos/médios servidores socket, que com algum trabalho até podemos criar um servidor web… claro que é um exagero, mas abre um mundo novo de possibilidades….

Então, a partir de agora as nossas aplicações passam também a poder ser servidores, quer de comunicação de dados ou até mesmo armazenamento… imaginem, podemos criar uma base de dados na nossa maquina, usando SQLLite, e expor os seus dados ao exterior usando funções locais isto através de uma qualquer porta…

Isto não era qualquer novidade nos aplicativos desktop, mas trazendo esta nova funcionalidade os aplicativos AIR passam a poder ser usados para qualquer comunicação de dados permitindo mesmo que duas aplicações AIR em diferentes maquinas possam comunicar entre si sem qualquer necessidade de aplicações/bases de dados/back-ends terceiros… claro que teriam que ter conhecimento do ip de cada uma das maquinas, mas isso com um IP fixo resolve-se rapidamente.

Decidi explorar esta nova funcionalidade, e a primeira prova de fogo foi logo para um projecto de um cliente, que consistia no desenvolvimento de um servidor que recebe-se dados de vários dispositivos através de uma porta, que grava-se esses dados numa base de dados e que envia-se uma resposta a cada dispositivo, dependendo do tipo de dados… Os dispositivos podem ser apenas 2 como 50, pelo que era uma verdadeira prova de fogo para o AIR e sua atípica gestão de memória já que o sistema receberia algumas dezenas de pedidos por minuto. Depois de dar uma vista de olhos às classes socket, percebi que era muito mais fácil  do que eu imaginava, o servidor foi feito com recurso a cerca de 50 linhas de código, tudo ficou a funcionar…. restava o teste em tempo real com os tais dispositivos….

Inicialmente apenas com 2 demonstrou ser rápido e eficaz, mas e com 20/30 dispositivos a enviar dados… foi entregue o projecto ao cliente para testes, depois de 1 semana e de mais de 40.000 ligações (apenas entradas, se contar as saídas serão 80.000) os gasto0s de memória mantiveram-se entre os 20 e 50 mb não ultrapassando este valor, e o sistema não encontrou qualquer falha, erro ou situações desconhecidas… Resumindo, sem muito tempo gasto, o AIR passou a ser o substituto de um sistema existente feito em delphi, e mantêm-se a correr quase à 2 meses 24/24h sem qualquer problema….

Os meus parabéns à adobe que realmente fez um excelente trabalho!! Agora segue a dica, como criar um servidor socket? facil… o mais complicado talvez seja instalar o SDK 2 beta para desenvolvimento, mas isso vocês descobrem facilmente nas release notes…

Segue então uma explicação de como fazer o seu servidor socket em menos de 5 minutos…(…)
Leia o resto de Air 2.0 Beta, Servidor socket em 5 minutos! (200 palavras)

© Mário Santos em TSW – That Should Work, 2010. |
Link Permanente |
Um comentario |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Air, air 2.0 beta, as3, Beta, server, servidor, socket

Bem, uma das vantagens dos ciclos é a redução enorme de linhas numa aplicação, pois bem existem muitos ciclos, mas hoje vou falar de um em especifico o for e de um elemento que muita gente conheçe, o break e um detalhe chamado “break to label”;

O loop funciona de forma muito simples bem como o break, imaginem:

Este código executa o cilco 5 vezes, mas como temos um break se o j==2 ele simpelsmente só é executado 2 vezes… mas agora imaginem um ciclo dentro de outro ciclo:

Neste caso, o break apenas vai travar o segundo ciclo for enquanto que o primeiro continua a ser executado, ou seja, para cada valor de I o segundo ciclo será executado 2 vezes porque tem o break==2;

(…)
Leia o resto de Flex/AS3 – Truques e Dicas #3 – break to label; (37 palavras)

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
3 comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Action Script, as3, break, exemplos, Flash, Flex, for, loop, Tutorial