ASP.NET Passo a Passo Pot Pourri de Componentes Componentes a serem estudados neste capítulo 1. Validadores 2. Image, ImageButton e ImageMap 3. Treeview.

Apresentação em tema: "ASP.NET Passo a Passo Pot Pourri de Componentes Componentes a serem estudados neste capítulo 1. Validadores 2. Image, ImageButton e ImageMap 3. Treeview."— Transcrição da apresentação:

1 ASP.NET Passo a Passo Pot Pourri de Componentes Componentes a serem estudados neste capítulo 1. Validadores 2. Image, ImageButton e ImageMap 3. Treeview 4. Multiview

2 ASP.NET Passo a Passo Pot Pourri de Componentes Formulário de Cadastro 1. Crie uma aplicação Web (Empty Web Application) de nome ControlPotpourri. Adicione um formulário de nome ValidateMe. 2. Inclua um rótulo e uma caixa de texto para o usuário lançar a informação Nome. Altere a propriedade Text do rótulo para “Nome” e altere o ID da caixa de texto para TextBoxFirstName. 3. Repita o processo criando componentes para lançar Sobrenome, Endereço, CEP, Telefone, Senha, Confirmação de Senha e Idade. Nomeie as caixas de texto para: TextBoxLastName, TextBoxAdress, TextBoxPostalCode, TextBoxPhone, TextBoxPassword, TextBoxPasswordAgain e TextBoxAge. 4. Inclua um botão com o texto “Confirmar”

3 ASP.NET Passo a Passo Pot Pourri de Componentes Formulário de Cadastro

4 ASP.NET Passo a Passo Pot Pourri de Componentes Formulário de Cadastro - Incluindo Validadores 1. Adicione um componente RequireFieldValidator após a caixa de texto de “Nome”. Selecione na propriedade ControlToValidate o controle TextBoxFirstName. Ajuste a propriedade ErrorMessage para “Favor informar seu nome”. 2. Repita o processo para todas as informações a serem lançadas 3. Adicione um componente ValidationSummary no formulário.

5 ASP.NET Passo a Passo Pot Pourri de Componentes Formulário de Cadastro Incluindo Validadores

6 ASP.NET Passo a Passo Pot Pourri de Componentes Executando a aplicação e clicando no botão Confirmar aparecem as mensagens de validação ao lado do campo e no sumário de validação. Observe o código fonte da página gerada. O formulário inclui o java script onsubmit="javascript:return WebForm_OnSubmit(); que implementa as validações

7 ASP.NET Passo a Passo Pot Pourri de Componentes Formulário de Cadastro - Validadores de Expressão Regular 1. Adicione um componente RegularExpressionValidator após a caixa de texto de “CEP”. Selecione na propriedade ControlToValidate o controle TextBoxPostalCode. Ajuste a propriedade ErrorMessage para “CEP Inválido”. A propriedade ValidationExpression contém um string que estabelece o formato da informação a ser inserida no campo. Selecione a opção US Zip Code. Ajuste o formato para “\d{5}(-\d{3})?” para considerar o CEP brasileiro. Essa expressão permite o formato 99999-999. 2. Repita o processo para o campo de telefone. Informe a expressão de validação US Phone Number. Ajuste para ((\(\d{2}\) ?)|(\d{2}-))?\d{4}- \d{4}”. Essa expressão permite os formatos (99)9999-9999 ou 99-9999- 9999

8 ASP.NET Passo a Passo Pot Pourri de Componentes Executando a aplicação e clicando no botão Confirmar aparecem as mensagens de validação ao lado do campo e no sumário de validação. Observe que os formatos de CEP e telefone foram validados. Entre outros formatos e observe o aparecimento da mensagem de erro.

