O Visual Studio .NET é o ambiente gráfico, para desenvolvimento de aplicações .NET, dentre elas páginas ASP.NET e aplicações Web. Conforme veremos neste tópico, uma das grandes vantagens do Visual Studio .NET é que podemos criar páginas ASP.NET, com a mesma facilidade com que criávamos aplicações para o Windows, utilizando o Visual Basic 6.0 ou o Delphi 6.0.

Com o Visual Studio .NET podemos criar páginas ASP.NET, simplesmente arrastando elementos em uma interface gráficas, configurando propriedades para estes elementos e definindo código para ser executado em resposta a eventos disparados pelos elementos da página.

Inicialmente veremos quais as principais novidades do Visual Studio .NET e daremos uma olhada rápida no Ambiente de Desenvolvimento. Em seguida construiremos alguns exemplos, utilizando instruções detalhadas, passo-a-passo.

Importante= Para que você possa acompanhar os exemplos deste tópico, faz-se necessário que você tenha o Visual Studio .NET instalado. A instalação do Visual Studio .NET é bastante simples, sendo idêntica a instalação de qualquer aplicativo Windows. Embora simples, o processo todo demora cerca de duas horas. Você pode obter uma versão de avaliação do Visual Studio .NET, no seguinte endereço:

http://msdn.microsoft.com/vstudio/nextgen/beta.asp

O que há de novo no Visual Studio .NET

Em primeiro lugar uma interface única, ou seja, quer estejamos criando uma aplicação Win32 utilizando VB.NET ou uma aplicação Web utilizando C# e ASP.NET, o ambiente RAD (Rapid Application Development) é o mesmo. Nas versões anteriores do Visual Studio, cada linguagem tinha o seu próprio ambiente de desenvolvimento, agora com o Visual Studio .NET todas as linguagens e projetos compartilham um ambiente comum, apenas com menus e barras de ferramentas que se adaptam de acordo com projeto e elemento que está sendo editado.

Start Page: Ao abrirmos o Visual Studio .NET é carregada uma página chamada de Start Page. Esta página permite que o usuário configure o ambiente de desenvolvimento de acordo com as suas preferências. Por exemplo, pode ser que você esteja acostumado com a interface do Visual Basic 6.0 e prefira ter os menus, barras de ferramentas e teclas de atalho configuradas de uma maneira semelhante ao que era no VB 6. Para solicitar tal configuração, na página inicial (Start Page), você clica na opção My Profile e seleciona as opções indicadas na Figura 13.12.

Figura 13.12 Personalizando o ambiente do Visual Studio .NET.

Suporte a tecnologia Windows Instaler, Edição de HTML e CSS (Cascadin Style Sheets) diretamente no ambiente, edição de XML, visualizção de págians diretamente no ambiente do Visual Studio, o que facilita o teste e depuração, etc.

São inúmeras as novidades. O próprio Ambiente do Visual Studio .NET serve de assunto para um livro inteiro. Para maiores informações sobre as novidades consulte o seguinte endereço:

http://msdn.microsoft.com/vstudio/nextgen/overview.asp

Você também pode consultar a documentação do Visual Studio .NET.

Agora vamos conhecer um pouco do novo ambiente, através da criação de alguns exemplos.

Exemplo 1: Criando uma aplicação “ASP.NET Web Application”.

Neste exemplo vamos criar uma aplicação Web, baseada em ASP.NET e C#. Para a criação desta aplicação precisamos que o IIS (Internet Information Services) e o Visual Studio .NET estejam instalados e funcionando. Estarei utilizando um servidor com os seguintes dados:

Sistema: Windows 2000 Server em Inglês

Nome: Servidor

IP: 10.204.123.1

Diretório raiz do IIS: d:\inetpub\wwwroot

Sempre que for feita referência a uma destas configurações, substitua pelas configurações que você estiver utilizando, caso sejam diferentes das aqui apresentadas.

