ASP .NET - Usando tag Clouds (Nuvem de tags)

Você já ouviu falar em tag Clouds ou nuvem de tags ?

Se nunca ouviu com certeza já deve ter visto este recurso sendo usado em suas 'andanças' pela web.

Se você ainda não sabe do que eu estou falando, tag clouds, ou nuvem de tags são conjuntos de termos, agrupados em forma de "nuvem", que refletem as buscas mais comuns que são feitas em um site onde cada termo da nuvem possui link que retorna os resultados da busca por este termo no site.

O tamanho da fonte do termo reflete sua importância, ou seja, quanto maior o tamanho, mais vezes este termo foi procurado.

Na figura abaixo você vê a imagem de uma nuvem de tags ou tag clouds de um site na web. Entendeu agora o que é uma tag cloud ?

Muito bem, e se você desejar usar este recurso em seu site ASP .NET como deve fazer ?

A resposta é simples: procure no Google.

Sim, se você digitar : "ASP .NET Tags Clouds" vai obter toneladas de links com as mais diversas formas de implementar este recurso.

Cabe a você analisar qual deles se adapta mais ao seu caso e por a mão na massa fazendo os ajustes necessários.

Você também pode usar um gerador de tag clouds; veja abaixo os links de alguns geradores de nuvens de tags:

Criando a sua própria Nuvem de tags

Agora eu vou mostrar como você pode criar a sua tag clouds diretamente em uma página ASP .NET; talvez não seja a melhor maneira de fazer o serviço mas vai ilustrar o nosso artigo e dar um idéia de como ser virar sozinho. (Vou me basear no artigo : Creating a Tag Cloud in ASP.NET de Scott Mitchell)

Receita para criar a sua tag cloud:

Ingredientes:

Quais itens iremos exibir na tag cloud ?

Neste exemplo vamos trabalhar com as tabelas Categories e Products do banco de dados Northwind.mdf onde iremos agrupar as categorias por número de produtos. Iremos exibir os nomes das categorias como itens da nuvem de tags e quanto mais produtos uma categoria tiver maior deverá ser o tamanho da fonte.

O resutaldo final que deveremos obter é visto na imagem abaixo:

Abaixo temos a tabela exibindo o nome das categorias e o numero total de produtos;

Acima temos a nuvem de tags contendo como itens os nomes das categorias;

A categoria com mais produtos é exibida em uma fonte maior;

Obs: No seu web site você pode querer exibir uma nuvem de tags com o nome das categorias mais acessadas ou dos artigos mais lidos.

Vamos então criar um novo web site usando o Visual Web Developer 2008 Express no menu File-> New Web Site;

Selecione o template ASP .NET Web Site, informe o nome TagsCloud e clique no botão OK;

Em seguida selecione o Web Form Default.aspx criado por padrão na janela Solution Explorer;

Inclua a partir da ToolBox um componente SqlDataSource na página;

O assistente irá solicitar que você escolha a conexão. Se ela não aparecer na guia de seleção clique no botão New Connection e localize a conexão com o Northwind; No exemplo eu estou usando o SQL Server 2008 Express na máquina local (.\SQLEXPRESS);

Será definida a string de conexão conforme a figura abaixo;

Clique em Next> e aceite a opção para salvar a conexão no arquivo de configuração com o nome padrão e clique em Next>;

Em seguida selecione a opção - Specify a Custom SQL Statement or stored procedure e clique em Next>;

Na próxima janela vamos definir o comando SQL que será executado para selecionar as categorias totalizadas por quantidade de produtos; Na guia SELECT inclua o seguinte comando SQL:


SELECT Categories.CategoryID, Categories.CategoryName, COUNT(Products.ProductID) AS NumberOfProducts
FROM Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID
GROUP BY Categories.CategoryID, Categories.CategoryName
ORDER BY Categories.CategoryName

Esta instrução SQL utiliza a cláusula GROUP BY para retornar a quantidade de produtos associados com cada categoria;

Conforme a figura abaixo :

Em seguida clique no botão Next> e em Finish;

Com o SqlDataSource configurado inclua um componente GridView e em GridView Tasks informe o nome do SqlDataSource que acabamos de configurar;

Obs: É importante verificar se a propriedade DataKeyNames do controle GridView esta definida para o campo CategoryID;

Agora inclua logo abaixo do componente SqlDataSource um controle Literal com o ID igual a cloudMarkup conforme a figura abaixo:

O controle Literal será usado para exibir a nuvem de tags na página.

Via código nós vamos percorrer o resultado do banco de dados, computar o tamanho da escala da fonte e então emitir um hiperlink Html na propriedade Text do controle Literal.

O controle Literal  representa uma das várias opções para adicionar conteúdo a uma página. Para conteúdo estático, você pode adicionar marcação diretamente a uma página como HTML, sem usar um contêiner.No entanto, se você quiser adicionar conteúdo dinamicamente, você deve adicionar o conteúdo a um contêiner.Contêiners típicos são os controles Label, Literal, Panel e PlaceHolder.

O controle Literal difere do controle Label, pois o controle Literal não adiciona qualquer elemento HTML ao texto.(O controle Label processa um elemento span.) Como conseqüência, o controle Literal não suporta quaisquer atributos de estilo, incluindo atributos de posição.No entanto, o controle Literal permite que você especifique se o conteúdo é codificado.

Os controle Panel e PlaceHolder processam elementos div, que criam blocos discretos na página, ao contrário da forma de processamento em linha que os controles Label e Literal fazem.

Em geral, use um controle Literal quando você deseja processar texto e controles diretamente em uma página sem qualquer marcação adicional.

Agora vamos definir o código no code-behind do arquivo Default.aspx.vb.

