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.

Artigo Nº 16: Usando Validator Callout Extender do Ajax Control Toolkit em suas Aplicações com o Rad Studio 2007

Nesse artigo, trabalharemos com mais um componente do Ajax Control Toolkit, o ValidatorCalloutExtender, cuja função é exibir as mensagens dos componentes da Web Validation (CompareValidator, RegularExpressionValidator, RequireFieldValidator, CustonValidator, RangeValidator).

Neste exemplo utilizaremos o RegularExpressionValidator, responsável por validar valores informados em um TextBox. Ex: Data e Hora.

Seguindo, arraste para sua página um TextBox, o RegularExpressionValidator, e o ValidatorCalloutExtender.

OBS: Para aprimorar sua aplicação, veja o Artigo Nº 5 e 8.

Aplique as configurações no RegularExpressionValidator:

ID: Coloque um nome mais simples(Ex: revData).

ErroMessage: Uma mensagem de erro(Ex: Data Inválida).

Display: Marque a opção None, ou seja, opção que não permitirá exibir a mensagem de erro no próprio componente.

ControlToValidator: Selecione o nome do TextBox para o controle.

ValidationExpression: Coloque a expressão seguinte para que seja feita a validação para o formato de data dd/MM/yyyy:

^(((((0[1-9])(1\d)(2[0-8]))\/((0[1-9])(1[0-2])))((31\/((0[13578])(1[02])))((2930)\/((0[1,3-9])(1[0-2])))))\/((20[0-9][0-9])(19[0-9][0-9])))((29\/02\/(1920)(([02468][048])([13579][26]))))$

Para o componente ValidatorCalloutExtender, a única propriedade a ser configurada é a TargetControlID, onde deve-se selecionar qual é o RegularExpressionValidator para o seu controle

OBS: Sempre lembrando que os componentes do Ajax Control Toolkit devem ficar dentro do UpdatePanel.

Compile e digite uma data inválida e veja o resultado(Figura 1).

Figura 1:

Show de Bola. No próximo post, customizando com CSS esse componente.

Valeu. Até a próxima.

Artigo Nº 08: Customizando Calendar Extender com CSS no Rad Studio 2007

No Artigo Nº 05, foi comentado como aplicar o componente Calendar Extender do pacote Ajax Control Toolkit, agora vamos customizar o layout dele com estilo CSS.

Para começar, 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 dessa pasta com o nome de "estilos.css", depois copie o código abaixo e cole no arquivo.

.calendario .ajax__calendar_container /*formatação da parte externa de onde encontra-se o corpo do calendário */

{background-color:#8080FF; border:solid 1px #004000;}

.calendario .ajax__calendar_header /*formatação do cabeçalho*/

{background-color:#ffffff; margin-bottom:3px; border:solid 1px #004000; width:170px;}

.calendario .ajax__calendar_title /*formatação do texto que encontra-se no cabeçalho*/

{color:black;}

.calendario .ajax__calendar_body /*formatação interna de onde se encontra o calendário(onde estão os dias do respectivo mês)*/

{background-color : white ;border : solid 1px #004000 ;}

.calendario .ajax__calendar_dayname /*formatação da descrição dos dias da semana*/

{text-align : center ; font-weight : bold ; margin-bottom : 4px ;margin-top : 2px ;color : blue;}

.calendario .ajax__calendar_day /*formatação dos dias do mês*/

{text-align : center ;color: black;}

.calendario .ajax__calendar_hover .ajax__calendar_day /*formatação para quando passar o mause sobre um determinado dia*/

{color: red;}

.calendario .ajax__calendar_hover .ajax__calendar_month /*formatação para quando passar mause sobre um determinado mês*/

{color: red;}

.calendario .ajax__calendar_hover .ajax__calendar_year /*formatação para quando passar o mause sobre um determinado ano*/

{color: red;}

.calendario .ajax__calendar_active /*formatação do dia, quando já possui uma data no textbox de controle*/

{background-color: #D4D0C8 ;font-weight : bold ; }

.calendario .ajax__calendar_today /*destaque para a data atual(Today)*/

{ font-weight : bold ; color : black;}

.calendario .ajax__calendar_other .ajax__calendar_day/*formatação dos dias que não pertencem ao mês selecionado*/

{color:#6A5ACD;}

.calendario .ajax__calendar_hover .ajax__calendar_today /*formatação para quando passar o mouse sobre a data atual(Today)*/

{color: #FFFFFF}

.calendario .ajax__calendar_hover .ajax__calendar_title /*formatação para quando passar o mouse sobre o texto do título*/

{color : red ; }

Salve e depois vá para o .aspx da página que você está utilizando o componente e dentro da tag HEAD, coloque o código seguinte logo abaixo da tag TITLE. Esse é o código responsável por buscar os estilos e aplicar na sua página.

Agora no design da página, selecione o componente CalendarExtender e na propriedade CssClass digite calendario, nome dado ao estilo. Daí só compilar e ver o resultado.

Mais detalhes, veja a edição 99 da revista ClubeDelphi.

Artigo Nº 05: Usando Calendar Extender e Mask Edit do Ajax Control Toolkit no Rad Studio 2007

Adicionar os componentes ScriptManager e UpdatePanel na página.

Selecionar o ScritManager e alterar para True as propriedades EnableScriptGlobalization e EnableScriptLocalization no Object Inspector.

Alterar ou adicionar na Web.config o termo "GLOBALIZATION" por "<globalization culture="pt-BR" uiCulture="pt-BR"/>" (para traduzir o calendário em português).

Abrir o arquivo .aspx verifique se a tag "head" está como runat="server", caso não esteja, coloque-a.

OBS: o código do head deve ser alterado para todas as páginas, indiferente se terá ou não CalendarExtender.

CALENDÁRIO

Quando clicar no textbox:

Adicionar um TextBox, depois o componente CalendarExtender(para isso deve estar instalado o Ajax Control Toolkit), não precisa ser necessariamente ao lado do textbox, e sim no fim dos layout, mas dentro do UpdatePanel, isso porque o componente, no Delphi não no navegador, ocupa um espaço e assim desconfigurando o visual

Selecione o CalendarExtender e altere as seguintes propriedades:

targetcontrolid=(nome do textbox que receberá a data selecionada)

format=dd/MM/yyyy (formato da data)

firstdayofweek=Sunday (qual será o primeiro dia da semana que exibirá no calendário)

popupPosition = Rigth (como o calendário será exibido)

Quando quer colocar uma imagem para exibir o calendário:

Faça tudo da mesma forma que a de anterior

Coloque o componente ImageButton e o nome do ImageButton, colocar na propriedade PopupButtonID do "CalendarExtender".

MÁSCARA

Adicionar o componente "MaskEditExtender" da mesma forma que o "CalendarExtender" e alterar as seguintes propriedades:

TargetControlID= selecionar o textbox de controle

Selecione o TextBox e no objector Inspector procure as propriedade Extenders e altere as seguintes propriedades:

mask="99/99/9999"

masktype="Date"

No próximo artigo estaremos mostrando estilos CSS para o componente CalendarExtender;