Coluna Dreamweaver - Spry Data: comandos setrow e setrownumber

Introdução

Salve Pessoal! Nesse tutorial vamos aprender a utilizar os comando setrow e setrownumber que basicamente servem para simular um iframe. Para isso vamos aprender a criar um XML Data Set ou como eu chamo um conjunto de dados. O XML Data Set e bastante semelhante com o Conjunto de Registro (recordeset) de um banco de dados, só que em vez de um banco de dados você terá um arquivo XML com todos os dados armazenados nele. Nesse tutorial vamos criar como já havia dito um XML Data Set e duas colunas, em uma coluna será mostrado os nomes dos softwares da adobe e na outra coluna as descrições dos softwares, e através do comando setrow aplicado na coluna com o nomes, conforme o usuário for clicando nos nomes a descrição será atualizando sem a necessidade de recarregar a página. Clique aqui para ver um exemplo.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui
Um arquivo XML, no exemplo vamos utilizar esse com produtos da adobe

Conceitos

O Spry é o framework da Adobe para desenvolvimento usando Ajax e está licenseado sob BSD License. O Spry foi projetado com a intenção de facilitar o desenvolvimento, ele incluir bibliotecas de código, linguagens de script e outros recursos para ajudar a desenvolver diferentes componentes de um projeto. Os comandos strow e setronumber requerem um único nome de um Data Set como seu valor, e é aplicado após definida uma Region ou Detail Region, servem para mudar ou trocar as informações de uma coluna atraves de um clique sem a necessidade de ter que recarregar a página.

Conteúdo

Crie e salve uma nova página,
pode ser em qualquer formato, não se esqueça de fazer o download do arquivos XML. Com a página aberta e salva clique na guia Spry da barra inserir do dreamweaver, e clique no botão Spry XML Data Set, uma janela se abrirá.

Configuração do Spry XML Data Set:
Data Set Name: Nome do conjunto de dados (Data Set), vamos dar o nome de dsProducts.
XML Source: Local onde está salvo o arquivo XML, clique no botão Browse para localizar o arquivo.
Botão Get schema: Botão para extrair a estrutura do arquivo XML e exibir na caixa Row element, clique nele.
Caixa Row element: Caixa para exibir a estrutura do arquivo XML, onde poderá ser selecionada as tags que serão utilizadas, em nosso exemplo vamos selecionar a tag product que esta dentro da tag principal também chamada products
XPath: exibir o caminho da tag selecionada, clique no botão Preview para visualizar os dados que estão dentro dentro da tag selecionada, em nosso exemplo deve está products/product
Data Set columns: Exibir as colunas que estão dentro da tag selecionada e qual o tipo de dados das colunas, para alterar o tipo de dados utilize a caixa Data type
Data type: Classifica os tipo de dados podendo ser, uma string, um numero, uma data o um link de imagen.
Pronto Clique no botão OK para a janela se fecha

Vamos criar duas colunas uma do lado direito onde vai aparecer os nome dos softwares da adobe e outra do lado esquerdo que vai aparecer a descrição do software que foi selecionada. No modo de visualização do código vamos criar a coluna utilizando div que vai ficar na direita (float:left) e com a largura de 200 pixel (width:200px).

<div style=”width:200px; float:left”></div>

Depois vamos criar a coluna da esquerda onde vai aparecer a descrição do software selecionado

<div style=”float:right”></div>

Coloque a página no modo de visualização do projeto, No painel Application clique na guia Bindings e veja se o Data Set dsProducts esta aberto exibindo as colunas, caso não esteja clique no sinal de mais que esta a direita do Data Set dsProducts para que seja mostrada as colunas. Clique na coluna name que esta armazenando os nomes dos software da adobe e arraste para dentro da coluna da direita

No painel Application dentro do Data Set dsProducts clique na coluna desc que esta armazenando as descrições dos softwares da adobe e arraste para a coluna da esquerda

Selecione a coluna direita e na guia Spry, na barra inserir do dreamweaver clique no botão Spry Region, para inserir uma região do Spry, e a janela de configuração do Spry Region vai se abrir.

Container: Local onde será inserido a região, escolha a opção Div ou seja a região ficará dentro da div
Type: Tipo de região, escolha a opção Region
Spry Data Set: Data Set de onde será extraído os dados, selecione o Data Set dsProducts
Ainda na coluna da direita selecione-a e na guia Spry, na barra inserir do dreamweaver clique no botão Spry Repeat, para inserir uma região de repetição do Spry, para que seja mostrado todo os nomes que estão no arquivo XML, e a janela de configuração do Spry Repeat vai se abrir.

Selecione a coluna da esquerda onde será visualizado a descrição do arquivos, e clique no botão Spry Region, para inserir uma Detail region do Spry, e a janela de configuração do Spry Region vai se abrir.

Container: Local onde será inserido a região, escolha a opção Div ou seja a região ficará dentro da div
Type: Tipo de região, escolha a opção Detail region
Spry Data Set: Data Set de onde será extraído os dados, selecione o Data Set dsProducts
Observe que os contéudos das colunas ficaram com relevo na cor verde claro. Agora mude a visualização para o modo de visualização do código, e veja se o seu código está igual ao meu:

<div style=”width:200px; float:left”>
<div spry:region=”dsProducts”>
<div spry:repeatchildren=”dsProducts”>{name}</div>
</div>
</div>
<div>
<div spry:detailregion=”dsProducts”>{desc}</div>
</div>
Vamos adiciona a função setrow na coluna com os nomes dos softwares para que quando a pessoa clique no nome apareça a descrição na coluna da esquerda que ja está configurada como uma região filho, o comando setrow pode ser adiciona dentro de diversos elementos, eu adicionei ela dentro da tag Span, então antes do nome {name} vamos criar a tag span e colocar o comando spry:setrow=”dsProducts” confome mostra as imagens abaixo:

O codigo deve ficar assim:

<div style=”width:200px; float:left”>
<div spry:region=”dsProducts”>
<div spry:repeatchildren=”dsProducts”><span spry:setrow=”dsProducts” >{name}</span></div>
</div>
</div>
<div>
<div spry:detailregion=”dsProducts”>{desc}</div>
</div>
O Arquivo está semi-pronto, faça o upload dele para o seu servidor, incluindo os arquivos pendentes do Spry e veja se ele está funcionando normal.
Observe que quando você clicar no nome do software ele não mostra o curso do mouse como se fosse um link. Para resolver esse problema vamos criar stilos CSS para personalizar a coluna, trocando o cursor do mouse e vamos utilizar mais duas funções do Spry uma é o select, que vai aplicar um estilo CSS quando o nome estiver selecionado e o outro é o comando hover, que vai aplicar um estilo quando o mouse estiver em cima. Os estilos CSS são esses abaixo:

<style type=”text/css”>
.product {
cursor: pointer;
}
.hover {
background-color: #FFFFCC;
}
.selected {
background-color: #CCCCCC;
}
</style>
Agora dentro da tag Span adicione a classe product, e as funções spry:select com o stilo selected e a função spry:hover com o estilo hover

<div style=”width:200px; float:left”>
<div spry:region=”dsProducts”>
<div spry:repeatchildren=”dsProducts”><span class=”product” spry:select=”selected” spry:hover=”hover” spry:setrow=”dsProducts” >{name}</span><br /></div>
</div>
</div>
<div>
<div spry:detailregion=”dsProducts”>{desc}</div>
</div>