Neste artigo estarei abordando uma suíte de componentes para ser utilizada no Visual Studio 2010, o Ajax Control Tookit. De uma forma resumida, o Ajax é uma mistura de três tecnologias: Java Script, XML e XmlHttpRequest, permitindo tornar as páginas mais dinâmicas e interativas.
O Ajax Control Toolkit é um projeto Open-Source construído em cima da estrutura “Microsoft ASP. NET AJAX, seria uma combinação entre a Microsoft e a comunidade ASP .NET AJAX.
Download e Instalação
O primeiro passo seria realizar o download dos componentes, para isto acesse o seguinte site: http://ajaxcontroltoolkit.codeplex.com/releases/view/65800 e no nosso caso escolheremos a opção “AjaxControlToolkit.Binary.NET4.zip”
 |
| Figura 01: Realizando o download. |
Logo em seguida aparecerá uma janela exibindo os termos de licença, clique em “I Agree” para efetuar o download. Depois de efetuar o download descompacte o componente para realizarmos a instalação.
Para isto abra o Visual Studio 2010, clique em File -> New -> Web Site...
 |
| Figura 02: Criando um novo Projeto. |
Escolha um nome para o nosso projeto e um local, no meu caso irei deixar como Ajax_exemplo, escolha o primeiro item “ASP.NET Web Site” logo em seguida clique no botão “Ok”.
Neste momento iremos dar continuidade na nossa instalação do Ajax Control Toolkit, para isto deveremos criar uma nova aba em nossa ToolBox para adicionarmos o nosso Assemblie. Para isto clique com o botão direito e escolha “Add Tab”.
 |
| Figura 03: Adicionando uma Aba de componentes. |
Defina o seguinte nome: “Ajax Control Toolkit”, e clique novamente com o botão direito e escolha “Choose Items”. Aparecerá uma janela para escolhermos o Assemblie para ser instalado. Na Aba “.NET Framework Components” clique no botão “Browse...”, localize a pasta do Ajax e escolha a DLL AjaxControlToolkit.dll. Clique em abrir para finalizarmos o processo.
 |
| Figura 04: Instalação. |
Na figura acima escolha “Accordion” e “AccordionPane” para finalizarmos nossa instalação.
 |
| Figura 05: Novos componentes na Toolbox. |
Verifiquem que foi adicionado todos os componentes do Ajax em nossa Toolbox.
Exemplos de utilização
É importante ressaltar que quando fizemos o download do Ajax, junto com o mesmo possui uma pasta compactada com inúmeros exemplos de utilização.
Para compreendermos melhor montarei alguns exemplos simples de sua utilização.
Para que nosso exemplo funcione, precisamos inserir um componente localizado na Aba “Ajax Extensions” chamado “ScriptManager”. Este componente é de total importância, pois ele é responsável para que os controles do Ajax funcionem.
Logo em seguida adicionaremos um Button localizado na aba Standard e definimos sua propriedade “Text” como Testar. Percebam que ao clicar sobre o Button apresentará uma Extensão para podermos adicionar o que precisamos.
Ver Imagem 06.
 |
| Figura 06: Adicionando a extensão. |
Clicando em “Add Extender” veja a próxima tela. Imagem 07.
 |
| Figura 07: Definindo a Função Javascript. |
Neste momento iremos definir a nossa função Javascript, escolha “ConfirmButtonExtender” e em seguida clique em “ok”. Em Source veremos uma codificação parecida com a seguinte:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Testar" Width="101px" />
<asp:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server"
ConfirmText="Este é um Teste do The Club" Enabled="True" TargetControlID="Button1">
</asp:ConfirmButtonExtender>
Na propriedade “ConfirmText” colocaremos a mensagem que desejamos que aparece quando clicamos no Button.
 |
| Figura 08: Exemplo de Utilização. |
Trabalhando com o CalendarExtender
Este recurso nos disponibiliza um calendário para podermos trabalhar com Datas e Horas. Muito em todos os tipos de páginas Asp.Net, para desfrutarmos de sua funcionalidade adicione um TextBox e logo em seguida um CalendarExtender. Utilizaremos a tag TargetControlID, esta tag indica qual ID do controle que receberá o valor do CalendarExtender, deixe como TextBox.
Veja o código abaixo para maiores detalhes.
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1">
</asp:CalendarExtender>
Agora veremos o resultado final de nosso exemplo.
 |
| Figura 09: Utilizando o CalendarExtender. |
Trabalhando com o MaskedEditExtender
Este seria outro recurso de extrema importância no desenvolvimento de Sites e Sistemas, consiste em colocar uma máscara desejada para que o usuário não utilize caracteres não autorizados em um TextBox.
Para isto insira outro TextBox e logo em seguida adicione o MaskedEditExtender. Adicionaremos a Tag TargetControlID para “TextBox2” e a Mask como “999999”. Neste caso específico deixaremos o usuário digitar apenas caracteres numéricos.
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox2" Mask="999999">
</asp:MaskedEditExtender>
Veremos abaixo o resultado final de nosso exemplo.
 |
| Figura 10: Utilizando o MaskedEditExtender. |
Conclusão
Estes foram os primeiros passos para se trabalhar com este poderoso recurso da Suíte de Componentes do “Ajax Control Toolkit”. Montamos alguns exemplos de utilização dos principais componentes encontrados nesta suíte. Os senhores puderam conhecer e perceber que esta ferramenta nos auxilia muito no desenvolvimento. Fico por aqui, Um Forte Abraço e até o mês que vem.
Nenhum comentário:
Postar um comentário