logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Nov 28

NoSQL, mas o que é isso?

Escrito por Erko Bridee em 1, 2.0, 2009, 4, 6, abas, action, Adobe, Adobe Flex, AMF, api, aplicaçoes, AR, arte, Banco de Dados, BI, Blazeds, blog, C#, class, comunidade, dados, Desenvolvedor, desenvolvedores, Desenvolvimento, Desenvolvimento de Software, Desktop, Excel, exemplo, Exemplos, facebook, Flex, for, ide, IE, if, image, int, Introdução, Java, Links, lista, Mate, mg, O, on, Pessoal, podcast, prova, pt, Redes Sociais, Remoting, RIA, Ria’s Geral, S+S, servidor, Software, Sun, tag, Tema, Twitter, UI, Ved, web, XP @ 11 28th, 2011 | via http://blog.erkobridee.com | Sem comentários
Erko Bridee
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Caso voc? trabalha com desenvolvimento de software, ambiente web, provavelmente tem ouvido e lido sobre esse tal de NoSQL, mas o que ?, para que serve, quando usar, voc? sabe?

Aten??o a explica??o a seguir ? a minha com rela??o ao assunto:

Antes de mais nada, o NoSQL ? um novo modelo de base de dados, diferente do modelo relacional, que, creio eu ? muito conhecido de todos os desenvolvedores de software, o NoSQL surgiu para suprir a necessidade de lidar com um volume de informa??es que podem ir muito al?m da que voc? consiga imaginar. Este ? o cen?rio de redes sociais, exemplos cl?ssicos n?s temos o Twitter, Facebook e outras redes, onde a quantidade de informa??o gerada pelos usu?rios (essas redes que possuem milh?es de usu?rios ao redor do mundo) possui um crescimento que as bases de dados relacionais n?o conseguem comportar.

O NoSQL surgiu j? pensando em crescimento da informa??o armazenada e manipulada. As solu??es de NoSQL que temos dispon?veis hoje j? vem por padr?o com todo o conjunto de suporte para poder adicionar novos servidores (nodes) e comportar um crescimento dos dados a um custo muito menor do que a das bases relacionais. Esse crescimento ? chamado de crescimento horizontal, onde basta adicionar novas m?quinas e nessas bases NoSQL adicionadas como nodes da base e tudo pronto. Enquanto nas bases relacionais o crescimento ? vertical, ou seja, ? necess?rio aumentar o poder de hardware dos servidores (e este custo ? alto), al?m do fato que a implementa??o de servidores escravos e nodes n?o s?o simples de adicionar e gerenciar, pois essas bases n?o foram projetadas para atender a esse n?vel de demanda.

Sei que n?o sou o melhor para explicar o respectivo tema, ent?o vamos ao real objetivo do tema, segue alguns materiais interessantes para estudar quanto ao tema, segue estes excelentes postcats sobre o tema que apresenta uma boa vis?o e explica??o sobre o assunto, do pessoal do Grok Podcast:

Epis?dio 45 – Repensando os bancos de dados – NoSQL – Parte 1 de 3

Epis?dio 46 – Repensando os bancos de dados – NoSQL – Parte 2 de 3

Epis?dio 47 – Repensando os bancos de dados – NoSQL – Parte 3 de 3

Links para mais informa??es do assunto:

Informa??es na Wikipedia Br

Comunidade Brasileira de NoSQL

Listagem das bases NoSQL existentes

Escalabilidade – Introdu??o ao NoSQL 1

Escalabilidade – Introdu??o ao NoSQL 2

Compara??o das bases NoSQL (em ingl?s)


Veja também:

  • [Filosofia] KISS – Keep it stupid simple
  • Adobe Flex : porque usar remoting?
  • Mas que raios é esse tal de BPEL?!
  • Configurando o seu ambiente de desenvolvimento para Flex e Java : desenvolvimento com Maven
  • Construindo aplicações Web e Desktop com BlazeDS e AMF
Mar 7

BlazeDS – do básico ao avançado – Parte 1

Escrito por DClick Team em 1, 2009, 4, 6, action, Actionscript, Adobe, AMF, apache, app, AR, arte, auto, BI, Blazeds, blog, botão, class, classe, cliente, código, código fonte, Componente, componente flex, Componentes, comunicação, configuração, control, Controls, Crossdomain, custom, dados, demo, developer, Diversos, Documentação, Download, Eclipse, err, erro, event, Evento, events, exemplo, Exemplos, falha, flash, Flex, fonte, for, framework, Frameworks, function, Galileo, git, handle, Hibernate, HTTPService, ide, IE, if, image, instalação, int, Java, library, LOB, Messaging, mg, MXML, NaN, O, on, opensource, Outros, Plugin, problema, problemas, pt, reference, referencia, Remoting, RIA, Ria’s Geral, runtime, screen, Screencast, screencasts, Segurança, Sem categoria, server, serviço, Serviços, servidor, site, spark, Spring, string, tag, TAT, Tecnologia, Twitter, UI, uint, web, Webservice, window, XML @ 03 7th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

BlazeDS é uma aplicação Java opensource mantida pela Adobe, sob licensa GNU Lesser General Public License, Version 3 (LGPL v3), que fornece um conjunto de serviços, todos sobre o protocolo HTTP(Hyper Text Transfer Protocol), para permitir uma aplicação Flex fazer chamadas a serviços remotos Java, retornando os dados tanto de forma assíncrona como em tempo real.

Por utilizar o formato de dados binário chamado AMF(Action Message Format) para a serialiazação e deserialização de dados, a comunicação entre uma aplicação Flex e o servidor Web se torna muito otimizada. Existem estudos feitos comparando as diversas tecnologias, como o Jamesward, mostrando o potencial do AMF.

Outra grande vantagem quando usamos o BlazeDS é a facilidade de ter classe Java automaticamente convertida para uma classe ActionScript e vice-versa.

O BlazeDS pode ser baixado do site da Adobe em dois formatos:

  1. Turnkey – Versão que já vem com exemplos e servidor tomcat pré configurado
  2. Binary – Versão com os binários

Você pode optar também por fazer o download do código fonte. A documentação também está disponível neste link.


Entendendo os arquivos de configuração do BlazeDS
A estrutura de arquivos do BlazeDS é bem simples, quando descompactamos o blazeds.war, presente na versão binária, podemos ver a seguinte estrutura:

Devemos nos atentar a duas pastas. A pasta lib, que contém todos os jars necessários, e a pasta flex, que contém todos os arquivos de configuração do BlazeDS. Vamos ver o que cada arquivo significa:

  1. services-config.xml: É neste arquivo que estão as principais configurações do BlazeDS como segurança, logging, serviços disponíveis (Canais), fábricas para a integração com Frameworks Java como Spring e EJB3 e as referências para os outros três arquivos de configuração.
  2. remoting-config.xml: É nesse arquivo que iremos configurar os serviços Java para serem “consumidos” pela aplicação Flex. Sempre quando configuramos este arquivo, iremos trabalhar com o componente Flex chamado RemoteObject.
  3. message-config.xml: Aqui é configurado tudo o que for relacionado com mensageria, sempre necessário quando trabalhamos com os componentes Flex Consumer e Producer. Um exemplo da utilização desta tecnologia seria fazer um bate bapo, ou até mesmo aplicações colaborativas, onde é desejável a iteração simultânea de diversos usuários.
  4. proxy-config.xml: Além da possibilidade de utilizarmos o componente RemoteObject, o Flex disponibiliza mais duas formas de integração: O HTTPService e o WebService. Porém, por questões de segurança, os serviços só podem ser chamados quando os mesmos estão no mesmo domínio que a aplicação, ou que exista uma configuração específica que permita um cliente Flex fazer a consulta (esta configuração é feita por um arquivo chamado crossdomain.xml e está sempre no servidor onde está o serviço chamado). Caso uma das duas condições acima não seja satisfeita, deveremos utilizar o BlazeDS como proxy , e é ai que configuração deste arquivo se torna necessário.



Criando o seu primeiro projeto com o BlazeDS

Para criar o projeto iremos precisar de:

  1. Eclipse Galileo JEE
  2. FlashBuilder Plugin
  3. BlazeDS 4 Binary
  4. Tomcat 6



Feito os downloads e a instalação do Eclipse e FlashBuilder, vamos iniciar o FlashBuilder para criar o projeto.
Antes de criar o projeto, vamos configurar o Tomcat:

  1. Nas preferências do Eclipse, vá em Server — Runtime Environments e clique em Add…
  2. Na pasta Apache selecione Apache Tomcat v6.0 e clique em Next
  3. Selecione a pasta onde você descompactou o Tomcat e clique em Finish

Feito a configuração do Tomcat, vamos criar o projeto:

  1. Vá em File – New – Flex Project
  2. Preencha os dados do primeiro passo como na imagem abaixo e clique em Next
  3. Neste passo vamos configurar os dados do servidor. Deixe tudo configurado como na imagem e clique em Next


    Para selecionar o “Target Runtime”, clique em New e depois escolha o Apache Tomcat 6, como na imagem abaixo.
  4. No último passo não será necessário mudar nada, clique em Finish

Agora vamos criar a classe Java que terá o serviço para retornar a string “HelloBlazeDS”

  1. Crie uma classe Java br.com.dclick.service.RemotingService
  2. Crie o serviço:
    1
    2
    3
    4
    5
    6
    7
    8
    package br.com.dclick.service;
    public class RemotingService {

    ? ? public String sayHello() {
    ? ? ? ? return “HelloBlazeDS”;
    ? ? }
    ? ?
    }

