Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

XML

Feed da seção XML

Newsletter de XML


Quarta-feira, 09/01/2008 - 10:00 - Por Thomas Alexander Semple
Seções relacionadas:

Log de acesso com XML em ASP.NET e Silverlight. Parte B

Olá amigos! Na parte A deste artigo mostramos como criar um log de acesso para o site, salvando as informações em um XML. Nesta Parte B vamos exibir um relatório com gráfico utilizando SilverLight. Gostaria de ressaltar que relatório não necessariamente precisa ser exibido utilizando a tecnologia Silverlight.

Imagem de exemplo do Gráfico gerado com o SilverLight.Imagem de exemplo do Gráfico gerado com o SilverLight.

O SilverLight

O Silverlight é a mais nova tecnologia da Microsoft que permite desenvolver aplicações com alta interatividade com o usuário. Funciona com plugin, que deve ser instalado na máquina, similar ao Macromedia Flash.

Para saber mais sobre o Silverlight acesse: http://www.silverlight.net

Pré-requisitos (Parte B)

  • Este artigo foi montado nas configurações abaixo. Não foi testado em outros ambientes.
  • Para criar o sistema de log:

Framework ASP.NET 2.0 com VB.net

Visual Studio 2005.
  • Para visualizar o relatório em SilverLight

Conhecimentos em JavaScript.

Ter o plugin do Silverlight instalado.

Ter o SDK do Silverlight Instalado.(http://silverlight.net/GetStarted/)

Mãos à obra

Abra o projeto criado na parte A deste artigo. Crie uma pasta chamada "RelatorioSilverLight" na raiz do seu projeto.

Apenas como guia, segue um printscreen da estrutura de diretórios deste projeto:

Estrutura de DiretóriosEstrutura de Diretórios.

Instalando o Silverlight no Visual Studio 2005

Instale primeiramente o plugin do silverlight na sua máquina.

Para utilizar o Silverlight com o Visual Studio 2005 é necessário instalar o SP1 do Visual Studio. Recomendo ter o framework mais atual. (http://silverlight.net/GetStarted/)

Criando o Gráfico

O Silverlight possui arquivos do tipo xaml. Estes são os arquivos de marcações para ser exibido o Silverlight.

Vamos criar um arquivo Gráfico.xaml, e inserir o código abaixo.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="500" Height="200" Name="MeuGrafico" >

<TextBlock  Width="500" Height="23.2" Canvas.Left="0"   Canvas.Top="50" Foreground="#000000" Name="NomePagina"   />

    <!-- Aqui é o Fundo cinza d Grafico -->
    <Rectangle StrokeThickness="1" Width="500" RadiusX="17" RadiusY="0"   Height="44" Stroke="#46000000">
      <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
          <GradientStop Color="white" Offset="0.242"/>
          <GradientStop Color="whitesmoke" Offset="0.333"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

    <!-- Retangulo com fundo azul do Grafico -->
    <Rectangle StrokeThickness="1" RadiusX="17" RadiusY="0"  Height="44" Stroke="#46000000" Name="Grafico">
      <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
          <GradientStop Color="white" Offset="0.242"/>
          <GradientStop Color="navy" Offset="0.333"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

  </Canvas>
</Canvas>

O Silverlight possui tags do tipo <Canvas>. Esta tag marca nossa área de trabalho. Para este arquivo definimos uma Altura de 200px e uma largura de 500px.

Dentro do Canvas, definimos três Elementos. O primeiro é uma TextBlock, e dois retângulos.

A TextBlock é o elemento que receberá o nome da página que estamos visualizando a estatística. Definimos para ele uma largura, uma altura, uma distância de 50 px do topo do nosso Canvas, um nome "NomePagina", e um fundo branco.

No Silverlight podemos definir formas geométricas, como retângulos, elipses, polígonos, entre outros.

Para gerarmos o gráfico, temos dois retângulos. O Primeiro é o fundo do gráfico, de cor cinza claro (whitesmoke).

O Segundo retângulo é a barra azul do nosso gráfico. A sua largura será variável de acordo com a página que estamos visualizando.

Grafico.xaml.js

Vamos agora criar o código JavaScript que está por trás do arquivo xaml. Crie um arquivo chamado Grafico.xaml.js.

if (!window.SilverlightJSApplication1)
	window.SilverlightJSApplication1 = {};

SilverlightJSApplication1.Scene = function() 
{

}

SilverlightJSApplication1.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
	    // Atribuo o plugin
		this.plugIn = plugIn;
		
		// Acho meu Grafico
		var oMeuGrafico = rootElement.children.getItem(0);	
		
        // Uma forma de achar um elemento, pelo indice
        oMeuGrafico.children.getItem(0).text = label + ' (' + porcentagem + ')%';
		
		// Outra forma de achar o elemento, pelo nome
		// Multiplico x 5 Pois meu 100% é 500px;
		oMeuGrafico.findName("Grafico").width = (porcentagem * 5); 
				
	}
	
}

