prototype framework javascript

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 Ajax Array Class Date Element Element.Methods Element.Methods.Simulate

d Enumerable Event Form Form.Element Function

Hash Insertion Number Object ObjectRange PeriodicalExecuter Position Prototype String Template TimedObserver document document.viewport

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)'> <input type='button' value='Ir buscar novo conteudo 2' onclick='novoConteudo(2)'>

<script type='text/javascript'>function novoConteudo(tipo) { new Ajax.Request(‘/novoConteudoServlet', { method: ‘post', parameters: { p_tipo: tipo, p_nome: $F(nome) } onCreate: { function() {

$('conteudo').hide(); $('loading').show();

}, onComplete: mostrarResposta });}

</script>

Ajax.Request

function mostrarResposta(originalRequest) { $('loading').hide(); $('conteudo').show(); $('conteudo').innerHTML = originalRequest;}

Outros callbacks: onSuccess onFailure onUninitialized onLoading onLoaded onInteractive onException

Ajax.Updater

<body> <input type='text' id='nomeItem' name='nomeItem'> <div id='items'></div> <input type='button' value='Novo Item' onclick='novoItem()'></body>

<script type='text/javascript'>function novoItem() { new Ajax.Updater('items', '/novoItemServlet', { parameters: { nomeItem: $F('nomeItem') }, insertion: Insertion.Bottom });</script>

Referências

http://www.prototypejs.org/

http://www.sergiopereira.com/articles/prototype140.js.ptBR.html

http://pwp.net.ipl.pt/alunos.isel/24138/AJAX/IntroducaoAJAX.pdf