Criaremos uma aplicação Web chamada: AppWebChap13. Dentro desta aplicações Web, criaremos algumas páginas ASP.NET utilizando o Visual Studio .NET. Para nos conectarmos com as páginas da aplicação AppWebChap13, utilizaremos o seguinte endereço:

http://servidor/AppWebChap13/nome_da_página.aspx

Para criar a aplicação Web: AppWebChap13, faça o seguinte.

1.         Abra o Visual Studio .NET: Iniciar -> Programas -> Microsoft Visual Studio .NET 7.0 -> Microsoft Visual Studio .NET 7.0 (é duas vezes mesmo, uma é a pasta de opções e outra é o atalho para o Visual Studio).

2.         O Visual Studio é carregado e a página “Start Page” é exibida, conforme indicado na Figura 13.13:

Figura 13.13 Personalizando o ambiente do Visual Studio .NET.

3.         Para criar uma nova aplicação Web, devemos criar um novo Projeto. Isto pode ser feito clicando na opção “New Project” da página de abertura ou selecionando o comando File -> New -> Project ou pressionando Ctrl+Shift+N.

4.         Dê um clique na opção New Project. Será aberta a janela “New Project”, onde podemos selecionar o tipo de aplicação que será criada.

5.         Em Project Types, dê um clique em “Visual C# Projects”.

6.         Nas opções que são exibidas, no painel da direita, dê um clique em “ASP.NET Web Application”.

7.         No campo Name, digite: AppWebChap13.

8.         No campo Location, digite: http://SERVIDOR.

A janela New Project deve estar com as configurações indicadas na Figura 13.14.

Figura 13.14 Criando o projeto AppWebChap13.

10.       Dê um clique on botão OK e aguarde alguns instantes.

11.       Surge uma janela indicando que uma nova aplicação Web está sendo criada, conforme indicado na Figura 13.15.

Figura 13.15 Novo projeto sendo criado.

12.       O projeto é criado e, por padrão, é criada, dentre outros elementos, uma página ASP.NET chamada WebForm1.aspx. Este formulário pode ser acessado através do endereço:

http://servidor/AppWebChap13.WebForm1.aspx.

Toda aplicação Web tem uma página que é chamada de página inicial do projeto. É o mesmo conceito de página padrão de um diretório virtual, ou seja, se simplesmente digitarmos o endereço: http://servidor/AppWebChap13, será carregada a página inicial do projeto, no nosso exemplo: WebForm1.aspx.

13.       Além da página inicial, o Visual Studio .NET cria uma série de outros arquivos que são utilizados par a configuração da aplicação Web. Estes arquivos podem ser gerenciados através da janela Solution Explorer, destacada na Figura 13.16.

Figura 13.16 Os elementos que compõem a aplicação Web.

14.       Outro elemento importante do ambiente de desenvolvimento, é a Barra de Ferramentas – Toolbox. Quando você coloca o mouse sobre esta opção é exibida uma barra com os diversos elementos que podemos colocar em nossas páginas ASP.NET, conforme destacado na Figura 13.17

Figura 13.17 A barra de ferramentas para a criação da página ASP.NET.

15.       Na Toolbox temos os diversos controles que podem ser colocados em uma página ASP.NET. São os mesmos controles que aprendemos a utilizar nos capítulos 7, 8 e 9. A diferença é que com o Visual Studio .NET, podemos criar a página, utilizando um ambiente gráfico, onde simplesmente arrastamos os controles, configuramos as propriedades destes e criamos código que executa em resposta aos eventos gerados na página.

16.       Vamos adicionar um controle do tipo Label, onde colocaremos o seguinte texto: Primeira página criada como o Visual Studio. Em seguida vamos salvar a página WebForm1.aspx e enviar as alterações para o servidor, para que a página possa ser testada.

17.       Aponte o mouse para Tollbox. Nas opções que surgem, dê um clique no controle Label e arraste-o para a página WebForm1.aspx. Utilize o mouse para aumentar o tamanho do controle.

18.       Para alterar o texto do label, utilizamos a janela Properties que, por padrão, encontra-se no lado direito da tela, abaixo da janela Solution Explorer.

