Arquivo de maio 2009

Resta dúvida ainda para que usar Flex?

28/05/09

Escrito por José Carlos Silveira Fiel em Adobe AIR

2 comentários

Olá galera, tudo bem? Espero que sim. Bom vim à este post dizer que estava passeando pelo AIR Developer Center e logo de cara vi um grande exemplo chamado SalesBuilder feito em AIR e resolvi entrar. Bom visualizei o vídeo e fiquei impressionado com a riqueza de recursos, obviamente a cara de uma típica aplicação RIA.

Mas não foi só ela que me deixou impressionado e sim que logo abaixo tinha disponível o código fonte para download. Realmente é o melhor exemplo que já vi, e ainda com a possibilidade de explorar o código fonte e aprender novos recursos. Então acredito que vale a pena compartilhar para quem ainda não viu.
Segue abaixo o link desse belo exemplo:

SalesBuilder Adobe AIR sample aplication

Depois de ver o exemplo ainda resta uma dúvida. Porque usar Flex hein? Hehehe

Abraços pessoal e até a próxima!

,

Guia de estudos Adobe Flex (Recursos Online)

25/05/09

Escrito por José Carlos Silveira Fiel em Adobe Flex

Nenhum comentário

Olá pessoal, estou aqui para mais um post e hoje compartilharei uma dica para os novos amigos que estão iniciando no Adobe Flex e tem dificuldade de encontrar materiais para estudo.

Bom claro que a primeira dica e acredito que todos sabem é efetuar uma busca no Google, antes de tudo ele poderá te salvar, mas tem um porém, que as vezes a gente quer algo que siga uma sequencia de estudos sem se perder no conteúdo novo que estamos aprendendo. Para isso resolvi fazer um guia para meus estudos e claro estou compartilhando para vocês.

Antes de trabalhar com uma nova linguagem eu gosto de entender desde a história dela até seus recursos, objetivos, vantagens e desvantagens. Para isso a Adobe tem de sobra em seu site, então tomei como base dos meus estudos Flex em cima do site oficial da Adobe.

Segue abaixo o meu Guia de Estudos:

Saiba mais sobre o produto Adobe Flex:
http://www.adobe.com/br/products/flex/?promoid=BOZRZ

Visão Geral do Flex
http://www.adobe.com/br/products/flex/overview/ 

1 – Benefícios do Flex 3
http://www.adobe.com/br/products/flex/features/flex3/ 

2 – Estrutura do Flex
http://www.adobe.com/br/products/flex/features/flex_framework/

3 – Detalhes de Atualização Flex Builder 3
http://www.adobe.com/br/products/flex/upgrade/

4 – Recursos do Flex Builder 3
http://www.adobe.com/br/products/flex/features/flex_builder/

5 – Fluxo de trabalho do designer/desenvolvedor
http://www.adobe.com/br/products/flex/workflow/

6 – Saiba mais sobre BlazeDS
http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/

Saiba mais sobre RIAs e a Plataforma da Adobe.
Vantagens, Porque usar RIAs?, Relatórios de Analistas, etc.
http://www.adobe.com/br/resources/business/rich_internet_apps/

Guia de aprendizado (Flex Learning Paths)
http://www.adobe.com/devnet/flex/learn/

Suporte do Flex
Documentação, Tutoriais, Guias de aprendizados, Artigos e etc.
http://www.adobe.com/support/flex/

Centro de desenvolvimento do Flex
Exemplos, Artigos, Guias de aprendizados, documentação e etc.
http://www.adobe.com/devnet/flex/

Bom este é o guia que criei para meus estudos Flex, destaco bastante o Guia de aprendizado (Flex Learning Paths) que contém passo a passo como você pode aprender Flex e tem desde teoria à prática, realmente recomendo.

Claro eu tomei base o conteúdo oficial da Adobe, mas você pode simplesmente procurar por blogs e muitos sites de referencia para somar aos seus estudos.

