Desenvolvimento de Software para Internet Unidade II Copia

Prévia do material em texto

36
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
Unidade II
A partir deste ponto, iremos apresentar técnicas de programação aplicadas à plataforma web. 
Iremos entender como desmembrar a estrutura do código HTML, de forma que possamos buscar maior 
qualidade de desenvolvimento e desempenho de manutenção.
A partir da compreensão do funcionamento da construção de websites, torna‑se fácil seguir 
os passos necessários para criar páginas e identificar as diversas maneiras como aplicações web 
são implementadas.
3 Visão Geral do Microsoft .Net fraMework
O .NET Framework foi construído com o objetivo de ser um ambiente de tempo de execução, que tem 
por finalidade gerenciar os aplicativos, que de alguma forma têm como meta o .NET Framework. Pode‑se 
considerar que todo o tempo de execução tem como objetivo uma linguagem comum, que disponibiliza 
um gerenciamento de memória, bem como outros serviços. Entretanto, o .NET Framework administra 
ainda uma extensa biblioteca de classe, bem como possibilita aos desenvolvedores a oportunidade de 
aproveitar com eficácia um código robusto e confiável, de forma a garantir a excelência de todas as 
principais áreas de desenvolvimento da solução.
3.1 introdução conceitual do .Net framework e asP.Net
O .NET Framework é uma estrutura que valida itens de execução gerenciados, em que é proporcionada 
uma variedade de serviços, como a disponibilização para diversos aplicativos em estado de execução. 
Basicamente, o componente CLR (Common Language Runtime) é o mecanismo responsável por efetuar 
a execução e a manipulação dos aplicativos que naquele instante estão em execução, juntamente com as 
bibliotecas de classes do .NET Framework, que fornece uma biblioteca gerenciável e testada, bem como 
reutilizável, para que, com grande eficácia, o desenvolvedor consiga utilizar a partir de seus próprios 
aplicativos. Esses serviços podem ser detalhados a seguir:
•	 Multiplataforma: biblioteca de classes portátil segregada no .NET Framework, em que os 
desenvolvedores podem abstrair e construir assemblies que funcionem em diversas plataformas 
do .NET Framemork, como Windows Phone, Xbox 360 e Windows 8.1.
•	 Execução lado a lado: auxilia na solução de conflitos de versão, permitindo que diversas versões 
do CLR utilizem o mesmo computador.
•	 Compatibilidade de versões: com algumas exceções, as aplicações desenvolvidas com 
a utilização do .NET Framework podem ser executados sem que haja modificações em 
versões anteriores.
37
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
•	 Gerenciar memória: no desenvolvimento de aplicações web, programadores articulam toda a 
gestão de conjunto de memória de um objeto. Em aplicações utilizando .NET Frameworks, o CLR 
disponibiliza tais serviços em nome do aplicativo.
•	 Biblioteca com diversas classes: possibilita ao programador a redução de códigos na aplicação, 
garantindo operações de programação comuns em baixo nível.
 saiba mais
Para saber mais a respeito do tema, sugerimos a leitura do artigo 
Introdução ao .NET Framework disponível no link indicado:
INTRODUÇÃO ao .NET Framework. Microsoft Developer Network. 
2015. Disponível em: <https://msdn.microsoft.com/pt‑br/library/
hh425099(v=vs.110).aspx>. Acesso em: 30 jul. 2015.
4 criaNdo uM Microsft asP.Net web forM
Primeiro, é importante sabermos que a camada de apresentação é a entrada de dados de uma página 
web. Por vezes, ela é apresentada em projetos de software como Front‑End e definida como protótipo na 
fase de levantamento de requisitos.
 lembrete
Antes de efetuar qualquer construção de página é importante ter em 
mãos o protótipo de sua página, previamente homologada pelo usuário. Com 
este protótipo em mãos, todo o trabalho de construção torna‑se ágil e eficaz.
Figura 24 – Camada de apresentação
38
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
 saiba mais