19.       Certifique-se de que o controle Label esteja selecionado e localize a propriedade Text, na janela de propriedades. Altere o valor desta propriedade para “Primeira página criada com o Visual Studio”.

20.       Observe que temos diversas propriedades que podem ser alteradas, como por exemplo a cor de segundo plano (BackColor), a cor das bordas (BorderColor), etc. A medida que vamos alterando estas propriedades o Visual Studio vai, automaticamente, gerando o código da página ASP.NET para refletir as mudanças.

21.       Na propriedade BackColor, selecione um cinza claro. A sua janela deve estar semelhante a indicada na Figura 13.18.

Figura 13.18 Criando a primeira página.

22.       Agora vamos salvar o projeto.

23.       Selecione o comando File -> Save All.

24.       O Visual Studio primeiro salva uma cópia local dos arquivos e páginas que fazem parte do projeto. Em seguida precisamos enviar estas alterações para o servidor. Para isso selecione o comando Build -> Build.

25.       Na parte inferior do Visual Studio surge a janela Output, informando sobre o andamento do processo de envio da aplicação para o servidor. No final, se não for encontrado nenhum erro, será exibida, na janela Output, a seguinte mensagem:

---------------------- Done ----------------------

    Build: 1  succeeded, 0 failed, 0 skipped

26.       Abra o Internet Explorer e acesse o seguinte endereço:

http://servidor/AppWebChap13/WebForm1.aspx

27.       Você obterá os resultados indicados na Figura 13.19.

Figura 13.19 Carregando a página criada com o Visual Studio.

28.       Agora vamos analisar o código gerado pelo Visual Studio.

29.       Para acessar o código da página WebForm1.aspx, dê um clique na opção HTML, que aparece ao lado da opção Design, na base da página, conforme indicado na Figura 13.20. O modo Design é o modo gráfico, onde vamos arrastando os elementos para a página e o modo HTML é o modo onde é exibido o código da página.

Figura 13.20 Exibindo o código da página.

30.       Observe que o controle Label é definido com a utilização de um Web Server Control do tipo asp.Label. Este código é gerado, automaticamente, pelo Visual Studio, conforme indicado a seguir:

<asp:Label id=Label1 

style="Z-INDEX: 101; LEFT: 80px; POSITION: absolute;  TOP: 46px" 

runat="server" 

Width="325px" 

Height="38px" 

BackColor="#E0E0E0">

“Primeira página criada com o Visual Studio”

</asp:Label>

31.       Agora vamos ver uma das pequenas maravilhas do Visual Studio.

32.       Clique no controle Label, após a opção runat=”server”. Vamos definir que o texto deve ser exibido em negrito. Para isso você lembra que existe uma propriedade Font...,, alguma coisa.

33.       Experimente, simplesmente teclar a barra de espaços e observe: Será exibida uma lista com todas as propriedades, métodos e eventos disponíveis para o controle do tipo Label, conforme indicado na Figura 13.21.

Figura 13.21Com o Visual Studio é fácil localizar os membros de um controle.

34.       Na lista que é exibida selecione a opção Font-Bold e tecle o sinal de igual (=). Observe outra maravilha: O Visual Studio mostra a lista de valores possíveis para a propriedade selecionada, no nosso exemplo: True ou False. Basta selecionar True e pronto, está habilitado Negrito para o nosso controle. Com este recurso do Visual Studio fica muito mais fácil localizar as propriedades, métodos e eventos de um determinado elemento. Quando selecionamos um método, são destacados os parâmetros e os tipos de cada parâmetro. Este recurso é de grande valor, pois além de localizar rapidamente a propriedade ou método desejado, reduz drasticamente a entrada de valores incompatíveis para a propriedade ou para os parâmetros de um método.

35.       Vamos salvar novamente a nossa aplicação: File -> Save All.

36        Vamos atualizar a versão da aplicação no Servidor: Build -> Build.

37.       Agora é só testá-la novamente, utilizando o endereço:

