Tutorial: Master Detail com Transi

O Spry é uma framework para AJAX da Adobe.
Com ele é possível criar páginas dinâmicas incorporando dados de arquivos XML nos seus HTMLS sem a necessidade de refresh da mesma forma que acontece no Flex. O Spry também conta com uma API de efeitos bem grande que permite de uma maneira fácil usando JavaScript aplicar efeitos nos elementos HTML da sua página. O Spry possui outras facilidades como criar Tabs, Accordions e também possui ferramentas para validação de formulário (esse pode ser o meu próximo post).

Para visualizar a versão completa do exemplo clique aqui

Neste tutorial irei criar um simples exemplo de Master Detail usando Spry 1.4 com as informações do XML abaixo.

Antes de começar você precisa baixar a última versão do Spry clicando aqui.

O primeiro passo a seguir é incluir o Spry que é o arquivo SpryData.js (ele está na pasta includes do download feito) ele é o coração do Spry, também preciso incluir o arquivo Xpath.js pois o Spry utiliza o XPath parar procurar itens a partir da sua fonte de dados XML. XPath é uma linguagem baseada na árvore do arquivo XML e provê uma forma simples de selecionar os nós usando diversos critérios de busca. Para conhecer mais sobre XPath clique aqui.
Também iremos usar a bibliteca de efeitos do Spry que é a SpryEffects.js também na pasta includes do download.

[cfm]



[/cfm]

Após isso vamos criar o XML Data Set:

[cfm]

[/cfm]

Agora vamos criar uma lista a partir do XML e a área de detalhe.

[cfm]

[/cfm]

Explicando:

• spry:region – Indica uma região dinâmica do data set
• spry:detailregion – é a região de detalhe para o data set indicado
• spry:state – Indica qual o estado da requisição
  • loading – esta div contêm o conteúdo que deve ser mostrado quando o Spry estiver carregando os dados
  • error – esta div contêm o conteúdo que deve ser mostrado caso aconteça um erro no GET
  • ready – quando tudo estiver ok esta div entra em ação
• spry:repeat – faz um loop dos resultados do data set
• onclick – chamo a função que irá executar a transição
• {dsEstados::nome} – Esta é a representação dos campos do dataset que aparecem na tela. Note que a variável é Bindable, ou seja ela fica sempre “escutando” o data set. existem 2 formas de utilização {dataset::nome_do_campo} ou {nome_do_campo} eu prefiro usar a primeira opção pra facilitar a manutenção no código.

O próximo passo é criarmos uma função que ira fazer a transição e adicionarmos um Observer na div.

[cfm]

[/cfm]

Explicando:

• fadeInContent – função Observer que irá fazer um “fade” escondendo o conteúdo da div sempre que o detailRegion for atualizado. Obs: Observe que eu tenho um style definindo opacidade 0 (zero) para minha div. Isto serve para previnir bugs entre navegadores na hora do Fade inicial.
• Spry.Effect.AppearFade – Função que executa o efeito de Fade.
• Spry.Data.Region.addObserver – onde eu indico que a função observer “fadeInContent” está relacionada a minha div “descricao”

Agora só nos resta criar a função de fade-out:

[cfm]

[/cfm]

Explicando:

• fadeOutContentThenSetRow – Irá mostrar o conteúdo da div quando algum ítem da lista é clicado
• setCurrentRow – Defino qual a linha atual no DataSet

O código final ficará assim:

[cfm]

[/cfm]

Bom é isso aí um “SIMPLES” tutorial de como fazer um master detail no Spry usando transições.

Mais informações sobre o Spry você encontra em:

• Adobe Labs
• Agregador de RSS sobre Spry
• Charlie Arehart’s Compendium of Spry Resources
• Google