Para saber mais sobre prototipação e qualidade de desenvolvimento 
web, sugerimos a leitura do artigo:
JANONES, R. de S. Qualidade de software: uma questão de eficiência. 
DevMedia, Rio de Janeiro, [s.d.]. Disponível em: <http://www.devmedia.com.
br/qualidade‑de‑software‑uma‑questao‑de‑eficiencia/17803>. Acesso 
em: 5 ago. 2015.
4.1 adicionando código a um asP.Net web form
Um código adicionado a um Web Form pode ter algumas linguagens vinculadas a sua codificação, 
tais como:
•	 VB.NET:	desenvolvedores	Visual	Basic,	ASP;
•	 C#:	desenvolvedores	C,	C++,	Java.
Cada formulário/página é uma classe da aplicação, ou seja, todos os eventos “construídos” em Web 
Form	serão	acompanhados	de	classes	C#	(.cs)	ou	VB	(.vb).
Páginas web podem também ser entendidas pela seguinte estrutura:
•	 HTML: será a linguagem utilizada para a marcação de texto usada, definindo a apresentação das 
páginas nos navegadores web.
•	 Javascript: será a linguagem de script (client‑side) utilizada para dar interatividade à construção 
das páginas web.
•	 	ASP.Net: será a linguagem de script (server‑side) utilizada para a criação de conteúdo dinâmico 
das páginas web.
39
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
<html>
<head>
 <title>Asp.Net</title>
</head>
<body>
 <center>
 <h1>Introdução ASP.NET</h1>
 </center>
<script language=javascript>
 alert(“Meu Teste javascript”);
</script>
</body>
</html>
Figura 25	–	HTML	+	Javascript
<html>
<head>
 <title>Asp.Net</title>
</head>
<body>
 <center>
 <h1>Introdução ASP.NET</h1>
 </center>
</body>
</html>
Figura 26 – Página HTML
 observação
O desenvolvimento web utilizará conceitos de Programação Orientada 
a	 Objetos,	 como	 a	 linguagem	 C#.	 É	 interessante	 que	 o	 aluno	 esteja	
amparado de estudos dessa disciplina, para que conceitos apresentados 
nesse livro‑texto possam ser melhor desenvolvidos.
A camada de apresentação utilizando recursos do ASP.NET pode oferecer uma série de componentes, 
capazes de enriquecer toda a construção e design da página web, garantindo facilidade e praticidade no 
desenvolvimento de aplicações web. Alguns dos componentes muito utilizados em construção web são: 
TextBox, DropDownList e Button.
Pode‑se também trabalhar com componentes mais complexos, que, muitas vezes, podem diminuir o 
esforço de desenvolvimento de atividades um pouco mais complexas na página web. Alguns componentes 
que	contém	esse	aspecto	são:	GridView,	Calendar,	Repeater.
Todos os componentes associados à página web conseguem associar eventos aos códigos.
40
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
4.2 entendendo a construção de um projeto web form
Iremos apresentar como será feita a criação de nossa primeira camada de apresentação. A princípio 
será criado um Web Form para que possamos conhecer alguns componentes.
Para que se possa entender melhor, dentro da camada de apresentação serão adicionadas todas as 
páginas aspx, que, por sua vez, terão todos os componentes adicionados, a princípio, dentro de um form 
(formulário), que estará encapsulado dentro da página aspx.
 lembrete
Toda página aspx contém dois módulos: Design e Source. Tudo que diz 
respeito à linguagem HTML deverá ser incluída no módulo Source, pois por 
meio da inclusão de tags HTML será possível criar o layout das páginas aspx 
e visualizá‑lo no móduloDesign.
Sintaxe básica:
<asp:NomedoControle id=”nome” runat=”server”>
Todos os componentes são considerados como web server controls e devem ser criados dentro de 
um formulário (form), onde será processado no servidor.
<form id=”form1” runat=”server”>
 <asp:NomeDoControle id=“nome” runat=“server” />
 <asp:NomeDoControle1 id=“nome1” runat=“server” />
 <asp:NomeDoControle2 id=“nome2” runat=“server” />
 ...
 </form>
Figura 27 – Exemplo de construção web server controls
Considerando um TextBox (caixa de texto) inserido no formulário, ele terá o seguinte formato:
<asp: TextBox id=”nome” runat=”server”>
Todos os web server controls, assim como os controles informados em HTML, podem 
apresentar uma série de propriedades que possibilitam ao desenvolvedor definir a forma como 
cada controle é exibido na página. Pode‑se observar toda essa informação por meio da sintaxe 
a seguir:
<asp:NomeDoControle id=“nome” runat=“server” propriedade=“valorA”>.
41
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Aplicando‑se a um exemplo, podemos entender da seguinte forma:
<asp:TextBox id=“nome” runat=“server” Text=“Testando Propriedade” CssClass=”aba” 
Visible=”true” ReadOnly=”false”>.
Para cada propriedade podemos detalhar:
•	 Id=”nome”: identificação do componente TextBox.
•	 Runat=”server”: identificador para tornar a tag programável.
•	 Text=“Testando Propriedade”: escreve dentro da caixa de texto a mensagem que estiver entre 
as aspas. No caso, “Testando Propriedade”.
•	 CssClass=“aba”: aplica definições de cores e posicionamento definidas na classe aba do arquivo 
css.
•	 Visible=“true”: torna o componente dentro do formulário visível em modo de execução.
•	 ReadOnly=“false”: torna o componente dentro do formulário editável em modo de execução.
 observação
