Prototype Framework Javascript

2,692 views
2,750 views

Published on

Prototype Framework Javascript

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,692
On SlideShare
0
From Embeds
0
Number of Embeds
646
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Prototype Framework Javascript

  1. 1. http://www.prototypejs.org/
  2. 2. Prototype <ul><li>É colecção de funções, bem escritas e bem pensadas que aliviam o trabalho na hora de fazer as páginas altamente interactivas. </li></ul><ul><li>O objectivo destas funções é evitar uma imensidão de digitação repetitiva e propensa a erros. Também agiliza o trabalho. </li></ul>
  3. 3. API Docs <ul><li>Utility Methods </li></ul><ul><li>Ajax </li></ul><ul><li>Array </li></ul><ul><li>Class </li></ul><ul><li>Date </li></ul><ul><li>Element </li></ul><ul><li>Element.Methods </li></ul><ul><li>Element.Methods.Simulated </li></ul><ul><li>Enumerable </li></ul><ul><li>Event </li></ul><ul><li>Form </li></ul><ul><li>Form.Element </li></ul><ul><li>Function </li></ul><ul><li>Hash </li></ul><ul><li>Insertion </li></ul><ul><li>Number </li></ul><ul><li>Object </li></ul><ul><li>ObjectRange </li></ul><ul><li>PeriodicalExecuter </li></ul><ul><li>Position </li></ul><ul><li>Prototype </li></ul><ul><li>String </li></ul><ul><li>Template </li></ul><ul><li>TimedObserver </li></ul><ul><li>document </li></ul><ul><li>document.viewport </li></ul>
  4. 4. Instalação do Prototype <ul><li>Baixar o prototype.js de http://www.prototypejs.org/download e renomear com a versão baixada. Actualmente: 1.6.0 </li></ul><ul><li><script src=&quot;prototype_v1.6.0.js&quot; type=&quot;text/javascript&quot;></script> </li></ul>
  5. 5. Utility Methods: $() <ul><li>A função $() substitui a função document.getElementById() </li></ul><ul><li>Retorna o elemento da página identificado pelo valor id </li></ul><ul><ul><li>Ex.: </li></ul></ul><ul><ul><ul><li><div id=‘nomeDiv'></div> </li></ul></ul></ul><ul><ul><ul><ul><li>Antes : </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>document.getElementById(‘nomeDiv'). innerHTML = 'conteúdo'; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>Agora : </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>$(‘nomeDiv'). innerHTML = 'conteúdo'; </li></ul></ul></ul></ul></ul><ul><ul><ul><li><form id=‘nomeForm' method=‘post'> </li></ul></ul></ul><ul><ul><ul><ul><li>Antes : </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>document.getElementById('nomeForm').submit(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>Agora : </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>$(‘nomeForm').submit(); </li></ul></ul></ul></ul></ul><ul><ul><ul><li><input type='text' id='nomeCampo‘ name='nomeCampo‘ > </li></ul></ul></ul><ul><ul><ul><ul><li>Antes : </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>document.nomeForm.nomeCampo.value </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>document.getElementById('nomeCampo').value </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>Agora : </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>$(‘nomeCampo').value </li></ul></ul></ul></ul></ul>
  6. 6. Utility Methods: $F() e getValue() <ul><li>A função getValue() retorna o valor do elemento do formulário. O atalho é $F() </li></ul><ul><ul><li><form id='nomeForm' name='nomeForm'> </li></ul></ul><ul><ul><li><input type='text' id='nomeCampo' name='nomeCampo'> </li></ul></ul><ul><ul><li> </form> </li></ul></ul><ul><ul><li>Antes : </li></ul></ul><ul><ul><li>document.nomeForm.nomeCampo.value </li></ul></ul><ul><ul><li>Agora : </li></ul></ul><ul><ul><li>$('nomeCampo').getValue(); </li></ul></ul><ul><ul><li>ou </li></ul></ul><ul><ul><li>$F('nomeCampo') </li></ul></ul>
  7. 7. Element.Methods: hide(), show() e visible() <ul><li>A função hide() é usada para esconder o elemento da página. </li></ul><ul><ul><li>Antes : </li></ul></ul><ul><ul><li>document.getElementById('nomeTabela').style.display = 'none'; </li></ul></ul><ul><ul><li>Agora : </li></ul></ul><ul><ul><li>$('nomeTabela').hide(); </li></ul></ul><ul><li>A função show() é usada para mostrar o elemento da página. </li></ul><ul><ul><li>Antes : </li></ul></ul><ul><ul><li>document.getElementById(‘nomeTabela').style.display = 'inline'; </li></ul></ul><ul><ul><li>Agora : </li></ul></ul><ul><ul><li>$('nomeTabela').show(); </li></ul></ul><ul><li>A função visible() indica se o elemento da página está visível. </li></ul><ul><ul><li><div id= ' div1 ' >conteúdo div 1</div> </li></ul></ul><ul><ul><li><div id= ' div2 ' style= ' display: none; ' >conteúdo div 2</div> </li></ul></ul><ul><ul><li>$( ' div1').visible(); // -> true </li></ul></ul><ul><ul><li>$( ' div2').visible(); // -> false </li></ul></ul>
  8. 8. Form.Element: clear(), present() e serialize() <ul><li>A função clear() : limpa o conteúdo do elemento do formulário. </li></ul><ul><ul><li>Antes : document.nomeForm.nomeCampo.value = ''; </li></ul></ul><ul><ul><li>Agora : $('nomeCampo').clear(); </li></ul></ul><ul><li>A função present() verifica se o text input tem conteúdo. </li></ul><ul><ul><li>Antes : </li></ul></ul><ul><ul><li>if (document.nomeForm.nomeCampo == '') </li></ul></ul><ul><ul><li>Agora : </li></ul></ul><ul><ul><li>if (!$('nomeCampo').present()) </li></ul></ul><ul><li>A função serialize() cria um representação URL-encoded do controle do formulário no formato name=value. </li></ul><ul><ul><li>Antes : </li></ul></ul><ul><ul><li>window.open( ' enviaServlet?nomeCampo= ' + document.nomeForm.nomeCampo.value) </li></ul></ul><ul><ul><li> Agora : </li></ul></ul><ul><ul><li>window.open('enviaServlet?' + $('nomeCampo').serialize()) </li></ul></ul>
  9. 9. Hash: get() e set() <ul><li>O Hash é como um array associativo (lista de pares chave/valor). </li></ul><ul><li>var messagesJs = new Hash() ; </li></ul><ul><li>messagesJs. set ('montante_preencher‘, ‘Favor informar o montante.'); </li></ul><ul><li>messagesJs. set ('montante_invalido', ‘O montante informado é inválido.'); </li></ul><ul><li>alert(messagesJs. get ('montante_preencher')) </li></ul><ul><li>alert(messagesJs. get ('montante_invalido')) </li></ul>
  10. 10. Ajax: Asynchronous JavaScript + XML <ul><li>AJAX ou Asynchronous JavaScript and XML é um inovado caminho de usar existentes tecnologias para tornar as páginas mais interativas com o usuário. </li></ul><ul><li>Ajax permite actualizar partes de uma página sem ter que fazer reload da página inteira. </li></ul><ul><li>Jesse James Garret do site “Adaptive Path” definiu AJAX como o seguinte: </li></ul><ul><li>“ O AJAX não é uma tecnologia. São na realidade várias tecnologias, cada uma progredindo de forma independente, e que se juntaram de forma a poder explorar formas de melhorar a interacção com os utilizadores em aplicações Web.” </li></ul><ul><li>O AJAX utiliza as seguintes tecnologias: </li></ul><ul><ul><li>Apresentação baseada em standards utilizando XHTML e CSS </li></ul></ul><ul><ul><li>Interação e apresentação dinâmica utilizando o Documento Object Model (DOM) </li></ul></ul><ul><ul><li>Formato standard para troca e manipulação de dados - XML </li></ul></ul><ul><ul><li>Comunicação assincrona com o servidor utilizando XMLHttpRequest </li></ul></ul><ul><ul><li>Javascript como agregador de todas estas tecnologias </li></ul></ul>
  11. 11. Modelo clássico vs modelo AJAX
  12. 12. Modelo clássico vs modelo AJAX
  13. 13. Ajax: Vantagens <ul><li>Maior interactividade nas aplicações </li></ul><ul><li>Redução de largura de banda </li></ul><ul><li>Redução de carga de processamento do servidor </li></ul><ul><li>Ajax não é proprietário (AJAX não é um nome de nenhuma marca ou produto, apenas uma designação de um método de desenho para aplicações Web, utilizando um conjunto de tecnologias existentes standard.) </li></ul><ul><li>Portabilidade (as tecnologias são utilizadas pela maioria dos browsers existentes no mercado, nem a uma plataforma. Não requer a instalação de qualquer plugin no browser ou software no cliente.) </li></ul>
  14. 14. Ajax: Desvantagens <ul><li>Capacidades limitadas (O Ajax ao se basear nas tecnologias existentes, herda as suas limitações. Exemplos de limitações são: armazenamento local no cliente, interacção com hardware (impressoras, webcams) </li></ul><ul><li>Performance do cliente (Ajax transfere-se muito do processamento do servidor para o cliente. Podermos sobrecarregar o cliente caso não se tomem as devidas precauções durante a fase de desenvolvimento.) </li></ul><ul><li>Requer conectividade permanente </li></ul>
  15. 15. Ajax.Request <ul><li><input type=‘text‘ id=‘nome‘ name=‘nome'> </li></ul><ul><li><div id='conteudo'>Isto é a mensagem inicial!</div> </li></ul><ul><li><div id='loading' style= ' display: none; ' >A fazer loading...</div> </li></ul><ul><li><input type='button' value='Ir buscar novo conteudo 1' onclick='novoConteudo(1)'> </li></ul><ul><li><input type='button' value='Ir buscar novo conteudo 2' onclick='novoConteudo(2)'> </li></ul><ul><li><script type='text/javascript'> </li></ul><ul><li>function novoConteudo(tipo) { </li></ul><ul><li> new Ajax.Request(‘/novoConteudoServlet', { </li></ul><ul><li> method: ‘post', </li></ul><ul><li> parameters: { p_tipo: tipo, p_nome: $F(nome) } </li></ul><ul><li> onCreate: { function() { </li></ul><ul><li>$('conteudo').hide(); </li></ul><ul><li>$('loading').show(); </li></ul><ul><li> }, </li></ul><ul><li> onComplete: mostrarResposta </li></ul><ul><li> }); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  16. 16. Ajax.Request <ul><li>function mostrarResposta(originalRequest) { </li></ul><ul><li>$('loading').hide(); </li></ul><ul><li>$('conteudo').show(); </li></ul><ul><li>$('conteudo').innerHTML = originalRequest; </li></ul><ul><li>} </li></ul><ul><li>Outros callbacks: </li></ul><ul><ul><li>onSuccess </li></ul></ul><ul><ul><li>onFailure </li></ul></ul><ul><ul><li>onUninitialized </li></ul></ul><ul><ul><li>onLoading </li></ul></ul><ul><ul><li>onLoaded </li></ul></ul><ul><ul><li>onInteractive </li></ul></ul><ul><ul><li>onException </li></ul></ul>
  17. 17. Ajax.Updater <ul><li><body> </li></ul><ul><li><input type='text' id='nomeItem' name='nomeItem'> </li></ul><ul><li><div id='items'></div> </li></ul><ul><li><input type='button' value='Novo Item' onclick='novoItem()'> </li></ul><ul><li></body> </li></ul><ul><li><script type='text/javascript'> </li></ul><ul><li>function novoItem() { </li></ul><ul><li>new Ajax.Updater('items', '/novoItemServlet', { </li></ul><ul><li>parameters: { nomeItem: $F('nomeItem') }, </li></ul><ul><li>insertion: Insertion.Bottom </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
  18. 18. Referências <ul><li>http://www.prototypejs.org/ </li></ul><ul><li>http:// www.sergiopereira.com / articles /prototype140.js.ptBR.html </li></ul><ul><li>http:// pwp.net.ipl.pt / alunos.isel /24138/AJAX/ IntroducaoAJAX.pdf </li></ul>

×