Hide Notes 

Slide 2: Programando AJAX com ASP .NET Marden Menezes MCAD, MCSD, MVP C# INETA Brasil Inove Informática
Slide 3: Apresentando... Marden Menezes Recife/PE 22 anos MCAD, MCSD, MVP – C# Inove Informática Student Ambassador Sharp Shooters INETA Brasil
Slide 4: Apresentando… Rodrigo Kono 24 anos Goiânia/GO Politec / SEFAZ-GO DevGoiânia .NET Student Ambassador INETA Brasil
Slide 5: Uma palestra arretada! Agenda Desenvolvimento Web atual AJAX Projeto Atlas Interface gráfica com Atlas Comunicação e Web Services com Atlas
Slide 6: Desenvolvimento para Web HTTP é stateless Não mantém estado Atualizações na página necessitam de envio ao servidor
Slide 7: Problemas Cada atualização requer um “round trip” do cliente para o servidor Mesmo pequenas alteração seguem tal protocolo Grande quantidade de dados fazem o usuário esperar Dificulta uma rica experiência do usuário
Slide 8: Experiência do usuário Aplicações Web ainda perdem de aplicações Desktop Alternativas Java Applets Macromedia Flash Controles HTML são limitados Alguns navegadores provém melhorias Diferentes versões da aplicação para diferentes navegadores
Slide 9: Só temos problemas? Aplicações Web são lentas Compare com standalone… Interface gráfica não amigável Alternativas problemáticas Tortura ao invés de produtividade Solução: AJAX
Slide 10: AJAX?! O que é isso?
Slide 11: Ajax Asynchronous JavaScript and XML Não é tecnologia Técnica de programação Utiliza várias tecnologias XHTML e CSS DOM XMLHTTP
Slide 12: XMLHTTP Conjunto de APIs usadas por JavaScript JScript VBScript Atualiza parte da página sem recarregála por completo Não precisa de plugin Possível antes só com iFrame ou DHTML Trabalha com qualquer tipo de arquivo Não está restrito a XML
Slide 13: Implementando XMLHTTP Objeto XMLHttpRequest Criado pela Microsoft para o IE5 No Internet Explorer var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //dependendo da versão… var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); Outros navegadores xmlhttp = new XMLHttpRequest();
Slide 14: Diferentes navegadores… Preocupação presente no código var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); }
Slide 15: Lendo RSS em Ajax
Slide 16: Solução ou outro problema? Ajax é difícil de implementar Mais uma linguagem a ser dominada JavaScript Difícil integração com ASP .NET Não é orientado a objetos Solução de problemas Criação de outros…
Slide 17: Agora… o Atlas!
Slide 18: O Projeto Atlas! Um Framework para desenvolvimento de experiência do usuário mais rica, interativa e mais personalizada em aplicações Web Desenvolvimento orientado a objetos Funcionalidades OOP em JavaScript Sistema de tipo, classes, herança, namespaces, eventos Compatibilidade com navegadores Não é necessário código específico para cada navegador Bibliotecas tratam compatibilidade automaticamente
Slide 19: Atlas Comportamentos e componentes Auto-completion, drag and drop, popups, etc Componentes que podem ser ligados a dados Gerenciamento de chamadas remotas Chamadas assíncronas ao XMLHTTP Poucas linhas de código Modelo declarativo de programação Similar ao ASP .NET
Slide 20: Atlas no Servidor Web server controls Controles ASP .NET que geram código de cliente com funcionalidades “Atlas” Web services Web services como ASP.NET profiles, adicionando funcionalidade a uma aplicação “Atlas”
Slide 21: Arquitetura “Atlas” HTML, Script, “Atlas” Markup “Atlas” Service Proxies “Atlas”-enabled ASP.NET Pages Web Services (ASMX or WCF) “Atlas” Biblioteca de scripts do cliente Controles, Componentes Extensões do Servidor ASP.NET “Atlas” Ponte para App “Atlas” Server Controls Services Ponte para Web Services Serviços de Aplicação “Atlas” Local Store Integração Navegadores Modelo de Componente e UI Framework Biblioteca de Classes Núcleo de Scripts Compatib. De Browser ASP.NET 2.0 Páginas, Controles do Servidor Serviços da Aplicação “Atlas” Client Framework and Services “Atlas” Server Framework
Slide 22: “Atlas” Client Script Library Scripts principais e biblioteca de classes “Atlas” script core – sistemas de tipos para Javascript Classes e interfaces, herança, metódos virtuais e abstratos Enumerações Mecanismo de eventos similar ao .NET Biblioteca de Classes StringBuilder, extensões para tipos existentes Serializadores Classes para debug e tracing Comunicação
Slide 23: Interface Gráfica com “Atlas” Web.Component Componentes, controles e comportaments Código reusável Criados declarativamente ou programaticamente Ligação de dados e eventos Web.UI.Control Componentes de Interface Associados com elementos DHTML
Slide 24: Desenvolvendo UI com “Atlas” “Data binding” com Atlas Ligação de dados automática entre componentes User Name: john Number of characters: 4 Fonte de dados Controle Ligado Alternates: “1-way” ou “2-way” john_11 Modificadores de dados
Slide 25: Desenvolvendo UI com “Atlas” Criando e ligando componentes Programaticamente… var textbox1 = new Web.UI.TextBox(document.getElement(‘Textbox1')); textbox1.initialize(); var label1 = new Web.UI.Label(document.getElement(‘Label1')); var binding1 = new Web.Binding(); binding1.set_dataContext(textbox1); binding1.set_dataPath(‘text’); binding1.set_property(‘text’); binding1.set_direction(Web.BindingDirection.In); label1.get_bindings().add(binding1); label1.initialize();
Slide 26: Desenvolvendo UI com “Atlas” Criando e ligando componentes Declarativamente (Scripts declarativos “Atlas”) <script type=“text/xml-script”> <page xmlns := http://schemas.microsoft.com/xml-script/2005”> <components> <script:label targetElement=“Label1”> <bindings> <binding dataContext=“TextBox1" dataPath="text“ property="text" direction=“In”> </bindings> </script:label> <script:textBox targetElement=“TextBox1” /> </components> </page> <div id="content"> </script> <p><input type="text" id=“Textbox1" size="40" /></p> <p><span id=“Label1“ class=“MyLabel” /></p> </div>
Slide 27: Desenvolvendo UI com “Atlas” Criando e ligando componentes Usando controles ASP.NET no servidor <atlas:ScriptManager runat=“server” id=“TextBox1” /> <atlas:TextBox runat=“server” id=“TextBox1” /> <atlas:Label runat=“server” id=“Label1” CssClass=“MyLabel”> <Bindings> <atlas:Binding DataPath=“TextBox1” Property=“Text”> </Bindings> </atlas:Label>
Slide 28: Interface Gráfica “Atlas”
Slide 29: Interatividade “Atlas” Behaviors Comportamentos e interatividade para interface “Atlas” Facilmente ligados a elementos DHTML Comportamentos pré-existentes Apresentação de dados: tooltips, janelas flutuantes Entrada de dados: autocomplete, drag and drop Glitz: animação e efeitos visuais Funciona em qualquer navegador Utiliza elemento <Behaviors>
Slide 30: Auto-complete Drag and drop
Slide 31: Comunicação no “Atlas” Uma camada acima do XMLHTTP Classes WebRequest, WebResponse, MethodRequest Acesso a Web Services ASMX e WCF, objetos .NET Geração de proxy automático <script src=“MyService.asmx/js” /> Integrated with ASP.NET application services Notação em Javascript public class Location { public Point Coordinates; public String Name; } { Coordinates : { X: 2.17, Y: 48.51 }, Name : "Eiffel Tower" }
Slide 32: ASP.NET “Atlas” Application Services Conjunto de blocos de código no servidor Autenticação, role storage Perfis de usuário, personalização da UI Em breve: Log e tracing, cultura e globalização “Atlas” Page (in browser) Managed Client App Authentication Service Managed Proxy Acessível de qualquer cliente Aplicações usam camada de rede do “Atlas” Clientes acessando Web Services “Atlas” Authentication Service ASP.NET Membership Extensivel através do modelo “provider” do ASP.NET SQL Provider Model AD WSS Custom
Slide 33: Acessando Web Services
Slide 34: E o futuro? Existem outras iniciativas… “Atlas” é oficial da Microsoft Lançamento em 2006 O site oficial provém recursos Tutoriais Documentos Códigos
Slide 35: Para Maiores Informações Site oficial Atlas: http://atlas.asp.net Wikipedia (Ajax): http://www.wikipedia.com Apresentação prs312 PDC’05: http://www.microsoft.com/pdc
Slide 37: Imagine Cup 2006 "Imagine um mundo onde a tecnologia nos permite viver vidas mais saudáveis“ Maior competição de informática do mundo! 92 países Quase 20 mil estudantes!
Slide 38: Imagine Cup 2006 6 categorias: Projeto de Software Jogos Digitais – Projeto Hoshimi Algoritmo Desafio de TI Projeto de Interface – Designer Filme de Curta Metragem Final mundia na Índia! Prêmios de até 25 mil dólares! www.imaginecup.com.br
Slide 39: Dúvidas? marden@i9cursos.com.br kono@devgoiania.net
Slide 40: Sua Avaliação é Importante! Por Favor, Não Esqueça de Preencher a Ficha de Avaliação para esta sessão
Slide 41: Seu potencial. Nossa inspiração. MR © 2005 Microsoft Corporation. Todos os direitos reservados. O propósito desta apresentação é apenas informativa. Microsoft não faz nenhuma garantia expressa ou implícita nesta apresentação.