9 ASP.NET Passo a Passo Pot Pourri de Componentes Formulário de Cadastro - Outros Validadores 1. Adicione um componente CompareValidator após a caixa de texto de “Confirmar Senha”. Selecione na propriedade ControlToValidate o controle TextBoxPasswordAgain. Selecione na propriedade ControlToCompare o controle TextBoxPassword. Ajuste a propriedade ErrorMessage para “Senhas Diferentes”. Ajuste a propriedade TextMode para Password. 2. Adicione um componente CompareValidator após a caixa de texto de “Idade”. Selecione na propriedade ControlToValidate o controle TextBoxAge. Informe na propriedade ValueToCompare o valor 30. Selecione na propriedade Type a opção Integer. Selecione a opção LessThanEqual na propriedade Operator. Ajuste a propriedade ErrorMessage para “Você deve ter até 30 anos para se cadastrar”.

10 ASP.NET Passo a Passo Pot Pourri de Componentes Executando a aplicação pode-se observar os resultados obtidos dos novos validadores.

11 ASP.NET Passo a Passo Pot Pourri de Componentes Controles Baseados em Imagens 1. Adicione ao projeto uma nova página e nomeie como “”UseImageControls.aspx”. 2. Adicione um componente Imagem. 3. Para incluir no componente uma imagem da web, selecione a imagem no navegador, acesse o menu com o botão direito do mouse e selecione a opção “copiar URL da imagem”. 4. Selecione a propriedade ImageURL e selecione colar. Com o endereço da imagem atribuído ao componente, e a imagem é apresentada.

12 ASP.NET Passo a Passo Pot Pourri de Componentes Imagem ligada a um endereço de internet.

13 ASP.NET Passo a Passo Pot Pourri de Componentes Controles Baseados em Imagens 1. Adicione um outro componente Imagem. 2. Inclua no projeto uma pasta para armazenar imagens. Selecione o projeto, clique com o botão direito, selecione “Add”, selecione “New Folder” e em seguida nomeie a pasta como “imagens”. 3. Selecione uma imagem no navegador, acesse o menu com o botão direito do mouse e selecione a opção “salvar imagem como”. Salve a imagem na pasta do projeto. Observe que a imagem está na pasta, mas, ainda não está no projeto. 4. Selecione a pasta “imagens” com o botão direito, selecione a opção “Add”, e selecione “Existing Items” e, em seguida, localize a imagem salva na pasta e confirme. A imagem agora pertence ao projeto. 5. Clique no ícone... da propriedade ImageURL e selecione a image. Ela aparece na página.

14 ASP.NET Passo a Passo Pot Pourri de Componentes Imagem ligada a uma imagem do projeto.

15 ASP.NET Passo a Passo Pot Pourri de Componentes Controles Baseados em Imagens 1. Adicione dois componentes ImageButton. 2. Adicione uma nova imagem à pasta de imagens e adicione ao projeto. 3. Utilize a propriedade ImageURL para associar a imagem para os botões. 4. No primeiro botão, utilizando a propriedade PostBackURL, selecione a pagina “ValidateMe.aspx”. Esta propriedade define que URL será acessada quando o usuário clicar na imagem. 5. De um clique duplo no segundo ImageButton. Será criado um método para que você defina o que deve ser feito ao clicar o botão. 6. Inclua o código : Response.Redirect("~\\ValidateMe.aspx"); 7. Observe que os dois botões agora implementam a mesma funcionalidade, ou seja, redirecionam para a pagina de validação.

16 ASP.NET Passo a Passo Pot Pourri de Componentes Componente ImageButton

17 ASP.NET Passo a Passo Pot Pourri de Componentes Controles Baseados em Imagens 1. Adicione um componente ImageMap. 2. Adicione uma nova imagem à pasta de imagens e adicione ao projeto. Utilize a propriedade ImageURL para associar a imagem ao componente ImageMap. 3. A propriedade HotSpots permite associar áreas da imagem a um endereço de navegação. Adicione um HotSport do Tipo Retângulo e configure as propriedades Botton, Left, Right e Top para definir a área, a propriedade AlternateText para definir um texto a ser apresentado quando o usuário passar o mouse pela a área e a propriedade NavigateURL para definir o endereço a ser acessado quando o usuário clicar a área.

18 ASP.NET Passo a Passo Pot Pourri de Componentes Configuração do HotSpot do componente ImageMap

