A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Tecnologias Web Rodrigo Cristiano Silva

Apresentações semelhantes


Apresentação em tema: "Tecnologias Web Rodrigo Cristiano Silva"— Transcrição da apresentação:

1 Tecnologias Web Rodrigo Cristiano Silva

2 Tecnologias Web Agenda

3 AJAX Introdução Já se foram os dias em que aplicações web podiam ser arquitetadas e implementadas como uma coleção de páginas relacionadas e conectadas. Com o passar dos anos, o apetite dos usuários por aplicações web cada vez mais poderosas, levaram os arquitetos e desenvolvedores a incorporar mais e mais funcionalidades no servidor e no cliente. Com os recentes avanços no JavaScript, desenvolvedores web têm sido capazes de criar aplicações com uma experiência de usuário nunca antes vista. Os desenvolvedores podem agora trazer características antes reservadas a aplicações desktop para aplicações web usando uma técnica chamada AJAX. Tecnologias Web

4 AJAX Introdução AJAX, abreviação de Asynchronous JavaScript And XML, é um conjunto de componentes, ferramentas e técnicas de desenvolvimento para criar aplicações Web altamente interativas que oferecem ao usuário uma melhor experiência. AJAX é um termo que representa as técnicas e ferramentas usadas para fazer requisições HTTP assíncronas iniciadas por JavaScript com o propósito de recuperar informações do servidor sem recarregar toda página. Combinando essa recuperação de dados remotos com a interatividade do DOM (Document Object Model), criou-se uma nova geração de aplicações web que parece desafiar todas as regras tradicionais do que pode acontecer na web. Tecnologias Web

5 Elementos chaves para o AJAX JavaScript Document Object Model (DOM) XMLHttpRequest Tecnologias Web

6 JavaScript Originalmente chamada de LiveScript, a JavaScript foi criada por Brendan Eich da Netscape e incluída na versão 2.0 do browser (liberada em 1995). Pela primeira vez, desenvolvedores foram capazes de modificar a forma como uma página poderia interagir com o usuário. Ao invés de fazer viagens constantes ao servidor para cumprir tarefas simples como validação de dados, tornou-se possível transferir parte do processamento para o browser. A minimização do número de vezes que o usuário tem que esperar por uma resposta foi o primeiro grande passo em direção ao AJAX. Tecnologias Web

7 HTML Document Object Model O Document Object Model (DOM) é a especificação de uma interface independente de linguagem e plataforma para acesso e atualização do conteúdo, estrutura e estilo de documentos HTML e XML. Como um padrão reconhecido e ratificado pelo W3C, o DOM é suportado por praticamente todos os browsers. O DOM oferece um conjunto de objetos padronizados para representar os elementos constituintes de documentos HTML e XML. Juntos, esses objetos formam uma interface padrão para acesso e manipulação de elementos de páginas HTML e documentos XML. Tecnologias Web

8 HTML Document Object Model A DOM application programming interface (API) representa uma página web como uma árvore de objetos, onde cada objeto representa uma tag HTML. Existem três operações fundamentais que podemos executar sobre a árvore: Procurar um nó (inclusive nós filhos e pais); Criar um nó; Manipular um nó. Encontrar um nó específico é uma tarefa simples se o autor da página conhece o ID do nó. Tecnologias Web

9 O Objeto XMLHttpRequest Criado pela Microsoft e adotado logo após pela Mozilla, o objeto XMLHttpRequest é suportado atualmente pela maioria dos browsers. A sua implementação pode ser significantemente diferente de um browser para outro, mesmo que a interface de mais alto nível seja praticamente idêntica. Por esta razão, um comitê do W3C está trabalhando para documentar precisamente um conjunto mínimo de funcionalidades baseado nas implementações existentes. Uma excelente apresentação sobre o objeto pode ser encontrada em: Tecnologias Web

10 Usando o XMLHttpRequest O objeto XMLHttpRequest foi projetado para desempenhar uma operação chave: enviar uma requisição HTTP. A requisição pode ser enviada de forma síncrona ou assíncrona. O uso do componente se resume em uma operação de dois passos: Primeiro, abre-se um canal de comunicação usando uma URL, especifica-se o método (GET ou POST) a ser utilizado e se a requisição será executada assincronamente; Após isso, configura-se qualquer cabeçalho necessário e envia-se a requisição. O método send retorna imediatamente no caso de uma operação assíncrona. É necessária a função onreadystatechange para checar o status da operação corrente, ela é utilizada para determinar quando a operação é finalizada. Numa chamada síncrona, o método send retorna quando a resposta foi totalmente baixada e interpretada pelo objeto. Desenvolvedores têm acesso aos códigos de status HTTP e cabeçalhos, assim como qualquer dado retornado do servidor. A resposta pode ser acessada através das propriedades responseText ou responseXML. Tecnologias Web

