|
Para criar a Nuvem de Tags iremos usar o Visual Studio 2008 e o Server Control chamado ASP.NET Tag/Search Cloud, faça o download na página do projeto clicando aqui
Insira o componente na sua toolbox e arraste para o WebForm que irá conter a Nuvem, teremos algo parecido com isso:
<cc1:Cloud runat="server" ID="Cloud1" />
Existem duas propriedades que recomendo ja serem setadas, são elas: MaxColor e MinColor. Essas propriedades determinam a cor das Tags dependendo do grau de importância,se a tag é bastante procurada ou clicada, ela assume a cor da propriedade MaxColor, caso a tag não seja tão importante a cor setada na propriedade MinColor que irá valer.
Segue um exemplo da tag com as propriedades setadas:
<cc1:Cloud runat="server" ID="Cloud1" MaxColor="#002185" MinColor="#5A75BC" />
Agora vamos carregar nossa nuvem com os dados, para isso precisamos ter em nosso data source os seguintes campos:
- campo identificador da tag
- o nome da tag
- campo com o total de visualizações/busca da tag
- link para onde o cliente será direcionado quando a tag for clicada
Usaremos nesse exemplo uma tabela para carregar nossa nuvem, essa tabela terá os seguintes campos :"tagId",
"name" e "views", o campo url será criado dinamicamente.
Segue o método:
public void CarregaTagCloud()
{
System.Data.DataSet ds = new System.Data.DataSet();
bd_tags tags = new bd_tags();
DataTable tb = tags.Buscar();
tb.Columns.Add("url");
foreach (DataRow dr in tb.Rows)
{
dr["url"] = "pictures.aspx?page=search&tag=" + dr["name"].ToString();
}
ds.Tables.Add(tb.Copy());
Cloud1.DataIDField = "tagId";
Cloud1.DataKeywordField = "name";
Cloud1.DataCountField = "views";
Cloud1.DataURLField = "url";
Cloud1.KeywordTitleFormat = "%k viewed %c times";
Cloud1.DataSource = ds;
Cloud1.DataBind();
}
Entendendo o código:
Primeiro criamos uma DataTable e carregamos com nossos dados, adicionamos dinamicamente o campo "url" que recebe um valor diferente para cada linha da tabela, depois usamos o método Copy para copiarmos essa tabela para um DataSet.
Em seguida setamos as propriedades nescessárias para formar a Nuvem, você deve ter notado que na propriedade KeywordTitleFormat setamos o valor %k viewed %c times, isso serve para quando o usuário passar o mouse por cima da tag aparecer alguma informação, no nosso caso sería: "tag visualizada N vezes", o %k e %c são palavras chaves usadas para nos mostrar informações sobre as tags, veja as descrições sobre cada uma delas:
- %i = mostra o ID da tag
- %k = mostra o nome da Tag
- %c = mostra o total de visualizações/busca da tag
- %u = mostra a url
No final, teremos algo parecido com isso:
Espero que tenham gostado do artigo, e até a próxima.
|