Agora vamos configurar o BlazeDS para disponibilizar o serviço que acabamos de criar.

  1. Abra o arquivo remoting-config.xml que está na pasta WebContent/WEB-INF/flex
  2. Para que seja possível chamar os métodos da classe Java, precisamos configurar um destination. Isso é necessário para cada classe Java.
    O arquivo fica assim:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    xml version=“1.0″ encoding=“UTF-8″?>
    “remoting-service” class=“flex.messaging.services.RemotingService”>
    ? ?
    ? ? ? ? “java-object”
    ? ? ? ? ? ? class=“flex.messaging.services.remoting.adapters.JavaAdapter”
    ? ? ? ? ? ? default=“true” />
    ? ?

    ? ?
    ? ? ? ? “my-amf” />
    ? ?

    ? ? “blazeServices”>
    ? ? ? ? ? ? ? ? ? ? br.com.dclick.service.RemotingService
    ? ? ? ?
    ? ?

Vamos colocar na aplicação a chamada para o servidor.

  1. A primeira coisa que precisamos fazer é configurar o RemoteObject. Fazer isso é muito simples:
    1
    2
    3
    4
    5
    ? ? ? ?
    ? ? ? ? “services” destination=“blazeServices”
    ? ? ? ? ? ? ? ? ? ? ? ? result=“services_resultHandler(event)”
    ? ? ? ? ? ? ? ? ? ? ? ? fault=“services_faultHandler(event)” />
    ? ?


    Alguns detalhes:

    * Perceba que a propriedade destination aponta para o destination que configuramos no arquivo remoting-config.xml

    * Precisamos declarar um id para poder referenciar o RemoteObject

    * Adicionamos um ResultHandler para tratar o resultdo do serviço

    * Adicionamos um FaultHandler para tratar a falha do serviço

  2. Os Handlers ficam assim:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    ? ? ? ?
    ? ? ? ? [CDATA[
    ? ? ? ? ? ? import mx.controls.Alert;
    ? ? ? ? ? ? import mx.rpc.events.FaultEvent;
    ? ? ? ? ? ? import mx.rpc.events.ResultEvent;

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

    ? ? ? ? ? ? protected function services_faultHandler(event:FaultEvent):void
    ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? Alert.show(event.fault.message);
    ? ? ? ? ? ? }

    ? ? ? ? ]]>
    ? ?


    Alguns detalhes:

    * A propriedade result do evento ResultEvent vai conter o resultado do serviço. No nosso caso o serviço retorna uma String “HelloBlazeDS”

    * A propriedade fault do evento FaultEvent contém os detalhes do erro.

  3. A última coisa é chamar o serviço. Vamos fazer isso no evento creationComplete, como segue:
    1
    2
    3
    4
    ? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void
    ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? services.sayHello();
    ? ? ? ? ? ? }
  4. A aplicação inteira fica assim:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    ? ? ? ? xml version=“1.0″ encoding=“utf-8″?>
    “http://ns.adobe.com/mxml/2009″
    ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
    ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″
    ? ? ? ? ? ?? ? creationComplete=“application1_creationCompleteHandler(event)”>
    ? ?
    ? ? ? ? [CDATA[
    ? ? ? ? ? ? import mx.controls.Alert;
    ? ? ? ? ? ? import mx.events.FlexEvent;
    ? ? ? ? ? ? import mx.rpc.events.FaultEvent;
    ? ? ? ? ? ? import mx.rpc.events.ResultEvent;

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

    ? ? ? ? ? ? protected function services_faultHandler(event:FaultEvent):void
    ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? Alert.show(event.fault.message);
    ? ? ? ? ? ? }

    ? ? ? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void
    ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? services.sayHello();
    ? ? ? ? ? ? }

    ? ? ? ? ]]>
    ? ?
    ? ?
    ? ? ? ? “services” destination=“blazeServices”
    ? ? ? ? ? ? ? ? ? ? ? ? result=“services_resultHandler(event)”
    ? ? ? ? ? ? ? ? ? ? ? ? fault=“services_faultHandler(event)” />
    ? ?

Agora só falta fazer o deploy da aplicação e subir o servidor.

  1. Vá em Window – Show View – Other. Na janela que abrir, digite Servers e clique OK
  2. Na view Servers, clique com o botão direito em Tomcat v6.0 e selecione Add and Remove…
  3. Selecione a aplicação HelloBlazeDS e clique em Add e depois Finish
  4. Na view Servers, clique com o botão direito em Tomcat v6.0 e clique em Run

Agora é só executar a aplicação e ver o resultado:

Isso é tudo, guarde esse projeto configurado para ser usado nos próximos posts.

Fev 27

Melhores práticas com Flex, PHP, Zend e Swiz

Escrito por Daniel Schmitz em 1, 2009, 4, 6, action, Actionscript, Adobe, AMF, amfphp, app, AR, Artigo, Artigos, auto, back, BI, botão, bug, busca, class, classe, classes, cliente, código, código fonte, Componente, Componentes, comunidade, configuração, control, Controls, Curso, Cursos, dados, Debug, demo, Desenvolvimento, dispatch, Diversos, Download, dynamic, Eclipse, email, err, erro, event, EventListener, Evento, Eventos, events, exemplo, falha, flash, flash builder, Flex, fonte, for, Formulário, Formulários, framework, function, handle, html, ide, IE, if, image, int, Java, labs, library, lista, Livro, Livros, LOB, Melhores Práticas, menu, mg, mvc, MXML, NaN, O, on, padrão, Pessoal, PHP, processo, procura, Projetos, pt, Remoting, RIA, Ria’s Geral, SDK, server, servidor, spark, string, Sun, swf, Swiz Framework, tag, Tech, Tecnologia, Tema, Teste, Twitter, UI, uint, utils, web, XML, XP, zend, Zend Framework @ 02 27th, 2011 | via http://flex.etc.br | Sem comentários
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Durante o ando de 2010 diversos leitores me escreveram solicitando alguma forma de “receita de bolo” para a criação de projetos em Flex. Estavam buscando uma maneira de criar uma aplicação de forma que fosse mais correta e mais fácil, baseada em padrões de projeto e definida através de uma estrutura que facilitasse o desenvolvimento.

No início de 2011 comecei a pensar mais no assunto, pois irei implementar estas regras nos próximos livros, chegando a uma série de “regras” das quais estarei apresentando neste artigo. Inicialmente, queria dizer que eu não sou o dono da verdade, e estou longe de criar alguma regra que se não usada irá causar o seu insucesso. Estou disposto a receber críticas que sejam construtivas, com o intuito de melhorar o sistema cada vez mais, possibilitando assim que a comunidade tenha em mãos um bom documento para consulta.

PHP ou Java?

Uma das perguntas que mais recebi ao longo de 2010, por isso estarei discutindo um pouco sobre qual linguagem de servidor usar. Inicialmente você deve saber que não é a linguagem que vai fazer você ter sucesso ou não em um sistema, e sim o quanto você conhece a mesma. Por exemplo, se você conhece muito bem PHP, porque aventurar-se em Java se dá conta do recado? O mesmo vale para o Java, mas não recebi emails de nenhum programador Java querendo mudar para php… (sic.. hehe).

O que? é fato nesta “briguinha” é que, não existe melhor ou pior. Java é mais complexo que php, exige mais atenção mas traz muitos benefícios, até financeiros (sim você ganha mais). PHP é mais fácil, você cria tudo mais rápido e com isso fica mais feliz :) Qual você vai escolher? Escolha a que te faz mais feliz.

Zend_AMF ou AMFPHP ?

Outra dúvida muito comum entre os programadores PHP. Eu costumo selecionar um ou outro dependendo do projeto em sí. Se o seu projeto vai usar alguns recursos do Zend Framework, e são muitos, utilize o Zend_AMF. Caso contrário, use AMFPHP.? Aqui chegamos a um impasse do qual julgo ser mais importante do que a briga entre Zend e AMFPHP: você ainda pensa em criar um projeto sem o Zend Framework? Você irá criar tudo que precisa “na mão” ou vai usar componentes de terceiros? Falo isso porque se um projeto em PHP é iniciado, o uso do Zend Framework irá acelerar muito o processo do mesmo. Rotinas como enviar email, acessar a sessão do php, gerenciar usuários com ACL, persistência de dados, acesso ao twitter… são todos muito bem implementados com o Zend e o Zend Framework é mantido pela mesma empresa que mantém o PHP, então não existe biblioteca mais segura em termos de continuidade do que esta.

E quais tecnologias vamos usar nas “melhores práticas” ?

Agora que discutimos as duas perguntas mais perguntadas em 2010 vamos a esta solução que julgo, pessoalmente, ser muito boa:

No cliente:

  • Adobe Flash Burrito e Flex SDK 4.5 (Basta baixar e instalar o Flash Burrito: http://labs.adobe.com/technologies/flashbuilder_burrito/).
  • SWIZ Framework (http://swizframework.org/)

No servidor:

  • PHP
  • Zend Framework (http://www.zend.com/community/downloads)
  • WAMP Server (para rodar o PHP na própria máquina – http://www.wampserver.com/en/download.php)
  • Netbeans ou Eclipse PDT – Eu estou gostando mais do Netbeans, então vou usá-lo.? (http://netbeans.org/downloads/index.html? – Versão PHP)

?

Certifique-se de ter tudo instalado, para que possamos dar prosseguimento no artigo.

Estrutura de pastas e projetos

Outra dúvida comum dos usuários, é definir a estrutura de pastas do projeto. Como instalamos o WAMP Server, ele nos fornece uma pasta onde é possível ter acesso pelo nacegador, através do endereço “localhost”. Isto é, ao acessarmos http://localhost/ o WAMP Server cuida de apontar para o diretório c:wampwww (que é o que chamamos de “document root”). Para que possamos entender a estrutura do projeto, é necessário compreender uma particularidade do Flex. Diferentemente do PHP, os arquivos que estão dentro do projeto Flex não precisam ser enviados ao servidor (os arquivos mxml, as, etc). veja que o Flex compila todos os mxml/as do projeto e gera um único arquivo swf. Este arquivo sim DEVE estar no diretório web do projeto!

Vamos então criar o projeto “melhoresPraticas” da seguinte forma:

  1. Crie a pasta c:wampwwwmelhoresPraticas Este é o diretório público do projeto, acessado através de http://localhost/melhoresPraticas?????????
  2. Crie a pasta c:wampwwwmelhoresPraticasclasses Este é o diretório onde iremos criar as nossas classes PHP
  3. Crie a pasta c:wampwwwmelhoresPraticasvos Este é o diretório onde as classes VOs serão criadas
  4. Crie a pasta c:wampwwwmelhoresPraticasZend Aqui você copia/cola o Zend framework, de forma que o arquivo melhoresPraticasZendLoader.php esteja acessível
  5. No Flash Builder, crie o projeto “melhoresPraticas”. Você pode deixar o DefaultLocation como está. Não clique em Finish, clique em Next, até chegar na configuração do “Compiled Flex application location”. Ou seja, aqui você irá informar para onde os aquivos compilados do flex irão ficar. Coloque o seguinte caminho: c:wampwwwmelhoresPraticasbin-debug. Não clique em Finish, clique em Next, e em Library Path, adicione a biblioteca swiz (o arquivo swc). Em “Output folder URL”, coloque: http://localhost/melhoresPraticas/bin-debug
  6. Com o projeto pronto, clique no botão RUN. Deve então surgir uma página em branco no endereço: http://localhost/melhoresPraticas/bin-debug/melhoresPraticas.html
  7. No Netbenas ou no eclipse, crie o projeto php apontando para c:wampwwwmelhoresPraticas

Testando a conexão

Com os projetos prontos, iremos inicialmente realizar uma simples conexão entre o Flex e o PHP. Isso é útil para que possamos começar com trabalho “pesado”. Para conectarmos o Flex no PHP, preciamos criar uma classe de conexão no Flex, que iremos chamar de ServiceBase, e um arquivo que recebe esta conexão no PHP, que chamaremos de gateway.php.

Para criar a classe ServiceBase, use o Flash Builder e acione o menu File > New > ActionScript Class e crie a classe de acordo com a imagem a seguir:

image

Classe ServiceBase:

package services
{
??? import mx.controls.Alert;
??? import mx.rpc.events.FaultEvent;
??? import mx.rpc.remoting.RemoteObject;
???
??? public dynamic class ServiceBase extends RemoteObject
??? {
??????? public function ServiceBase(classe:String)
??????? {
??????????? super(“zend”);
???????????
??????????? /*
???????????? * Como o arquivo swf está na pasta bin-debug,?
???????????? * precisamos subir um nível para chegarmos ao
???????????? * arquivo gateway.php
???????????? */
??????????? this.endpoint = “../gateway.php”;
???????????
??????????? this.source = classe;
??????????? this.addEventListener(FaultEvent.FAULT,OnFault);
??????? }
???????
??????? protected function OnFault(e:FaultEvent):void
??????? {
??????????? Alert.show(e.fault.faultString,”Erro” );
??????? }
??? }
}

Esta classe tem como principal objetivo estabelecer o endpoint, que é o gateway.php que ainda vamos criar. O atributo source define qual a classe que iremos acessar na pasta classes. Também adicionamos um listener genérico caso haja alguma falha na conexão. Veja que a classe é dinâmica (dynamic), ou seja, podemos chamar métodos da classe sem que eles estejam implementados na classe. Isso é útil pois os métodos chamados nesta classe serão os métodos remotos do PHP.

No servidor, temos que criar o arquivo gateway.php, com o seguinte código:

//Adiciona o autoloader do Zend Framework
// Assim todas as classes do framework
//? serão carregadas quando precisarem
require_once “Zend/Loader/Autoloader.php”;
Zend_Loader_Autoloader::getInstance()->setFallbackAutoloader(true);

//Instancia o servidor Zend_AMF
$server = new Zend_Amf_Server();

//Habilita o modo de desenvolvimento, retornando
// mensagens de erro. Comente esta linha quando
//?? estiver em modo de produção
$server->setProduction(false);

//Adiciona este diretorio como um diretorio de
// classes que podem ser usadas pelo Flex
$server->addDirectory(dirname(__FILE__).”/classes”);
set_include_path(dirname(__FILE__).”/vos”);

//TODO: Adicionar VOs

//Dependendo da requisição do Flex, irá
// chamar a classe correspondente, respondendo
//?? em formato AMF o que a classe responder.
echo $server->handle();

//Não fechar a tag PHP, nunca !!

?

O arquivo gateway.php é o ponto de entrada para as classes em PHP. Veja que inicialmente fazemos um include do Autoloader.php para que todas as classes do Zend Framework sejam instanciadas sem a necessidade de realizar requeires. Criamos então a instância do Zend_AMF_Server, que irá cuidar para que o flex consiga conversar com o PHP via AMF. Adicionamos o diretório classes como um diretório do AMF, onde as classes serão expostas ao flex e usamos o set_include_path para adicionar as classes que estão na pasta “vos” no path global do php, para que não precisamos fazer include das mesmas. Depois adicionaremos mais código sobre as classes VOs.

Na pasta “classes”, criamos a classe Teste, e o método sayHelloWorld. O nome do arquivo tem que ser o mesmo nome da classe, ou seja, Teste.php.

class Teste {
??? public function sayHelloWorld($name)
??? {
??????? return “Hello World $name”;
??? }
}

//Não feche a tag PHP!

?

Agora voltaremos ao Flex para que ele possa acessar a classe teste. No arquivo melhoresPraticas.mxml, adicionamos o seguinte código:

?


http://ns.adobe.com/mxml/2009″
?????????????? xmlns:s=”library://ns.adobe.com/flex/spark”
?????????????? xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″>
???
??????? ??????????? import mx.controls.Alert;
??????????? import mx.rpc.events.ResultEvent;
???????????
??????????? import org.swizframework.utils.services.ServiceHelper;
???????????
??????????? import services.ServiceBase;
??????? ]]>
???

???
???
??????? ???????????
??????????? var testeService:ServiceBase = new ServiceBase(“Teste”);
??????????? var serviceHelper:ServiceHelper = new ServiceHelper();
???????
??????? serviceHelper.executeServiceCall(
??????????? testeService.sayHelloWorld(“Daniel”),
??????????? function(e:ResultEvent):void{
??????????????? Alert.show(e.result.toString());
??????????? });
???????
??????? ]]>
???

???

?

Como estamos realizando um teste, fazemos o acesso ao PHP no evento creationComplete da aplicação. Criamos a variável testeService que é do tipo ServiceBase, repassando o parâmetro que é o nome da classe no PHP, ou seja, “Teste”. Também criamos a variável serviceHelper que pertence ao Swiz e é um facilitador de acessos ao PHP. Usamos no serviceHelper? o método executeServiceCall, que irá chamar remotamente o método sayHelloWorld repassando o parâmetro “Daniel” e quando concluído, executará a função que está no segundo parâmetro, realizando um Alert.

Ao executar esta aplicação, quando é carregada surgirá a mensagem de retorno do PHP:

?

image

Criando as classes em Service

Com o teste de conexão realizado, podemos avançar mais no código! A primeira refatoração que faremos é em relação as classes que estão na pasta service. Até agora criamos o seguinte código:

??? var testeService:ServiceBase = new ServiceBase(“Teste”);

Ao invés de criar a instância de ServiceBase repassando uma string que é o nome da classe, iremos criar a classe TesteService, da seguinte forma:

image

package services
{
??? public dynamic class TesteService extends ServiceBase
??? {
??????? public function TesteService()
??????? {
??????????? super(“Teste”);
??????? }
??? }
}

Veja que, ao criarmos a classe TesteService, podemos alterar o código da aplicação principal da seguinte forma:

var testeService:TesteService = new TesteService();

Implementando o SWIZ

Um dos melhores benefícios que o SWIZ traz é a possibilidade de separar todo o código Flex em camadas, assim como é feito no padrão MVC. Se você ainda não conhece SWIZ, é melhor conhecer, pois se está lendo este artigo está procurando criar aplicações com uma qualidade melhor e não há como chegar a esse nível sem um framework. O Swiz é o o melhor em termos de custo/benefício, porque nao é o mais fácil de aprender nem o mais complicado, e nao é o mais simples e nem o mais completo. É o meio termo em tudo.

Para usarmos o SWIZ, preciamos estabelecer algumas pastas dentro do projeto Flex, que serão nossas camadas. São elas:

  • config: contém os arquivos que chamamos de “bean”, que são os arquivos que fornecem informações para serem injetadas em outras classes
  • controllers: contém os arquivos que “ditam” a dinamica da camada de visualização
  • services: contém os arquivos que fazem o acesso ao PHP
  • events: contém eventos que podem ser disparados e mediados pelo flex
  • valueObjects: são os VOs que iremos usar na aplicação
  • views: contém os formúlários, é a camada de visão

Na pasta config, iremos criar o arquivo Bean.mxml, com o seguinte código:

??? xmlns:fx=”http://ns.adobe.com/mxml/2009″
??? xmlns:s=”library://ns.adobe.com/flex/spark”
??? xmlns:swiz=”http://swiz.swizframework.org”
??? xmlns:services=”services.*”
??? >
???
???
???

?

Neste bean, criamos a variável “testeService”, que é o tipo TesteService. Atenção quando ao uso de letras maiúsculas e minúsculas.? Sempre voltaremos no Bean.mxml para adicionar mais variáveis e com isso, injetá-las nos formulários e controllers da aplicação. Precisamos ainda configurar o Swiz no projeto principal da aplicação (melhoresPraticas.mxml):


http://ns.adobe.com/mxml/2009″
?????????????? xmlns:s=”library://ns.adobe.com/flex/spark”
?????????????? xmlns:mx=”library://ns.adobe.com/flex/mx”
?????????????? xmlns:swiz=”http://swiz.swizframework.org”
?????????????? minWidth=”955″ minHeight=”600″ xmlns:config=”config.*”>
???
???
???????
???????????
???????????????
???????????

???????????
???????????
??????????????? ??????????????????? eventPackages=”events.*”
??????????????????? viewPackages=”views.*”
??????????????????? />
???????????

???????????
???????????
???????????????
???????????

???????????
???????

???

???

?

Esta configuração, adicionada dentro do fx:Declarations, realiza uma configuração padrão no SWIZ. Basicamente adicionamos o Bean que criamos e definimos onde as classes relacionadas a eventos e formulários ficarão. Também definimos um LOG que será apresentado na aba Console do Flex se estiver rodando em modo de Debug.

Após a configuração

Podemos por exemplo criar a tela de login, e outras telas do sistema. Deixarei o código fonte da aplicação para que você possa olhar com calma.

Pegue o código fonte aqui

Conclusão

A lista a seguir é um resumo de melhores práticas que julgo importantes

  • Use módulos/sub applications somente se precisar mesmo. Não comece um projeto de 10 telas querendo usar módulos para cada tela.
  • Separe sua aplicação em camadas. Você escreve mais e cria mais artigos, mas o projeto fica mais consistente.
  • Você não precisa criar o arquivo services-config.xml para conectar sua app no servidor. Pode-se criar uma classe cujo o endpoint é um caminho RELATIVO ao gateway.
  • Use o caminho RELATIVO sempre, para faclitar o deploy da sua app. Isto é, use “../gateway.php” ao invés de “http://localhost/gateway.php”.
  • Injete o controller na view, para passar dados à ela. Se deseja enviar mensagens para a view, então use eventos
  • Não injete a view no controller.
  • Use o dispatcher do SWIZ.
  • Use o serviceHelper do SWIZ.
  • Quando criar um formulário na view, faça o databind com uma variável do controller.
  • Use eventos com moderação. Particularmente eu uso os eventos para notificar a view de alguma mudança, nunca para passar dados, que é função do controller.
  • Se você quer chamar um método da view pelo controller, use eventos.
  • Mais?
Jan 12

Criando uma aplicação com Flex 4, Java e Blazeds

Escrito por Pablo Souza em 1, 2009, 3d, 4, 6, Access, Adobe, Adobe Flex, app, AR, auto, back, bar, BI, Blazeds, blog, botão, browser, builder 4, class, código, Componente, Componentes, comunicação, configuração, control, Curso, Cursos, dados, Data Service, Data Services, DataGrid, Desenvolvimento, Design, developer, development, dispatch, Diversos, Download, DRE, dynamic, Eclipse, email, err, event, Evento, exemplo, Exemplos, Ferramenta, flash, flash builder, Flash Builder 4, Flex, Flex 4, fonte, fonts, for, Formação, Formulário, frontend, function, git, handle, html, ide, IE, if, image, instalação, int, interface, Java, kit, label, layout, library, lista, map, menu, Messaging, mg, MXML, NaN, novidade, Novidades, O, on, Oracle, pattern, pt, Remoting, RIA, Ria’s Geral, server, serviço, Serviços, servidor, site, spark, string, Sun, tag, TAT, Tech, Tema, TextInput, UI, web, window, windows, XML @ 01 12th, 2011 | via http://rectius.com.br/blog | 2 comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Hoje vou mostrar a integração de aplicações Flex 4 com back-end Java, utilizando o Blazeds para comunicação entre eles. Durante a instalação e configuração do ambiente de desenvolvimento, estamos considerando que você está trabalhando numa máquina com Windows. Caso não seja este o caso não fique preocupado, basta repetir os mesmos passos descritos para o Windows adaptando para o sistema operacional que você estiver utilizando.

1. Instalações

- Download Java Development Kit (JDK6), e após configurar a váriavel de sistema JAVA_HOME.
- Download Eclipse IDE for Java Developers.
- Download BlazeDS Turnkey, contêm uma versão configurada do servidor Tomcat e diversos exemplos.
- Download Adobe Flash Builder 4, versão Standalone.

2. Instalando o BlazeDS

Após o download do BlazeDS descompacte-o num diretório de sua preferência:
C:blazeds

* Nesse momento você já deve ter instalado o JDK e confgurado a variável JAVA_HOME.

Para verificar se tudo está funcionando vamos iniciar o servidor Tomcat.

Abra um prompt do Windows e digite:
cd C:blazedstomcatbin

Em seguida inicie o servidor Tomcat:
catalina start

Após a inicialização do servidor, você verá a janela abaixo:

O servidor de aplicação foi inicializado na porta 8400. Como eu disse anteriormente, o BlazeDS Turnkey vem com uma série de aplicações de exemplo mostrando a integração entre o Adobe Flex e o Java.

Para verificar se o servidor está rodando corretamente e ver as aplicações que citei, digite num browser de sua preferência:
http://localhost:8400/

3. Instalando o Eclipse

Após o download do Eclipse, descompacte o conteúdo do arquivo compactado para uma pasta um diretório de sua preferência:
C:eclipse

* Assim como o BlazeDS, o Eclipse também não necessita de instalação. Basta descompactá-lo para utilizar.

4. Instalando o Flash Builder 4

Para a instalação do Adobe Flash Builder 4 basta você ir avançando as opções, sempre mantendo os valores padrões. A versão Standalone é uma versão Trial que dura 60 dias. No site da Adobe você pode obter gratuitamente uma licensa de utilização caso você se enquadre nas exigências legais (estudantes, profissionais autônomos, etc).

5. Criando o projeto Java

Abra a pasta onde você descompactou o Ecplise e execute-o:
C:eclipseeclipse.exe

Em seguida vamos criar nosso projeto Java. Clique em:
File > New > Dynamic Web Project

Agora vamos criar um bean que será usado na serialização das informações que serão trocadas entre o Adobe Flex e o Java.

Clique com o botão direito do mouse no projeto e então:
New > Class

A seguir a implementa da nossa classa Java bean Usuario.java:

package br.com.rectius.model;
?
import java.io.Serializable;
?
public class Usuario implements Serializable {
?
	/**
	 *
	 */
	private static final long serialVersionUID = 1L;
?
	private String nome;
	private String email;
	private String cargo;
?
	public void setNome(String nome) {
		this.nome = nome;
	}
	public String getNome() {
		return nome;
	}
?
	public void setEmail(String email) {
		this.email = email;
	}
	public String getEmail() {
		return email;
	}
?
	public void setCargo(String cargo) {
		this.cargo = cargo;
	}
	public String getCargo() {
		return cargo;
	}
?
}

Agora vamos criar nossa camada de serviço, que será o ponto de entrada das requisições do nosso front-end Flex.

Clique novamente com o botão direito do mouse sobre o projeto e então:
New > Class

A seguir a implementação da nossa camada de serviço UsuarioService.java:

package br.com.rectius.service;
?
import java.util.ArrayList;
?
import br.com.rectius.model.Usuario;
?
public class UsuarioService {
?
	/*
	 * Como não estamos utilizando nenhuma ferramenta
	 * para persistência dos dados, vamos armazenar
	 * a informações nessa lista estática
	 */
	private static ArrayList<Usuario> listaUsuarios =
		new ArrayList<Usuario>();
?
	/*
	 * Insere um novo usuário
	 * @param usuario
	 */
	public void insereUsuario(Usuario usuario)
	{
		listaUsuarios.add(usuario);
	}
?
	/*
	 * Retorna todos os usuários
	 * @return
	 */
	public ArrayList<Usuario> listaUsuarios()
	{
		return listaUsuarios;
	}
?
}

Pronto! Nossa aplicação Java já está finalizada.

6. Configurando o BlazeDS

Para que o Adobe Flex possa se comunicar com nossa camada de serviço no Java, teremos que modificar alguns arquivos de configuração do BlazeDS.

Abra a pasta onde você descompactou o BlazeDS:
C:blazeds

Crie um nova pasta chamada:
C:blazedsBlazedsConfigBase

Localize agora o arquivo blazeds.war e descompacte-o na pasta que acabamos de criar:
Arquivo: C:blazedsblazeds.war
Pasta: C:blazedsBlazedsConfigBase

Veja o contéudo da pasta C:blazedsBlazedsConfigBase>:
C:blazedsBlazedsConfigBaseMETA-INF
C:blazedsBlazedsConfigBaseWEB-INF

* A pasta WEB-INF contém toda a informação necessária para a integração de um projeto Adobe Flex + Java + Blazeds.

Agora vamos copiar algumas pastas do BlazeDS para dentro nosso projeto Java. Localize a pasta:
C:blazedsBlazedsConfigBaseWEB-INF

Copie o arquivo e os diretórios abaixo para WebContentWEB-INF, dentro do Eclipse:
C:blazedsBlazedsConfigBaseWEB-INFweb.xml
C:blazedsBlazedsConfigBaseWEB-INFflex
C:blazedsBlazedsConfigBaseWEB-INFlib

A pasta lib contém todas as biliotecas necessárias para realizar a comunicação do Adobe Flex com o Java.
A pasta flex contém os arquivos de configuração necessários para estabelecer essa comunicação.

Nesse momento a estrutura do seu projeto deve estar como na imagem abaixo:

Agora vamos configurar nossa aplicação para que o Flex consiga se comunicar com o nosso projeto Java.

Dentro do Eclipse localize e abre o arquivo:
WebContentWEB-INFweb.xml

Configure-o conforme a seguir:

<?xml version="1.0" encoding="UTF-8"?>
DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
?
    <display-name>BlazeDSdisplay-name>
    <description>BlazeDS Applicationdescription>
?
    -- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSessionlistener-class>
    listener>
?
    -- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServletservlet-name>
        <display-name>MessageBrokerServletdisplay-name>
        <servlet-class>flex.messaging.MessageBrokerServletservlet-class>
        <init-param>
            <param-name>services.configuration.fileparam-name>
            <param-value>/WEB-INF/flex/services-config.xmlparam-value>
       init-param>
        <load-on-startup>1load-on-startup>
    servlet>
?
-- begin rds
end rds -->
    <servlet>
        <servlet-name>RDSDispatchServletservlet-name>
		<display-name>RDSDispatchServletdisplay-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServletservlet-class>
		<init-param>
			<param-name>useAppserverSecurityparam-name>
			<param-value>falseparam-value>
		init-param>
        <load-on-startup>10load-on-startup>
    servlet>
?
    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServletservlet-name>
        <url-pattern>/CFIDE/main/ide.cfmurl-pattern>
    servlet-mapping>
?
    <servlet-mapping>
        <servlet-name>MessageBrokerServletservlet-name>
        <url-pattern>/messagebroker/*
    
?
    
        index.html
        index.htm
    
?
    
    
?

Ainda dentro do Eclipse localize e abra o arquivo:
WebContentWEB-INFflexremoting-config.xml

Dentro desse arquivo é que informamos quais os serviços que nosso front-end Flex poderá ter acesso. Para tal basta criar um novo destino para cada serviço.

Crie um destino para o serviço UsuarioService adicionando no arquivo remoting-config.xml o código abaixo:

    <destination id="UsuarioService">
    	<properties>
    		<source>br.com.rectius.service.UsuarioServicesource>
    	properties>
    destination>

Pronto! O projeto Java já está configurado para trabalhar com o BlazeDS.

7. Publicando nossa aplicação no Tomcat

Já terminamos o projeto Java e a configuração do BlazeDS. Agora o próximo passo é publicar o projeto no servidor de aplicações Tomcat.

Navegue até a pasta:
C:blazedstomcatwebapps

Crie uma pasta para o projeto Java:
C:blazedstomcatwebappsGerenciaUsuario

Agora dentro do Eclipse, clique sobre a pasta WEB-INF e a copie Edit > Copy.

Cole então seu conteúdo na pasta que criada no passo acima:
C:blazedstomcatwebappsGerenciaUsuario

Agora reinicie o servidor de aplicação Tomcat para subir o projeto que acabamos de fazer deploy:
catalina stop
catalina start

08. Criando o projeto Flex

Uma das novidades do novo ambiente de desenvolvimento Adobe Flex, o Flash Builder 4, é sem dúvidas os recursos de conexão a dados e serviços.
No passo 4 nós fizemos a instalação do Flash Builder 4. Agora localize seu ícone na área de trabalho ou no menu iniciar e abra o aplicativo.

Em seguida crie um novo projeto Flex. Clique em File > New > Flex Project

Agora faça suas configurações conforme a imagem abaixo:

Root folder: Representa o diretório onde fizemos o deploy do nosso projeto Java, dentro do servidor de aplicação.
Root URL: Representa a URL de acesso ao projeto no servidor de aplicação.
Context root: Representa o nome da nossa aplicação.
Output folder: Representa o local onde serão compilados os arquivos do Flex.

Clique em Validate Configuration para se certificar de que você configurou tudo corretamente e em seguida clique em Finish.

Antes de qualquer coisa vamos conferir se o Flash Builder inseriu corretamente um parâmetro de compilação no projeto Flex.

Clique com o botão direito do mouse no projeto Flex, clique em Properties e certifique-se de que o argumento de compilação -services foi inserido:

Agora vamos criar a interface. Digite o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
?
	<s:controlBarContent>
		<s:Label text="Gerenciamento de Usuários"
				 fontWeight="bold" fontSize="18"/>
	s:controlBarContent>
?
	<s:layout>
		<s:VerticalLayout
			horizontalAlign="center" verticalAlign="middle"
			paddingLeft="10" paddingRight="10" paddingBottom="20" paddingTop="20"/>
	s:layout>
?
	<s:Panel title="Cadastro de Usuários" width="500">
?
	s:Panel>
?
	<s:Panel width="500" height="100%" title="Listagem de Usuários">
		<mx:DataGrid id="dgUsuarios" left="20" right="20" bottom="20" top="20">
		mx:DataGrid>
	s:Panel>
?
s:Application>

09. Conectando a aplicação Adobe Flex ao Java

Em seguida vamos utilizar os novos recursos inseridos no Flash Builder 4 para se comunicar com o Java.

Clique em Windows > Data/Services. Após a aba correspondente se abrir clique em Connect to Data/Service….

Veja que alguns arquivos foram criados automaticamente:

Clique com o botão direito em qualquer ponto da sua Application (não clique nos componentes Panel ou qualquer outro que não seja a Application) e clique em Generate Service Call:

Em seguida selecione o método listaUsuarios():

Vá para o modo de visualização “Source” e veja que um método handler foi criado para manipular o evento CreationComplete da Application.

Agora volte para o modo “Design”, clique com o botão direito no componente DataGrid e em seguida clique em Bind to Data…

Clique no botão OK e veja o resultado:

Finalizamos o código para a listagem dos usuários. Agora precisamos fazer o código que vai inserir os usuários.

Novamente clique com o botão direito do mouse no componente DataGrid e então clique na opção Generate Details Form…

Arrume o posicionamento do formulário de cadastro, altere o label do botão. Em seguida clique com botão direito do mouse sobre o botão e Generate Service Call…

Agora altere o método button_clickHandler que foi gerado automaticamente:

protected function button_clickHandler(event:MouseEvent):void
{
	var usuario:Usuario = new Usuario();
	usuario.email = emailTextInput.text;
	usuario.nome = nomeTextInput.text;
	usuario.cargo = cargoTextInput.text;
	insereUsuarioResult.token = usuarioService.insereUsuario(usuario);
}

Com isso já conseguimos inserir usuários na coleção do back-end Java. Agora vamos modificar nosso código para que toda vez que um usuário for inserido os usuários sejam listados novamente no componente DataGrid.

Agora altere o método insereUsuarioResult_resultHandler:

protected function insereUsuarioResult_resultHandler(event:ResultEvent):void
{
	listaUsuariosResult.token = usuarioService.listaUsuarios();
}

Agora rode sua aplicação e veja o resultado final.

Pronto! A aplicação está rodando perfeitamente.
Como lição de casa, faça com que seja possível remover e alterar um usuário.

Fontes do projeto:

Download do projeto Flex (28 KB)
Download do projeto Java (3.67 MB)

Referências:
- Accessing data services overview

Espero que tenham gostado e até a próxima!

Out 18

Upload de arquivos com Adobe Flex e Zend AMF

Escrito por Leonardo França em .NET, 1, 2009, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Adobe Flex, AMF, apache, api, app, AR, arte, Artigo, back, bar, BI, Bindable, boolean, carregar, catch, class, classe, comunicação, control, Controls, custom, Download, err, erro, error, event, EventListener, events, filter, flash, Flex, for, framework, function, Google, handle, html, ide, IE, if, image, int, Java, Javascript, label, library, lite, live, map, mg, MXML, O, on, PHP, procura, progress, pt, reference, Remoting, Ria’s Geral, RoR, server, spark, string, Tema, Teste, TextInput, try, UI, utils, Ved, Widget, Widgets, Wordpress, XML, XP, zend, Zend Amf, zendAMF, zendFramework @ 10 18th, 2010 | via http://www.leonardofranca.com.br | Sem comentários
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



O Zend AMF é uma implementação feita em PHP[bb]para se trabalhar com o protocolo de comunicação binário AMF(Action Message Format) fazendo parte do ZendFramework. Precisei implementar um sistema de upload de arquivos que fosse um pouco diferente do que normalmente é usado no Adobe Flash, sendo que essa funcionalidade precisava ser integrada no Zend AMF.

Pesquisando um pouco na net, achei a solução que foi mais simples do que eu imaginava baseada nesse artigo com algumas poucas adaptações.

Começaremos pelo nosso gateway que será usado como endpoint no Adobe Flex.

PLAIN TEXT
PHP:

  1. <?php
  2. require_once ‘Zend/Amf/Server.php’;
  3. require_once ‘Zend/Amf/Exception.php’;
  4. require_once ‘br/com/leonardofranca/vo/FileVO.php’;
  5. require_once ‘br/com/leonardofranca/UploadZendAMF.php’;
  6.  
  7. $server = new Zend_Amf_Server();
  8. $server->setProduction(false);
  9.  
  10. $server->setClass(‘UploadZendAMF’);
  11.  
  12. $server->setClassMap(‘FileVO’,"br.com.leonardofranca.vo.FileVO");
  13.  
  14. echo($server->handle());
  15. ?>

Agora o nosso VO com propriedades com nome do arquivo e os binarios.

PLAIN TEXT
PHP:

  1. <?php
  2. class FileVO
  3. {
  4.     public $_explicitType = ‘br.com.leonardofranca.vo.FileVO’;
  5.     public $fileName;
  6.     public $fileData;
  7.    
  8.     function __construct ()
  9.     {}
  10.    
  11.     public function getFileName()
  12.     {
  13.         return $this->fileName;
  14.     }
  15.  
  16.     public function setFileName($fileName)
  17.     {
  18.         $this->fileName = $fileName;
  19.     }
  20.  
  21.     public function getFileData()
  22.     {
  23.         return $this->fileData;
  24.     }
  25.  
  26.     public function setFileData($fileData)
  27.     {
  28.         $this->fileData = $fileData;
  29.     }
  30. }
  31. ?>

Agora nossa classe PHP que ser responsavél por efetudar o upload.

PLAIN TEXT
PHP:

  1. <?php
  2. class UploadZendAMF  
  3. {
  4.     public function __construct()
  5.     {
  6.      
  7.     }
  8.    
  9.     public function upload(FileVO $data)
  10.     {
  11.         try
  12.         {
  13.             $fileData = $data->getFileData();
  14.             file_put_contents( ‘C:\apache\htdocs\images\’ . $data->getFileName(), $fileData);
  15.             return true;   
  16.         }
  17.         catch (Exception $e)
  18.         {
  19.             throw new Exception($e->getMessage());
  20.         }
  21.     }
  22. }
  23. ?>

Agora vamos a camada de visão usando o Adobe Flex, começamos com nosso VO.

PLAIN TEXT
ACTIONSCRIPT3:

  1. package br.com.leonardofranca.vo
  2. {
  3.     import flash.utils.ByteArray;
  4.  
  5.     [Bindable]
  6.     [RemoteClass(alias="br.com.leonardofranca.vo.FileVO")]
  7.     public class FileVO
  8.     {
  9.         private var _fileName:String;
  10.         private var _fileData:ByteArray;
  11.        
  12.         public function FileVO()
  13.         {
  14.         }
  15.  
  16.         public function get fileName():String
  17.         {
  18.             return _fileName;
  19.         }
  20.  
  21.         public function set fileName(value:String):void
  22.         {
  23.             _fileName = value;
  24.         }
  25.  
  26.         public function get fileData():ByteArray
  27.         {
  28.             return _fileData;
  29.         }
  30.  
  31.         public function set fileData(value:ByteArray):void
  32.         {
  33.             _fileData = value;
  34.         }
  35.  
  36.     }
  37. }

Agora nosso mxml que carregará os bytes do arquivo para enviar para o Zend AMF.

PLAIN TEXT
MXML:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                xmlns:s="library://ns.adobe.com/flex/spark"
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
  5.     <fx:Declarations>
  6.         <!– Place non-visual elements (e.g., services, value objects) here –>
  7.     </fx:Declarations>
  8.     <fx:Script>
  9.         <![CDATA[
  10.             import br.com.leonardofranca.vo.FileVO;
  11.            
  12.             import mx.controls.Alert;
  13.             import mx.events.FlexEvent;
  14.             import mx.rpc.events.FaultEvent;
  15.             import mx.rpc.events.ResultEvent;
  16.             import mx.rpc.remoting.mxml.RemoteObject;
  17.             import mx.utils.ObjectUtil;
  18.            
  19.             private var ro:RemoteObject;
  20.             private var fileRef:FileReference;
  21.             private var fileTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg)", "*.jpg; *.jpeg");
  22.             private var allTypes:Array = new Array(fileTypes);
  23.  
  24.            
  25.             protected function application1_creationCompleteHandler(event:FlexEvent):void
  26.             {
  27.                 ro = new RemoteObject();
  28.                 ro.destination = "nao faz diferença nenhuma usando com Zend AMF";
  29.                 ro.endpoint = "http://localhost:81/ZendAmf/teste_upload.php";
  30.                 ro.source = "br.com.leonardofranca.UploadZendAMF";
  31.                 ro.addEventListener(ResultEvent.RESULT, handlerResult);
  32.                 ro.addEventListener(FaultEvent.FAULT, handlerFault);
  33.                
  34.                 btnProcurar.addEventListener(MouseEvent.CLICK, handlerUpload);
  35.                 btnSend.addEventListener(MouseEvent.CLICK, uploadVideos);
  36.             }
  37.            
  38.             protected function handlerUpload(evt:MouseEvent=null):void
  39.             {
  40.                 fileRef = new FileReference();
  41.                 fileRef.addEventListener(Event.SELECT,selectHandler);
  42.                 //          fileRef.addEventListener(Event.COMPLETE,completeHandler);
  43.                 //          fileRef.addEventListener(ProgressEvent.PROGRESS,progressHandler);
  44.                 fileRef.browse(allTypes);
  45.             }
  46.            
  47.             protected function selectHandler(evt:Event):void
  48.             {
  49.                 txtFile.text = fileRef.name;
  50.                 fileRef.load();
  51.             }
  52.            
  53.             protected function uploadVideos(evt:MouseEvent=null):void
  54.             {
  55.                 var data:ByteArray = new ByteArray();
  56.                 fileRef.data.readBytes(data,0,fileRef.data.length);
  57.                
  58.                 var vo:FileVO = new FileVO();
  59.                 vo.fileName = fileRef.name;
  60.                 vo.fileData = data;
  61.                
  62.                 ro.upload(vo);
  63.             }
  64.            
  65.             protected function handlerResult(re:ResultEvent):void
  66.             {
  67.                 trace(ObjectUtil.toString(re.message.body));
  68.                 if(Boolean(re.message.body))
  69.                 {
  70.                     Alert.show("Arquivo enviado com sucesso!","Sucesso!");
  71.                 }
  72.                 else
  73.                 {
  74.                     Alert.show("Não foi possivel enviar o arquivo!","Error!");
  75.                 }
  76.             }
  77.            
  78.             protected function handlerFault(fault:FaultEvent):void
  79.             {
  80.                 Alert.show(fault.fault.faultString,"Error!");
  81.             }
  82.            
  83.         ]]>
  84.     </fx:Script>
  85.     <mx:Form>
  86.         <mx:FormItem label="Envio de arquivos" direction="horizontal">
  87.             <s:TextInput id="txtFile"/>
  88.             <s:Button id="btnProcurar" label="Procurar"/>
  89.             <s:Button id="btnSend" label="Enviar"/>
  90.         </mx:FormItem>
  91.     </mx:Form>
  92. </s:Application>

DOWNLOAD SOURCE




Out 4

Codinomes dos Softwares da Adobe (e antiga Macromedia)

Escrito por Leonardo França em .NET, 1, 2.0, 4, 6, Adobe, Adobe Air, Air, AIR 2.0, api, Apollo, AR, Beta, BI, blog, Catalyst, class, ColdFusion, ColdFusion 8, cs4, Desenvolvimento, DRE, Dreamweaver, err, flash, Flash 10, Flash Catalyst, flash lite, flash media, Flash Media Server, Flash Platform, Flash Player, Flash Remoting, Flex, Flex 2, Flex 3, Flex 4, Flex Builder, fonte, for, gc, Gumbo, IE, if, image, lista, lite, Mac, mg, O, on, PHP, player, pt, Remoting, RIA, Ria’s Geral, RTW, server, Software, Sun, UI, update, Ved @ 10 4th, 2010 | via http://www.leonardofranca.com.br | Sem comentários
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



Segue alguns codinomes usados pela Adobe (e da antiga Macromedia) para o desenvolvimento de seus softwares. Lista em constante atualização, quem souber de algum codinome que não esteja na lista, pode deixar um comentário para atualização :D

Product Codename
Adobe AIR 2.5 ?
Adobe AIR 2.0 Athena
Adobe AIR 1.5 Cosmo
Adobe AIR 1.0 Apollo
Adobe Media Player Philo
VoIP for Flash Pacifica
Flash Player native 64-bit support Square
Flash Player 10 Astro
Flash Player 9.0.60 Moviestar
Flash Player 8.5 Zaphod
Flash CS5 Viper
Flash 10 CS4 Diesel
Flash 9 CS3 Bolero(Dot Release) > Blaze
Flash 8 8Ball
Flash Player 8 Maelstrom
Flash MX 2004 7.2 Ellipsis
Flash MX 2004 Matador
Flash MX Professional 2004 Toreador
Flash MX Fang
Flash 5 Gromit
Flash Remoting Salsa
Flash Media Server 2.0.1 Dynamo
Flash Media Server 2.0 Edison
Flash Communication Server 1.5 Kaiwa
Flash Communication Server 1.0 TinCan
Flash Lite 3.0 Authoring Rob Roy
Flash Lite 2.0 Deuce
Generator 2 Tsunami
Captivate Northshore
Central 1.5 Mercury > Gemini
Flash Catalyst Thermo
Flex 4.5 Hero
Flex 4.0 Gumbo
Flex 3.0 Moxie
FDS 2.x/3.0 ? Borneo
Flex Builder 2 Zorn
Flex 2.0 Mistral
Flex 1.5 for .NET Wondertwin
Flex 1.0 Illiad > Odyssey > RedHouse > Royale
Flex Builder 1.0 Brady
ColdFusion 9 Centaur
ColdFusion 8 (64Bit) Gemini
ColdFusion 8 Scorpio
ColdFusion MX 7.5 (?) Mystic
ColdFusion MX 7 Updater (7.0.1) Merrimack
ColdFusion MX 7 Elvis > Blackstone
ColdFusion MX 6.1 RedSky
ColdFusion MX 6 Neo
JRun 5 Cheetah
JRun 4 Nozomi
Director MX 2004 Woody
Director MX Foster
Director 8.5 Tron
Director 8 Woo
Director 6 Hopper
Director 5 Spike
Multiuser Server Mars
Contribute 2 Samwise
Contribute 1 Dashboard
Dreamweaver 10 CS4 Stiletto
Dreamweaver 9 CS3 Hanzo
Dreamweaver 8 Coltrane
Fireworks 8 Avedon

Fonte:
http://luar.com.hk/blog/?p=472

Ago 25

Capturando uma imagem na WebCam e salvando no servidor

Escrito por Daniel Schmitz em 1, 2009, 4, 6, Adobe, AMF, amfphp, apache, app, AR, arte, Artigo, BI, botão, bug, class, classe, código, código fonte, Componente, control, Controls, DataProvider, demo, err, erro, error, event, events, Exemplos, firefox, flash, Flex, fonte, for, Formação, function, Gravação, ide, IE, if, image, imagens, int, itemRenderer, label, layout, library, lista, Messaging, mg, MXML, O, on, padrão, PHP, pt, Remoting, RIA, Ria’s Geral, RoR, server, servidor, spark, string, Teste, UI, uint, web, WebCam, XML @ 08 25th, 2010 | via http://flex.etc.br | 1 comentário
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Seguindo o artigo anterior, iremos agora utilizar o Flex em conjunto com o PHP para salvar as imagens no servidor. A conexão entre o Flex e o PHP será realizada pelo AMFPHP.

Este artigo teve uma grande ajuda do Bruno Santana, que nos mandou o código sobre a gravação do arquivo pela webcam.

Pré requisitos

  • Wamp Server instalado
  • Biblioteca AMFPHP – http://www.amfphp.org/ 

 

Passos iniciais

  • Cria a pasta c:wampwwwFlexFoto
  • Crie o projeto FlexFoto. Atenção na parte de definição do Output Folder:

image 

e

image

  • Copie a pasta amfphp do zip para c:wampwwwFlexFoto
  • O esquema de pastas fica como na figura a seguir:

image

Agora vamos configurar o services-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="amf-service"
            class="flex.messaging.services.RemotingService"
            messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amf">
                <channels>
                    <channel ref="amf-endpoint"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="amf-endpoint"
            class="mx.messaging.channels.AMFChannel">
            <endpoint uri="amfphp/gateway.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

E configuramos o services-config.xml nas propriedades do projeto Flex:

image

Agora vamos fazer um teste de conexão. Crie a seguinte classe: HelloWorld.php em www/FlexFoto/amfphp/services

<?php
class HelloWorld
{
  function Say()
  {
    return "Hello World from amfphp";
  }
}

E no Flex, adicione o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   minWidth="955" minHeight="600">

<fx:Declarations>
	<s:RemoteObject id="HelloWorld"
	                   destination="amf" source="HelloWorld">
		<s:method name="Say" result="OnSayResult(event)"/>
	</s:RemoteObject>
</fx:Declarations>

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

		protected function OnSayResult(e:ResultEvent):void
		{
			mx.controls.Alert.show(e.result.toString());
		}
	]]>
</fx:Script>

<s:Button label="Hello World">
	<s:click>
		<![CDATA[
		HelloWorld.Say();
		]]>
	</s:click>
</s:Button>

</s:Application>

Teste a aplicação. Veja inicialmente se a aplicação abre com o endereço "localhost" e não "c:….". Clique no botão e verifique se a mensagem "Hello World from AMFPHP" surgir. Se for algum erro, você precisa investigar o erro através da mensagem de erro padrão do log de erros do wamp (c:wamplogsapache_error.php). Se não achou nada, use o Firefox+Firebug+Flashbug ou então use o Charles Proxy(http://www.charlesproxy.com/)

Configurando a WebCam

Esta parte é tranquila, já que vimos isso no artigo anterior. Apague o “hello world” do teste de conexão e faça:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">

	<fx:Declarations>
		<s:RemoteObject id="Foto"
		               destination="amf" source="Foto">

		</s:RemoteObject>
	</fx:Declarations>

	<mx:VideoDisplay id="webcam"
				 	 width="160" height="120"
					 top="100"
					 left="100"
					 >
		<mx:creationComplete>
			<![CDATA[
				webcam.attachCamera(Camera.getCamera());
			]]>
		</mx:creationComplete>

	</mx:VideoDisplay>

	<s:Button label="Salvar!!" top="50" left="150">

	</s:Button>

</s:Application>

Salvando a imagem no servidor

Até aqui apenas exibimos a câmera e o botão salvar. Vamos agora dar a funcionalidade necessária para enviar a imagem da WebCam para o servidor. Crie o arquivo Foto.php na pasta services, com o seguinte conteúdo:

<?php
class Foto
{
 function __construct()
 {

 }

 function Save($fotoAsString)
 {
	//obtém um id unico para o arquivo
	$nomeArquivo = uniqid();

	//configura o nome do arquivo
	$nomeImagem = "imagem/{$nomeArquivo}.jpg";

	//abre o arquivo. A opção w vai criá-lo, caso nao exista
	$arquivo = fopen($nomeImagem, 'w');

	//escreve no arquivo
	fwrite($arquivo, base64_decode($fotoAsString));

	return "ok";

 }
}

Aqui, criamos no método Save uma rotina para salvar a imagem no disco. Isso é feito graças a transformação da foto em string e na sua volta, pelo método base64_decode.

Exibindo as imagens gravadas no Flex

Assim que a foto é gravada, a reqisição feita pelo Flex volta, com um "ok". Então podemos usar outra rotina para ler todas as imagens e apresentá-las no flex:

<s:List
	id="exibirImagens"
	top="10"
	left="150"
	right="10"
	bottom="10"
	width="530"
	height="400"
	>
	<s:layout>
		<s:TileLayout
			requestedColumnCount="5"
			requestedRowCount="8"
			horizontalGap="2"
			verticalGap="2"/>
	</s:layout>
	<s:itemRenderer>
		<fx:Component>
			<mx:Image source="{data}" />
		</fx:Component>
	</s:itemRenderer>
</s:List>

No código acima, criamos uma lista do tipo tile, cujo o itemrenderer é um componente do tipo image.

Para preencher esta lista, usamos o seguinte código:

protected function OnGetAll(event:ResultEvent):void
{
	exibirImagens.dataProvider = new ArrayList((event.result as Array));
}

Ou seja, sempre que chamamos o método GetAll, o php se encarrega de obter uma lista de imagens e retorná-la para o Flex. Com esta lista preenchemos o dataProvider da lista de imagens que possui o itemRenderer.

Para finalizar, o codigo php do método GetAll():

function GetAll()
{
	//http://snipplr.com/view/742/read-images-of-directory/
	$folder = opendir("imagem");
	$pic_types = array("jpg");
	$index = array();

	while ($file = readdir ($folder)) {
		if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
		{
			array_push($index,"amfphp/services/imagem/$file");
		}
	}
	closedir($folder);	

	return $index;
}

O código php lê o diretório e retorna uma array com o caminho completo da imagem.

O resultado final é visto na tela abaixo:

image

Código fonte

Ago 5

Entendendo o Flash Remoting

Escrito por Jose Carlos Fiel em 1, 4, 6, action, Actionscript, Adobe, Adobe Flex, AMF, amfphp, api, AR, Artigo, BI, blog, class, cliente, código, dados, Desenvolvedor, desenvolvedores, flash, Flash Player, Flash Remoting, Flex, for, framework, Frameworks, html, IE, if, image, int, Linha de Código, mg, O, on, Outros, PHP, player, problema, Projetos, pt, Remoting, RIA, Ria’s Geral, servidor, Sugestões, Sun, tag, UI, Ved, web, Web Service, web services, XML, XP, zend, Zend Amf, Zend Framework @ 08 5th, 2010 | via http://blog.josecarlosfiel.com.br | 1 comentário
Jose Carlos Fiel
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



Hoje não trago nenhuma linha de código a vocês, mas sim um assunto interessante para entender como funciona o Flash Remoting na teoria.

O que é Flash Remoting?

Quando você está usando XML para enviar dados para sua aplicação cliente, muitos dos dados que você está transferindo não é absolutamente necessário. Pense em todos os caracteres extras que estão em um documento XML. Pense em quantas vezes você tem que enviar os atributos e nós, bem como ambas as tags início e tags de fim. XML é um formato grande, mas há uma grande sobrecarga no processamento desde documento.

Action Message Format

Action Message Format (AMF) funciona através de HTTP, como o XML, mas em vez de enviar diversas informações extras, o AMF envia as informações essenciais retirando estes caracteres desnecessários, ou seja é serializado dentro de um formato binário que usa bem menos banda e espaço do que um mesmo dado enviado com XML.

Isso torna útil quando você envia muitos dados. Em vez de enviar várias tags redundantes em XML, você está enviando pequenos registros AMF serializados.

Outro benefício do AMF é, que este é um tipo de dados nativo do Flash Player. Com isso o Flash Player não tem que fazer um “parse” dos resultados para obter as informações. Eles estão disponíveis no Flash Player como objetos nativos do ActionScript logo que é recebido através do servidor.

Flash Remoting usa AMF para expor objetos e web services em um servidor de aplicação, como se fossem objetos ActionScript locais. O único problema é que para usar AMF você tem que trabalhar com objetos no PHP. O gateway AMF ajuda a traduzir esses objetos PHP em objetos ActionScript no Flash Player. Com isso, você pode criar seus próprios objetos tipados no PHP e manter uma cópia destes objetos tipados no ActionScript.

Flash Remoting e o Zend Framework

Você já deve saber que recentemente a Adobe fez uma parceria com a Zend para fornecer suporte para o Flash Remoting com AMF no Zend Framework. Existem outros projetos como este, incluindo o AMFPHP para outros frameworks PHP, mas Zend AMF tem constante suporte para Flash Remoting. O Zend Framework é um robusto framework para PHP que pode ser usado para projetos muitos complexos. Para alguns desenvolvedores PHP qual apenas quer conectar PHP com Flex pode ser um caminhão de pedra para matar uma mosca. Você não precisa usar todo o Zend Framework, ou alterar a estrutura do seu projeto para usar o Zend AMF. Zend AMF baseia-se em um pequeno, mas poderoso, pacote que pode ser facilmente integrado a qualquer projeto PHP.

–

Por hoje é isso! O artigo original vocês podem acessar aqui. Espero que tenham gostado e sinta-se a vontade de deixar sugestões ou críticas.

Ago 3

[Filosofia] KISS – Keep it stupid simple

Escrito por Erko Bridee em .NET, 1, 2009, 4, 6, action, Adobe, Adobe Flex, api, AR, arte, Balsamiq, bar, Beta, BI, blog, Censo, class, cliente, código, Curitiba, Curso, Cursos, demo, Desenvolvimento, Desenvolvimento de Software, Dica, err, exemplo, Exemplos, Ferramenta, Flex, for, ide, IE, if, image, int, internet, Java, map, mg, NaN, O, on, Opinião, Outros, Partilha, Pessoal, player, problema, problemas, procura, prova, Remoting, RIA, Ria’s Geral, site, Software, TAT, Tema, UI, usabilidade, XP, zend @ 08 3rd, 2010 | via http://blog.erkobridee.com | Sem comentários
Erko Bridee
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



Se um dia você parar para pensar irá observar que muitas questões que julgamos complicadas e complexas podem ser resolvidas com soluções estupidamentes simples, isto se aplica desde a engenharia, desenvolvimento de software, quanto acredito eu a qualquer coisa na vida, ou seja, não complique, mantenha um pensamento simples…


De tempos em tempos conversando com algumas pessoas que tenho contato, seja pela internet, ou mesmo colegas do trabalho eu sempre observo que estou fazendo um mesmo comentário:

Gostaria de ter apenas uma idéia muito idiota nessa vida para internet, pois são essas que geram retorno financeiro $$$

Então depois de pensar e repensar, me deparei com a sigla K.I.S.S. – keep it stupid simple, que no bom português quer dizer, mantenha isto estupidamente simples, ou para bom entendedor é, NÃO COMPLIQUE!


Provável que agora vocês esteja se perguntando, mas o que isto tem haver com o desenvolvimento de software?!

No meu caso, e muito provavelmente no seu também… tem tudo haver…


Explicando, pense que você irá desenvolver um software para um fim específico, alguns exemplos simples:

- Censo

- Player de MP4 para assistir seriados e se orientar quais episódios você já assistiu


É nessa hora que começam os problemas…

Pois eu, e creio que muitos dos que compartilham o mesmo problema que eu sofrem neste exato momento.

Definimos o escopo base da aplicação, paramos, olhamos e pensamos (grave problema agora): Isto está muito simples… então começamos a “viajar nas idéias” de como fazer uma ultra-mega-super aplicação que seja a aplicação e supra todas as necessidades do seu propósito.

Eis que o resultado resultante desta viagem é: Pensamento e mais pensamentos, turbilhão de idéias que poderiam gerar uma super aplicação incomparável, só tem um problema… quanto tempo se passou desde de que se definiu o tema e escopo base até agora? Já saiu algum código? Não?!  Olha o problema ai… PARE DE SONHAR E VÁ CODIFICAR!

Em primeiro lugar esta é uma luta mental pessoal onde eu grito comigo mesmo… [eu sei, eu sei, sou louco...]


Voltando a falar nas aplicações de internet, se você observar as idéias que deram certo e que foram implementadas, se você as acompanhou desde o início, já percebeu que lá no início estas eram ridiculamente limitadas e estupidamente simples.

E esta é a chave do sucesso destas aplicações.


Quer exemplos de idéias estupidamente simples que podemos até chama-las de idiotas?

- Youtube

Lá quando o Youtube foi lançado, tente fazer o esforço mental de esquecer do Youtube da magnitude dele hoje, mas a anos atrás você criaria um site para publicar videos na internet, onde o propósito era somente este… você criaria um site desses? Eu não, pois é “idiota” demais e não vejo uma utilidade prática para isto.

- Vender o jato invisível da mulher maravilha

Esta foi a mais ridículas das idéias que eu vi, porque se você pensar, com certeza você vai pensar: Não vai vender, é jogar dinheiro no lixo… porém não foi isto que aconteceu…

Veja no GizmodoBR, que muito provavelmente seja um pedaço de acrílico… isso se for de acrílico…

- Vender pixels em um site

Não achei a referência do site original, porém achei outros sites que copiaram a mesma idéia e o pior é que tem gente que comprou pixels nesses sites Oo WTF?!  [UmMilhão | Transformando Pixels em dinheiro]

- Ferramenta de desenho de rasculhos de telas

Me refiro ao Balsamiq, porém não julgo a idéia idiota, porém foi realmente simples a primeira versão e atingindo no ponto o seu propósito, ter uma ferramenta de desenho que simula e elimina nossos rascunhos manuscritos de telas de sistemas para validar com nossos clientes, sendo uma ferramenta simples de utilizar e muito funcional, este para mim é um caso 100% de KISS aplicado a desenvolvimento de software. Logicamente que hoje a ferramenta desde o seu lançamento já evoluiu muito e conta com muitos recursos novos, além que a usabilidade da ferramenta também evoluindo, e o que já era fácil, ficou mais fácil de utilizar.


Fora estes casos, temos a filosofia KISS aplicado a outros casos como por exemplo:

Reza a lenda Urbana de Curitiba-PR, sobre os ônibus biarticulados, aqueles grandões que possuem sua própria canaleta(rua, via, como queira) que diz, quando estavam implantando este sistema de transporte, tinham um sério problema para resolver que era, como fazer o ônibus parar no local preciso para abrir as portas no local que deveria abrir? Então começaram a viajar nas idéias, as mais absurdas, que incluem até sensores no chão para saber a posição do ônibus, até que certo ponto, não sei ao certo esta parte, um motorista em sua simplicidade chegou para os respectivos “doutores” e disse: – Por que não pintam uma faixa no chão indicando onde devemos parar, então quando estivermos dirigindo, só parar em cima dessa faixa e que as portas estarão nos locais corretos?

Outra história interessante é uma bem conhecida de muitos, da fábrica de Pasta de Dentes e as caixas vazias, esta pode ser lida neste link.


Então, minha conclusão [em minha humilde opinião], devemos procurar sempre manter um pensamento o mais simples possível, até mesmo para os casos que parecem complexos, pois por todos os casos e histórias conhecidas, são sempre os mais baratos e os que geram maior retorno financeiro, os que aplicaram a filosofia KISS.



Veja também:

  • Adobe Flex : Intelligere SCS – Beta 3.0
  • Como os usuários vêem as aplicações : softwares
  • Adobe Flex : porque usar remoting?
  • Mas que raios é esse tal de BPEL?!
  • Configurando o seu ambiente de desenvolvimento para Flex e Java : desenvolvimento com Maven



Jul 4

Características – Microsoft Silverlight 4 & Adobe Flex 4

Escrito por Robson Fernandes em .NET, 1, 2.0, 3d, 4, 6, action, Actionscript, ActionScript 3, Adobe, Adobe Air, Adobe Flex, Adobe Flex - 3, Adobe Flex - Core, Air, Android, Animação, app, AR, BI, Blend, builder 4, C#, Catalyst, class, ColdFusion, control, Controls, css, Data Binding, Data Service, Data Services, DataGrid, Desenvolvedor, desenvolvedores, Desenvolvimento, Design, Desktop, Dica, DRM, encode, encoder, err, Estilo, event, expression, Expression Blend, Ferramenta, flash, flash builder, Flash Builder 4, flash media, Flash Media Server, Flash Player, Flash Remoting, Flex, Flex 4, for, Google, html, ide, IE, if, image, imagens, int, interface, internet, Java, Javascript, layout, Linux, Mac, Mercado, Microsoft, Microsoft Expression, Microsoft Silverlight, MXML, NaN, O, on, Opinião, Partilha, Pessoal, photoshop, PHP, player, print, programação, pt, Remoting, RIA, Ria’s Geral, Rich Internet Application, ruby, runtime, server, silverlight, Silverlight - Core, Silverlight 3, Silverlight 4, Soap, socket, streaming, surface, swf, tag, Tecnologia, tool, UI, UX, Ved, Vídeo, Visual Studio, Visual Studio 2010, WCF, web, Web Service, web services, window, windows, XAML, XML, XP @ 07 4th, 2010 | via http://www.riasoftware.com.br/blog/ | 2 comentários
Robson Fernandes
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

INTRODUÇÃO

Boa noite Galera!

Hoje gostaria de compartilhar com vocês, uma postagem com as principais características, das mais comentadas tecnologias de desenvolvimento de aplicações RIA(Rich Internet Applications) do mercado, o Microsoft Silverlight e o Adobe Flex.
São ao todo 20 características destacadas, sendo que elas foram aplicadas nas últimas versões das plataformas destacadas.
Gostaria da opinião de vocês, meus amigos leitores e desenvolvedores, até mesmo para que possam avaliar o conteúdo, caso eu tenha descrito algo errado. Lembrando que a intenção desta postagem, não é denegrir nenhuma tecnologia, mas sim, apresentar suas características!


Abaixo, segue a tabela:

  Tecnologias   Adobe Flex 4   Microsoft Silverlight 4
 
  Runtime   - Flash Player 10.1   - Silverlight 4.0.5
  Aplicações
  Multi-Plataforma
  - Windows
  - MacOS
  - Linux
  - Solaris
  - Google Android
  - Windows
  - MacOS
  - Windows Phone 7
  - XBox 360
  - Microsoft Surface
  Animação – Timeline   - Frame-by-Frame   - Baseada em tempo
  - Frame-by-Frame
  3D   - Baseado em simulação de
    perspectiva X, Y e Z.
  - Baseado em simulação de
    perspectiva X, Y e Z.
  Aplicações baseadas em
  Desktop 2.0
  - Adobe Air   - Silverlight OOB
  Modelo de programação   - Orientado a Objetos   - Orientado a Objetos
  Linguagem de interfaces   - Baseado em XML, o MXML   - Baseado em XML, o XAML
  Linguagem base – Client   - ActionScript 3

  - C#
  - VB.NET
  - IronRuby
  - IronPython

  Linguagens utilizadas com   frequência – Server/Side   - Java
  - PHP