19 ASP.NET Passo a Passo Pot Pourri de Componentes Aplicação utilizando ImageMap Observe que acima do mês de junho aparece a caixa com o texto “Junho” associado à área do HotSpot, dentro de uma caixa de texto. Ao clicar na área, o usuário será redirecionado para a página de validação criada.

20 ASP.NET Passo a Passo Pot Pourri de Componentes Controle TreeView 1. Adicione um novo formulário ao projeto e atribua o nome UseTreeView.aspx. 2. Adicione um componente TreeView à página. 3. Entre na opção AutoFormat no menu do componente e selecione o formato “Contacts”. 4. Selecione e opção Edit Nodes e utilize a interface para montar a estrutura a ser apresentada pelo componente. 5. Utilize as propriedades BorderStyle e BorderColor para definir uma borda para o componente.

21 ASP.NET Passo a Passo Pot Pourri de Componentes Tela de configuração do componenteTreeView

22 ASP.NET Passo a Passo Pot Pourri de Componentes Página com o componente TreeView

23 ASP.NET Passo a Passo Pot Pourri de Componentes Controle TreeView – Evento de Nó selecionado 1. Adicione um div ao formulário e insira nele um rótulo e uma caixa de texto. Renomeie os componentes para LabelSelectedNode e TextBoxInfo. Altere a propriedade TextMode da caixa de texto para MultiLine. 2. Selecione os eventos do TreeView e crie um manipulador para o evento SelectedNodeChanged. 3. Inclua no manipulado do evento o código apresentado a seguir. Esse código apresentará no rótulo o nó selecionado e na caixa de texto os nós filho do nó seleciondado. 4. Selecione o DIV que contém o TreeView e ajuste a propriedade Style para float: left. 5. Altere as propriedades Heigth e Width do TextBoxInfo para 180px e 300px.

24 ASP.NET Passo a Passo Pot Pourri de Componentes Código do evento SelectedNodeChanged protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e) { this.LabelSelectedNode.Text = String.Format(“Nó: {0}", this.TreeView1.SelectedNode.Text); TreeNodeCollection childNodes = this.TreeView1.SelectedNode.ChildNodes; if (childNodes != null) { this.TextBoxInfo.Text = String.Empty; StringBuilder sb = new StringBuilder(); foreach(TreeNode childNode in childNodes) { sb.AppendFormat("{0}\n", childNode.Value); } this.TextBoxInfo.Text = sb.ToString(); }

25 ASP.NET Passo a Passo Pot Pourri de Componentes Aplicação com TreeView

26 ASP.NET Passo a Passo Pot Pourri de Componentes Controle MultiView 1. Adicione um novo formulário ao projeto e atribua o nome UseMultiView.aspx. 2. Adicione um componente MultiView à página. A função do controle MultiView é gerenciar múltiplos painéis (Views) em uma página. 3. Adicione 3 Views ao controle MultiView. Arraste e solte o componente View sobre o MultiView. Adicione um rótulo a cada componente View da página. 4. Ative o primeiro View como painel padrão. Para isso ajuste a propriedade ActiveViewIndex para 0. 5. Adicione dois botões para navegar entre os painéis. Nomeie os botões como ButtonAnterior e ButtonProximo. 6. Crie um manipulador de evento para cada botão e introduza o código a seguir

27 ASP.NET Passo a Passo Pot Pourri de Componentes Manipulador dos eventos dos botões para realizar a navegação no componente MultiView protected void ButtonAnterior_Click(object sender, EventArgs e) { if (MultiView1.ActiveViewIndex == 0) { MultiView1.ActiveViewIndex = 2; } else { MultiView1.ActiveViewIndex -= 1; } } protected void ButtonProximo_Click(object sender, EventArgs e) { if (MultiView1.ActiveViewIndex == 2) { MultiView1.ActiveViewIndex = 0; } else { MultiView1.ActiveViewIndex += 1; } }

28 ASP.NET Passo a Passo Pot Pourri de Componentes Aplicação com MultiView Clicando nos botões de navegação, o painel de componentes é substituído por cada um dos Views configurados no MultiView.