sexta-feira, 5 de fevereiro de 2010

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

Nenhum comentário:

Postar um comentário