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º 07: Exemplo de Paginação GridView

Para criar uma paginação em uma GridView, adaptar o código abaixo:

Artigo Nº 06: Função Javascript para ver Elefantes

Só pra ter uma noção de como é fácil ver elefantes... :]

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;

Artigo Nº 04: Trabalhando com datas no Delphi .NET usando DateUtils

Uma dica muito útil para quem precisa realizar diversos cálculos com datas, seja de dias, semanas e demais.
De início declare na uses a biblioteca: DateUtils, esta possibilita várias funções de cálculo de datas, segue um exemplo de cálculo de dias, onde temos a data atual e queremos somar a mesma com determinado valor de dias:
No load da página, preencho o label com a data atual:
Label3.Text := DateTime.Now.ToString('dd/MM/yyyy');
Coloco um TextBox e outro Label onde visualizarei o resultado do cálculo, e tb um button. No click do Button vai o seguinte:
Label4.Text := IncDay(convert.ToDateTime(Label3.Text),Convert. ToInt16(TextBox1.Text)).ToString;

Existem diversas outras funções desta biblioteca, que com certeza serão uteis algum dia.

Abraço e até a próxima!

Artigo Nº 03: Exibir um somatório no rodapé da datagrid

Bom... No meu primeiro post estarei disponibilizando um tutorial de como exibir o somatório de um campo do banco de dados no rodapé de uma DATAGRID, como por exemplo um campo salário. Para começo deve-se criar uma função do tipo String por exemplo : Soma : String; E nela adicionar o seguinte os comandos para realizar uma função de consulta com um command no nosso caso bdpComman e nele especificar a conexão que será utilizada para acessar o banco de dados. Segue-se o código.

bdpCom := BdpCommand.Create('SELECT SUM(HORAS) AS FEITAS FROM HORAS WHERE BOLSA = ?', Dados.CONEXAO);
try
bdpCom.Parameters.clear; // Limpa os parâmetros.
bdpCom.Parameters.Add('BOLSA', BdpType.&String); //Adiciona um parâmetro.
//====================================
bdpCom.Parameters['BOLSA'].Value := BOLSA; //Da um valor para o parâmetro criado.
bdpRead :=bdpCom.ExecuteReader;

if bdpRead.read then//Se o reader tiver algo nele, retorna o seu valor se não retorna 0.
Result := bdpRead['FEITAS'].ToString
else
Result := '0';
finally
bdpCom.free; // Libera da memória
bdpRead.free;
end;

Onde o deve-se utilizar o comando ExecuteReader do bdpCommand no componente bdpRead, e após isto uma simples verificação para ver se retornou algo da consulta onde foi realizada um SUM(CAMPO), sempre é claro lembrando de liberar da memória os componentes (após o finally). E retornando no Result a variavel dbpRead[‘FEITAS’] que é o nosso dbpReader. Após isto, vá na DataGrid e habilite a opção ShowFooter para exibir o rodapé. Agora adicione o evento ItemDataBound na DataGrid para que quando esteja sendo desenhado cada linha ele efetue o comando desejado.

Neste evento deve-se adicionar o seguinte comando:

if e.Item.ItemType = ListItemType.Footer then // Se estiver no rodapé executa
e.Item.Cells[7].Text := Soma (Session['BOLSA'].ToString);

Primeiro se verifica se na hora de desenhar ele esta no rodapé, se sim ele joga para a coluna 7 o valor retornado pela nossa função, abaixo esta a foto do resultado final, é claro que o resto dos campos espera-se que sejam criados manualmente, alias uma ultima coisa.... Isto não funcionará caso exista paginação na datagrid pois na função ele trás logo o total e não o total das linhas que estão aparecendo.

Bom, creio que seja isto.... Até mais!

Artigo Nº 02: GridView em DELPHI .NET

Olá a todos!

Este tutorial é sobre GridView em RAD Studio .NET, ASP.NET.

- Adicionar Colunas em Tempo de Execução

Em alguns casos é necessário adicionar colunas em tempo de execução em uma GridView, isso pode ser feito adicionando um código parecido com este no evento que desejar:

var
CAMPO1, CAMPO2, CAMPO3, CAMPO4 : BoundField;
begin
  CAMPO1 := BoundField.Create;
  CAMPO2 := BoundField.Create;
  CAMPO3 := BoundField.Create;
  CAMPO4 := BoundField.Create;
  try
    CAMPO1.HeaderText := 'Código';
    CAMPO1.DataField := 'CODIGO';
    CAMPO2.HeaderText := 'Nome';
    CAMPO2.DataField := 'NOME';
    CAMPO3.HeaderText := 'Idade';
    CAMPO3.DataField := 'IDADE';
    CAMPO4.HeaderText := 'Telefone';
    CAMPO4.DataField := 'TELEFONE';
    GridView1.Columns.Insert(0,CAMPO1);
    GridView1.Columns.Insert(1,CAMPO2);
    GridView1.Columns.Insert(2,CAMPO3);
    GridView1.Columns.Insert(3,CAMPO4);
  finally
    CAMPO1.Free;
    CAMPO2.Free;
    CAMPO3.Free;
    CAMPO4.Free;
  end;
end;

Obs: Pode ser adicionado outros tipos de colunas também como ButtonColumn e definir outras propriedades.

- Recuperar Valores

Tive alguns problemas para recuperar os valores de uma gridview no começo porque quando você define que a coluna código, por exemplo, é visible=false, ele não permite pegar o conteúdo daquela coluna facilmente, mas com DataKeys é tranquilo, os códigos abaixo:

GridView1.DataKeys[Convert.ToInt32(e.CommandArgument)].Item[0].ToString;

ou

GridView1.DataKeys[Convert.ToInt32(e.CommandArgument)].Values[0].ToString;

Na gridview precisa ser preenchido a propriedade DataKeysNames, pode ir direto no código ou configurar na paleta propriedades mesmo, coloque o nome do campo que busca no BD, se quiser pode colocar mais de um(array), desde que separe com vírgula, se colocar mais de um, muda o valor -> Values[array], por exemplo, se quiser pegar o valor NOME, ficaria assim:

Ex: datakeynames="CODIGO, NOME"

//pega o código
GridView1.DataKeys[Convert.ToInt32(e.CommandArgument)].Values[0].ToString; 
//pega o nome
GridView1.DataKeys[Convert.ToInt32(e.CommandArgument)].Values[1].ToString; 

O evento para pegar os valores é o RowCommand, fica no mesmo estilo que datagrid, coloca um buttonfield e atribui um commandname pra ele, no evento rowcommand pode-se implementar um codigo parecido com esse:

if e.CommandName = 'EXCLUIR' then
begin
lblcontrole.text := GrVwComponentes.DataKeys[Convert.ToInt32(e.CommandArgument)].Values[0].ToString;
Excluir;
end;

Qualquer dúvida postem ai!!