Baixar e instalar
Para utilizá-la:
1. Baixe a versão http://www.microsoft.com/express/download/;
2. Instale em sua máquina, desde que atenda os seguintes requisitos:
Arquitetura suportada
· x86
· x64
Sistemas Operacionais
· Microsoft Windows XP
· Microsoft Windows Server 2003
· Windows Vista
Hardware requerido
· Mínimo: 1.6 GHz CPU, 192 MB RAM, 1024x768 display, 5400 RPM hard disk space
· Recomendado: 2.2 GHz CPU ou maior, 384 MB ou mais, 1280x1024 display, 7200 RPM or higher
· Windows Vista: 2.4 GHz CPU, 768 MB RAM 1.3 GB de espaço disponível para instalção completa
Caso você tenha alguma dúvida, pode frequentar a página de FAQ:
http://www.microsoft.com/express/support/faq/
Geral sobre o ambiente
Ao abrir o Visual Web developer 2008 Express Edition será mostrado a Start Page(página inicial), conforme imagem 1.
Imagem 1 : Visual Web developer 2008 Express Edition Start Page
As opção aqui são:
Recent Projects
Neste estão listados todos os projetos abertos recentemente, é possível abri-lo ao clicar neste.
Getting Started
Aqui estão disponíveis links com informações e tutoriais para se iniciar no uso do Visual Web developer 2008 Express Edition.
MSDN: Visual Web developer Express EditionDisponível diversos links com as últimas novidades.
Vamos criar um novo web site para explorar os recursos da IDE. No menu File/New Web Site, nos será mostrado a tela da imagem 2.
Imagem 2 : Tela para criar um novo web site.
Aqui há diferentes tipos de aplicações que podemos criar, ASP.NET é a que vamos nos ater e utilizar por agora. Na seleção de Location, podemos escolher os diferentes tipos de localização: File System, Http e Ftp. Selecionamos File System e especificamos um caminho e nome de projeto na próxima caixa de texto. Na seleção Language, podemos escolher entre as linguagens Visual Basic e C#, selecionamos C#. Clicamos em OK.
Será aberto o projeto criado conforme imagem 3:
Image 3 : Projeto criado
Janela de edição
Neste projeto já é criado a página Default.aspx. Já podemos visualizar, na janela de edição, o código ASPX e HTML desta página. Conforme imagem 4, estamos visualizando o fonte desta página(Source), ainda podemos trocar para desenhar visualmente(Design) e a visualização dividida, onde é mostrado os dois anteriores(Split).
Imagem 4 : Tipo de visualizações ASPX.Solution Explorer(Explorar solução)
Há também a janela solution explorer, imagem 5, que permite explorar nossa solução, onde é listado todos os arquivos que fazem parte de nossa solução, se clicarmos duas vezes em um arquivo visualizamos o arquivo no editor.
Imagem 5: Solution ExplorerClicando com o botão direito no web site, temos várias opções, podemos montar o site, adicionar novos arquivos e existentes, e criar diretórios e muito mais, veja na imagem 6.
Imagem 6 : Clicando com o botão direito na solução
Properties(Janela de propriedade)
Esta janela mostra as propriedades disponíveis, de acordo com o elemento ativo. Neste caso, como havia clicado no web site, estou visualizando e podendo editar as propriedades pertinentes a este, conforme imagem 7. Como a propriedade Virtual path está selecionada, ainda podemos ver uma descrição da propriedade na parte inferior da janela.
Esta janela mostra diferentes propriedades de acordo com o elemento selecionado.
Imagem 7: Janela de propriedades
Existem propriedades que podem somente ser visualizadas, outras editadas alterando valores no próprio editor e outras que mostram uma janela de edição da propriedade. Para demonstrar, selecionamos o elemento DIV na nossa janela de edição, imagem 8, e posteriormente sua propriedade Style, imagem 9. Nos será mostrado um botão com texto “...”, que ao clicado será aberta a janela de edição da propriedade, imagem 10.
Imagem 8 - Selecionando o elemento DIV
Imagem 9 - Propriedade Style
Imagem 10 - Janela de edição da propriedade Style
Estas janelas nos auxiliam no preenchimento da propriedade do controle. Neste caso, temos acesso a várias propriedades de estilo do controle de forma visual
Janelas não visíveis
Caso uma janela não esteja visível, podemos abrí-la através do menu View ou Debug Windows. Veremos a janela Ferramentas clicando no menu View/Toolbox
Janela Ferramentas
Como o nome diz, a janela ferramentas mostra as ferramentas disponíveis, mas estas podem variar de acordo com o item selecionado na janela de edição. Neste caso, selecionamos o Default.aspx, desta forma veremos controles e componentes possíveis de utilizar nesta página.
Arrastaremos um label para a página e alteraremos as seguintes propriedades:
Text para “Conhecendo o Visual Web developer 2008 Express Edition”, edite seu estilo;
Expandiremos a propriedade Font e iremos definir as propriedades:
Bold para True;
Size para Large;
Agora para a propriedade ForeColor, selecionaremos na janela de edição da propriedade a cor azul;
Editando o código C#
Na janela Solution Explorer clicamos duas vezes no arquivo Default.aspx.cs, se este não estiver visível expanda o arquivo Default.aspx. Aberto o arquivo Default.aspx.cs podemos reparar que este é uma classe, que descende de System.Web.UI.Page e já está com o método Page_Load criado. Neste método, adicionaremos o código conforme imagem 11:
Imagem 11 - Editando o code behind
O ASP.NET usado desta forma, com dois arquivos, permite uma separação de código(Default.aspx.cs) e de desenho(Default.aspx). Assim podemos ter numa equipe designers e desenvolvedores trabalhando de forma conjunta e evitando que ao fazer atualizações pertinentes ao seu contexto, seja desenhando ou programando, atrapalhe o trabalho do outro.
Executando o código
Iremos então executar o código para ver o resultado. Para isto vá no menu Debug/Start Without Debug. Será aberto o ASP.NET Development Server, iremos falar dele mais tarde, e o navegador mostrando a página criada.
Será mostrado uma mensagem javascript e clicamos em OK.
O ASPX gera código HTML
Ainda no navegador, visualize o código fonte da página que acabamos de criar. Para isto, se você estiver utilizando o Internet Explorer, clique com o botão direito e vá em Exibir Código fonte. A imagem 12 mostra o código fonte:
Imagem 12: ASPX gera código HTML
Repare que tudo que criamos gerou um HTML! Não importa as diferentes propriedades que você defina, os diferentes controles, no final, tudo será gerado como HTML. Por isto é muito importante para que você, que deseja ser um bom desenvolvedor Web, domine o uso do HTML.
Referências:
http://msdn2.microsoft.com/en-us/beginner/bb964635.aspx
http://www.microsoft.com/express/vwd/
Caso queira ver algumas dicas sobre este ambiente de desenvolvimento:
http://weblogs.asp.net/scottgu/archive/2007/07/28/nice-vs-2008-code-editing-improvements.aspx
http://vincenthomedev.wordpress.com/2007/08/09/vs-2008-ide/