Neste	 livro	 texto	 o	 autor	 irá	 utilizar	 o	Microsoft	 Visual	 Studio	 2012.	
Todo e qualquer exemplo e/ou exercício deverá ser executado nessa versão 
ou superior.
Como	primeiro	passo,	abriremos	nossa	IDE	de	programação,	chamada	Microsoft	Visual	Studio.
42
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
Figura 28	–	IDE	de	programação	Microsoft	Visual	Studio	2012	(elaborada	pelo	autor)
Podemos	destacar,	dentro	do	Microsoft	Visual	Studio,	pontos	que	são	essenciais	para	a	execução	de	
um bom trabalho para o desenvolvedor:
•	 Solution Explorer (Gerenciador de Soluções): aba em que irá ficar concentrada toda nossa 
estrutura de aplicação, desde a camada de apresentação, até as classes que serão utilizadas na 
aplicação.
Figura 29 – Solution Explorer: Gerenciador de Soluções
43
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
•	 Toolbox (Barra de Ferramentas): utilizada para que o desenvolvedor possa criar suas telas com 
base em protótipos criados na fase de levantamento de requisitos do projeto de software.
Figura 30 – ToolBox: Barra de Ferramentas
Para criamos um projeto Web Forms, ou seja, um projeto em que a premissa será criar uma aplicação 
que será executada em ambiente web, teremos que seguir os seguintes passos:
•	 Ao	ser	inicializado	o	Microsoft	Visual	Studio,	devemos	acionar	o	link New Project (Novo Projeto), 
ou no menu superior File (Arquivo) → New (Novo) → Project (Projeto).
Figura 31 – Tela inicial para adicionar um novo projeto
44
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
Figura 32 – Rota de menu para adicionar um novo projeto
 observação
A	 versão	 do	 Microsoft	 Visual	 Studio	 utilizada	 para	 ilustração	 deste	
livro‑texto está em inglês. O autor recomenda a utilização dessa versão, pois 
ela é encontrada na maioria das empresas que atuam com desenvolvimento 
de software.
Após a ação anterior ser executada a tela a seguir deverá ser apresentada:
Figura 33 – Caixa inicial de criação de um novo projeto
Na figura, podemos nos atentar para alguns detalhes, tais como:
45
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
•	 Ao	lado	esquerdo	existe	um	item	chamado	Templates,	onde	podemos,	por	exemplo,	definir	em	
qual	 linguagem	iremos	atuar.	É	muito	 importante	nos	atentarmos	à	 linguagem	escolhida	para	
que, no momento da codificação, não possamos programar em linguagens diferentes.
Figura 34	–	Templates	contidos	dentro	do	Visual	C#
Podemos notar que existem diversos Templates, porém o que iremos utilizar será ASP.NET Web 
Forms Application.
Para que possamos finalizar o processo de criação do nosso projeto, será necessário nos atentarmos 
para mais alguns itens:
•	 Name (Nome): nome que será colocado para o projeto desenvolvido.
•	 Location (Localização): onde ficará alocado o novo projeto.
•	 Solution Name (Nome da Solução): será replicado o Name (Nome) informado para o novo 
projeto.
 observação
