Coluna Dreamweaver – Auto Sugestão

Introdução

Salve Pessoal! Nesse tutorial vamos aprender a utilizar o Auto Sugestão do Framework Spry e no próximo vamos fazer uma galeria de fotos utilizando tudo que vimos até agora. Para ver um exemplo clique aqui.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui, e os arquivos SpryAutoSugestão.js , SpryAutoSugestão.css e products.xml

Conceitos

O Spry.Widget.AutoSuggest permite que seja visualizado uma sugestão de nomes conforme o usuário for preenchendo um formulário. Para configura o Spry.Widget.AutoSuggest são necessário quatro valores e mais um adicional para opões especiais como por exemplo limitar a quantidade de resultado exibidos e ou, ativar o auto sugestão somente quando digitado um mínimo de caracteres.

Conteudo

Criando um XML Data Set
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 depois clique no botão Spry XML Data Set, e uma nova janela se abrirá para que seja configurado o XML Data Set.

Configuração do Spry XML Data Set:
Data Set Name: Nome do conjunto de dados (Data Set), vamos dar o nome de dsAutoSugestao.
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 fachar a janela

Vamos criar uma DIV onde será colocado o formulário. Na Barra Inserir do Dreamweaver, selecione a Guia Layout e depois no botão Insert Div Tag,

Na janela de configuração da DIV coloque como ID o nome autosugetao

Agora dentro da DIV vamos adicionar o formulário. Na Barra Inserir selecione a Guia Formulario e clique no botão Form

Agora na Barra Inserir clique no Botão Text Field, e a janela de configuração do campo Text Field vai se abrir

Na janela de configuração coloque a ID eo Label com o nome de produto

No painel Application clique na Guia Bindings e veja se o Data Set dsAutoSugestao esta aberto exibindo as colunas, caso não esteja clique no sinal de mais que esta a direita do Data Set dsAutoSugestao para que seja mostrada as colunas. Clique na coluna name que esta armazenando os nomes dos software da adobe e arraste para dentro do formulario

Selecione o {name} que foi acabado de ser adicionado no formulário e na Barra Inserir selecione a Guia Spry e 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 dsAutoSugestao
Selecione novamente o campo {name} e na Barra Inserir do dreamweaver selecione a Guia Spry e clique no botão Spry Repeat, para inserir uma região de repetição do Spry, mostrando assim todos os nomes que estão no arquivo XML, e a janela de configuração do Spry Repeat vai se abrir.

Container: Local onde será inserido a região de repetição, escolha a opção Div ou seja a região ficará dentro da div
Type: Tipo de região, escolha a opção Repeat
Spry Data Set: Data Set de onde será repetido os dados, selecione o Data Set dsProducts
Agora mude a visualização para o modo de visualização do código, e a partir daqui vai ser tudo na unha. Vamos primeiro adiciona o arquivo JSpryAutoSuggest.js dentro da tag Head
<script language=”JavaScript” type=”text/javascript” src=”./includes/spry/SpryAutoSuggest.js”></script>
Ainda com o Dreamweaver no modo de visualização do código, localize a div criada para adicionar a região e acrescente a tag ID com o valor de regiao_dataset e depois na DIV criada para repetição adicione o comando spry:suggest e como valor coloque o campo {name}
<div id=”autosugestao”>
<form id=”form1″ name=”form1″ method=”Post” action=”">
<label>Produto</label>
<input type=”text” name=”Produto” id=”Produto” tabindex=”1″ />
<div id=”regiao_dataset” spry:region=”dsAutoSugestao”>
<div spry:repeat=”dsAutoSugestao” spry:suggest=”{name}”>{name}</div>
</div>
</form>
</div>
Dentro da DIV de repetição tem o campo {name}, coloque ele dentro de outra DIV com a classe list
<div id=”autosugestao”>
<form id=”form1″ name=”form1″ method=”Post” action=”">
<label>Produto</label>
<input type=”text” name=”Produto” id=”Produto” tabindex=”1″ />
<div id=”regiao_dataset” spry:region=”dsAutoSugestao”>
<div spry:repeat=”dsAutoSugestao” spry:suggest=”{name}”><div class=”list”>{name}</div></div>
</div>
</form>
</div>
Agora vamos criar uma variável que vai ser reponsável de chamar o Spry.Widget.AutoSuggest e lhe passar os valores de configuração. Inicie um novo bloco de código para JavaScript e adicione uma nova variável (var) de nome as1 (as1) e com o valor igual (=) a uma nova (new) Spry.Widget.AutoSuggest e com o seu valor sendo primeiro a ID da DIV onde está armazenado o formulario (autosugestao), depois a ID da DIV onde está a regiao do DataSet do Spry (regiao_dataset), depois o nome do Data Set Xml (dsAutoSugestao) e por ultimo o nome do campo que será repetido (name)
<script type=”text/javascript”>
var as1 = new Spry.Widget.AutoSuggest(‘autosugestao’, ‘regiao_dataset’, ‘dsAutoSugestao’, ‘name’);
</script>
Para limitar o resultado exibidos pelo Spry.Widget.AutoSuggest acrescenter como ultimo valor o comando {containsString: true, maxListItems: 3}, ou seja será mostrado somente 3 resultados
<script type=”text/javascript”>
var as1 = new Spry.Widget.AutoSuggest(‘autosugestao’, ‘regiao_dataset’, ‘dsAutoSugestao’, ‘name’, {containsString: true, maxListItems: 3});
</script>
Para ativar o auto sugestão somente quando for digitado uma certa quantidade de caracters acrescenter como ultimo valor o comando {containsString: true, minCharsType: 3}, ou seja será mostrado somente quando forem digitado no minimo 3 caracteres
<script type=”text/javascript”>
var as1 = new Spry.Widget.AutoSuggest(‘autosugestao’, ‘regiao_dataset’, ‘dsAutoSugestao’, ‘name’, {containsString: true, minCharsType: 3});
</script>

Considerações Finais

Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br. Qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br ou acesse o nosso fórum