Document Actions

Usando Ajax no Zope

Este artigo irá ensinar como utilizar Ajax em aplicações web

Introdução

Com o advento de novos conceitos como "Rich Clients", "Rich Portals", as aplicações web necessitaram de cada vez mais interatividade, suprindo uma dificuldade que se existia na web a tempos atrás.

A tecnologia Ajax faz parte da nova forma de escrever aplicações web: Aplicações Web Ricas. Esse tipo de aplicação trabalha igualmente como uma aplicação desktop convencional, porém com a interatividade da web e sua facilidades.

Este artigo irá ensinar como criar aplicações web utilizando o framework para uso ajax chamado Prototype. Prototype é um excelente framework que permite o uso do ajax de maneira muito facilitada.

Pré-Requisitos

Para começar o trabalho, é necessário que seja feito o download do Prototype.

Acesse:

http://prototype.conio.net/

E faça o download do arquivo js. Nesse artigo iremos utilizar a versão 1.4.0

http://prototype.conio.net/dist/prototype-1.4.0.js

Iniciando

Adicione a biblioteca do ajax dentro do zope:

Depois, adicione um page template com o nome de exemplo_ajax, com o seguinte conteúdo:

<html>

  <head>

    <title tal:content="template/title">The title</title>

    <script src="prototype.js" type="text/javascript"></script>

    <script>

    function pegaIdade()

    {               

        var idade = $F('idadeinput');

        var url = 'calcula_idade';

        var pars = 'idade=' + idade;
              
        var IdadeAjax = new Ajax.Updater({success: 'resultado'},                                                
                                          url, 
                                         
                                         {                                                  
                                          method: 'get',                                                  
                                          parameters: pars,                                                 
                                          onFailure: informaErro                                                
                                          });
     }

    function informaErro(request)
    {
        alert('Opa. Ocorreu um erro com o request!!!.');
    }

    </script>    

  </head>

  <body>   
    <h1>Este é um exemplo de AJAX</h1>
   <input type="text" name="idadeinput" id="idadeinput">
   <input type="button" value="Calcula idade" onclick="pegaIdade()">

   <div id="resultado"></div>

  </body>

</html>

Depois do page template adicionado, crie um script python chamado calcula_idade, com na sua lista de parâmetros, idade:

if int(idade) <= 17:
    return "vc eh menor de idade"
if int(idade) >= 18:
    return "vc eh maior de idade"

Feito isso, basta você rodar o Page template, colocar uma idade e ver o resultado na hora! :-)

Bem, é isso!

Em breve falarei mais sobre.

Fabio Rizzo
fabiorizzo@gmail.com

ps: os arquivos do tutorial estão em anexo :-)

Attachments

Arquivos do Tutorial

(ajax_no_zope.zexp - 49.62 Kb)

by Fabio Rizzo Matos — last modified 19/02/2006 17:04

fabiorizzo.com - PZP Rocks!!!

Sections

Personal tools

Document Actions

Usando Ajax no Zope

Introdução

Pré-Requisitos

Iniciando