ASP.NET - Configurando a exibição do Datagrid

A princípio a exibição de um controle Datagrid é bem "tosca". Mas com algumas tags de formatação, a coisa pode melhorar. No exemplo do post anterior substitua a tag asp:DataGrid pelo conteúdo abaixo:

A tag HeaderStyle se refere à primeira linha (a dos títulos das colunas). Uma das falhas deste controle é não produzir tags TH para as colunas dos títulos, o que seria mais correto e de acordo com o padrão W3C. A linha de títulos é uma TR com TDs como qualquer outra linha de dados.

A tag ItemStyle se refere às demais linhas de registros da tabela. Novamente se percebe uma falha gravíssima. Cada linha tem os estilos de ItemStyle repetidos. O correto seria estes possuírem uma referência à uma classe CSS, e esta sim seria definida para fazer a formatação desejada. Falha da Microsoft.

Compatibilidade com jQuery

O jQuery (biblioteca javascript do MIT) oferece infra-estrutura para implantar uma outra biblioteca de manipulação de tabelas: o tablesorter. Como a formatação do DataGrid não obedece ao padrão W3C, a implantação de sua funcionalidade tem que ser feita utilizando o código VBscript de produção dos códigos da tabela de forma a obedecer ao W3C, o que implica em perder a formatação compacta e sucinta do DataGrid. No entanto, o tablesorter tem a vantagem de fornecer as funcionalidades em tempo de cliente, com eficiência muito maior.

ASP.NET - Exemplo de Datagrid

O Datagrid é o controle mais sintético e útil para exibir o conteúdo de tabelas de bancos de dados.

Início da Script ASPX

Carrega as bibliotecas e abre a script VB:

Declara a Subrotina Page_Load e faz as configurações de parâmetros:

* 1 * - Nome do servidor, nome do compartilhamento no servidor e nome do banco Access;
* 2 * - Nome da tabela.

A montagem da sentença SQL depende dos nomes dos campos da tabela. Na figura mostramos alguns exemplos de nomes comuns, mas você deve usar os nomes dos campos da sua tabela.

Finalizamos com as tags HTML e com a tag asp:DataGrid.

Ligando duas DIVs com um conector sem HTML5

Os gráficos e diagramas estão ganhando muita importância nas páginas Web. Estamos em um mundo essencialmente visual.

Criar retângulos, boxes e regiões retangulares com DIVs já é uma rotina nas páginas de Internet. No entanto, um aspecto do uso destas DIVs se torna um problema de geometria: a conexão com linhas. Como é que, sem o HTML5, podemos desenhar linhas de conexão ?

O diagrama do problema

Observe a figura a seguir. Ela mostra as grandezas geométricas envolvidas neste problema.

Início da página HTML:

* 1 * - A DIV da classe Conecta é um conector, ou seja, um traço. No Internet Explorer, para que o traço não acabe se tornando um retângulo com alguma altura, é preciso definir o tamanho do fonte como 1 pixel;

* 2 * - Com o mesmo intuito de *1*, garantimos que o traço não terá altura, anulando a altura da linha.

Scripts

Função javascript que cria uma DIV programaticamente (criaDiv):

É preciso usar a biblioteca jquery, que torna todas as tarefas de programação mais fáceis em torno da ponte entre as TAGS e o código javascript.

Função javascript que cria um conector - Parte I

Função javascript que cria um conector - Parte II

Função javascript que cria um conector - Parte III

O código HTML produzido é colocado dentro da DIV cujo Id é "main".

Finalização das funções

Em se tratando  de um javascript, temos que garantir que o HTML da página foi todo lido:

NÃO ESQUEÇA DE FECHAR A ÚLTIMA FUNÇÃO ABERTA COM "}".

ASP.NET - Integração com jQuery

O ASP.NET cria o seu próprio modelo de controles e de eventos. A pergunta é:

Podemos utilizar jQuery com ASP.NET ?

Sim, não existe conflito de eventos, basta colocar as coisas nos lugares certos e nos tempos corretos. Veja o exemplo:

Como o ASP.NET utiliza tags <asp:, parece que não existe o INPUT. E como precaução, prefira fazer a referência pelo ID do controle, ao invés de utilizar o nome da Tag HTML com algum atributo (Id, name). Desta forma, você evita dores de cabeça.

Primeiro programa em ASP.NET usando VB - Hello World

O VB é uma linguagem menos tipada e menos complexa que o C#. Podemos fazer classes utilizando VB, da mesma forma que em C#, no entanto elas são mais compreensíveis.

O formulário de entrada de dados é praticamente o mesmo, exceto pela definição da linguagem de programação:

Script AspNet_C_003.aspx

Biblioteca de classe AspNet_C_aspx.vb

