Baixe o app para aproveitar ainda mais
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ódulo Design. 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ção de 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 adicionadaa 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.
Compartilhar