Este arquivo recebe uma variável porcentagem. (Mais adiante veremos como passar o valor desta variável: porcentagem). O Valor da Porcentagem multiplicamos por 5, pois o nosso 100% é 500px.

O Valor da nossa TextBlock, recebe o nome da página, concatenado com a porcentagem.

Base.js

Vamos agora criar um arquivo javascript que chama o nosso silverlight, passando como parâmetro a porcentagem o nome da página. Está função é a "createSilverlight". Nesta função passamos alguns parâmetros adicionais como o tamanho do arquivo, a versão que estamos utilizando, o nosso arquivo Grafico.XAML que está o nosso código para o Silverlight, entre outros.

var porcentagem ;
var label;

function createSilverlight( iPorcentagem, sLabel)
{
    porcentagem = iPorcentagem;
    label = sLabel;
    
    // Crio uma nova cena  
	var scene = new SilverlightJSApplication1.Scene();
	Silverlight.createObjectEx({
		source: 'Grafico.xaml',
		parentElement: document.getElementById('SilverlightPlugInHost'),
		id: 'SilverlightPlugIn',
		properties: {
			width: '500',
			height: '500',
			background:'#ffffff',
            isWindowless: 'false',
			version: '1.0'
		},
		events: {
		    onError: null,
			onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
		},		
		context: null 
	});
}

if (!window.Silverlight) 
	window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
	return function() {
        return method.apply(instance, arguments);
    }
}

Silverlight.js

Adicione o arquivo padrão do silverlight.js. Este arquivo está contido no fonte deste projeto.

Página de Relatório em ASP.NET

Agora que criamos os nossos arquivos Silverlight, vamos criar a nossa interface em ASP.NET que chama os arquivos do Silverlight, e lê o nosso XML, criado na Parte A deste artigo.

Crie a página "Relatorio.aspx" . Nesta página vamos criar o código abaixo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Relatorio.aspx.vb" Inherits="Relatorio" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Relatório de Acesso</title>

    <script type="text/javascript" src="Silverlight.js"></script>

    <script type="text/javascript" src="base.js"></script>

    <script type="text/javascript" src="Grafico.xaml.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <h3>
            Relatório de acesso do meu site com Silverlight e XML!
        </h3>
        Minhas Páginas:
        <asp:DropDownList runat="server" ID="ddlPaginas" AutoPostBack="true">
        </asp:DropDownList>
        <br /> <br />
        <div id="SilverlightPlugInHost">

         <asp:Literal runat="server" ID="litSilverlight"></asp:Literal>

        </div>
    </form>
</body>
</html>

Note que estamos chamando os arquivos criados anteriormente em JavaScript (Silverlight.js, base.js, Grafico.xaml.js). Adicionamos uma Div com o ID SilverlightPlugInHost, e um literal, que vamos usar para chamarmos nossa função do Silverlight, com os parâmetros de porcentagem, e nome da Página.

Relatório.aspx.vb

Por fim, vamos criar o código por trás do funcionamento da Página Relatório.aspx. Abra o seu arquivo Relatorio.aspx.vb.

Inicialmente vamos criar o método que lê o XML criado na Parte A deste Artigo.

  ''' <summary>
    ''' sub que lê o XML
    ''' </summary>
    ''' <remarks></remarks>
    Sub lerXML()

        ' Exemplo didático de como criar uma estrutura de tabela
        ' Pode ser implementado como você preferir.

        dt.TableName = "Log"
        dt.Columns.Add("Data")
        dt.Columns.Add("IP")
        dt.Columns.Add("URL")
        dt.Columns.Add("Query")
        dt.Columns.Add("Browser")
        dt.Columns.Add("URLAnterior")

        ' leio o XML
        dt.ReadXml(sCaminhoCompleto)

    End Sub