Espero que gostem do conteúdo e também aceito sugestões, sintam-se a vontade em comentar.

Abraços até mais galera.

Flash Builder? Será mesmo?!

18/05/09

Escrito por José Carlos Silveira Fiel em Adobe Flex

Nenhum comentário

Iniciando mais uma semana de maio e me deparo com a seguinte notícia na lista FlexDev, “Novo nome do Flex Builder”, será?!

Pois é não vi nada oficial vindo da Adobe, mas dizem que a notícia vem sendo comentada pelos envagelistas da Adobe e que queiram ou não o nome Flex Builder vem trazendo confusão para algumas pessoas que acham que Flex é uma nova linguagem e não lembram que é um framework aonde desenvolvemos em ActionScript 3.0 e MXML, para outros mudar o nome para Flash Builder trará a mesma repercusão pois vão pensar que estaremos desenvolvendo animações berrantes em vez de criar RIAs.
Nem vou discutir muito agora, mas até então não passa de boatos e é bom estar de olho no futuro do Flex.
Deixarei para vocês a discussão nos blogs abaixo e na própria thread da lista do FlexDev:

FlexDev
BIT-101 Blog
The Flash Blog

,

Integrando Flex + Zend Framework (Usando o Quickstart da Zend) – PARTE 3

18/05/09

Escrito por José Carlos Silveira Fiel em Adobe Flex

3 comentários

Olá pessoal, na Parte 2 tinha mostrado como criar o componente Zend AMF para comunicarmos com o Flex. Então vamos ao Flex e dar a continuidade a essa integração.

No seu Eclipse, selecione a perspectiva Flex Development e logo clique com o direito do mouse sobre o projeto PHP ZendFrameworkQuickstart. No menu selecione Flex Project Nature > Add Flex Project Nature, conforme a imagem abaixo.
Clique para ampliar

No nosso projeto não será necessário selecionar a tecnologia, pois não iremos rodar o projeto diretamente do Eclipse e sim diretamente pelo browser, como pode ver a imagem abaixo.

Clique para ampliar

Prosseguindo coloque o seu Output Folder a pasta public, aonde acessaremos diretamente nossa aplicação Flex.

Clique para ampliar

Clicando em Finish será criado a pasta “src” dentro do projeto e abrirá o arquivo ZendFrameworkQuickstart.mxml. Caso ocorra algum erro no Eclipse de “Cannot create HMTL wrapper…” que não criou a pasta “html-template”, clicamos com o botão direito em cima da linha do erro e selecionamos a opção “Recreate HTML Templates”.
Clique para ampliar!

Na Application ZendFrameworkQuickstart criamos um simples botão e em seguida criaremos um RemoteObject no próprio MXML.

ZendFrameworkQuickstart.mxml

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   
    <mx:RemoteObject id="ro" destination="zend"
       endpoint="http://localhost/guestbook/gateway/amf"
        source="HelloFlexService" />
   
    <mx:Button label="Chamar PHP" verticalCenter="0" horizontalCenter="0" />
   
</mx:Application>

Veja o código acima, criei o RemoteObject passando o Endpoint com a url “http://localhost/guestbook/gateway/amf” que nada mais é a nossa action que configuramos o componente Zend AMF para se comunicar com o Flex, também foi adicionado a propriedade “source” com o nome da classe PHP que desejamos chamar, neste caso é a “HelloFlexService”.

Feito isso, vamos colocar uma ação de click no Botão e iremos chamar o método “helloFlex” que está na classe “HelloFlexService”.

ZendFrameworkQuickstart.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
       
            public function chamarPhp():void{
                //chama o método helloFlex
                ro.helloFlex();
            }
        ]]>
    </mx:Script>
   
    <mx:RemoteObject id="ro" destination="zend"
       endpoint="http://localhost/guestbook/gateway/amf"
        source="HelloFlexService"
        result="Alert.show(event.result.toString())" />    
   
    <mx:Button label="Chamar PHP" click="chamarPhp()" verticalCenter="0"
       horizontalCenter="0" />  
       
