DClick

Tutorial: Master Detail com Transição no Spry


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.

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <estados>
  3.     <estado id="1">
  4.         <nome>São Paulo</nome>
  5.         <desc>
  6.             <![CDATA[
  7.                 Lorem ipsum dolor...
  8.             ]]>
  9.         </desc>
  10.     </estado>
  11.     <estado id="2">
  12.         <nome>Rio de Janeiro</nome>
  13.         <desc>
  14.             <![CDATA[
  15.                 Ut sapien magna...
  16.             ]]>
  17.         </desc>
  18.     </estado>
  19.     <estado id="3">
  20.         <nome>Paraná</nome>
  21.         <desc>
  22.             <![CDATA[
  23.                 Nam et orci. Nulla...
  24.             ]]>
  25.         </desc>
  26.     </estado>
  27. </estados>

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.

PLAIN TEXT
CFM:
  1. <script type="text/javascript" src="includes/xpath.js"></script>
  2.   <script type="text/javascript" src="includes/SpryData.js"></script>
  3.   <script type="text/javascript" src="includes/SpryEffects.js"></script>

Após isso vamos criar o XML Data Set:

PLAIN TEXT
CFM:
  1. <script type="text/javascript">
  2.      var dsEstados = new Spry.Data.XMLDataSet("data/estados.xml", "estados/estado");
  3.   </script>

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

PLAIN TEXT
CFM:
  1. <div spry:region="dsEstados">
  2.     <div spry:state="loading">Carregando...</div>
  3.     <div spry:state="error">Erro na Captura dos Dados!</div>
  4.     <div spry:state="ready">
  5.         Estados:
  6.         <ul>
  7.             <li spry:repeat="dsEstados" onclick="fadeOutContentThenSetRow('{ds_RowID}');"><a href="javascript:;">{dsEstados::nome}</a></li>
  8.         </ul>
  9.     </div>
  10. </div>
  11.  
  12. <div id="descricao" spry:detailregion="dsEstados">
  13.     <h3>{dsEstados::nome}</h3>
  14.     <span>
  15.         {dsEstados::desc}
  16.     </span>
  17. </div>

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.

PLAIN TEXT
CFM:
  1. <style type="text/css">
  2.         #descricao {
  3.             opacity: 0;
  4.             filter: alpha(opacity=0);
  5.         }
  6.     </style>
  7.    
  8.     <script type="text/javascript">
  9.         var dsEstados = new Spry.Data.XMLDataSet("data/estados.xml", "estados/estado");
  10.        
  11.         function fadeInContent(notificationType, notifier, data) {
  12.             if (notificationType != "onPostUpdate")
  13.                 return;
  14.             Spry.Effect.AppearFade('descricao', { to: 100, from: 0, duration: 500 });
  15.         }
  16.        
  17.         Spry.Data.Region.addObserver('descricao', fadeInContent);
  18.     </script>

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:

PLAIN TEXT
CFM:
  1. <style type="text/css">
  2.         #descricao {
  3.             opacity: 0;
  4.             filter: alpha(opacity=0);
  5.         }
  6.     </style>
  7.    
  8.     <script type="text/javascript">
  9.         var dsEstados = new Spry.Data.XMLDataSet("data/estados.xml", "estados/estado");
  10.        
  11.         function fadeInContent(notificationType, notifier, data) {
  12.             if (notificationType != "onPostUpdate")
  13.                 return;
  14.             Spry.Effect.AppearFade('descricao', { to: 100, from: 0, duration: 500 });
  15.         }
  16.        
  17.         Spry.Data.Region.addObserver('descricao', fadeInContent);
  18.        
  19.         function fadeOutContentThenSetRow(rowID) {
  20.             Spry.Effect.AppearFade('descricao', { to: 0, from: 100, duration: 1000, finish: function() {
  21.                 dsEstados.setCurrentRow(rowID);
  22.             }});
  23.         }
  24.     </script>

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:

PLAIN TEXT
CFM:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Spry - Básico</title>
  6.  
  7. <script type="text/javascript" src="includes/xpath.js"></script>
  8. <script type="text/javascript" src="includes/SpryData.js"></script>
  9. <script type="text/javascript" src="includes/SpryEffects.js"></script>
  10. <script type="text/javascript">
  11.     var dsEstados = new Spry.Data.XMLDataSet("data/estados.xml", "estados/estado");
  12.    
  13.     function fadeInContent(notificationType, notifier, data) {
  14.         if (notificationType != "onPostUpdate")
  15.             return;
  16.         Spry.Effect.AppearFade('descricao', { to: 100, from: 0, duration: 500 });
  17.     }
  18.    
  19.     Spry.Data.Region.addObserver('descricao', fadeInContent);
  20.    
  21.     function fadeOutContentThenSetRow(rowID) {
  22.         Spry.Effect.AppearFade('descricao', { to: 0, from: 100, duration: 500, finish: function() {
  23.             dsEstados.setCurrentRow(rowID);
  24.         }});
  25.     }
  26. </script>
  27.  
  28. <style type="text/css">
  29.     #descricao {
  30.         opacity: 0;
  31.         filter: alpha(opacity=0);
  32.     }
  33.     span {
  34.         font-size:10px;
  35.         font-family:Verdana, Arial, Helvetica, sans-serif;
  36.     }
  37. </style>
  38.  
  39. </head>
  40. <body>
  41.  
  42. <div spry:region="dsEstados">
  43.     <div spry:state="loading">Carregando...</div>
  44.     <div spry:state="error">Erro na Captura dos Dados!</div>
  45.     <div spry:state="ready">
  46.         Estados:
  47.         <ul>
  48.             <li spry:repeat="dsEstados" onclick="fadeOutContentThenSetRow('{ds_RowID}');"><a href="javascript:;">{dsEstados::nome}</a></li>
  49.         </ul>
  50.     </div>
  51. </div>
  52.  
  53. <div id="descricao" spry:detailregion="dsEstados">
  54.     <h3>{dsEstados::nome}</h3>
  55.     <span>
  56.         {dsEstados::desc}
  57.     </span>
  58. </div>
  59.  
  60. </body>
  61. </html>

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:

Por Diogo Moura em 21/December/2006 | Comentar | Trackback


No Translations

3 comentários para “Tutorial: Master Detail com Transição no Spry”


Fala Diogo, tudo bem?

Parabéns pela informação e acima de tudo pela qualidade dela. Excelente “start”.

[]’s,

Por Fernando Barros em 21/December/2006 às 18:24.


Sem palavras
Aí Diogo, será que em um futuro DW (9 ou 10 quem sabe) o Spry não poderia vir atrelado!?!
Seria uma ótima idéia, não acha?
A Adobe tem a faca e o queijo na mão para dominar uma fatia (mais) legal (ainda) da web

[]’s

Por Felipe Magalhães em 22/December/2006 às 22:25.


Para quem é um iniciante, o tutorial parece confuso, pois este passo a passo saltou passos importantes. Quando o autor informa: “Pra começar você precisa ter os seguintes scripts na sua página:”, por exemplo, a pergunta natural para o iniciante é: “Mas onde arrumo este script? Onde o Spry entra aí?”. Na verdade não se trata de um tutorial, mas de como fazer um master detail no Spry usando transições, sem fazer força e sem precisar entender como. Espero que minha crítica tenha sido construtiva, pois é este o objetivo.

Por Marco Aurélio em 6/January/2007 às 12:54.

Adicionar comentário

(requerido)
(requerido, não será publicado)