11 Interface do XMLHttpRequest Abaixo segue um trecho de código que mostra a interface do objeto, resultado de um draft gerado pelo W3C: Tecnologias Web

12 ASP.NET AJAX Introdução Para atender a demanda por funcionalidades mais poderosas e uma framework para suportá-las, a Microsoft liberou em janeiro de 2007 uma framework chamada ASP.NET AJAX Extensions. Essa framework é instalada sobre o ASP.NET 2.0, assim desenvolvedores podem adicionar funcionalidades AJAX em sites novos ou existentes escritos em ASP.NET. No ASP.NET 3.5, a framework ASP.NET AJAX Extensions foi sutilmente melhorada e totalmente incorporada a framework principal. Tecnologias Web

13 Infra-estrutura do ASP.NET AJAX De acordo com o paradigma AJAX, aplicações web trabalham trocando dados ao invés de páginas com o servidor web. Isso significa que o carregamento das páginas é mais rápido e a necessidade de carregar a página inteira é significativamente reduzida. Como resultado, uma aplicação web tende a se parecer com uma aplicação desktop clássica, pode invocar código no servidor a partir do cliente, executar e controlar tarefas assíncronas no servidor e oferece uma interface não intermitente. Isto não significa que aplicações web AJAX são iguais a aplicações desktop. A próxima geração de aplicações web ainda será baseada no protocolo HTTP e páginas, entretanto, o conteúdo das páginas e as funcionalidades disponíveis no servidor e no cliente mudarão para oferecer uma experiência significantemente mais rica ao usuário. Tecnologias Web

14 O Engine do AJAX As aplicações web tradicionais trabalham submetendo formulários preenchidos pelo usuário ao servidor Web e exibindo as páginas HTML retornadas pelo servidor. A comunicação cliente-servidor utiliza o protocolo HTTP e é usualmente conduzida por um browser. O modelo de comunicação do AJAX utiliza uma framework alternativa baseada em scripts para conduzir a comunicação HTTP com o servidor web. A vantagem desse modelo é que a página que dispara a chamada permanece ativa e atualiza seu Document Object Model (DOM) com os dados recebidos do servidor. Dessa forma a experiência do usuário é suave e contínua. Tecnologias Web

15 O Engine do AJAX Novo Modelo Out-of-Band O principal fator que habilita páginas web a utilizar funcionalidades AJAX é a habilidade de trabalhar com requisições HTTP out-of-band. Uma chamada out-of-band indica uma requisição HTTP enviada através de um componente diferente de um browser. A chamada out-of-band é disparada via script por um evento de uma página HTML usando um componente proxy. Nas frameworks AJAX, o componente proxy é baseado no objeto XMLHtppRequest. Tecnologias Web

16 O Engine do AJAX Novo Modelo Out-of-Band Tecnologias Web

17 O Engine do AJAX Novo Modelo Out-of-Band O XMLHttpRequest é um objeto do browser que pode ser acessado através do JavaScript. Ele envia uma requisição HTTP regular à URL especificada e espera pela resposta de forma síncrona ou assíncrona. Quando a resposta está pronta, o proxy invoca uma função JavaScript de callback para atualizar qualquer porção da página. Um browser precisa oferecer duas funcionalidades chaves: um mecanismo proxy que habilite o código cliente a enviar requisições HTTP e um DOM atualizável. Tecnologias Web

18 Microsoft AJAX JavaScript Library Grande parte do poder do AJAX reside no cliente e está estritamente ligado às funcionalidades do browser e da plataforma do cliente. Nenhuma funcionalidade do AJAX poderia ser implementada sem um engine no cliente e um DOM padronizado. Tal engine somente pode ser escrito em JavaScript. O DOM representa a porta de acesso aos elementos que constituem a página, mas ele não foi projetado para oferecer facilidades de programação. A linguagem utilizada para acessar objetos e conteúdo do DOM é o JavaScript, entretanto, não representa um toolkit poderoso. Entra em cena a Microsoft AJAX JavaScript Library. Tecnologias Web

