ASP.NET Passo a Passo Controles com Processamento Personalizado Criando um controle personalizado 1. Abra ou copie a solução ControlORama desenvolvido.

Apresentação em tema: "ASP.NET Passo a Passo Controles com Processamento Personalizado Criando um controle personalizado 1. Abra ou copie a solução ControlORama desenvolvido."— Transcrição da apresentação:

1 ASP.NET Passo a Passo Controles com Processamento Personalizado Criando um controle personalizado 1. Abra ou copie a solução ControlORama desenvolvido no capítulo anterior 2. Adicione um projeto “ASP.NET Server Control” de nome “CustomControlLib” à solução ControlORama. Será criado um controle similar ao Label de nome “ServerControl1”. 3. Adicione o controle criado na caixa de ferramentas

2 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione um “ASP.NET Server Control” de nome “CustomControlLib” à solução ControlORama

3 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione o controle criado na caixa de ferramentas. Selecione o menu Tools/Choose Toolbox Items Selecione Browse e localize o arquivo CustomControlLib.dll Confirme para adicionar no toolbox

4 ASP.NET Passo a Passo Controles com Processamento Personalizado Criando um controle personalizado 1. Adicione ao projeto ControlORama uma nova página (WebForm) de nome “UseCustomControl.aspx”. Arraste do toolbox um controle ServerControl1 para a nova página. 2. Adicione ao formulário um rótulo, uma caixa de texto e um botão. 3. Adicione o código do manipulador do botão

5 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione ao projeto ControlORama uma nova página (WebForm) de nome “UseCustomControl.aspx” Arraste do toolbox um controle ServerControl1 para a nova página. Digite na propriedade text a frase: “Testando o controle criado pelo usuário”

6 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione ao formulário um rótulo, uma caixa de texto e um botão Ajuste a propriedade text do label para “Digite uma frase” Ajuste a propriedade text do button para “Definir texto do componente criado pelo usuário”

7 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione o código do manipulador do botão protected void Button1_Click(object sender, EventArgs e) { ServerControl11.Text = TextBox1.Text; }

8 ASP.NET Passo a Passo Controles com Processamento Personalizado Criando um controle personalizado 1. Adicione ao projeto CustomControlLib um novo item do tipo ASP.NET Server Control e atribua o nome PalindromeCheckerRenderedControl. 2. Adicione ao controle o método StripNonAlphanumerics que retira os caracteres não alfanuméricos de uma string. 3. Adicione ao controle o método CheckForPalindrome que verifica se uma string é palíndroma. 4. Altere o processamento do controle, método RenderContents, para mostrar palíndromos em azul e não palíndromos em vermelho.

9 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione ao projeto CustomControlLib um novo item do tipo ASP.NET Server Control. Atribua o nome : PalindromeChecker RenderedControl Palíndromo é uma palavra ou frase que tem a mesma grafia quando lida no sentido normal ou de trás para frente.

10 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione ao controle o método StripNonAlphanumerics que retira os caracteres não alfanuméricos de uma string protected string StripNonAlphanumerics(string str) { string strStripped = (String)str.Clone(); if (str != null) { char[] rgc = strStripped.ToCharArray(); int i = 0; foreach (char c in rgc) { if (char.IsLetterOrDigit(c)) { i++; } else { strStripped = strStripped.Remove(i, 1); } } } return strStripped; }

11 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione ao controle o método CheckForPalindrome que verifica se uma string é palíndroma. protected bool CheckForPalindrome() { if (this.Text != null) { String strControlText = this.Text; String strTextToUpper = null; strTextToUpper = Text.ToUpper(); strControlText = this.StripNonAlphanumerics(strTextToUpper); char[] rgcReverse = strControlText.ToCharArray(); Array.Reverse(rgcReverse); String strReverse = new string(rgcReverse); if (strControlText == strReverse) { return true; } else { return false; } } else { return false; } }

12 ASP.NET Passo a Passo Controles com Processamento Personalizado Altere o processamento do controle, método RenderContents, para mostrar palíndromos em azul e não palíndromos em vermelho. protected override void RenderContents(HtmlTextWriter output) { if (this.CheckForPalindrome()) { output.Write("Essa é palíndroma: "); output.Write(" "); output.Write(Text); output.Write(" "); } else { output.Write("Essa NÃO é palíndroma: "); output.Write(" "); output.Write(Text); output.Write(" "); } }

13 ASP.NET Passo a Passo Controles com Processamento Personalizado Criando um controle personalizado 1. Adicione ao projeto ControlORama uma nova página de nome “UsePalindromeCheckerControl.aspx”. Arraste do toolbox um controle PalindromeCheckerRenderedControl para a nova página. 2. Adicione ao formulário um rótulo, uma caixa de texto e um botão. 3. Adicione o código do manipulador do botão

14 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione ao projeto ControlORama uma nova página de nome “UsePalindromeCheckerControl.aspx”. Arraste do toolbox um controle PalindromeChecker RenderedControl para a nova página.

15 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione ao formulário um rótulo, uma caixa de texto e um botão Ajuste a propriedade text do label para “Digite uma frase” Ajuste a propriedade text do button para “Verificar se é palíndromo”

16 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione o código do manipulador do botão protected void Button1_Click(object sender, EventArgs e) { this.PalindromeCheckerRenderedControl1.Text = this.TextBox1.Text; }

17 ASP.NET Passo a Passo Controles com Processamento Personalizado Controles e Eventos Criando eventos personalizados e tratando estes eventos nos formulários 1. Abra o arquivo com a definição do controle criado (PalindromeCheckerRenderedControl.cs) e adicione o evento PalindromeFound. 2. Adicione o código que dispara o evento na atribuição da propriedade Text. 3. Abra a página que contém o componente (UsePalindromeCheckerControl.aspx), retire e coloque o componente para atualizar. 4. Crie o manipulador para o evento e digite o código.

