LAB 01: Viso geral do Ambiente Integrado de Desenvolvimento

Neste laboratrio, voc far uso do Visual Studio a fim de criar sua primeira Solution. Obtendo viso geral dos diferentes elementos do Ambiente Integrado de Desenvolvimento (Integrated Development Environment - IDE) do Visual Studio (VS). 1.1 Criando uma Soluo no VS

1. Para criar um novo projeto, no menu do Visual Studio selecione File, e ento selecione New Project ... 2. Aparecer a tela abaixo, onde voc poder escolher a linguagem e verso do .NET Framework, um modelo (template) para iniciar seu projeto, definir nomes e caminhos onde o projeto e a soluo sero salvos. Crie um projeto com o nome ProjetoWeb, escolha o local na sua pasta de trabalho, informe S2B como nome da soluo e solicite a criao de um novo diretrio, conforme (Figura 1).

Figura 1 - Janela de Dilogo Novo Projeto (New Project Dialog Box)

Ferramentas bsicas presentes no Visual Studio:

1. Solution Explorer No menu View, selecione Solution Explorer

Figura 2 - Janela Solution Explorer

A soluo um conjunto de projetos. A raiz da soluo apresentada quando dois ou mais projetos estiverem presentes na soluo atual (Figura 2). Acrescente mais um projeto na soluo para ver a raiz da soluo. A barra de ferramentas superior desta janela, apresenta aes associadas ao item selecionado. As aes mais comuns so: Properties Refresh View Code View Designer Ver propriedades do item selecionado. Atualiza o estado dos itens associados ao projeto. Abre o arquivo na interface de programao. Abre o arquivo na interface de design.

Selecione itens diferentes e observe a alterao nas aes disponveis. Tambm possvel adicionar novos itens (Add \ New item) ou itens existentes (Add \ Existing item) na soluo com um clique do boto direito sobre o projeto..

2. Class View Selecione o menu View \ Class View (Figura 3). Permite visualizar a estrutura de classes presentes na soluo em desenvolvimento.

Figura 3 - Janela Class View

Observe que a parte inferior do painel apresenta elementos do item selecionado.

3. Toolbox Selecione o menu View \ Toolbox (Figura 4). Quando uma pgina ASP.NET est aberta na interface de design, podem ser vistos os seguintes controles (ou componentes) na Janela de Toolbox.

Figura 4 - Janela Toolbox

Com o clique direito do mouse, voc pode adicionar novos controles. Novos itens podem ser adicionados (Choose Items...) ou uma nova aba (Add Tab). Continuando o exerccio, arraste sobre a interface de design de um formulrio (ex.: Default.aspx) do seu projeto web, o controle Label na aba Standard da Toolbox. Da mesma forma, arraste um controle Button (Figura 5).

Figura 5 - Figura 2.4 Resultado esperado.

4. Properties Selecione o menu View \ Properties Window (Figura 6). Nesta janela voc pode visualizar e alterar as propriedades dos controles do formulrio.

Figura 6 - Janela Properties

Clique sobre o rtulo (Label) de seu formulrio, altere as seguintes configuraes: ID Text lblMensagem Primeira Aula, S2B

Da mesma forma, altere as configuraes do boto (Button) ID btnExibir

Text 5. Executando

Exibir

Para ver os resultados no seu formulrio clique sobre o boto na barra de ferramentas (outras formas de iniciar a depurao de um formulrio so utilizar o menu Debug \ Start Debugging ou apertar a tecla F5). Pode ser necessrio habilitar a depurao do projeto, apenas confirme a depurao caso a janela de dilogo correspondente aparecer. O Visual Studio iniciar seu servidor interno e o abrir o browser para apresentar o formulrio criado (Figura 7).

Figura 7 - O formulrio apresentado pelo navegador.

1.2 Adicionando novos itens a Soluo 1. Adicionado projetos Na Janela Solution Explorer, com o clique direito do mouse sobre sua soluo, selecione Add \ New Project. Escolha um template de projeto Class Library. Desta forma tambm possvel adicionar novos tipos projetos de Windows Forms ou Web Service para sua soluo. A fim de escolher qual dos projetos ser executado no prximo debug, clique com o boto direito do mouse sobre um projeto e selecione Set as Startup Project.

2.

