Prototype

O documento apresenta o Prototype, uma coleção de funções que facilita a criação de páginas web interativas, reduzindo a repetição de código e erros. Ele detalha métodos utilitários, manipulação de elementos, e o uso de AJAX para melhorar a interatividade sem recarregar a página. Além disso, aborda as vantagens e desvantagens do AJAX, incluindo exemplos de implementação e referências adicionais.

Enviado por

marcioromualdo

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PPT, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

12 visualizações18 páginas

Prototype

Enviado por

marcioromualdo

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PPT, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 18

http://

www.prototypejs.org/
Prototype

 É colecção de funções, bem escritas e bem pensadas que

aliviam o trabalho na hora de fazer as páginas altamente
interactivas.

 O objectivo destas funções é evitar uma imensidão de

digitação repetitiva e propensa a erros. Também agiliza o
trabalho.
API Docs
 Utility Methods  Hash
 Ajax  Insertion
 Array  Number
 Class  Object
 Date  ObjectRange
 Element  PeriodicalExecuter
 Element.Methods  Position
 Element.Methods.Simulate  Prototype
d  String
 Enumerable  Template
 Event  TimedObserver
 Form
 document
 Form.Element
 document.viewport
 Function
Instalação do Prototype
 Baixar o prototype.js de http://www.prototypejs.org/download e
renomear com a versão baixada. Actualmente: 1.6.0

 <script src="prototype_v1.6.0.js" type="text/javascript"></script>

Utility Methods: $()
 A função $() substitui a função document.getElementById()

 Retorna o elemento da página identificado pelo valor id

 Ex.:
 <div id=‘nomeDiv'></div>
 Antes:

document.getElementById(‘nomeDiv'). innerHTML = 'conteúdo';
 Agora:

$(‘nomeDiv'). innerHTML = 'conteúdo';

 <form id=‘nomeForm' method=‘post'>

 Antes:

document.getElementById('nomeForm').submit();
 Agora:

$(‘nomeForm').submit();

 <input type='text' id='nomeCampo‘ name='nomeCampo‘ >

 Antes:

document.nomeForm.nomeCampo.value

document.getElementById('nomeCampo').value
 Agora :

$(‘nomeCampo').value
Utility Methods: $F() e getValue()

 A função getValue() retorna o valor do elemento do formulário. O

atalho é $F()
<form id='nomeForm' name='nomeForm'>
<input type='text' id='nomeCampo' name='nomeCampo'>
</form>

Antes:
document.nomeForm.nomeCampo.value
Agora:
$('nomeCampo').getValue();
ou
$F('nomeCampo')
Element.Methods: hide(), show() e
visible()
 A função hide() é usada para esconder o elemento da página.
Antes:
document.getElementById('nomeTabela').style.display = 'none';
Agora:
$('nomeTabela').hide();

 A função show() é usada para mostrar o elemento da página.

Antes:
document.getElementById(‘nomeTabela').style.display = 'inline';
Agora:
$('nomeTabela').show();

 A função visible() indica se o elemento da página está visível.

<div id='div1'>conteúdo div 1</div>
<div id='div2' style='display: none;'>conteúdo div 2</div>

$('div1').visible(); // -> true

$('div2').visible(); // -> false
Form.Element: clear(), present() e
serialize()
 A função clear(): limpa o conteúdo do elemento do formulário.
Antes: document.nomeForm.nomeCampo.value = '';
Agora: $('nomeCampo').clear();

 A função present() verifica se o text input tem conteúdo.

Antes:
if (document.nomeForm.nomeCampo == '')
Agora:
if (!$('nomeCampo').present())

 A função serialize() cria um representação URL-encoded do controle do formulário

no formato name=value.
Antes:
window.open('enviaServlet?nomeCampo=' +
document.nomeForm.nomeCampo.value)
Agora:
window.open('enviaServlet?' + $('nomeCampo').serialize())
Hash: get() e set()
 O Hash é como um array associativo (lista de pares chave/valor).

var messagesJs = new Hash();

messagesJs.set('montante_preencher‘, ‘Favor informar o montante.');
messagesJs.set('montante_invalido', ‘O montante informado é
inválido.');

alert(messagesJs.get('montante_preencher'))

alert(messagesJs.get('montante_invalido'))
Ajax: Asynchronous JavaScript + XML
 AJAX ou Asynchronous JavaScript and XML é um inovado caminho de
usar existentes tecnologias para tornar as páginas mais interativas com o
usuário.

 Ajax permite actualizar partes de uma página sem ter que fazer reload da
página inteira.

 Jesse James Garret do site “Adaptive Path” definiu AJAX como o seguinte:
“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.”

 O AJAX utiliza as seguintes tecnologias:

 Apresentação baseada em standards utilizando XHTML e CSS
 Interação e apresentação dinâmica utilizando o Documento Object
Model (DOM)
 Formato standard para troca e manipulação de dados - XML
 Comunicação assincrona com o servidor utilizando XMLHttpRequest
 Javascript como agregador de todas estas tecnologias
Modelo clássico vs modelo AJAX
Modelo clássico vs modelo AJAX
Ajax: Vantagens
 Maior interactividade nas aplicações
 Redução de largura de banda
 Redução de carga de processamento do servidor
 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.)
 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.)
Ajax: Desvantagens
 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)
 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.)
 Requer conectividade permanente
Ajax.Request
<input type=‘text‘ id=‘nome‘ name=‘nome'>

<div id='conteudo'>Isto é a mensagem inicial!</div>

<div id='loading' style='display: none;' >A fazer loading...</div>

<input type='button' value='Ir buscar novo conteudo 1' onclick='novoConteudo(1)'>

Outros callbacks:
 onSuccess
 onFailure
 onUninitialized
 onLoading
 onLoaded
 onInteractive
 onException
Ajax.Updater
<body>
<input type='text' id='nomeItem' name='nomeItem'>