Tabela dinâmica apartir de dados XML
2007-10-09 20:35:30
Categoria: Spry
Tabela dinâmica apartir de dados XML
Com o Spry frameworks, você pode introduzir dados onde os usuários podem interajir com a página rapidamente e dinamicamente. No nosso exemplo usaremos um lista de jogos ligadas a sua respectivas páginas. Uma funcionalidade bastante interessante é a possibilidade de ordenar as linhas da tabela apenas clicando no cabeçalho da coluna. Isso sem requisição ao servidor, tudo rodando localmente.
Para fazer isso você primeiramente criar um consulta a uma fonte de dados XML. Baixe este arquivo XML, onde terá um lista e informações de games, usaremos esta base de dados no nosso tutorial. Agora vá na aba do Spry e clique no ícone 
"Spry XML Data Set". Abrira um painel onde será gerada a consulta. No primeiro campo (Data Set name) escreva "games". No segundo campo clique em browse e escolha a base XML que você baixou acabou de baixar e clique em OK.
Clique em "Get schema", depois em Row elements escolha a segunda linha (game). Depois é só clicar em OK.
Com a consulta já criada podemos agora montar nossa tabela dinâmica. Vá na opção Spry Table como mostra a figura abaixo:
No campo Spry Data Set, definimos qual consulta (o "XML Data Set") devemos usar para gerar a tabela. No nosso caso escolheremos "games", pois foi esse o nome que definimos anteriormente. Em Columns, remova a linha url, clicando no sinal de menos. Depois selecione cada linha e cheque a opção "Sort column when header is clicked", com isso você habilita a ordenação das linhas ao clicar no cabeçalho da coluna. Na próxima mensagem aperte em Yes.
Pronto, agora nossa tabela já está quase pronta. Só falta mais um detalhe, vamos likar os nomes dos jogos para suas respectivas páginas webs.
Para isso selecione o {nome} e em seguida vá em Properties e crie um link para ele, clicando na pasta, esse processo é igual a como se você fosse criar um link normal. Porém após clicar pasta seleciona em Select file name from, escolha Data sources e depois em field escolha a opção URL, como mostra a fira abaixo:
Pronto, agora sua tabela está pronta. Veja nosso exemplo funcionando online.
Comentários
- Fernando Fagundes 2008-04-23 21:32:23
- Muito bom seu tutorial. Parabens! E Obrigado.
- Mauricio 2008-05-26 08:28:09
- Segui todos os passos mas não funciona no IE7