Em meu último artigo, Primeiro contato com o Dreamweaver CS3 pedi a vocês um ponto de partida para iniciarmos uma abordagem sobre a nova versão do Dreamweaver, a CS3. E para que seja feita a vontade de todos, vamos iniciar tal abordagem pelo Spry framework para Ajax.

A idéia deste artigo é fazer uma introdução ao Spry, mas focando, principalmente, na integração do Dreamweaver a esse framework.

Se você ainda não conhece o Spry, leia o artigo As novas funcionalidades do Dreamweaver CS3 para conhecê-lo e um pouco mais sobre o Dreamweaver CS3.

O framework Spry são bibliotecas no formato JavaScript e CSS, as quais permitem aos usuários do Dreamweaver desenvolver interfaces mais ricas e dinâmicas. Além de possibilitar a exibição de dados no formato XML e criar elementos interativos em páginas que exibem conteúdo dinâmico sem a necessidade de tais páginas se carregarem por completo.

O Dreamweaver CS3 disponibiliza o Spry em duas perspectivas, uma para designers e outra para programadores. Os designers poderão criar efeitos visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre vários outros. Já os programadores terão facilidades ao trabalhar com o Ajax e na exibição de dados armazenados em arquivos XML. Além desses recursos, tantos para designers quanto para programadores, o Spry oferece alguns widgets que auxiliam na validação de formulários.

Vamos analisar a interface do Dreamweaver CS3 e localizar os recursos do Spry. Nas abas da Insert Bar localizam praticamente todos os recursos do framework em questão. Vamos analisar:

A aba Spry, como demonstrada na imagem abaixo.

Visualização da Insert Bar, aba Spry.

Disponibiliza 13 recursos, divididos em três grupos. O primeiro deles – da esquerda para a direita – são utilizados para se trabalhar com dados em arquivos XML; o segundo e o terceiro são os widgets oferecidos pelo Spry, utilizados na validação de formulários e na criação de elementos de interface, respectivamente.

Esses grupos de recursos localizados na aba Spry, estão localizados, também, em outras abas. Uma vez que cada grupo de recursos corresponde a finalidades distintas. O que significa dizer que na aba Data, teremos o primeiro grupo; na aba Forms o segundo e na aba Layout o terceiro grupo. Observe essas três últimas abas com seus respectivos recursos do Spry framework para Ajax.

Visualização da Insert Bar, aba Data

Visualização da Insert Bar, aba Form.

Visualização da Insert Bar, aba Layout.

Os demais recursos oferecidos pelo Spry são os efeitos, effects. Ambos estão localizados na opção Effects do painel Behaviors, como ilustrado na imagem a seguir:

Opção de efeitos no painel Behaviors.

Na minha opinião, esses recursos também poderiam estar localizados na aba Spry, uma vez que todos os outros recursos estão.

Quando você seleciona algum recurso do spry no Documento window do Dreamweaver, o Property inspector é atualizado e exibe as configurações de recurso em questão, veja um exemplo:

Exemplo do Property inspector com um recurso do Spry selecionado no Documento window.

Dessa forma, configurar os recursos após ele ter sido inserido na página, é bem prático.

Como eu disse no início deste artigo, o Spry são bibliotecas no formato JavaScript e CSS. O que significa dizer que para cada recurso do Spry há um arquivo JavaScript e outro CSS relacionado. O arquivo JavaScript é o responsável pelo comportamento, interatividade, animação e o arquivo CSS se encarrega da estilização.

Quando você utiliza algum recurso do Spry e posteriormente salva a página em questão, é exibido o painel Copy Dependent Files, o qual copia para o seu site, configurado no Dreamweaver, os arquivos relacionados ao recurso utilizado. Além de copiar os arquivos, ele lhe informa quais são os arquivos e exibe um alerta para lembrar-lhe de enviar os arquivos para o servidor na web. Veja um exemplo do referido painel:

Exemplo do painel Copy Dependent Files

Bom, esta foi a introdução ao Spry framework para Ajax. Espero que tenham gostado.

Lembre-se que a coluna é de vocês, portanto toda sugestão é sempre bem-vinda e são levadas em consideração quando vou me decidir sobre o que escrever. Por tanto, conto com vocês.

Um forte abraço a todos.

PS. Dia 30 de maio ficarei mais velho. Se quiser me enviar algum presente, ficarei muito agradecido!