O autor recomenda que nunca informe o diretório de pen drive para 
salvar ou abrir um projeto Web Form. Como parte das boas práticas, o 
projeto deve ser criado e/ou alocado em disco local e só depois de todas as 
alterações efetuadas ser transferido para o pen drive.
46
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
Figura 35 – Definição do projeto inicial
Após a execução desse passo, será apresentada a seguinte tela:
Figura 36 – Ambiente de Desenvolvimento Web Forms
Quando um projeto Web Forms é adicionado, temos a visualização da página default (padrão), que 
é adicionada automaticamente.
A página default, nada mais é do que a tela em que o desenvolvedor irá adicionar todos os 
componentes necessários para a sua funcionalidade.
Existe também, dentro do projeto Web Forms, a aba Solution Explorer, que detalha toda a estrutura 
do projeto.
47
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 37 – Apresentação da Solution Explorer
Dentro da Solution Explorer existem alguns itens, como:
•	 PaginaTeste:	nome	da	aplicação,	definida	no	momento	da	criação	do	projeto.
•	 Properties	(propriedades):	são	as	propriedades	do	projeto.	Dentro	dela	podemos	visualizar	cada	
label utilizada no projeto e configurações realizadas para o funcionamento da aplicação.
•	 References	(referências):	local	onde	se	armazenam	todas	as	referências	utilizadas	na	execução	da	
aplicação.
Figura 38 – Nome da aplicação – PaginaTeste (elaborada pelo autor).
Figura 39 – Properties (Propriedades) – PaginaTeste
48
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
Figura 40 – References (Referências) – PaginaTeste
Figura 41 – Classe Web.config – PaginaTeste
Figura 42 – Default.aspx.cs – PaginaTeste
49
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 43 – Default.aspx – PaginaTeste
Podemos alterar algumas propriedades da página aspx. Na camada de apresentação podemos 
adicionar n projetos, ou seja, não existe limitaçãode formulários dentro desse projeto.
Para adicionarmos uma nova página aspx, podemos seguir pela seguinte rota:
•	 Em	 cima	 do	 projeto	 PaginaTeste,	 devemos	 clicar	 com	 o	 botão	 direito.	 Após	 essa	 ação,	 será	
apresentada a seguinte tela:
Figura 44 – Menu com itens a serem selecionados
50
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
Figura 45 – Selecionar o item Add → Windows Form
Após a ação anterior ser executada acionaremos a rota add → new item, a tela a seguir será 
apresentada:
Figura 46 – Tela para adicionar um novo item ao projeto – PaginaTeste
Nessa tela podemos notar que podemos adicionar ao projeto:
•	 Web	Form.
•	 Web	User	Control.
•	 Master	Page.
•	 HTML	Page.
51
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 47 – Templates que podem ser adicionados ao projeto – PaginaTeste
Após ser adicionada a nova página aspx, a Solution Explorer é atualizada com o novo item:
Figura 48 – WebForm1.aspx adicionado à Solution Explorer
Podemos alterar o nome do WebForm1 para que possamos especificar melhor nosso projeto.
52
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
 observação
Dentro da Solution Explorer podemos adicionar muitos formulários, 
porém, é muito importante que todos os formulários sejam nomeados para 
que, no futuro, cada um possa ser atribuído como funcionalidade sistêmica 
da aplicação.
Para que essa ação possa ser efetuada, podemos clicar com o botão direito em cima do nome do 
formulário e acionar a ação rename (renomear).
Figura 49 – Renomear webform dentro da Solution Explorer
53
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 50 – webMensagem: nome do novo formulário
Após ser alterado o nome (WebForm1 = webMensagem), acionar o botão enter do teclado.
Podemos adicionar alguns componentes simplesmente arrastando e colocando na página para 
efetuar o desenvolvimento.
Figura 51 – Componentes na página web
54
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade II
Figura 52 – Componentes na página web
 resumo
Nesta unidade, conhecemos um pouco da história e alguns conceitos 
relacionados ao desenvolvimento de software para internet, de uma 
maneira ampla e objetiva. Foi demonstrado que o desenvolvimento 
de software para internet não é algo novo, porém podemos levar em 
consideração que, por seu desenvolvimento e arquitetura descrita, leva‑se 
a pensar que é recente.
Pensar em desenvolvimento web é ter a noção básica de diversos 
artefatos apresentados, tais como: IP, arquitetura e seus conhecimentos de 
desenvolvimento, como Javascript e CSS.
Um grande passo para a evolução dos sites atuais foi a disseminação 
de protótipos dentro do cenário mundial de desenvolvimento. Conceitos de 
cores, telas, controles e navegação são oriundos de um planejamento, mas 
principalmente de uma excelente análise efetuada.
O desenvolvimento de software para internet pode ser entendido por 
meio de seus avanços teóricos, o grande benefício para que pessoas, ideias 
e conceitos possam ser conhecidos mundialmente por meio da internet. 
Estar antenado a tendências, principalmente de layout, e aplicando com o 
uso de recursos como CSS, Javascript, trabalhar com o MasterPage, podem 
garantir o sucesso, a eficácia e a eficiência de nossas páginas web.
55
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Abordamos também o conceito de .NET Framework, que nada mais 
é do que um ambiente de execução, que tem por finalidade efetuar a 
gestão de memória e outros consumos da aplicação web. Também efetua 
a administração de uma extensa biblioteca de classes, que possibilita aos 
desenvolvedores usufruir ao máximo os recursos de codificação para o 
desenvolvimento de aplicativos web.