Criando Nuvem de Tags em ASP.NET

As Tag Clouds(Nuvem de Tags) são um símbolo da web 2.0 e estão sendo utilizadas pelos maiores portais da atualidade. Veremos nesse artigo os passos para criar facilmente uma Nuvem de Tags utilizando o Visual Studio 2008.

por Israel Vilela

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.