Em seguida, criamos o método que popula da nossa DropDownList com as páginas no XML.


    ''' <summary>
    ''' Sub que carrega o Combo com as minhas páginas
    ''' </summary>
    ''' <remarks></remarks>
    Sub carregarCombo()

        If System.IO.File.Exists(sCaminhoCompleto) Then

            Dim bExiste As Boolean = False

            ' Faço um for, para cada página aparecer apenas uma vez
            For Each dr As Data.DataRow In dt.Rows
                bExiste = False

                For Each oItem As ListItem In ddlPaginas.Items
                    If oItem.Value = dr("URL") Then
                        bExiste = True
                        Exit For
                    End If
                Next

                ' Se não existir, eu adiciono
                If Not bExiste Then
                    ddlPaginas.Items.Add(New ListItem(dr("URL"), dr("URL")))
                End If
            Next
        End If

        ddlPaginas.Items.Insert(0, New ListItem("Minhas Paginas", ""))

    End Sub

Quando o usuário mudar o Valor da DropDown List, vamos criar em tempo de execução o JS so nosso Silverlight, passando como parâmetro a página selecionada, e a porcentagem.

''' <summary>
    ''' Quando eu mudar minha combo, eu regero o JavaScript do Silverlight
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub ddlPaginas_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlPaginas.SelectedIndexChanged
        Dim dtResultado As Data.DataRow()
        Dim iTotal As Int32
        Dim iPorcent As Integer

        ' Trato só para se voltar para o selecione
        If ddlPaginas.SelectedValue <> "" Then

            dtResultado = dt.Select("URL = '" & ddlPaginas.SelectedValue & "'")

            iTotal = UBound(dtResultado)

            If dt.Rows.Count > 0 Then ' Verificação para não ter divisão por zero
                iPorcent = Math.Round((iTotal / dt.Rows.Count) * 100)

                ' Aqui eu atribuo minha função JavaScript que chama o Silverlight
                litSilverlight.Text = "<script type=""text/javascript"">" & vbCrLf & _
                                        "createSilverlight('" & iPorcent & "', '" & ddlPaginas.SelectedValue & "');" & vbCrLf & _
                                        "</script>"
            End If

        Else
            litSilverlight.Text = "<strong>Selecione a página</strong>"
        End If

    End Sub

Load da nossa página

Por fim, criamos a função de load, que chamará nosso método de carregar combo. 

Private sCaminhoArquivoLog As String = System.Configuration.ConfigurationManager.AppSettings("CaminhoArquivoLog").ToString
    Private sArquivoLog As String = System.Configuration.ConfigurationManager.AppSettings("ArquivoLog").ToString
    Private sCaminhoCompleto As String = sCaminhoArquivoLog & sArquivoLog
    Private dt As New Data.DataTable

    ''' <summary>
    ''' Load da página, é chamado sempre que o usuário (re)carrega a página
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        ' Sempre leio o XML
        lerXML()

        If Not Page.IsPostBack Then
            ' Carrego minhas paginas do combo
            carregarCombo()
        End If

    End Sub

Considerações finais

O Silverlight é uma tecnologia bem recente, que com certeza crescerá bastante. Neste artigo procurei fazer um exemplo bem simples, para termos o primeiro contato com a tecnologia.

Clique aqui para dar download no projeto de exemplo.

Forte Abraço.

Todos os artigos de Thomas Alexander Semple

0 comentários publicados

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Thomas Alexander Semple é engenheiro eletrônico com ênfase em telecomunicações e é líder de projetos da T4W. Com mais de 10 anos de experiência, participa de projetos para empresas dos mais diversos segmentos. A T4W (www.t4w.com.br) é uma empresa de tecnologia onde sua área de desenvolvimento vem atendendo empresas de médio e grande porte em projetos corporativos e especiais. Thomas A. Semple também escreve periodicamente para as revistas .Net Magazine e Web Mobile.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.