http://servidor/AppWebChap13/WebForm1.aspx

38        Você obterá os resultados indicados na Figura 13.22

39.       Mantenha o Visual Studio .NET aberto.

Figura 13.22 Versão atualizada da nossa aplicação.

Agora que já conhecemos os aspectos básicos da criação de uma aplicação Web, com o Visual Studio, vamos criar mais alguns exemplos, para aprender a utilizar melhor a interface gráfica.

Exemplo 2: Criando uma nova página na aplicação AppWebChap13.

Neste exemplo vamos criar uma nova página ASP.NET, na aplicação AppWebChap13. Vamos chamar esta página de Form2.aspx. Neste formulário colocaremos um controle do tipo DropDownList e dois controles do tipo TextBox, para o usuário digitar informações. Também colocaremos um botão Enviar. Quando o usuário clica no botão Enviar, utilizaremos o evento OnClick do botão, para exibir os valores digitados pelo usuário em um controle TextArea.

1.         Para criar uma nova página ASP.NET utilize o seguinte comando:

            File – Add New Item.

2.         Na janela Add New Item que é aberta, seleciona a opção Web Form. No campo Name, digite Form2.aspx, conforme indicado na Figura 13.23.

Figura 13.23 Adicionando um novo Web Form.

3.         Dê um clique no botão Open. A página Form2.aspx será criada e exibida no Visual Studio.

4.         Agora vamos arrastar os seguintes controles:

            Um controle do tipo DropDownList

            Três controles do tipo TextBox

            Quatro controles do tipo Label, um ao lado de cada um dos controles anteriores, para identificar o conteúdo de cada controle.

            Um controle do tipo Button.

6.         Neste momento os controles estão desalinhados. Para alinhar os controles facilmente, você pode selecionar os controles a serem alinhados e depois utilizar o comando Format -> Align . Para selecionar vários controles você pode segurar a tecla Shift e ir clicando nos controles a serem selecionados.

7.         Agora que alinhamos os controles vamos configurar as diversas propriedades de cada controle.

8.         Configure a propriedade Text, para os controles Label e para o controle Button, com os valores indicados na Figura 13.24.

Figura 13.24 Definindo os rótulos para os controles.

9.         Agora vamos configurar a propriedade Id para o controle DropDownList,  para os controles TextBox e para o controle Button, conforme indicado a seguir:

            DropDownList          ->        ID= SelecionaPais

            Primeiro  TextBox     ->        ID= Nome

            Segundo  TextBox      ->        ID= Email

            Terceiro  TextBox     ->        ID= Exibe

            Controle  Button      ->       ID= Enviar

10.       Agora vamos configurar as demais opções dos controles do nosso formulário.

11.       Vamos adicionar os seguintes itens para o controle DropDownList:

•             Argentina
•             Brasil
•             Chile
•             EUA
•             França

12.       Para adicionar itens em um controle DropDownList utilizamos a propriedade Items, do controle SelecionaPais. Dê um clique neste controle para selecioná-lo. Na lista de propriedades, na janela de propriedades, localize a propriedade Items. Ao clicar nesta propriedade será habilitado um botão com reticências (...), ao lado da propriedade. Dê um clique no botão com as reticências, será exibida a janela “ListItem Collection Editor”. Para adicionar um item à lista, clique no botão Add. Na coluna da direita, serão exibidos os campos para definição do item. Para o primeiro item, defina as propriedades conforme indicado na Figura 13.25.

Figura 13.25 Adicionando items ao controle DropDownList.

13.       Utilize o botão Add para adicionar os demais itens. No final a sua janela deve estar conforme indicado na Figura 13.26.

Figura 13.26 Completando a lista.

14.       Dê um clique no botão OK e pronto, a lista será construída.

15.       Agora precisamos criar o código que executa em resposta ao evento OnClick do botão de comando. Para definir este procedimento, basta dar um clique duplo no botão “Enviar Dados”. Automaticamente é aberta a janela de código, com a estrutura do procedimento já definida. Tudo o que temos que fazer é digitar o seguinte código:

string Dados;

            Dados=  "País: "+ SelecionaPais.SelectedItem.Value + "\n"+

                    "Nome: " + Nome.Text+  "\n"+

                    "E-mail: " + Email.Text;

Exibe.Text = Dados;

16.       Agora só falta configurar a propriedade TextMode, do controle Exibe. Altere de SingleLine para MultiLine. O formulário Form2.aspx deve estar conforme indicado na Figura 13.27.

Figura 13.27 Completando o formulário.

17.       Salve as alterações: File -> Save All.

18.       Vamos enviar as alterações para o servidor: Build -> Build.

19.       Agora vamos testar a página Form2.aspx, utilizando o endereço: http://servidor/AppWebChap13/Form2.aspx

20        Na lista de países selecione

21.       No campo Nome digite: José da Silva.

22.       No campo e-mail digite: jsilva@abc.com.br.

23.       Dê um clique no botão Enviar Dados.

24.       Você obtém os resultados indicados na Figura 13.28.

Figura 13.28 Testando a página Form2.aspx.

25.       Mantenha o Visual Studio .NET aberto.

Vamos criar mais um exemplo, onde aprenderemos a conectar com um banco de dados, utilizando o Visual Studio.

Exemplo 3: Conectando com um banco de dados do Microsoft Access.

Neste exemplo vamos criar uma nova página ASP.NET, na aplicação AppWebChap13. Vamos chamar esta página de Dados.aspx. Vamos utilizar um assistente do Visual Studio, assistente este que criará a página automaticamente.

A página dados.aspx, que iremos construir, exibirá dados da tabela Customers (Clientes) e da tabela Orders (Pedidos), do banco de dados NorthWind, do SQL Server 2000. No equipamento que estou utilizando para este exemplo, tenho instalada a seguinte instância do SQL Server 2000: SERVIDOR\INSTANCIA1. Se você estiver utilizando uma instalação do SQL Server 2000, com um nome diferente, sempre que houver referência a SERVIDOR\INSTANCIA1, substitua pelo nome que você está utilizando.

1.         Para criar a página dados.aspx, estando com a aplicação AppWebChap13 aberta, execute o seguinte comando:

            File – Add New Item.

2.         Na janela Add New Item que é aberta, seleciona a opção Data Form Wizard. No campo Name, digite data.aspx, conforme indicado na Figura 13.29.

Figura 13.29 Utilizando um assistente doVisual Studio.

3.         Dê um clique no botão Open.

4.         A primeira tela do assistente “Data Form Wizard” será exibida.

5.         Dê um clique no botão Next, seguindo para a próxima etapa do assistente.

6.         Nesta etapa temos a opção de criar um novo objeto DataSet.

7.         Dê um clique na opção “Create a new dataset named:” e no campo nome digite: ListaDePedidos, conforme indicado na Figura 13.30.

Figura 13.30 Criando um novo objeto do tipo DataSet.

8.         Dê um clique no botão Next, seguindo para a próxima etapa do assistente.

9.         Nesta etapa vamos definir a conexão com o banco de dados.

10.       Dê um clique no botão New Connection. Será exibida a janela Connection.

11.       Dê um clique na guia Provider e certifique-se de que a opção “Microsoft OLE DB Provider for SQL Server” esteja selecionada, conforme indicado na Figura 13.31.

Figura 13.31 Selecionando o OLE DB Provider para o SQL Server.

12.       Dê um clique na guia Connection.

13.       Na lista “Select or enter a server name”, selecione SERVIDOR\INSTANCIA1 (ou o nome do servidor que você estiver utilizando).

14.       No item 2, da guia Connection, defina as informações de conexão. No meu exemplo estou utilizando a opção “Use a specific user name and password”. Para usuário estou utilizando as, com senha em branco. Marquei as opções “Blank Password” e “Allow saving password”. No item 3, selecionamos o banco de dados com o qual queremos nos conectar. Para o nosso exemplo, selecione NorthWind. A guia Connection deve estar com as configurações indicadas na Figura 13.32.

