Relógio Google em Flash CS4 / Flex

Desenvolver algo como o Gadget do Google Desktop, foi o pensamento de hoje. Sendo assim, surgiu a idéia de unir o útil ao agradável, ou seja, desenvolver um componente Flash, usando a integração das duas ferramentas, o (Flex Component Kit).

Neste exemplo, veremos somente comentários sobre as partes de códigos mais interessantes, para que o Post não se torne desistimulante.

Flash CS4

Desenvolver componentes Flash para seu projeto Flex é simples, vejamos o passo a passo.

Passo 1: Baixar e instalar o Flex compoment Kit.



Convém não esquecer que o mesmo tem que estar com o CheckBox “Ativado”.

Passo 2: Criar seu MovieClip no Flash e convertê-lo em Flex Componente.



Após a instalação do Flex Componente Kit, novas opções irão aparecer no menu Commands do seu Flash.

Para que seu MovieClip seja convertido em um componente Flex, você deve selecionar o MovieClip na Library do Flash e clicar na primeira opção de conversão do menu Commands “Convert Symbol to Flex Component”, essa conversão gera um feedback no OUTPUT do Flash dizendo que seu componente foi criado com sucesso.

Passo 3: Inserir o componente em sua aplicação Flex.



Em seguida à conversão do MovieClip, o Flash criará um arquivo .SWC, depois basta adicionar este arquivo na pasta libs do seu projeto Flex.

ActionScript 3.0

Observe que existem arquivos .AS e .FLA na pasta libs do seu projeto Flex, eles são apenas os fontes, sua aplicação vai precisar apenas do arquivo .SWC, o resultado da conversão.

(min, hour, sec) são instâncias do MovieClips dos ponteiros.

Demo e View Source

O .FLA está organizado de forma que você possa desenvolver outros skins para o relógio e para novas implementações no código.

Bom, estes são os pontos mais importantes, espero ter realmente ajudado com os exemplos.

Abraços e até o próximo post.

Revisão Ortográfica - Valéria Correa

Flex Stage - showDefaultContextMenu

Esse POST faz parte de uma série de dicas que vem sendo dadas para a implementação de novas tarefas em portais e sites que usam a tecnologia Adobe Flex.

A princípio, abordaremos a implementação simples, pois sei da dificuldade de alguns desenvolvedores quando pedem ajuda em comunidades Flex.

A propriedade "showDefaultContextMenu" da classe Stage é nosso tema de hoje. Se você pretende usar componentes Flash (SWF) através de loader (carregamento), não confunda com o uso de libs, componentes Flash (SWC).

Exemplo: Loader de arquivos (SWF) no Flex.

<mx:SWFLoader source="file.swf" />

Deve-se perceber que ao acessar o ContextMenu do Flash, que este foi carregado e exibiu várias opções tais como: "Mais zoom, Menos zoom, Mostrar tudo", conforme figura abaixo.



Caso não queira mostrar essa parte aos visitantes, observe a implementação.

No código acima, usou-se callLatter para executar a função init(). Então surge a pergunta: Por que usar callLater? Simples! O callLater() é um método de filas de operações a serem realizadas para a próxima atualização de tela, sem o método callLater(), você poderia acessar uma propriedade de um componente que ainda não está disponível. Este método é mais usado com o evento creationComplete, para garantir que o componente seja realmente criado após a execução dos processos de inicialização do Flex. Caso você não use o callLater ocorrerá um erro.

Adobe livedocs - callLater().

Obrigado e até o próximo post.

Revisão Ortográfica - Valéria Correa

Flex BrowserManager - Browser History

Essa série de POSTs tem como objetivo a implementação de novas tarefas para portais e sites, que usam a tecnologia Adobe Flex. A intenção é mostrar como aplicar facilmente essas tarefas em seu projeto.

O BrowserManager é uma classe de acesso privativo (Singleton), que atua como uma ponte (proxy) entre o browser e o aplicativo. Ele fornece acesso à URL na barra de endereços do browser. Quando ocorrem as mudanças na URL do navegador, o BrowserManager é notificado sobre o evento. Dessa forma, você pode mudar a URL, bem como responder ao evento ou mesmo bloqueá-lo o evento.

É possível também, ouvir eventos do gerenciador (manager). Estes são browsersURLChange, urlChange e applicationURLChange e são descritos em eventos BrowserManager como no código a seguir:

browserManager.addEventListener(BrowserChangeEvent.APPLICATION_URL_CHANGE, parseUrl)
browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseUrl)
browserManager.addEventListener(BrowserChangeEvent.URL_CHANGE, parseUrl)

As propriedades do gerenciador (manager) são somente de leitura, mas você pode usar métodos, tais como; setTitle() e setFragment(), para definir os valores de algumas dessas propriedades.

Por meio do exemplo a seguir nota-se que instanciamos o BrowserManager, registramos o método parseURL() para escutar eventos do browserURLChange, e chamamos o método init() com um fragmento em branco como padrão "#".

Fonte: Adobe Systems Incorporated.

Para que esse exemplo funcione em sua aplicação, basta somente copiar o index.mxml.

Caso não funcione, verifique se os arquivos da sua aplicação contém as características do exemplo abaixo:

Ex: Em index.template.html a TAG "<link>" para o arquivo history/history.css

<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!-- END Browser History required section -->

Demo e View Source

Nesta ilustração dada, usei ViewStack, mas pode-se implementar da forma que melhor se adequar para sua solução.

Veja o exemplo do lividocs Adobe, lá foi usado Accordion e TabNavigator.

http://livedocs.adobe.com/flex/3/html/help.html?content=deep_linking_3.html

Um bom exemplo de BrowserManager - New York Flex User Group.

http://www.nyflex.org/

Um grande abraço e até o próximo post.

Revisão Ortográfica - Valéria Correa