Desenvolvimento - Visual Basic .NET

Classe que envia mensagens em Javascript (alert) ou chama funções em Javascript

Nesse artigo vamos mostrar como desenvolver uma classe de objetos que tem a função de enviar alertas (alert) em javascript ou até mesmo chamar funções (function) que esteja em sua pagina .ASPX.

por Fúlvio Cezar Canducci Dias


Nesse artigo mostrarei como criar uma classe de envio de mensagem em Javascript que também terá suporte para chamar funções de javascript que estejam na página.

Criaremos uma aplicação Class Library chamada JvScript usando a linguagem Visual Basic conforme as figuras 1 e 2.

Figura 1. Criando um novo Projeto.

Figura 2. Configurando o projeto.

O projeto criado será exibido conforme figura 3 e renomeie a Class1.vb para Alerta.vb veja figura 3.

Figura 3. Exibindo estrutura do projeto criado.

O próximo passo é adicionar ao projeto duas referências que serão de extrema importância: System.Web e System.Web.Extensions. Veja como adicioná-las nas figuras 4 e 5:

Figura 4. Adicionando referências

Figura 5. Selecionando as referências que serão adicionadas no projeto.

O Diagrama de Classes é um componente visual para construções de classes no Visual Studio. Veja na figura 6 como adicioná-lo no nosso projeto e na figura 7 a visualização do diagrama.

Figura 6. Adicionando diagrama de classes

Figura 6. Visualizando o diagrama de classes

Vamos agora criar todas as classes e métodos do projeto. Veja como adicionar uma classe na figura 7.

Figura 7. Adicionando uma nova classe no diagrama.

A classe Chaves.vb será composta por apenas um campo (de nome _chave) e uma propriedade (de nome Chave) . O motivo principal de criar essa classe Chaves.vb, é que a Alerta.vb e a classe Funcao.vb herdaram os métodos. Na figura 8 e 9 visualize a classe Chaves.vb criada.

Figura 8. Visualizando a classe Chaves.vb.

Figura 9. Visualizando a codificação da classe Chaves.vb.

O propósito desse projeto não é construir passo a passo a classes e sim demonstrar o poder e a flexibilidade que elas trarão para o desenvolvimento de páginas em . ASPX. A figura 10 exibe o nosso “Diagrama de Classes” finalizado com as suas heranças, agregações e sobrecargas de métodos e a listagem 1 exibe a codificação gerada na criação do diagrama.

Figura 10. Exibindo o diagrama de classes.

Abaixo tem os códigos fontes gerados em nosso “Diagrama de Classes”, mas, que também foram modificados para sua adequação a esse projeto.

Classe Alerta

Classe Funcao

Public Class Alerta

Inherits Chaves

Private _alerta As String

Public Sub New()

Chave = ""

Alerta = ""

End Sub

Public Property Alerta() As String

Get

Return _alerta

End Get

Set(ByVal value As String)

_alerta = value

End Set

End Property

End Class

Public Class Funcao

Inherits Chaves

Private _funcao As String

Public Sub New()

Chave = ""

Funcao = ""

End Sub

Public Property Funcao() As String

Get

Return _funcao

End Get

Set(ByVal value As String)

_funcao = value

End Set

End Property

End Class

Classe Chave

Public Class Chaves

Private _chave As String

Public Sub New()

Chave = ""

End Sub

Public Property Chave() As String

Get

Return _chave

End Get

Set(ByVal value As String)

_chave = value

End Set

End Property

End Class

Classe ClienteJS

Imports System

Imports System.Web

Imports System.Web.UI

Public Class ClienteJS

Private _alerta As New Alerta

Private _funcao As New Funcao

Private _pagina As Page

Public Sub New()

Alertas = _alerta

Funcoes = _funcao

End Sub

Public Sub New(ByVal _alerta_ As Alerta)

Alertas = _alerta

End Sub

Public Sub New(ByVal _pagina As Page, ByVal _alerta_ As Alerta)

Alertas = _alerta

Pagina = _pagina

End Sub

Public Sub New(ByVal _funcao_ As Funcao)

Funcoes = _funcao_

End Sub

Public Sub New(ByVal _pagina As Page, ByVal _funcao_ As Funcao)

Funcoes = _funcao_

Pagina = _pagina

End Sub

Public Property Alertas() As Alerta

Get

Return _alerta

End Get

Set(ByVal value As Alerta)

_alerta = value

End Set

End Property

Public Property Funcoes() As Funcao

Get

Return _funcao

End Get

Set(ByVal value As Funcao)