Figura 13.32 Definindo as configurações de conexão.

15.       Dê um clique no botão OK. Você estará de volta ao assistente Data Form Wizard.

16.       Dê um clique no botão Next, seguindo para a próxima etapa do assistente.

17.       Nesta etapa definimos de quais tabelas queremos acessar informações. Clique na tabela Customers e dê um clique no botão (>) para adicionar a tabela à coluna da direita. Repita a operação para a tabela Orders. Sua tela deve estar conforme indicado na Figura 13.33.

Figura 13.33 Definindo as tabelas que serão acessadas.

18.       Dê um clique no botão Next, seguindo para a próxima etapa do assistente.

19.       Nesta etapa, que só existe quando temos duas ou mais tabelas, podemos definir um relacionamento entre as tabelas. Para o nosso exemplo, vamos definir um relacionamento do tipo “Um para Vários”, entre a tabela Customers (lado um) e a tabela Orders (lado vários). O relacionamento será estabelecido através do campo comum as duas tabelas: CustomerID. Na prática este relacionamento está definindo que cada cliente é cadastrado uma única vez e pode fazer vários pedidos. Para maiores informações sobre relacionamentos e o modelo de dados relacionais, consulte o Anexo II.

20.       No campo Name digite RelClientesPedidos.

21.       Na lista Parent table, selecione Customers.

22.       Na lista Child table, selecione Orders.

23.       Na lista Keys, selecione CustomerID, para as duas listas da primeira linha. Depois dê um clique no botão (>), para criar o relacionamento. Observe que o relacionamento RelClientesPedidos é exibido na coluna Relations. Clique neste relacionamento e as propriedades definidas para o relacionamento RelClientesPedidos serão exibidas, conforme indicado na Figura 13.34.

Figura 13.34 Definindo um relacionamento entre as tabelas Customers e Orders.

24.       Dê um clique no botão Next, seguindo para a próxima etapa do assistente.

25.       Neste etapa você define quais campos de cada tabela devem ser exibidos na página. Deixe marcados apenas os seguintes campos:

            Tabela Customer:       CompanyName

                                   Phone

            Tabela Orders:         OrderID

                                   Freight

                                   ShipCity

                                   ShipCountry

26.       Dê um clique no botão Finish.                      

27.       O assistente será encerrado e a página data.aspx. será criada, conforme indicado na Figura 13.35.

Figura 13.35 Página criada com o assistente Data Form Wizard.

28.       Observe, na parte de baixo da página, que foram criados diversos objetos que dão suporte a conexão:

            DataSet             objListaDePedidos

            OleDbConnection     oleDbConnection1

            OleDbDataAdapter    oleDbDataAdapter1

            OleDbDataAdapter    oleDbDataAdapter2

29.       Agora vamos testar a página dados.aspx.

30.       Salve as alterações: File -> Save All.

31.       Vamos enviar as alterações para o servidor: Build -> Build.

32.       Agora vamos testar a página dados.aspx, utilizando o endereço:

http://servidor/AppWebChap13/data.aspx

33        Será carregada a página data.aspx, onde é exibido um botão Load. Dê um clique no botão Load. É exibida uma lista com o nome e o telefone dos clientes, além de um link “Show Details”. Ao clicar neste link, será exibido, no final da página, uma lista com os pedidos para o respectivo cliente, conforme indicado na Figura 13.36.

Figura 13.36 Página data.aspx criada com o assistente Web Data Wizard.

Observe que com a ajuda do assistente criamos, rapidamente um formulário que exibe dados de duas tabelas diferentes, do banco de dados NorthWind, do SQL Server 2000. Evidentemente, que o assistente não é a solução para todos os casos. Eu aconselho que você utilize o assistente para criar as funcionalidades básicas da página e depois faça as alterações necessárias.

Conforme descrito no início deste tópico, o Visual Studio .NET é assunto para um livro inteiro. Para o escopo proposto, encerramos o nosso estudo do Visual Studio por aqui.