</mx:Application>

Como pode ver criei um método chamarPhp que será chamado quando eu clicar no botão e dentro do método chamamos o RemoteObject de id “ro” e em seguida invocamos o método que está lá na classe HelloFlexService, chamado helloFlex.
Já aproveitei e adicionei um evento de result no RemoteObject, colocando um Alert para exibir o resultado vindo do método invocado. Salve a Application ZendFrameworkQuickstart e antes de acessar a url “http://localhost/guestbook/ZendFrameworkQuickstart.html” para rodar nossa aplicação Flex, vamos ao GatewayController e adicionaremos no método init() a linha de código “$this->_helper->layout()->disableLayout();”, veja abaixo como ficará o seu GatewayController:

GatewayController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
class GatewayController extends Zend_Controller_Action {
   
    public function init(){
        //linha adicionada para evitar que o layout seja exibido
        $this->_helper->layout()->disableLayout();
       
        //devemos adicionar isso para evitar a renderização da view
        $this->getHelper('viewRenderer')->setNoRender();
       
        //carrega a classe
        Zend_Loader::loadClass('Zend_Amf_Server');
    }
   
    public function amfAction(){
        $server = new Zend_Amf_Server();
        $server->addDirectory(APPLICATION_PATH . '/services/');
        echo($server->handle());
    }
   
}

Abrindo parenteses e explicando essa nova linha adicionada, ela evita que o layout HTML do nosso projeto Zend seja enviado para o arquivo AMF, atrapalhando nossa requisição entre Flex e PHP, pois ocorrerá um erro se tentar rodar sem desabilitar o layout do projeto. Poderá até fazer um teste rodando o nosso Endpoint “http://localhost/guestbook/gateway/amf” pelo browser e ver que o arquivo AMF terá dentro o layout HTML mais a string “Zend Amf Endpoint” e para que funcione corretamente a requisição AMF deve conter apenas a string “Zend Amf Endpoint”, fechando parenteses.
Agora sim rode a aplicação Flex pela URL “http://localhost/guestbook/ZendFrameworkQuickstart.html” e clique no botão Chamar PHP e verá como resultado o Alert exibindo o result do método helloFlex, que será a seguinte frase “Olá Flex, estou usando o Zend AMF!”.

Bom pessoal, o exemplo foi simples, mas pretendo fazer a parte 4 que mostrará como fazer a camada view do Quickstart em Flex. Abraços e até breve.

,

Integrando Flex + Zend Framework (Usando o Quickstart da Zend) – PARTE 2

16/05/09

Escrito por José Carlos Silveira Fiel em Adobe Flex

1 comentário

Olá pessoal, estou de volta, não tive muito tempo esses últimos dias, mas prometo nos próximos dias honrar o meu sobrenome e ser fiel aos posts rsrs. Bom brincadeiras a parte, mas vamos o que interessa, que é continuar esta série de integrar o Flex com o Zend Framework usando um projeto já construído, neste caso estou usando o Quickstart da Zend.

Recomendo que você leia a parte 1 antes de continuar lendo este post.

Bom antes de dar continuidade e ir diretamente ao código, precisamos criar um novo projeto PHP no Eclipse, chamado ZendFrameworkQuickstart e apontar a pasta aonde está nosso Quickstart que baixamos anteriormente, no meu caso é “c:\wamp\apps\ZendFrameworkQuickstart”.
projeto_quickstart

Criado o projeto, temos que configurar finalmente nosso componente Zend AMF. Para isso criamos um novo controller chamado “GatewayController” e logo em seguida seu método chamado “amfAction” veja abaixo:

GatewayController.php

1
2
3
4
5
6
7
8
<?php
class GatewayController extends Zend_Controller_Action {
   
    public function amfAction(){
       
    }
   
}