_funcao = value

End Set

End Property

Public Property Pagina() As Page

Get

Return _pagina

End Get

Set(ByVal value As Page)

_pagina = value

End Set

End Property

Public Sub EnviarAlerta()

EnviarAlerta(Pagina)

End Sub

Public Sub EnviarAlerta(ByVal _pagina As Page)

If _pagina.ClientScript.IsClientScriptBlockRegistered(Alertas.Chave) = False Then

_pagina.ClientScript.RegisterClientScriptBlock(_pagina.GetType, Alertas.Chave, "alert("" & Alertas.Alerta & "");", True)

_pagina.ClientScript.IsClientScriptBlockRegistered(Alertas.Chave)

End If

End Sub

Public Sub EnviarAlerta(ByVal _pagina As Page, ByVal _alerta As Alerta)

Alertas = _alerta

Pagina = _pagina

EnviarAlerta()

End Sub

Public Sub EnviarAlerta(ByVal _pagina As Page, ByVal _chave As String, ByVal _alerta As String)

Alertas.Alerta = _alerta

Alertas.Chave = _chave

Pagina = _pagina

EnviarAlerta()

End Sub

Public Sub EnviarFuncao()

EnviarFuncao(Pagina)

End Sub

Public Sub EnviarFuncao(ByVal _pagina As Page)

If _pagina.ClientScript.IsClientScriptBlockRegistered(Funcoes.Chave) = False Then

_pagina.ClientScript.RegisterClientScriptBlock(_pagina.GetType, Funcoes.Chave, Funcoes.Funcao & ";", True)

_pagina.ClientScript.IsClientScriptBlockRegistered(Funcoes.Chave)

End If

End Sub

Public Sub EnviarFuncao(ByVal _pagina As Page, ByVal _funcao As Funcao)

Funcoes = _funcao

Pagina = _pagina

EnviarFuncao()

End Sub

Public Sub EnviarFuncao(ByVal _pagina As Page, ByVal _chave As String, ByVal _funcao As String)

Funcoes.Chave = _chave

Funcoes.Funcao = _funcao

Pagina = _pagina

EnviarFuncao()

End Sub

End Class

Classe ScriptManagerJS

Imports System

Imports System.Web

Imports System.Web.UI

Imports System.Web.UI.ScriptManager

Public Class ScriptManagerJS

Private _alerta As New Alerta

Private _funcao As New Funcao

Private _pagina As Page

Public Sub New()

Alertas = _alerta

Funcoes = _funcao

Pagina = _pagina

End Sub

Public Sub New(ByVal _alerta_ As Alerta)

Alertas = _alerta_

End Sub

Public Sub New(ByVal _pagina As Page, ByVal _alerta_ As Alerta)

Alertas = _alerta_

Pagina = _pagina

End Sub

Public Sub New(ByVal _funcao_ As Funcao)

Funcoes = _funcao_

End Sub

Public Sub New(ByVal _pagina As Page, ByVal _funcao_ As Funcao)

Funcoes = _funcao_

Pagina = _pagina

End Sub

Public Property Alertas() As Alerta

Get

Return _alerta

End Get

Set(ByVal value As Alerta)

_alerta = value

End Set

End Property

Public Property Funcoes() As Funcao

Get

Return _funcao

End Get

Set(ByVal value As Funcao)

_funcao = value

End Set

End Property

Public Property Pagina() As Page

Get

Return _pagina

End Get

Set(ByVal value As Page)

_pagina = value

End Set

End Property

Public Sub EnviarAlerta()

EnviarAlerta(Pagina)

End Sub

Public Sub EnviarAlerta(ByVal _pagina As Page)

If _pagina.ClientScript.IsClientScriptBlockRegistered(Alertas.Chave) = False Then

ScriptManager.RegisterClientScriptBlock(_pagina, _pagina.GetType, Alertas.Chave, "alert("" & Alertas.Alerta & "");", True)

_pagina.ClientScript.IsClientScriptBlockRegistered(Alertas.Chave)

End If

End Sub

Public Sub EnviarAlerta(ByVal _pagina As Page, ByVal _alerta As Alerta)

Alertas = _alerta

Pagina = _pagina

EnviarAlerta()

End Sub

Public Sub EnviarAlerta(ByVal _pagina As Page, ByVal _chave As String, ByVal _alerta As String)

Alertas.Chave = _chave

Alertas.Alerta = _alerta

Pagina = _pagina

EnviarAlerta()

End Sub

Public Sub EnviarFuncao()

EnviarFuncao(Pagina)

End Sub

