Continuando a exploração do ambiente de desenvolvimento integrado Visual Web developer 2008 Express Edition, vamos agora ver outros recursos disponíveis para nos auxiliar no desenvolvimento. Criamos então um novo web site, para isto, e editaremos o design do Default.aspx(Não sabendo fazer isto, releia o post)
Nesta página criaremos controles que permitam ao usuário definir escrever um HTML, visualizá-lo e salvá-lo.
Definindo o layout
Na janela Toolbox, arrastaremos um Label, um TextBox, dois Buttons e outro Label.
Altere as propriedade do primeiro Label, conforme abaixo:
- ID: lblDigiteHTML
- Text : Digite o HTML no campo abaixo:
Altere as propriedades do TextBox conforme abaixo:
- Columns : 60
- ID : txtTexto
- Rows : 10
- TextMode : Multiline
Altere as propriedades do primeiro Button, conforme abaixo:
- ID: btnVisualizar
- Text: Visualizar
Altere as propriedades do segundo Button, conforme abaixo:
· ID: btnSalvar
· Text: Salvar
Altere as propriedade do segundo Label, conforme abaixo:
- ID: lblVisualizacao
- Limpe a propriedade Text
Termine de formatar a página para que esteja conforme a imagem 1:
Imagem 1:
Adicionando eventos
A janela Properties, além de mostrar as propriedades dos controles, mostra também os eventos do elemento ativo, iremos então selecionar o btnVisualizar e clicar no botão para ver seus eventos, conforme imagem 2:
Imagem 2: Eventos do btnVisualizar no properties
Clique duas vezes no evento Click, seremos direcionado ao code behind desta página, neste caso, o Default.aspx.cs, e foi criado um método que é chamado ao disparar o evento selcionado.
Crie um método que será responsável por copiar o texto digitado pelo usuário no txtTexto para o lblVisualizacao. Caso tenha terminado, terá algo parecido com o código da Imagem 3:
Imagem 3 : Código para atualizar o texto no lblVisualizacao
Coloque um breakpoint na linha que copia o texto do txtTexto para o lblVisualizacao. Quando estamos depurando uma aplicação, o breakpoint interrompe a execução do código, no ponto especificado, para que possamos analisar o código e várias informações da execução. Veja o breakpoint definido na Imagem 4.
Imagem 4 - Colocando o breakpoint.jpg
Depurando a aplicação
Feito vamos agora depurar a aplicação: clique no menu Debug / Start Debugging(Ou pressione F5). Será iniciado o ASP.NET Development Server e apresentado a tela da Imagem 5, para configurar o web site para permitir depuração. Clique em Ok.
Imagem 5 – Permitindo a depuração do Web Site
Repare que no web site, na janela Solution Explorer, foi criado o arquivo web.config. Clique duas vezes neste, para visualizar no editor. Este é um arquivo que contêm as configurações do web site no formato XML, depois falaremos mais, por enquanto encontre o elemento pages e adicione neste o atributo validateRequest com o valor false. Caso o elemento não exista, adicione conforme código 1 após o elemento authentication. Veja adicionando o atributo na Imagem 6.
Este atributo é necessário pois iremos enviar um HTML do navegador para o servidor, assim temos que desabilitar esta validação do servidor.
Código 1:
Imagem 6 - Adicionando o atributo validateRequest
Agora podemos vamos ao navegador que já foi aberto. Neste é possível ver nossa aplicação, digitaremos então um HTML no campo criado para isto e clicaremos no botão Visualizar.
Repare que o código foi interrompido no breakpoint, vamos aproveitar para conhecer as ferramentas e janelas disponíveis de depuração.
Janelas para Depurar
Call Stack
Esta janela tem o empilhamento da chamada, ou seja, você pode ver o método atual no topo da lista de métodos e seus chamadores abaixo. Neste caso o método AtualizarTextoVisualizacao foi chamado pelo método btnVisualizar_Click conforme Imagem 7
Imagem 7 : Call Stack
Watch
Nesta janela podemos definir as variáveis que desejamos visualizar, seja arrastando-as, ou digitando na coluna Name. Define as variáveis que desejamos visualizar conforme Imagem 8
Imagem 8 : Watch
Debug toolbar
A barra de ferramentas de depuração está visível na parte superior da IDE e com ela podemos controlar o fluxo de execução, veja na Imagem 9. São as mesmas opções disponíveis no menu Debug.
Imagem 9 - Debug toolbar
O nome do botão, seu atalho e o que faz é mostrado abaixo, na sequência em que aparecem:
- Continue(F5) – Cotinua a execução, após o break point
- Pause – Se o código estiver em execução, para na parte do código depurável e permite a depuração
- Stop Debugging(Shift + F5) – Interrompe a depuração
- Restart(Ctrl + Shift + F5) – Reinicia a aplicação e a depuração
- Show Next Statement – Foca na linha de código da execução
- Step into(F11) – Entra dentro do método ou código para depurá-lo
- Step over(F10) – Vai para a próxima linha de execução, se a linha atual for uma função, não entra na mesma
- Step out(Shift + F11) – Sai do método atual e vai para o método o que chamou
Clique no Step out, veja que as variáveis são atualizar na janela Watch. Após isto, interrompa a depuração, Stop Debugging, e vamos escrever o salvar.
Programe o click do btnSalvar para atualizar o texto na visualização e salvar o conteúdo do txtTexto em um arquivo em disco do servidor, na raiz do site, chamado TextoUsuario.htm. Depois de feito seu código ficará parecido com o código da Imagem 10.
Imagem 10 – Default.aspx.cs
O código pega o diretório raiz do site, e cria um arquivo texto. Adiciona texto ao arquivo dentro de um try finally, para garantir que o arquivo sempre será fechado. Se quisermos ainda saber sobre algum método ou classe, basta posicionarmos o cursor neste e pressionar F1 que será aberto o help do item selecionado.
Execute o código sem depurar, através do menu Debug / Start Without Debugging. Digite um texto e clique em salvar. Feito isto, vá no solution explorer, clique no botão refresh e veja que o novo arquivo agora é listado, conforme imagem 11.
Imagem 11 – Atualizando o Solution Explorer