* 1 * - Mesmo nome referenciado pelo atributo Inherits da tag "@Page";
* 2 * - Nome da rotina que trata o evento, composto de [ID do controle]_[Nome do Evento];
* 3 * - Nome da rotina, composta de [ID do controle].[Nome do Evento].

Programa básico em ASP.NET com C# - separação da classe

A forma mais estruturada de trabalhar com ASP.NET e C# é utilizar dois arquivos:

• Um com a UI (User Interface - Interface do usuário);
• Outro com as classes e funções utilizadas pela UI.

A seguir mostramos o exemplo.

Arquivo com a classe principal e funções (AspNet_C_002.aspx.cs):

* 1 * - O nome da classe é "_botao" para fins de referência ao código;

* 2 * - O nome do evento deve lembrar o nome do objeto visual, para facilitar as manutenções no código;

* 3 * - O controle cujo ID é "Texto" terá sua propriedade Text alterada;

Arquivo com a UI (Interface do usuário)(AspNet_C_002.aspx)

* 4 * - O nome do arquivo de códigos é AspNet_C_002.aspx.cs;
* 5 * - Em inherits, colocamos o nome da classe que consta no arquivo de classes e funções;
* 6 * - O nome da função que manipula o evento OnClick é Button_Click, contida em (AspNet_C_002.aspx.cs);
* 7 * - O nome do controle que terá seu texto modificado pela função Button_Click é "Texto";

Primeiro programa em ASP.NET usando C# - Hello World

Já vimos em post anterior um Hello World em ASP.NET utilizando o VBscript como linguagem de construção. Agora vamos ver o mesmo programa usando o C# como linguagem:

* 1 * - Na diretiva "Page" o programa declara que a linguagem usada é o "C#";

* 2 * - As variáveis precisam ser declaradas e tipadas;

* 3 * - O sinal de concatenação é o "+" e não o "&" como em VB.

Primeiro programa em ASP.NET - Hello World

Modelo mínimo de scripts para compreender as chamadas e o processamento de páginas em ASP.NET.

Primeiramente é preciso associar no servidor IIS (de preferência acima de 7.0) um usuário ao ASP.NET. Este é o usuário que será responsável pelas requisições ASP.NET. Em seguida, é preciso ajustar as propriedades do diretório virtual no IIS para que ele aceite as chamadas ASP.NET. Isto é feito associando este usuário ao diretório físico (pelo Windows Explorer).

Modelo

Diferentemente do ASP clássico, no .NET o programador tem que se preocupar com as bibliotecas a serem carregadas, dependendo dos comandos utilizados. A primeira e mais importante é a "System.IO", cujo nome já sugere que ela é responsável pelas entradas e saídas (Request, Response, entrada e saída para arquivo).

Não existem instruções soltas pelo código. Todas precisam estar dentro de eventos (Sub).

Todas as variáveis tem que ser declaradas através da instrução Dim.

Algumas bibliotecas mais importantes:

System.Data - Base das funções que manipulam o modelo ADO (Acesso a dados)
System.Data.Common - Funções comuns da camada de dados do ADO
System.Data.Odbc - Funções do ADO que manipulam ODBC
System.Data.OleDb - Funções do ADO que manipulam OLEDB
System.Net.Mail - Funções para uso do modelo SMTP (email)
System.Numerics - Complementa os tipos numéricos default do ASP.NET
System.Text - Funções que manipulam ASC e UNICODE
System.Web - Fornecem os elementos dos objetos HTTPRequest e HTTPResponse
System.Windows.Forms - Encapsulamento dos controles visuais Windows
System.Windows.Forms.Design - Suporte à configuração de controles visuais no momento de projeto

Redirecionamento de página em ASP

Certas checagens de parâmetros, senhas, variáveis de sessão e outros, são necessárias antes de mostrar uma página. Uma vez feitas estas checagens, é feito um REDIRECIONAMENTO para a página que realmente corresponde à tarefa em si.

A seguir, um modelo de redirecionamento


<%
Ip1 = "10.1."
Ip2 = "10.3."
IPdoCliente = Request.ServerVariables("REMOTE_ADDR")
Response.write IPdoCliente
if left(IPdoCliente,5) = Ip1 or left(IPdoCliente,5) = Ip2 then
Response.redirect "http://servidor/diretorio_virtual_Web/Pagina.htm"
else
Response.write "<H2>IP inválido para visualização da página.</H2>"
end if
%>

Neste caso, o programador condicionou o redirecionamento a dois tipos de endereço IP correspondentes às subredes de sua empresa. Do contrário, aparecerá a mensagem de que o IP é inválido para visualização.

Detectando o clique do botão direito do mouse em Javascript