Adicionando novas pginas Clique com o boto direito sobre o projeto Web, no qual voc realizou o Exerccio 1, adicione um novo arquivo, do tipo Web Form. E lhe de nome exerccio 2 Da mesma forma que foi feito no Exerccio 1, adicione novos controles sobre este formulrio. Adicione 2 botoes e 2 labels Clique com o boto direito do mouse sobre este arquivo na janela Solution Explorer, selecione Set As Start Page, desta forma voc definiu que no prximo debug, a pgina a ser exibida ser este formulrio.

1.3 Uso de If e Else 1. Crie um novo Web Form com o nome Exercicio3.aspx. 2. 3. 4. 5. 6. 7. Sobre este formulrio, adicione dois controles do tipo TextBox, um Button e um Label. No primeiro TextBox, altere a propriedade ID para txtUsuario No segundo TextBox, altere a propriedade ID para txtSenha e TextMode para Password No Button, altere a propriedade ID para btnValidar e a propriedade Text para Validar No Label, altere a propriedade ID para lblResultado Selecione o btnValidar, clique em Eventos (boto eventos referentes ao btnValidar. ) da Janela de Propriedades. Nesta nova tela voc pode acionar os

8. 9.

Escolha o evento Click. Clique duplo com o boto esquerdo do mouse sobre ele. Se voc executou todos os procedimentos corretamente, voc se deparar com a interface de programao:

10. Nesta interface dentro do evento btnValidar_Click, faa uma operao com if, testando se as propriedade Text dos campos txtUsuario ou txtSenha esto vazio, caso verdadeiro atribuir Invlido a propriedade Text de lblResultado, conforme o modelo: protected void btnValidar_Click(object sender, EventArgs e) { if (txtUsuario.Text == String.Empty || txtSenha.Text == String.Empty) { lblResultado.Text = "Invlido"; } } 11. Visualize o resultado apertando F5. 12. Por fim faa uso de else para alterar o texto de lblResultado para Vlido, numa situao onde txtUsuario e txtSenha possuem texto. 13. Use sua criatividade e raciocnio, para alterar a cor da fonte do lblResultado via cdigo neste mesmo evento. Altere a cor para vermelho, caso o texto seja invlido ou para azul, caso seja vlido. 14. Execute e teste sua soluo.

1.4 Uso do Switch... Case

1. 2. 3. 4.

Crie um formulrio com o nome Exercicio4.aspx, adicione 2 TextBox, 1 Button e 1 Label. Adicione um Label com propriedades: ID lblUsuario, Text Usuario: e AssociateControlID txtUsuario, Adicione outro Label com propriedades: ID lblSenha, Text Senha: e AssociateControlID txtSenha. Descubra como alterar a cor de fundo de seu formulrio utilizando a janela de propriedade e a interface de design. Mousedireito, Page properties ou boto cor na barra de ferramentas

5.

Aproxime seu layout com o modelo:

6. 7.

Crie um evento para o boto Validar, testando se h ou no texto dentro do TextBox de Usurio e Senha. Agora, imagine a seguinte situao: Considere a seguinte relao de nomes de usurios e suas respectivas senhas e cargos: Usurio Eduardo Antonio Gustavo Mateus Senha 1 2 3 4 Cargo Gerente Funcionrio Funcionrio Funcionrio

Voc precisa utilizar seu formulrio, a fim de redirecionar os usurios do tipo Gerente para um formulrio com nome Gerentes.aspx e os usurios do tipo Funcionario para um formulrio com nome Formularios.aspx. Na soluo deste exerccio exigido o uso de switch... case. Na prtica, existem outras maneiras para resolver esse problema. Exercite Obs.: Procure entender a funo Response.Redirect() para concluir este exerccio. Response.Redirect(url da pgina)

1.5 Uso de estrutura de repetio 1. Crie um novo formulrio com o nome de Exercicio5.aspx 2. Adicione ao formulrio um label para o texto Dia:, aps este label insira um dropdownlist.

3. 4. 5.

Novamente um label para o texto Ms:, em seguida um dropdownlist. Por fim mais um label para o texto Ano: e um dropdownlist. Procure manter um padro de nomenclatura para ID destes controles, Ex: lblDia para label e ddlDia para dropdownlist. Agora dentro do evento Page_Load de seu formulrio, faa uso de estruturas de repetio distintas para preencher as dropdownlist referente a dia (1 a 31), ms (1 a 12) e ano (1900 a 2050). Obs.: Procure entender a funo de IsPostBack e como adicionar por cdigo novos items para uma dropdownlist. Resultado esperado:

6.

7. 8.