19 Microsoft AJAX JavaScript Library A Microsoft AJAX Library foi escrita em JavaScript, mas com forte influência da orientação a objetos. JavaScript suporta objetos e permite a criação de objetos personalizados, entretanto, não suporta a orientação a objetos por completo porque não apresenta o conceito de herança. O ASP.NET AJAX levou a linguagem JavaScript a um nível mais alto adicionando extensões ao sistema de tipos e noções de namespace e herança. A ASP.NET AJAX JavaScript ainda suporta interfaces, enumerações e tem funções que facilitam a manipulação de strings e arrays. Estas extensões foram codificadas utilizando as funções que constituem o núcleo do JavaScript e foram persistidas em arquivos.js. Esses arquivos.js são embutidos como resources do ASP.NET AJAX assembly. Tecnologias Web

20 O Controle Script Manager O principal server control da estrutura do ASP.NET AJAX é o controle ScriptManager e seu irmão gêmeo, o controle ScriptManagerProxy. Somente uma instância do controle ScriptManager pode ser adicionada em uma página ASP.NET AJAX. Nenhuma funcionalidade AJAX pode ser habilitada em páginas ASP.NET que não apresentem um controle ScriptManager. O controle ScriptManagerProxy é utilizado somente em cenários com master pages para referenciar os ScriptManagers originais das content pages. O controle ScriptManager gerencia e entrega scripts às páginas, possibilitando que scripts do cliente utilizem as extensões oferecidas pela Microsoft AJAX Library. O controle ScriptManager também disponibiliza funcionalidades como atualização parcial da página e chamadas a métodos da página e de web services. Tecnologias Web

21 Atualização Parcial das Páginas O modelo de programação de aplicações AJAX parece ser limpo e inquestionável, você escreve código para capturar eventos do lado cliente, conduz uma operação no servidor via XMLHttpRequest, recupera os resultados e atualiza a interface com o usuário. Este modelo melhora a performance quando aplicado a funcionalidades individuais ou gargalos de páginas existentes, mas é difícil de ser utilizado em grandes aplicações porque se mostra muito custoso em termos de habilidades a adquirir e tempo para implementar. Um server control normalmente gera código HTML. No cenário AJAX, um server control gera código HTML e script para suportar requisições AJAX. A maioria dos fornecedores de software vêm preparando seus componentes baseando-se nessa idéia. E se não estivermos utilizando componentes de terceiros? Devemos escrever novos controles AJAX-enabled por conta própria? Tecnologias Web

22 Atualização Parcial das Páginas Ao invés de re-escrever os componentes, poderíamos ter um container que cuidaria da atualização de todos os seus filhos sem a necessidade de atualizar a página por completo. A atualização parcial do ASP.NET trabalha de acordo com essa idéia. Ele oferece um novo container – o controle UpdatePanel – que usamos para envolver partes de páginas existentes ou novas. Tecnologias Web

23 O Controle UpdatePanel No ASP.NET AJAX, a técnica de programação de atualização parcial das páginas é centrada no controle UpdatePanel. O controle UpdatePanel representa o caminho mais curto para o AJAX. Ele permite que você adicione funcionalidades efetivas do AJAX a sites escritos de acordo com o modelo de programação clássico do ASP.NET 2.0. Como desenvolvedor, você não precisa de novas habilidades, exceto pela sintaxe e semântica do controle UpdatePanel. A exposição ao JavaScript é bastante limitada ou mesmo nula na maioria das situações. Tecnologias Web

24 O Controle UpdatePanel Embora o UpdatePanel seja similar ao controle ASP.NET Panel clássico, ele não herda da classe Panel e, conseqüentemente, não apresenta o mesmo conjunto de funcionalidades dos painéis clássicos, tais como scrolling, styling e gerenciamento de conteúdo. O controle UpdatePanel herda diretamente da classe Control, o que significa que ele atua meramente como um container AJAX. Ele não provê facilidades de interface com usuário. Qualquer formatação ou configuração de estilo deve ser provida pelos controles filhos. Tecnologias Web