Os menus de contexto personalizados em páginas HTML são fundamentais para que se tenha o controle completo do comportamento da aplicação destas páginas.

Para fazê-lo, precisamos interceptar os eventos do mouse. A seguir temos um exemplo bem simples desta interceptação:

Existem dois pontos a se considerar para o controle do mouse e do menu de contexto dos navegadores. O ponto * 1 * contém a função de tratamento do evento citado no ponto * 2 *, que declara o evento onmousedown.

Executando a script (em formato de página HTML), e dando o clique direito do mouse, aparece a mensagem do comando alert:

Portanto, a propriedade button do evento de mouse corresponde a "2" para o botão direito do mouse. O botão esquerdo traz o valor "1".

Exemplo mostrando um menu de contexto bem básico

No ponto * 1 * declaramos a função init(). Nela declaramos a interceptação do evento "onmousedown", que se refere à função contextMenu.

No ponto * 2 * declaramos a função fecha() que vai fechar a janela de contexto da DIV cujo id é "menu".

No ponto * 3 * declaramos a função contextMenu(), que trata eventos provocados pelos botões do mouse. Se o botão for o direito, ela mostra a DIV cujo id é "menu".

No ponto * 4 *, interceptamos o evento "oncontextmenu", de modo que o menu de contexto default do navegador não seja apresentado (com as funções de copiar, colar, imprimir, etc).

Valores separados por vírgulas - Separar com expressões regulares

Uma das formas de compor uma lista muito limitada em número de ocorrências é usar uma string.

Quando existem muitas ocorrências (mais de 50) compensa criar uma tabela em banco de dados. Depois é preciso ter uma forma de separar os valores contidos nesta lista. O exemplo a seguir explica isto:

Consistência de data com expressões regulares em Javascript

A consistência de data em javascript se resolve com uma expressão regular com número de ocorrências, evitando o lugar comum de [\d+]\/[\d+]\/[\d+], que pode admitir muitos formatos errados.

Os numerais entre chaves especificam o número de ocorrências esperado para a máscara em questão.

Alternando estilos CSS em jquery

Em jquery podemos facilmente alternar estilos das Tags HTML por meio de funções.

Lembre-se de colocar no diretório a biblioteca jquery correta:

* 1 * - Função que responde pelo clique do botão no corpo do HTML;
* 2 * - Definição da função no evento do botão (OnClick).

Geração de números aleatórios com ASP sem Rnd

A função Random em ASP (Rnd) gera números aleatórios, bem como o método Math.Random faz o mesmo em javascript. No entanto, para fins de auditoria, é preciso explicitar qual o algoritmo que existe por trás do cálculo dos números aleatórios obtidos.

Para esta finalidade, temos um método totalmente transparente, desde a semente de número aleatório utilizada, expressa no código abaixo:


<style>
SPAN.vm { color:red; }
</style>
<%
NO_MAX = 80
QtNoGerar = 12
'* Declarações de variáveis
Dim RaizNumeroAleatorio
Dim DtHoje, Agora
Dim Dia, Mes, Ano, Hora, Minuto, Segundo
Dim sNUMERO_ALEATORIO,NUMERO_ALEATORIO
Dim intNoAleat
Dim Arranjo()
ReDim Arranjo(QtNoGerar)
'* Obtenção parâmetros raiz
DtHoje = Date()
Agora = Time()
'* Obtenção fragmentos de parâmetros
Ano = year(DtHoje):Mes = Month(DtHoje):Dia = Day(DtHoje)
Hora = Hour(Agora):Minuto = Minute(Agora):Segundo = Second(Agora)
'* Concatena parâmetros de data e hora
if Application("PSpca_RandomDec") = "" then
RaizNumeroAleatorio = CDbl(Segundo&Dia&Mes&Ano&Hora&Minuto)
RaizNumeroAleatorio = RaizNumeroAleatorio + 3.141592653589
else
RaizNumeroAleatorio = CDbl(Application("PSpca_RandomDec"))
end if
Response.write("Raiz Inicial: "&RaizNumeroAleatorio)
%>
<table border=1 cellspacing=0>
<th>Indice<th>Pré-Expoente<th>Matriz<th>Matriz⁸<br>(Parte fracionária)<th>Número Sorteado<th>STATUS
<%
j = 0
Do while j < QtNoGerar
'* 1 - Exibe a Raiz do número aleatório modificada
Response.write("<tr><td align=right>"&CStr(j)&"<td align=right>"&RaizNumeroAleatorio)
intNoAleat = CDbl(FormatNumber(CStr(RaizNumeroAleatorio),0))
'* 2 - RETIRA A PARTE FRACIONÁRIA
NUMERO_ALEATORIO = RaizNumeroAleatorio - intNoAleat
'* 3 - SOMA UM PARA QUE O NUMERO PRODUZIDO NÃO REDUZA CADA VEZ MAIS A MANTISSA (tendendo ao valor zero)
NUMERO_ALEATORIO = NUMERO_ALEATORIO + 1
'* 4 - Exibe o número aleatório produzido
Response.write("<td align=right>"&NUMERO_ALEATORIO)
'* 5 - Eleva a matriz ao expoente 8
NUMERO_ALEATORIO = NUMERO_ALEATORIO ^ 8
'* 6 - PARTE INTEIRA
intSorteio = CDbl(FormatNumber(CStr(NUMERO_ALEATORIO),0))
'* 7 - Devido a erros de arredondamento, a subtração pode ficar ligeiramente negativa, portanto é retirado o sinal
Sorteio = Abs(NUMERO_ALEATORIO - intSorteio)
'* 8 - Exibe o número sorteado (parte fracionária)
Response.write("<td align=right>"&Sorteio)
'* 9 - Multiplica a mantissa pelo número limite de Sorteio, e soma 1, para evitar que o número sorteado seja 0 (zero)
sSorteio = FormatNumber(CStr(Sorteio * NO_MAX)+1,0)
'* 10 - Exibe o número Sorteado em formato inteiro
Response.write("<td align=right>" & sSorteio & "")
'* 11 - Guarda a mantissa como próxima raiz de número aleatório
RaizNumeroAleatorio = Sorteio 'NUMERO_ALEATORIO
JaExiste = (0=1)
'* 12 - Checa se o número sorteado já foi gerado anteriormente
for i = 1 to j
if sSorteio = Arranjo(i) then
JaExiste = (0=0)
i = QtNoGerar
end if
next
if JaExiste then
JaExiste = "<span class=Vm>JaExiste</span>"
else
j = j + 1
Arranjo(j) = sSorteio
JaExiste = ""
end if
'* 13 - Exibe o Status do número gerado (Se ja existe ou não)
Response.write("<td align=right>"&JaExiste)
loop
%>
</table>
<%
Application("PSpca_RandomDec") = CStr(RaizNumeroAleatorio)
%>

Os números são gerados até que alcancem o número de números pedidos, SEM QUE NENHUM SE REPITA.

Verificação de digitação em campo Data - Javascript

Formulário de entrada da data em HTML

 

O tratamento dos dados do formulário se dá em dois pontos.

Os caracteres digitados, um a um, são tratados pelo evento "onKeyUp" do campo de INPUT "Dt". A função que faz este tratamento é "data_onChange()".

Quando o formulário estiver pronto, e o operador pressionar o botão de "submit" (se o formulário contiver um) ou a tecla ENTER, o evento "onSubmit" vai ser acionado. Este evento é tratado pela função "form_onSubmit()".

A função form_onSubmit de tratamento do evento onSubmit

* 1 * - Colocação do zero à esquerda de números, quando estes forem menores que 10 (vale para dias e meses);
* 2 * - Arranjo com o número máximo de dias de cada mês. Fevereiro é declarado como 29;
* 3 * - Máscara final de data: 3 grupos de números separados por barra ("/");
* 4 * - Construção final da data, inclusive com a inversão mês e dia, característica dos formatos internacionais.

A função data_onChange de tratamento do evento onKeyUp

* 5 * - Máscara que admite letras (maiúsculas e minúsculas);
* 6 * - Previne a digitação de caracteres estranhos no início da data (operador pode esbarrar numa tecla);
* 7 * - Previne a digitação de caracteres estranhos no meio da data (pelo mesmo motivo);

* 8 * - Define as três máscaras válidas enquanto se digita uma data. A verificação deve ir da mais completa até a mais incompleta, senão qualquer coisa é aceita.

Ao final destas rotinas, feche a tag SCRIPT. O formulário deve vir ABAIXO das scripts.

Os eventos da Tag "A" - Abordagem jQuery (Events)

Listagem da Script HTML

A abordagem para explicar estes eventos serão feitas sob o ponto de vista da Biblioteca jQuery, pois ela possui um modelo muito eficiente para lidar com eventos.

Ao executarmos a script, temos a tela:

Passe o mouse sobre os números à esquerda da tela, e clique em um deles (por exemplo o 3):

Ao passar o mouse (mouseover), é mostrada a posição Y do eventos abaixo dos números.

Ao clicar em 3 (ou qualquer número da esquerda), aparece o display do comando alert do javascript.

Posteriormente ...

É mostrada a posição Y do click (mousedown) e o conteúdo do atributo rel (Reg3).

Em jQuery, o click é suprido pelo evento mousedown.