Artigo Nº 19: Customizando ValidatorCalloutExtender do Ajax Control Toolkit

No artigo Nº 16, foi mostrado como aplicar o componente ValidatorCalloutExtender . Agora vamos mostrar como estilizar esse componente com estilos css. Crie uma nova pasta chamada "estilos", dentro da pasta do projeto da aplicação. Depois abra o bloco de notas ou notepad++ e salve esse arquivo dentro desta pasta com o nome de "estilos.css", daí copie o código abaixo e cole no arquivo. OBS: caso você já tem essa pasta e arquivo, que é usado no Artigo Nº 08, somente adicione o código abaixo.

.validar div, .validar td  /*Formatação do visual da popup(EX: borda e cor de fundo)*/
{border:solid 1px red; background-color:white;}
.validar .ajax__validatorcallout_callout_cell /*Manter padrão*/
{width:80px; height:100%; text-align:right; vertical-align:top; border:none; background-color:transparent; padding:0px;}
.validar .ajax__validatorcallout_callout_table /* Manter padrão */
{height:100%; border:none;background-color:transparent;padding:0px;}
.validar .ajax__validatorcallout_callout_arrow_cell/* Manter padrão */
{padding:8px 0px 0px 0px; text-align:right; vertical-align:top; font-size:1px; border:none; background-color:transparent;}
.validar .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv /* Manter padrão */
{font-size:1px; position:relative; left:1px; border-bottom:none; border-right:none; border-left:none; width:15px; background-color:transparent; padding:0px;}
.validar .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div  /* Manter padrão */
{height:1px; overflow:hidden; border-top:none; border-bottom:none; border-right:none; padding:0px; margin-left:auto;}
.validar .ajax__validatorcallout_error_message_cell /*Formatação do texto dentro da popup */
{font-family:Verdana; font-size:10px; border-right:none; border-left:none; width:100%; color:red; font-weight:bold; text-align:left;}
.validar .ajax__validatorcallout_icon_cell /* Manter padrão */
{width:20px; padding:5px; border-right:none;}
.validar .ajax__validatorcallout_close_button_cell/* Manter padrão */
{vertical-align:top; padding:0px; text-align:right; border-left:none;}
.validar .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv /* Manter padrão */
{border:none; text-align:center; width:16px; height:16px; padding:2px; cursor:pointer;}

Depois de salvar esse estilo, vá para o .aspx da sua página e dentro da tag HEAD, coloque o código sequinte logo abaixo da tag TITLE. Esse é o código responsável por buscar os estilos e aplicar na sua página, caso já tenha, ignore-o.

< link rel="stylesheet" href="./estilos/estilos.css" type="text/css"/>

Feito isso, volte para a página, verifique se a propriedade TargetControlID do componente ValidatorCallout está relacionada com o componente de validação. Se está, selecione esse componente, RegularExpressionValidator, e na janela Object Inspector procure as propriedades Extenders, figura 01. Mas para essas propriedades aparecerem, os dois componentes devem estar interligados.
Agora altere as seguintes propriedades:

CloseImageURL: coloque o caminho de onde o componente buscará a imagem para fechar a popup(se não colocar nada, ficará a imagem padrão);
CssClass: digitar o nome do estilo criado para sua formatação(EX: validar);
WarningIconImageURL: caminho da imagem que é exibida na frente do texto da popup.
Width: Tamanho da popup(em caso da mensagem ser muito grande)


Figura 01:


Para resolver possíveis problemas futuros com esse componente, baixe um arquivo nesse endereço http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx , baixe-o e descompacte-o. Nessa pasta descompactada possui uma dll chamada “Validattors.ddl”. Copie e cole dentro da pasta Bin do seu projeto. Depois no Delphi, adicione nas referências da aplicação, Add Reference, buscando da pasta Bin. Na Web.Config, adicione o código da listagem 2, dentro da tag "pages" que está dentro da tag "system.web" .
Listagem 2: TagMapping

Veja o resultado na figura 2.

Figura 02:



Abraço e até a próxima.