18 ASP.NET Passo a Passo Controles com Processamento Personalizado Abra o arquivo com a definição do controle criado (PalindromeCheckerRenderedControl.cs) e adicione o evento PalindromeFound. public class PalindromeCheckerRenderedControl : WebControl { public event EventHandler PalindromeFound;... }

19 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione o código que dispara o evento na atribuição da propriedade Text. Compile a biblioteca CustomControlLib para atualizar o componente no toolbox. set { ViewState["Text"] = value; if (this.CheckForPalindrome()) { if (PalindromeFound != null) { PalindromeFound(this, EventArgs.Empty); }

20 ASP.NET Passo a Passo Controles com Processamento Personalizado Abra a página que contém o componente (UsePalindromeCheckerControl.aspx), retire e coloque o componente para atualizar. Crie o manipulador para o evento e digite o código. Para criar um manipulador de um evento diferente do padrão é necessário selecionar o evento na janela de propriedades e dar o clique duplo no evento protected void PalindromeCheckerRenderedControl1_PalindromeFound (object sender, EventArgs e) { Response.Write("A página disparou um tratamento de evento de frase palíndroma"); }

21 ASP.NET Passo a Passo Controles com Processamento Personalizado Ao digitar um palíndromo o evento é disparado.

22 ASP.NET Passo a Passo Controles com Processamento Personalizado Parâmetro HtmlTextWriter e Tags HTML Substituindo comandos HTML por métodos para obter compatibilidade de versão de HTML e navegadores 1. Abra o arquivo com a definição do controle criado (PalindromeCheckerRenderedControl.cs) 2. Substitua os códigos HTML inseridos diretamente no método RenderContents pelos métodos RenderBeginTag e RenderEndTag da classe output.

23 ASP.NET Passo a Passo Controles com Processamento Personalizado Substitua os códigos HTML pelos métodos da classe output. protected override void RenderContents(HtmlTextWriter output) { if (this.CheckForPalindrome()) { output.Write("Essa é palíndroma: "); output.RenderBeginTag(HtmlTextWriterTag.Font); output.AddStyleAttribute(HtmlTextWriterStyle.Color, "blue"); output.RenderBeginTag(HtmlTextWriterTag.B); output.Write(Text); output.RenderEndTag(); // bold output.RenderEndTag(); // font } else { output.Write("Essa NÃO é palíndroma: "); output.RenderBeginTag(HtmlTextWriterTag.Font); output.AddStyleAttribute(HtmlTextWriterStyle.Color, "red"); output.RenderBeginTag(HtmlTextWriterTag.B); output.Write(Text); output.RenderEndTag(); // bold output.RenderEndTag(); // font } }

24 ASP.NET Passo a Passo Controles com Processamento Personalizado Controle e a ViewState Armazenando dados na ViewState da página 1. Abra o arquivo PalindromeCheckerRenderedControl.cs para introduzir nele uma lista com os palíndromos encontrados 2. Altere o método set da propriedade Text para armazenar os palíndromos encontrados 3. Crie um método para apresentar os palíndromos utilizando um layout de tabela 4. Adicione o método de apresentação da lista à apresentação do componente 5. Visualize a aplicação e digite vários palíndromos

25 ASP.NET Passo a Passo Controles com Processamento Personalizado Abra o arquivo PalindromeCheckerRenderedControl.cs para introduzir nele uma lista com os palíndromos encontrados... using System.Collections; namespace CustomControlLib {... public class PalindromeCheckerRenderedControl : WebControl { public event EventHandler PalindromeFound; ArrayList alPalindromes = new ArrayList();... }

26 ASP.NET Passo a Passo Controles com Processamento Personalizado Altere o método set da propriedade Text para armazenar os palíndromos encontrados set { ViewState["Text"] = value; string text = value; this.alPalindromes = (ArrayList)this.ViewState["palindromes"]; if (this.alPalindromes == null) // Cria Lista { this.alPalindromes = new ArrayList(); } if (this.CheckForPalindrome()) { if (PalindromeFound != null) // Chama Evento { PalindromeFound(this, EventArgs.Empty); } alPalindromes.Add(text); // Adiciona palindrome na lista } ViewState.Add("palindromes", alPalindromes); // Salva lista no ViewState }

27 ASP.NET Passo a Passo Controles com Processamento Personalizado Crie um método para apresentar os palíndromos utilizando um layout de tabela protected void RenderPalindromesInTable(HtmlTextWriter output) { if (this.alPalindromes.Count > 0) { output.AddAttribute(HtmlTextWriterAttribute.Width, "50%"); output.AddAttribute(HtmlTextWriterAttribute.Border, "1"); output.RenderBeginTag(HtmlTextWriterTag.Table); // foreach (string s in this.alPalindromes) { output.RenderBeginTag(HtmlTextWriterTag.Tr); // output.AddAttribute(HtmlTextWriterAttribute.Align, "left"); output.AddStyleAttribute(HtmlTextWriterStyle.FontSize, "medium"); output.AddStyleAttribute(HtmlTextWriterStyle.Color, "blue"); output.RenderBeginTag(HtmlTextWriterTag.Td); // output.Write(s); output.RenderEndTag(); // } output.RenderEndTag(); // } }

28 ASP.NET Passo a Passo Controles com Processamento Personalizado Adicione o método de apresentação da lista à apresentação do componente protected override void RenderContents(HtmlTextWriter output) {... output.Write(" "); RenderPalindromesInTable(output); }

29 ASP.NET Passo a Passo Controles com Processamento Personalizado Visualize a aplicação e digite vários palíndromos