namespaces usados:

Imports System.Data
Imports System.Data.SqlClient

No evento Load do formulário vamos definir a chamada para a rotina PopularNuvem();

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            PopularNuvem()
        End If
    End Sub

Agora vamos definir a rotina PopularNuvem() conforme abaixo: (código retirado do artigo citado no início)

Private Sub PopularNuvem()
        cloudMarkup.Text = String.Empty

        'le os dados do SqlDataSource
        Dim cloudData As DataView = CType(SqlDataSource1.Select(DataSourceSelectArguments.Empty), DataView)

        'Precisamos definir o peso de cada categoria
        Const SpacerMarkup As String = " "
        'define a escla das fontes
        Dim FontScale() As String = {"xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large"}

        Const WeightColumnName As String = "NumberOfProducts"
        Const TextColumnName As String = "CategoryName"
        Const NavigateUrlColumnName As String = "CategoryID"
        Const NavigateUrlFormatString As String = "~/ExibirProdutos.aspx?CategoryID={0}"

        Dim minWeight As Decimal = Decimal.MaxValue, maxWeight As Decimal = Decimal.MinValue

        'percorre os dados obtidos para definir as escalas dos itens
        For Each row As DataRowView In cloudData
            Dim numProductsObj As Object = row(WeightColumnName)
            If Not Convert.IsDBNull(numProductsObj) Then
                Dim numProductsDec As Decimal = Convert.ToDecimal(numProductsObj)

                If numProductsDec < minWeight Then minWeight = numProductsDec
                If numProductsDec > maxWeight Then maxWeight = numProductsDec
            End If
        Next

        'Exibe cada categoria usando um tamanho de fonte relativa com seu peso
        Dim scaleUnitLength As Decimal = (maxWeight - minWeight + 1) / Convert.ToDecimal(FontScale.Length)

        'percorre os dados obtidos para definir os itens na tag
        For Each row As DataRowView In cloudData
            Dim numProductsObj As Object = row("NumberOfProducts")

            If Not Convert.IsDBNull(numProductsObj) Then
                Dim numProductsDec As Decimal = Convert.ToDecimal(numProductsObj)

                Dim scaleValue As Integer = Math.Truncate((numProductsDec - minWeight) / scaleUnitLength)

                'define a exibição na nuvem de tags
                cloudMarkup.Text &= String.Format("<a href=""{0}"" style=""font-size:{1};"">{2}</a>{3}", _
                                                  Page.ResolveUrl(String.Format(NavigateUrlFormatString, row(NavigateUrlColumnName).ToString())), _
                                                  FontScale(scaleValue), row(TextColumnName).ToString(), SpacerMarkup)
            End If
        Next

    End Sub

Este código é o coração do projeto sendo responsável por:

Precisamos definir a página ExibirProdutos.aspx que vai exibir os produtos da categoria selecionada.

Clique com o botão direito do mouse sobre o nome do web site e selecione Add New Item;

A seguir selecione o item WebForm e informe o nome ExibirProdutos.aspx;

Agora inclua um componente SqlDataSource na página ExibirProdutos.aspx e repita o procedimento para configurar o DataSource com a conexão com o banco de dados Northwind.mdf da mesma forma que fizemos na página Default.aspx;

Em seguida selecione a opção - Specify a Custom SQL Statement or stored procedure e clique em Next>;

Na próxima janela vamos definir o comando SQL que será executado para selecionar as categorias totalizadas por quantidade de produtos; Na guia SELECT inclua o seguinte comando SQL:


SELECT [ProductName], [UnitPrice] FROM [Alphabetical list of products] WHERE ([CategoryID] = @CategoryID)

Conforme a figura abaixo

Clique no botão Next> e na janela Define Parameters vamos definir como a página vai receber o parâmetro;

Selecione QueryString em Parameter Source e o nome CategoryID em QueryStringField pois vamos passar o campo CategoryID da página Default.aspx ;

Clique em Next> e a seguir em Finish;

Para encerrar inclua um controle GridView e defina em GridView Tasks na opção Choose Data Source o SqlDataSource que acabamos de configurar:

Vamos exibir também o código da categoria para a qual os produtos estão sendo exibidos.

Inclua acima do controle GridView o texto: Produtos da categoria:

Inclua também um controle Label:

Produtos da categoria: <asp:Label ID="lblCategoria" runat="server" Text="Label"></asp:Label>

Agora no evento Load do formulário ExibirProdutos.aspx vamos obter via QueryString o código da categoria e atribuir ao controle Label que incluímos na página:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        lblCategoria.Text = Request.QueryString("CategoryID")
    End Sub

Com isso só falta criar o nosso arquivo de estilo. Clique com o botão direito do mouse sobre o nome do web site e escolha Add New Item;

Na janela Templates selecione Style Sheet e aceite o nome padrão clicando em Add;

A seguir defina o estilo no arquivo .css conforme a figura abaixo. (Você pode alterar o estilo a seu gosto)

Agora só falta referenciar o arquivo de estilo na página Default.aspx incluindo o código abaixo no cabeçalho <head> da página:

<head runat="server">
<title>Nuvem de Tags</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

Com isso já podemos rodar o nosso projeto web site:

Clicando em um item da nuvem de tags a página ExibirProdutos.aspx irá exibir os produtos da categoria selecionada:

E desta forma eu acabei de mostrar como implementar a tal nuvem de tags (tag clouds). Você poderá se basear no exemplo para criar a sua própria rotina.

Pegue o projeto completo aqui : TagsCloud.zip

Eu sei é apenas ASP .NET, mas eu gosto...

Referências:

José Carlos Macoratti