Public Sub EnviarFuncao(ByVal _pagina As Page)

If _pagina.ClientScript.IsClientScriptBlockRegistered(Funcoes.Chave) = False Then

ScriptManager.RegisterClientScriptBlock(_pagina, _pagina.GetType, Funcoes.Chave, Funcoes.Funcao & ";", True)

_pagina.ClientScript.IsClientScriptBlockRegistered(Funcoes.Chave)

End If

End Sub

Public Sub EnviarFuncao(ByVal _pagina As Page, ByVal _funcao As Funcao)

Funcoes = _funcao

EnviarFuncao(_pagina)

End Sub

Public Sub EnviarFuncao(ByVal _pagina As Page, ByVal _chave As String, ByVal _funcao As String)

Funcoes.Chave = _chave

Funcoes.Funcao = _funcao

Pagina = _pagina

EnviarFuncao()

End Sub

End Class

Listagem 1. Exibindo codificação do diagrama de classes

Explicarei o que cada classe faz para um melhor entendimento:

Classe Chaves.vb: será uma classe de apoio pois, o seu motivo de existir será que outras duas classes (Alerta e Funcao) herdarão (abstração de dados: Especialização) a sua única propriedade Chave. A propriedade Chave é do tipo String.

Classe Alerta.vb: terá as propriedades Alerta e Chave (herança da classe Chaves.vb) e as duas são do tipo String. Essa classe será utilizada como tipo de dado para as classes ClienteJS.vb e ScriptManageJs.vb (abstração de dados: Agregação).

Classe Funcao.vb: a classe Funcao.vb terá as propriedades Funcao e Chave (herança da classe Chaves.vb) e as duas são do tipo String. Essa classe será utilizada como tipo de dado para as classes ClienteJs e ScriptManagerJs.vb (abstração de dados: Agregação).

Classe ClienteJs.vb: a classe ClienteJS.vb terá as propriedades Pagina que é do tipo Page, e dois tipos de dados que serão das classes Alerta.vb e Funcao.vb respectivamente Alertas (do tipo de dado Alerta - Classe Alerta.vb) e Funcoes (do tipo de dados Funcao - Classe Funcao.vb). Essa classe possuirá métodos de envio de mensagens com várias sobrecargas de métodos que mostrará alerta ou chamará outras funções em Javascript.

Classe ScriptManagerJS: a classe ScriptManagerJS é praticamente igual à classe ClienteJS.vb tendo a diferença que ela executa dentro dos famosos UpdatePanel do Ajax, ou seja, a diferença da classe ClienteJs.vb e ScriptManagerJs é que a ScriptManagerJs você vai trabalhar junto com o ScriptManager e o ClienteJs.vb não precisa.

Criaremos um novo projeto ASP.NET AJAX- Enabled Web Site onde usaremos a DLL compilada do nosso projeto JvScript ( a DLL está localizada na pasta “bin\Debug\JvScript.dll”). Iremos realizar dois testes: um rodando dentro de um UpdatePanel e outro fora do UpdatePanel. A figura 11 exibe o layout da página.

Figura 11. Exibindo o layout da página.

Antes de fazer as codificações nos botões vamos fazer referenciar a nossa DLL (“JvScript.dll”). Veja na figura 12 a estrutura do projeto.

Figura 11. Visualizando a estrutura do projeto.

Agora vamos fazer as duas rotinas dos botões do nosso projeto Web um que está dentro do UpdatePanel ( esse ta com o nome de “Dentro do UpdatePanel”) e o outro fora do UpdatePanel(esse ta com o nome “Fora do UpdatePanel”), mas, antes disso na tag Head da página vamos criar um função básica em Javascript conforme a listagem 2.

Listagem 2. Incluindo função em javascript.

Dê um duplo clique no Botão “Fora do UpdatePanel” e vamos criar sua rotina exemplo de como utilizar a nossa DLL criada para emitir alertas e funções de Javascript. Observe a listagem 3 e 4 a codificação do evento click dos botões e na figura 12 o resultado após o clique dos botões:

Listagem 3. Incluindo codificação no botão BT_ForaUP.

Listagem 4. Incluindo codificação no botão BT_DentroUP.

Figura 11. Visualizando o resultado após o clique do botão BT_ForaUP e BT_DentroUP.

Bom pessoal esse é um simples exemplo de como trabalhar com Classes no Visual Studio.

Fúlvio Cezar Canducci Dias – fulviocanducci@hotmail.com
Fúlvio Cezar Canducci Dias

Fúlvio Cezar Canducci Dias