Como podemos ver, o GatewayController é um controller comum como os outros, ele extende de Zend_Controller_Action e ele será o nosso Endpoint para comunicar com o Flex. Claro, ainda não acontecerá nada porque temos que instanciar nosso componente Zend AMF e faremos isso dentro da action “amf” que acabamos de criar. Para instanciar devemos primeiramente importar a classe Zend_Amf_Server e após instanciá-la. Aproveitando criei o método init() padrão do Zend Framework para importar a classe e também tirar a renderização do layout.

GatewayController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
class GatewayController extends Zend_Controller_Action {
   
    public function init(){
        //remove a renderização do layout da página
        $this->getHelper('viewRenderer')->setNoRender();
        //carrega a classe
        Zend_Loader::loadClass('Zend_Amf_Server');
    }
   
    public function amfAction(){
        //criamos a instancia do componente Zend AMF
        $server = new Zend_Amf_Server();
    }
   
}

Agora deveremos indicar a pasta aonde ficará todas as nossas classes PHP que farão comunicação com o Flex, mas antes disso vamos criar esta pasta, eu sugiro criar dentro de application para padronizar a estrutura. Esta pasta poderá chamar-se “services”.
Criada a pasta voltamos ao GatewayController e usamos o método “addDirectory” do nosso componente Zend AMF e em seguida passamos o caminho completo da nossa pasta “services”. Veja:

GatewayController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
class GatewayController extends Zend_Controller_Action {
   
    public function init(){
        //remove a renderização do layout da página
        $this->getHelper('viewRenderer')->setNoRender();
        //carrega a classe
        Zend_Loader::loadClass('Zend_Amf_Server');
    }
   
    public function amfAction(){
        //criamos a instancia do componente Zend AMF
        $server = new Zend_Amf_Server();
       
        $server->addDirectory(APPLICATION_PATH . '/services/');
    }
   
}

Percebem-se que coloquei a constante APPLICATION_PATH para indicar o caminho completo até a pasta “application”, isso já está configurado no nosso index.php (Arquivo front-controller do Quickstart). Então o método “addDirectory” mapeia toda a pasta “services” indicando que ali estão todas as classes que terão acesso ao Flex e vice versa.

Precisamos agora fazer o Zend AMF conectar com o Flex através do método “handle”, para isso devemos imprimi-lo na tela para que aja a manipulação dos dados AMF.

GatewayController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
class GatewayController extends Zend_Controller_Action {
   
    public function init(){
        //remove a renderização do layout da página
        $this->getHelper('viewRenderer')->setNoRender();
        //carrega a classe
        Zend_Loader::loadClass('Zend_Amf_Server');
    }
   
    public function amfAction(){
        //criamos a instancia do componente Zend AMF
        $server = new Zend_Amf_Server();
       
        $server->addDirectory(APPLICATION_PATH . '/services/');
       
        echo($server->handle());
    }
   
}

Pronto, agora você pode testar em seu navegador, a url “http://localhost/guestbook/gateway/amf” e deverá obter uma solicitação de download de um arquivo “amf” do tipo AMF. Se editá-lo verá que está escrito Zend Amf Endpoint. Isso significa que está funcionando até então nossa comunicação entre Zend e Flex.

Vamos criar a nossa classe PHP que desejamos comunicar com o Flex.
Crie um novo arquivo PHP dentro da pasta “services” chamado de “HelloFlexService” e respectivamente o mesmo nome para a classe. Em seguida criamos um método chamado “helloFlex” e colocamos um simples return “Olá Flex, estou usando o Zend AMF!”.

HelloPhpService.php

1
2
3
4
5
6
7
8
<?php
class HelloFlexService {
   
    public function helloFlex(){
        return 'Olá Flex, estou usando o Zend AMF!';
    }
   
}

Feito! No próximo post estarei mostrando para vocês como chamar esta classe no Flex e exibir o seu conteúdo. Desta vez eu não demoro rsrs, aguardem…

,