25 Master Pages e Regiões Atualizáveis Você pode usar controles UpdatePanel com master pages. Se um controle ScriptManager for adicionado a uma master page, a atualização parcial estará disponível por padrão para todas as content pages. As configurações iniciais do ScriptManager são herdadas por todas as content pages. E se for necessário mudar as configurações para uma content page particular? Não se pode adicionar um novo ScriptManager a uma content page, mas é possível recuperar o original declarado na master page. Você pode declarar um ScriptManagerProxy em uma content page e alterar algumas de suas configurações. O proxy recupera o ScriptManager que está em uso e aplica as mudanças à ele. O controle ScriptManagerProxy permite que seja editada a lista de scripts e serviços registrados no ScriptManager de forma declarativa. Tecnologias Web

26 User Controls e Regiões Atualizáveis User controls oferecem uma forma fácil de inserir em páginas ASP.NET controles auto-updatable e self-contained através do uso do AJAX. Como cada página pode ter no máximo um ScriptManager, não é uma boa prática colocá-lo no user control. Isso funcionaria e tornaria o user control completamente self- contained, mas também limitaria você a usar somente uma instância do user control por página. A maneira mais simples de contornar o problema acima é deixar o ScriptManager fora do user control e colocá-lo na página que hospeda o controle. Tecnologias Web

27 Otimizando o Uso do UpdatePanel A atualização parcial divide a página em regiões independentes, onde cada uma controla seus próprios postbacks sem causar a atualização completa da página. Este comportamento é desejável quando somente uma porção da página precisa ser alterada durante um postback. Um controle UpdatePanel atualiza seu conteúdo sob as seguintes condições: Quando um outro controle UpdatePanel na mesma página atualiza. Quando qualquer dos controles filhos originam um postback (por exemplo, um clique em um botão). Quando o handler de um evento invoca o método Update do controle UpdatePanel. Quando o controle UpdatePanel é inserido dentro de outro controle UpdatePanel e o painel pai é atualizado. Quando qualquer dos trigger events do UpdatePanel ocorre. Tecnologias Web

28 Configurando a Atualização Condicional Por padrão, todos os painéis atualizáveis em uma página são sincronizados e atualizados ao mesmo tempo. Para fazer com que cada painel se atualize independentemente dos outros, você pode mudar o valor da propriedade UpdateMode. O valor padrão é Always, o que significa que o conteúdo do painel é atualizado com qualquer postback originado na página, dentro ou fora da região atualizável. Mudando o valor da propriedade UpdateMode para Conditional, você instrui o painel a atualizar seu conteúdo somente se ele é explicitamente ordenado a fazê-lo. Normalmente, qualquer controle declarado dentro de um UpdatePanel age como um trigger implícito para o painel. Você pode configurar todos os controles filhos para deixarem de atuar como triggers definindo o valor de ChildrenAsTriggers como false. E se você quiser que somente alguns controles declarados em um UpdatePanel atuem como triggers? Você pode defini-los como triggers de um UpdatePanel particular ou você pode usar o método RegisterAsyncPostBackControl da classe ScriptManager. Tecnologias Web

29 Usando Triggers Triggers podem ser definidos tanto declarativamente quanto programaticamente. Adiciona-se um event trigger declarativamente usando a seção do controle UpdatePanel. Você precisa especificar duas informações para cada trigger: O ID do controle a monitorar; O nome do evento a interceptar. É essencial notar que o controle AsyncPostBackTrigger pode interceptar somente eventos do servidor. Tecnologias Web

30 O Controle UpdateProgress O controle UpdateProgress foi projetado para prover feedback ao usuário enquanto um ou mais controles UpdatePanel estão sendo atualizados. Se você tem múltiplos painéis na página, você possivelmente vai querer encontrar uma localização conveniente na página para o controle de progresso. Também é possível movê-lo programaticamente. A interface com o usuário associada a um controle UpdateProgress é exibida e escondida pela ASP.NET AJAX framework e não é necessária nenhuma ação por parte do desenvolvedor. Tecnologias Web

31 O AJAX Control Toolkit Além da atualização parcial, desenvolvedores podem usar control extenders para adicionar um comportamento pré-definido a controles ASP.NET novos ou existentes. Principais extenders disponíveis: TextBoxWatermark Slider NumericUpDown FilteredTextBox Calendar MaskedEdit AutoComplete ModalPopup PopupControl HoverMenu TabContainer Tecnologias Web


Carregar ppt "Tecnologias Web Rodrigo Cristiano Silva"

Apresentações semelhantes


Anúncios Google