Criando um componente data em DLL

[Lab Design 0]

Como eu tenho muitas dúvidas e acredito que muita gente também tenha vou postar o que já consegui assimilar sobre o uso de componentes em aspx numa página web.

 

1) Abra o Visual Studio em Projects e a seguir abra a pasta Visual C# e escolha o Template Class Library

2) Dê um nome ao projeto e selecione uma pasta para gravá-lo.

3) O VS cria o ambiente já com algumas referências que voce pode verificar na pasta References do Solution Explorer

4) Para este exemplo usaremos um TextBox herdado do WebControls, para termos acesso a ele precisamos referenciar a class System.web.

- Clique com o botão direito do mouse sobre a pasta References e a seguir Add Reference

- Com a aba .NET selecionada, desça a barra de rolagem até localizar a dll System.Web e dê um duplo clique nela. Veja que ela é incluída na pasta References

 

5) Agora partimos para a class propriamente dita: (arquivo class.cs)

- coloque no header:

 

using System;

using System.ComponentModel;

using System.Web.UI;

using System.Web.UI.WebControls;

obs.: Caso na pasta References não esteja a System.Web, você não terá acesso aos três últimos componentes. Neste caso, importe-a primeiro antes de continuar como descrito no passo 4.

 

namespace da nossa classe. Eu chamei de DataBox porque é um textbox exclusivo para data.

A linha abaixo da namespace eu ainda nao entendi o que ela significa mas acho que é algo relacionado a voce puxa-la da toolbox porque é exatamente isso que aparece na pagina aspx quando colocamos o objeto la.

namespace MeusComponentes.DataBox

