Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
DESENVOLVIMENTO DE
SOFTWARE PARA
INTERNET
LABORATÓRIO 4
PROF. EMILIO PARMEGIANI
WEB USER CONTROLS
Neste exercício trabalharemos com a criação de controles ASP.NET personalizados. Através do
uso de Web User Controls, o programador tem a liberdade de criar novos controles, a partir de
controles básicos existentes, ou controles totalmente exclusivos.
A necessidade de se utilizar Web User Controls surge a partir do momento em que
necessitamos de um componente com um determinado comportamento, normalmente
ligeiramente diferente ao comportamento dos demais controles, e que será utilizado mais de
uma vez dentro de uma aplicação, facilitando assim suas alterações e manutenções.
Vamos criar um sistema de vendas de ingressos on-line, onde algumas informações como
quantidade de ingressos, mês e ano do cartão de crédito, não vamos simplesmente digitar em
um campo numérico, mas selecioná-los a partir de um controle do tipo Spinner, onde
podemos incrementar ou decrementar os números.
Exemplos de controles Spinner:
Iniciar o Visual Studio em:
Menu Iniciar > Todos os Programas > Microsoft Visual Studio 2010 > Microsoft Visual Studio
2010
Na tela inicial clicar em File, New Project...
Em Installed Templates, selecionar Visual C#, Web.
1. Selecionar entre os tipos de projetos por ASP.NET Empty Web Application.
2. No campo Name, digite o nome do projeto: VendaIngressosOnLine.
3. Em Location, entre com o endereço da pasta onde quer armazenar seus projetos. (Ex:
c:\emilioparme\Projects). Perceba que o campo “Solution name” assumiu o mesmo
valor informado no campo Name.
4. Clique em OK.
1. Clique com o botão direito do mouse sobre o nome da Solution...
2. Clique em Add, New Item..., Web User Control
3. No campo Name, digite o nome do seu controle: SpinnerControl.ascx
4. Clique em Add
Perceba que não se trata de um form, mas sim um Web User Control, portanto não temos os
elementos HTML, BODY, FORM ou DIV. Neste momento temos apenas a diretiva de Control.
Adicione a área de Design do seu controle, um controle do tipo TextBox e dois controles do
tipo Button.
Agora configure as propriedades de cada componente.
Para o TextBox, defina seu ID como txtNumero. Como este componente não permitirá que o
usuário insira um valor, mas apenas selecione através dos botões de comando, vamos alterar a
propriedade do Enabled do TextBox de true para false.
Para o primeiro botão, defina seu ID como btnUp e altere sua propriedade Text para +.
Para o segundo botão, defina seu ID como btnDown e altere sua propriedade Text para -.
Agora criaremos algumas propriedades específicas do nosso novo controle.
Basicamente precisaremos saber qual é o valor atual do controle e quais podem ser os valores
mínimo e máximo que nosso usuário pode selecionar. Dessa forma, acrescente as seguintes
variáveis ao arquivo de script do nosso controle (você pode acessar o arquivo de script
clicando duas vezes sobre a área de design em branco do controle, ou com o controle
selecionado na janela Solution Explorer, clicar sobre o botão View Code):
namespace VendaIngressosOnLine { public partial class SpinnerControl : System.Web.UI.UserControl { private int m_valorMin; private int m_valorMax = 100; private int m_numeroAtual = 0; protected void Page_Load(object sender, EventArgs e) { } } }
Agora vamos “encapsular” nossas propriedades, para que possam ser acessadas corretamente
pelos demais controles.
Para cada uma das três variáveis, clique sobre elas com o botão direito do mouse, selecione
Refactor, Encapsulate Field...
Clique em OK.
Clique Appy.
Será criado automaticamente o método de encapsulamento:
Repita para as outras duas variáveis.
Como o valor da propriedade NumeroAtual não será definida externamente (pelo usuário ou
por outro controle), mas apenas pelos botões UP e DOWN do nosso controle, vamos remover
do encapsulamento o método de “set”, permitindo que o usuário possa apenas obter o valor
desse campo, e não setar um valor.
Apague o set do nosso método NumeroAtual.
Neste momento este é o código que temos:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace VendaIngressosOnLine { public partial class SpinnerControl : System.Web.UI.UserControl { private int m_valorMin; public int ValorMin { get { return m_valorMin; } set { m_valorMin = value; } } private int m_valorMax = 100; public int ValorMax { get { return m_valorMax; } set { m_valorMax = value; } } private int m_numeroAtual = 0; public int NumeroAtual { get { return m_numeroAtual; } } protected void Page_Load(object sender, EventArgs e) { } } }
Agora existem duas validações que precisamos realizar:
1. O valor mínimo não pode ultrapassar o valor máximo
2. O valor máximo não pode ultrapassar o valor mínimo.
Para isso vamos inserir uma validação no set dos métodos dessas propriedades.
Vamos primeiramente alterar o método da propriedade ValorMinimo, fazendo a validação de
que caso o valor que esteja sendo atribuído à propriedade seja maior ou igual ao valor
máximo, será retornada uma Exceção (veremos exceções em maior detalhe um pouco mais
adiante). Altere o método ValorMinimo para o seguinte código:
public int ValorMin { get { return m_valorMin; } set { if (value >= this.m_valorMax) { throw new Exception("ValorMinimo precisa ser menor que o ValorMaximo."); } else { m_valorMin = value; } } }
E da mesma forma, altere o método ValorMaximo para o seguinte código:
public int ValorMax { get { return m_valorMax; } set { if (ValorMax <= m_valorMin) { throw new Exception("ValorMaximo precisa ser maior que o ValorMinimo."); } else { m_valorMax = value; } } }
Agora iremos criar um método que sempre que executado, exibirá o valor do numero atual do
controle dentro do TextBox txtNumero. Também utilizaremos uma variável do ViewState da
página para armazenar o valor da variável durante o processo de PostBack.
Acrescente o seguinte método:
//... protected void DisplayNumber() { txtNumero.Text = this.NumeroAtual.ToString(); ViewState["currentNumber"] = this.NumeroAtual.ToString(); } protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { m_numeroAtual = Int16.Parse(ViewState["currentNumber"].ToString()); } else { m_numeroAtual = this.ValorMin; } DisplayNumber(); } } }
Perceba que também inserimos uma validação. Ao inicializar a página (quanto IsPostBack for
false) iremos atribuir ao numero atual o valor mínimo do nosso componente como sendo seu
valor inicial.
Agora iremos programar o click dos botões UP e DOWN. Volte para o Design do controle e
clique duas vezes sobre o botão btnUp. Será criado o método btnUp_Click. Insira o seguinte
código ao método:
protected void btnUp_Click(object sender, EventArgs e) { if (m_numeroAtual == this.ValorMax) { m_numeroAtual = this.ValorMin; } else { m_numeroAtual += 1; } DisplayNumber(); }
Este método fará que sempre que o usuário pressionar o botão UP, seja incrementado seu
valor em 1, e caso atinja seu valor máximo, e volta seu valor para o valor mínimo, como se
tivesse “completado uma volta” sobre seus valores.
Agora faça a mesma coisa para o método de click do botão btnDown:
protected void btnDown_Click(object sender, EventArgs e) { if (m_numeroAtual == this.ValorMin) { m_numeroAtual = this.ValorMax; } else { m_numeroAtual -= 1; } DisplayNumber(); }
Nosso controle personalizado já está pronto!!!
Agora vamos aplica-lo. Porém antes disso precisamos realizar o Build do nosso projeto, para
que nossa aplicação possa “visualizar” nosso novo controle como sendo um controle
disponível. Para isso clique com o botão direito sobre a Solution e clique em Build.
Agora vamos criar um formulário. Clique com o botão direito sobre a Solution, clique em Add,
New Item.
Selecione Web Form, e em Name insira VendaIngressos.aspx.
Agora precisamos “registrar” nosso controle para que o mesmo esteja disponível no nosso
formulário.
Edite o código html do formulário. Logo abaixo da diretiva @Page, insira uma nova diretiva.
Insira os caracteres de <% e na lista exibida, selecione Register:
E complete o código da diretira Register da seguinte forma:
<%@ Register Src="~/SpinnerControl.ascx" TagPrefix="uc" TagName="spinnerControle" %>
Crie o seguinte formulário:
Para a quantidade de ingressos utilizaremos nosso controle spinner. Posicione o mouse no
código a frente do texto “Quantidade de Ingressos:” e abra a tag “<uc”. Veja que o controle
spinner estará disponível na lista de controles. Selecione o controle.
Em seguida configure as propriedades ID e runat=”server”.
Vamos configurar de modo que o usuário possa comprar no máximo 6 ingressos. Para isso
vamos configurar as propriedades ValorMinimo como sendo 0 e a propriedade ValorMaximo
como 6.
Teste a página até este momento e certifique que seu controle esteja funcionando
adequadamente:
Agora vamos acrescentar mais alguns controles do tipo spinner no nosso formulário. Vamos
utilizar o controle para o usuário inserir o mês e o ano de validade do seu cartão de crédito.
Portanto, inclua os seguintes controles no formulário:
Em seguida configure as propriedades de valor mínimo e máximo do campo de Mês como
sendo 1 e 12, respectivamente, e configure as propriedades de valor mínimo e máximo do
campo Ano como sendo 2013 e 2020, respectivamente.
Neste momento, ao executar a pagina, é possível verificar que cada controle Spinner é
independente, e mantem a referência de seus próprios valores:
Para finalizar o formulário, veremos como resgatar os valores que o usuário selecionou. Para
isso insira um novo controle Button ao final do formulário. Defina seu ID como btnSalvar e sua
propriedade Text como “Salvar”.
Clique duas vezes sobre o botão para que seja criado o método btnSalvar_Click. Insira o
seguinte código ao método:
protected void btnSalvar_Click(object sender, EventArgs e) { int numeroIngressos = spIngressos.NumeroAtual; int validMes = spValidMes.NumeroAtual; int validAno = spValidAno.NumeroAtual; Response.Write("Compra efetuada com sucesso!<br/>"); Response.Write("Total de ingressos comprados: " + numeroIngressos + "<br/>"); Response.Write("Validade do Cartão: " + validMes +"/"+ validAno + "<br/><br/>"); }
Ao executar a página e clicar sobre o botão salvar, serão resgatados os valores de cada
controle e exibidos ao usuário:
FIM!!!