{

[DefaultProperty("Text"), ToolboxData("<{0}:DataBox runat=server Text=99/99/9999></{0}:DataBox>")]

 

Sobre o código abaixo:

Category: é nome do grupo quando você abre propriedades do objeto e portanto lá vai aparece o que texto que você coloca dentro da Category e logo abaixo tem o campo Mensagem onde você poderá colocar a mensagem de erro para o usuário. e abaixo o metodo para recuperar ou colocar uma texto para mensagem.

 

private string msgErr;

[bindable(true), Category("LabDesign"), DefaultValue("Mensagem")]

 

public string Mensagem

{

get { return msgErr; }

set { msgErr = value; }

}

agora precisamos sobrepor o methodo OnPreRender do textbox.

O Page.RegisterClientScriptBlock registra o script js e para as duas funcoes em js ele usa o final com o nome que voce informar no ID do componente no aspx.

Ex.: ID="minhaData" a funcao ficará format_minhaData() e a de validação ficará check_minhaData()

 

Page.RegisterClientScriptBlock tem dois parâmetros: o primeiro deve ser o identificador e o segundo é o script js.

Observe que foi usado o "@" para concatenar as strings, isso facilita muito pois num precisa ficar fazendo "+ toda hora ao passar de uma linha para outra.

 

Abaixo tem o scritp js que formata a data na entrada ou seja, voce coloca 01 ele já acrescenta a "/", coloca mais dois digitos ele coloca a outra "/" e ao clicar em outro campo ele aciona o evento onblur que chama a função pra validar a data. Caso a data entrada esteja incorreta por exemplo: 31/02/2008, ele vai emitir um alerta, buscando usando o texto informado no campo Mensagem.

 

Por fim, ele efetua as atribuições ao novo componente como setar o maxlength, mudar a cor de fundo, restaurar a cor de fundo no blur caso a data entrada esteja correta.

So não descobri porque ele não restaurou o background do textbox no onblur.

 

protected override void OnPreRender(EventArgs e)

{

Page.RegisterClientScriptBlock("TxtBoxData" + this.ID,

@"<script language=javascript>

<!--

// função para formatar Data

 

function format_" + this.ID +@"(e)

{

var code;

if (!e) var e = window.event;

if (e.keyCode) code = e.keyCode;

else if (e.which) code = e.which;

var character = String.fromCharCode(code);

if(code==8)

{}

else

{

if(code > 95 && code < 104)

{

//-------------

var conteudo;

conteudo = document.getElementById('"+ this.ID +@"').value;

len=conteudo.length;

if(len==2 || len==5)

{

conteudo = conteudo + '/';

document.getElementById('"+ this.ID + @"').value = conteudo;

}

}

else

{

event.keyCode = 0;

}

}

}

 

 

/* ************************************

Criado por : Flavio Theruo Kaminisse

email: falecomjaps@gmail.com

url: http://www.japs.etc.br

Data Criao : 30/08/2005

- Compativel com MSIE e Firefox.

**************************************/

 

//Funcao que valida a data

function isValid_"+ this.ID +@"() {

var date = document.getElementById('" + this.ID + @"').value;

var array_data = new Array;

var ExpReg = new RegExp('(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[012])/[12][0-9]{3}');

//vetor que contem o dia o mes e o ano

array_data = date.split('/');

erro = false;

//Valido se a data esta no formato dd/mm/yyyy e se o dia tem 2 digitos e esta entre 01 e 31

//se o mes tem d2 digitos e esta entre 01 e 12 e o ano se tem 4 digitos e esta entre 1000 e 2999

if ( date.search(ExpReg) == -1 )

erro = true;

//Valido os meses que nao tem 31 dias com execao de fevereiro

else if ( ( ( array_data[1] == 4 ) || ( array_data[1] == 6 ) || ( array_data[1] == 9 ) || ( array_data[1] == 11 ) ) && ( array_data[0] > 30 ) )

erro = true;

//Valido o mes de fevereiro

else if ( array_data[1] == 2 ) {

//Valido ano que nao e bissexto

if ( ( array_data[0] > 28 ) && ( ( array_data[2] % 4 ) != 0 ) )

erro = true;

//Valido ano bissexto

if ( ( array_data[0] > 29 ) && ( ( array_data[2] % 4 ) == 0 ) )

erro = true;

}

if ( erro ) {

alert('" + msgErr + @"');

document.getElementById('"+ this.ID + @"').focus();

return false;

}

 

document.getElementById('" + this.ID + @"').style.background='#ffffff';

return true;

}

 

 

-->

</script>");

this.Attributes.Add("MaxLength", "10");

this.Attributes.Add("onfocus", "this.style.background='#efefef'");

this.Attributes.Add("onkeyup", "return format_" + this.ID + "(this.event);");

this.Attributes.Add("onblur", "return isValid_" + this.ID + "();");

base.OnPreRender(e);

}

}

 

abaixo o codigo completo em c# e o aspx

 

using System;

using System.ComponentModel;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace MeusComponentes.BotaoAlerta

{

[DefaultProperty("Text"), ToolboxData("<{0}:BotaoConfirmar runat=server Text=MeuBotao></{0}:BotaoConfirmar>")]

public class botaoConfirmar: System.Web.UI.WebControls.Button

{

private string strMensagem;

[bindable(true), Category("Raptors"), DefaultValue("Mensagem")]

 

public string Mensagem

{

get { return strMensagem; }

set { strMensagem = value; }

}

 

protected override void OnPreRender(EventArgs e)

{

Page.RegisterClientScriptBlock("btnAlerta" + this.ID,

"<script language=\"javascript\"> \n" +

"<!-- \n" +

"function Confirma" + this.ID + "(btnAlert) { \n" +

"if (confirm(\"" + strMensagem + "\")) { \n" +

" btnAlert.setAttribute(\"value\",\"Aguarde...\"); \n" +

" document.body.style.cursor=\"wait\"; \n" +

" return true; \n" +

"} return false; } \n" +

"--> \n" +

"</script> \n");

this.Attributes.Add("onclick", "return Confirma" + this.ID + "(this);");

base.OnPreRender(e);

}

}

}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<%@ Register Assembly="DataBox" Namespace="MeusComponentes.DataBox" TagPrefix="cc2" %>

 

 

<%@ Register Assembly="botao" Namespace="MeusComponentes.BotaoAlerta" TagPrefix="cc1" %>

 

 

<!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 runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<cc2:DataBox ID="data" runat="server" Text="99/99/9999" Mensagem="Você digitou uma data inválida. \nPor favor preste mais atenção" ></cc2:DataBox>

<cc1:botaoConfirmar ID="btnConfirma" runat="server" Text="MeuBotao" />

</div>

</form>

</body>

</html>

[quintelab 91]

Lab sei que você ta ralando pra conseguir desenvolver este componente, bom que esta conseguindo e o melhor compartilhando.

Continue o bom trabalho vélinho. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços...

[Lab Design 0]

valeu brother,

 

agora já clareou mais as coisas aqui e vou partir pra outros componentes que são o cep, o email e cpf e cnpj.

depois eu posto aqui.

 

A propósito só pra lembrar esse componente já pertence à minha toolbar e portanto num esquento mais a cabeça com js ou colocar os add.atribute no codebehind